Manuel complet pour démarrer avec ActionScript


Télécharger Manuel complet pour démarrer avec ActionScript

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Introduction complet pour démarrer avec ActionScript

...

Afficher du texte en programmant

Lorsque nous devons afficher du texte par programmation, nous utilisons la classe flash.text.TextField. Nous allons pour démarrer, créer un simple champ texte et y ajouter du contenu.

La classe TextField s’instancie comme tout autre DisplayObject à l’aide du mot clé new :

var monTexte:TextField = new TextField(); monTexte.text = "Bonjour !";

Il est important de noter que grâce au nouveau mode d’instanciation des DisplayObject, il n’est plus nécessaire de disposer d’une instance de MovieClip afin de créer un champ texte.

Rappelez-vous, la méthode createTextField présente en ActionScript et 2 était définie sur la classe MovieClip. Il était donc impossible de créer un champ texte sans clip d’animation.

Une fois le champ texte crée nous pouvons l’afficher en l’ajoutant à la liste d’affichage :

var monTexte:TextField = new TextField(); monTexte.text = "Bonjour !"; addChild ( monTexte );

Si nous testons le code précédent nous obtenons le résultat illustré en figure 16-4 :

Figure 16-4. Contenu texte.

La propriété text de l’objet TextField nous permet d’affecter du contenu, nous allons découvrir très vite de nouvelles propriétés et méthodes liées à l’affectation de contenu.

Par défaut, la taille d’un champ texte crée par programmation est de 100 pixels en largeur et en hauteur :

var monTexte:TextField = new TextField(); monTexte.text = "Bonjour !"; addChild ( monTexte );

// affiche : 100 100

trace( monTexte.width, monTexte.height );

Afin de vérifier cela visuellement, nous pouvons activer la propriété border de l’objet TextField qui ajoute un contour en bordure du champ texte :

var monTexte:TextField = new TextField();

monTexte.border = true;

monTexte.text = "Bonjour !"; addChild ( monTexte );

La figure 16-5 illustre les dimensions d’un champ texte par défaut :

Figure 16-5. Dimensions par défaut du champ texte.

Si le contenu dépasse cette surface par défaut, le texte est tronqué. Dans le code suivant nous modifions le contenu du champ afin de le faire déborder :

var monTexte:TextField = new TextField();

monTexte.border = true;

monTexte.text = "Bonjour, voici du contenu qui déborde !"; addChild ( monTexte );

Le texte est alors tronqué comme l’illustre la figure 16-6 :

Figure 16-6. Texte tronqué.

Afin que le texte revienne à la ligne automatiquement nous activons la propriété wordWrap qui par défaut est définie à false :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.text = "Bonjour, voici du texte avec un retour à la ligne automatique !";

monTexte.wordWrap = true; addChild ( monTexte );

La figure 16-7 illustre le résultat :

Figure 16-7. Texte contraint avec retour à la ligne automatique.

A l’inverse si nous souhaitons que le champ s’adapte automatiquement au contenu, nous utilisons la propriété autoSize. En plus d’assurer un redimensionnement automatique, celle-ci permet de justifier le texte dans différentes positions.

La propriété autoSize prend comme valeur, une des quatre propriétés constantes de la classe TextFieldAutoSize :

  • TextFieldAutoSize.CENTER : le texte est justifié au centre ;
  • TextFieldAutoSize.LEFT
  • TextFieldAutoSize.NONE : le texte est justifié à gauche ; : aucune justification du texte ;
  • TextFieldAutoSize.RIGHT : le texte est justifié à droite ;

Dans le code suivant nous justifions le texte à gauche du champ :

var monTexte:TextField = new TextField();

monTexte.border = true;

monTexte.text = "Bonjour, voici du contenu qui ne déborde plus !";

monTexte.autoSize = TextFieldAutoSize.LEFT;

addChild ( monTexte );

La figure 16-8 illustre le résultat :

 Figure 16-8. Redimensionnement automatique du champ.

Cette fonctionnalité est couramment utilisée pour la mise en forme du texte au sein de paragraphes. Nous l’utiliserons lorsque nous développerons un éditeur de texte à la fin de ce chapitre.

Si nous souhaitons ajouter une contrainte de dimensions afin de contenir le texte au sein d’un bloc spécifique, nous pouvons affecter au champ une largeur et une hauteur spécifique. Un retour à la ligne automatique devra être ajouté, tout en s’assurant de ne pas spécifier de redimensionnement par la propriété autoSize.

Pour cela nous utilisons les propriétés width et height et wordWrap de l’objet TextField :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.text = "Le texte évolue dans un paragraphe d’une largeur et hauteur de 250 pixels maximum. Si le texte dépasse, un retour à la ligne est ajouté automatiquement.";

monTexte.width = 250; monTexte.height = 250;

monTexte.wordWrap = true; addChild ( monTexte );

Dans le code précédent, le texte est contraint à un paragraphe d’une largeur et hauteur de 250 pixels maximum.

La figure 16-9 illustre le bloc de texte :

Figure 16-9. Retour à la ligne automatique.

Si nous réduisons la largeur du champ texte, le texte est alors contraint d’évoluer dans cette surface :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.text = "Le texte évolue dans un paragraphe d’une largeur et hauteur de 120 pixels maximum. Si le texte dépasse, un saut de ligne est ajouté automatiquement.";

monTexte.width = 120; monTexte.height = 120;

monTexte.wordWrap = true; addChild ( monTexte );

La figure 16-10 illustre le résultat :

Figure 16-10. Champ texte restreint.

Quelles que soient les dimensions affectées au champ texte, si nous activons le redimensionnement automatique, le lecteur Flash affichera totalement le texte, quitte à étendre la hauteur du champ.

Dans le code suivant, nous réduisons les dimensions du champ texte :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.text = "Le texte évolue dans un paragraphe d’une largeur et hauteur de 120 pixels maximum. Si le texte dépasse, un saut de ligne est ajouté automatiquement.";

monTexte.width = 120; monTexte.height = 30;

monTexte.wordWrap = true; addChild ( monTexte );

La figure 16-11 illustre le rendu :

Figure 16-11. Texte tronqué.

Si nous ajoutons un ajustement automatique par la propriété autoSize, le lecteur Flash conserve une largeur maximale de 120 pixels mais augmente la hauteur du champ afin d’afficher le contenu total :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.text = "Le texte évolue dans un paragraphe d’une largeur et hauteur de 120 pixels maximum. Si le texte dépasse, un saut de ligne est ajouté automatiquement.";

monTexte.width = 120; monTexte.height = 30;

monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.wordWrap = true; addChild ( monTexte );

La figure 16-12 illustre le comportement :

Figure 16-12. Redimensionnement automatique.

Nous pouvons dynamiquement modifier les dimensions du champ afin de comprendre comment le lecteur ajuste le contenu du champ :

var monTexte:TextField = new TextField();

monTexte.border = true;

monTexte.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque at metus a magna bibendum semper. Suspendisse id mauris. Duis consequat dolor et odio. Integer euismod enim ut nulla. Sed quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer lobortis. In non erat. Sed ac dui a arcu ultrices aliquam. Aenean neque neque, vulputate ac, dictum eu, vestibulum ut, enim. Sed quis eros. Curabitur eu odio ac nisi suscipit venenatis. Duis ultrices viverra sapien. Fusce interdum, felis eget mollis varius, enim sem imperdiet leo, sed sagittis turpis odio sed quam. Phasellus ac orci. Morbi vestibulum, sem at cursus auctor, metus odio suscipit ipsum, ac sodales erat mi ac velit. Nullam tempus iaculis sem.";

monTexte.wordWrap = true;

addChild ( monTexte );

stage.addEventListener ( MouseEvent.MOUSE_MOVE, ajustement );

function ajustement ( pEvt:MouseEvent ):void

{

monTexte.width = pEvt.stageX; monTexte.height = pEvt.stageY;

pEvt.updateAfterEvent();

}

La figure 16-13 illustre le résultat :

Figure 16-13. Taille du paragraphe dynamique.

Nous utilisons la méthode updateAfterEvent afin de forcer le rafraîchissement du lecteur.

Lorsqu’un champ texte est créé, celui-ci est par défaut éditable permettant une sélection du texte. Si nous souhaitons rendre le champ non sélectionnable nous passons la propriété selectable à false



monTexte.selectable = false;

Nous allons nous intéresser au cours de la prochaine partie aux différents types de champs texte dynamiques existants.

 A retenir

  • Un champ texte créé par programmation possède une taille par défaut de 100 pixels en largeur et hauteur.
  • Les propriétés width et height d’un champ texte. permettent de définir la taille
  • La propriété wordWrap permet d’activer le retour à la ligne automatique.
  • Afin d’adapter le champ texte dynamique au contenu, nous utilisons la propriété autoSize et l’une des quatres constantes de la classe

TextFieldAutoSize

  • La propriété autoSize permet aussi de définir l’ajustement du texte au sein du champ.
  • Si un dimensionnement automatique a été spécifié et que le champ texte est trop petit, le lecteur Flash étend le champ dans le sens de la hauteur pour afficher la totalité du texte.

Les types de champ texte

Deux comportements existent pour les champs texte dynamiques. Il est possible par la propriété type de récupérer ou de modifier le comportement du champ.

Deux types de champs texte dynamiques sont définis par la classe

TextFieldType :

  • TextFieldType.DYNAMIC

: le champ texte et de type dynamique.

  • TextFieldType.INPUT : le champ texte est de type saisie.

Par défaut, un champ texte crée à partir de la classe TextField est considéré comme dynamic :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.text = "Voici du contenu qui ne déborde plus !"; monTexte.autoSize = TextFieldAutoSize.LEFT; addChild ( monTexte );

// affiche : dynamic trace( monTexte.type );

// affiche : true

trace( monTexte.type == TextFieldType.DYNAMIC );

Dans ce cas, celui ci peut être manipulé par programmation aussi bien au niveau de sa présentation qu’au niveau de son contenu.

Afin de créer un champ texte de saisie, nous modifions la propriété type et passons la chaîne TextFieldType.INPUT :

var monTexte:TextField = new TextField(); monTexte.border = true;

monTexte.type = TextFieldType.INPUT;

monTexte.text = "Voici du contenu qui ne débordre plus ! Dans un champ texte de saisie !";

monTexte.autoSize = TextFieldAutoSize.LEFT; addChild ( monTexte );

Le champ texte permet désormais la saisie du texte à la volée :

Figure 16-14. Champ texte auto-adapté.

Notons que dans le code précédent, nous ne pouvons sauter des lignes manuellement. Afin d’activer cette fonctionnalité, nous utilisons le mode multi-lignes à l’aide de la propriété multiline :

var monTexte:TextField = new TextField();

monTexte.border = true;

monTexte.multiline = true;

monTexte.type = TextFieldType.INPUT;

monTexte.text = "Bonjour, voici du contenu qui ne débordre plus !";

monTexte.autoSize = TextFieldAutoSize.LEFT;

addChild ( monTexte );

Dans la prochaine partie, nous allons nous intéresser aux différentes techniques permettant la modification du texte.

Formatage du texte

ActionScript 3 dispose de trois techniques assurant le formatage du texte, voici un récapitulatif de chacune d’entre elles :

  • Le texte HTML : de simples balises HTML peuvent être intégrées au contenu texte afin d’assurer son formatage.
  • La classe flash.text.TextFormat : à l’aide d’un objet

TextFormat , le texte peut être mis en forme aisément et rapidement.

  • La classe flash.text.StyleSheet : la classe StyleSheet permet la création d’une feuille de style CSS, idéale pour la mise en forme de contenu conséquent.

Dans la mesure où nous affectons du contenu, le formatage du texte ne concerne que les champs texte dynamique ou de saisie. Rappelez vous qu’il est impossible de modifier le contenu d’un champ StaticText ou TextSnapshot

Rendu HTML

Nous allons nous intéresser dans un premier temps à une première technique de formatage, par balises HTML, à l’aide de la propriété htmlText.

Consultez l’aide de Flash CS3 pour la liste des balises HTML gérées par le lecteur Flash.

Dans le code suivant, nous créons un simple champ texte :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.text = "Voici du texte !";

addChild ( monTexte );

Si nous accédons à la propriété text, le lecteur Flash renvoie la chaîne de caractères sans aucune information de formatage :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.text = "Voici du texte au format HTML"; addChild ( monTexte );

// affiche : Voici du texte au format HTML trace( monTexte.text );

A l’inverse, si nous accédons au contenu, par l’intermédiaire de la propriété htmlText, le lecteur renvoie le texte accompagné des différentes balises HTML utilisées en interne :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.text = "Voici du texte au format HTML"; addChild ( monTexte );

/* affiche :

<P ALIGN="LEFT"><FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">Voici du texte au format HTML</FONT></P> */

trace( monTexte.htmlText );

En modifiant le couleur du texte à l’aide de la propriété textColor, nous remarquons que l’attribut color de la balise <font> est automatiquement mis à jour :

var monTexte:TextField = new TextField(); monTexte.textColor = 0x990000;

monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.text = "Voici du texte au format HTML"; addChild ( monTexte );

/* affiche :

<P ALIGN="LEFT"><FONT FACE="Times New Roman" SIZE="12" COLOR="#990000" LETTERSPACING="0" KERNING="0">Voici du texte au format HTML</FONT></P> */

trace( monTexte.htmlText );

Nous affectons ainsi du contenu HTML de manière indirecte, par l’intermédiaire des différentes propriétés de la classe TextField.

En utilisant la propriété htmlText, les balises sont automatiquement interprétées :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT;

monTexte.htmlText = "Voici du texte au format <b>HTML</b>";

addChild ( monTexte );

La figure 16-15 illustre le rendu :

Figure 16-15. Champ texte HTML formaté.

Notons que la propriété html de la classe TextField n’existe plus en ActionScript 3. L’affectation du texte par la propriété htmlText active automatiquement l’interprétation des balises HTML.

Nous pouvons changer la couleur du texte en utilisant l’attribut color de la balise <font> :

monTexte.htmlText = "Voici du texte <font color='#FF0000'>rouge</font> au format <b>HTML</b>";

L’affectation de contenu HTML s’avère extrêmement pratique dans la mesure où le contenu texte possède au préalable toutes les balises liées à sa présentation. En revanche, une fois le contenu affecté, il s’avère difficile de modifier la mise en forme du texte à l’aide des balises HTML. Pour cela, nous préférerons généralement l’utilisation d’un objet TextFormat.

La classe TextFormat

L’objet TextFormat a été conçu pour représenter la mise en forme du texte. Celui-ci doit être considéré comme un outil de formatage.

En réalité, l’objet TextFormat génère automatiquement les balises HTML appropriées afin de styliser le texte. La classe TextFormat bénéficie ainsi d’un grand nombre de propriétés permettant une mise en forme du texte avancée.

Consultez l’aide de Flash CS3 pour la liste des propriétés liées à la mise en forme définie par la classe TextFormat.

La première étape consiste à créer l’objet TextFormat, puis de définir les propriétés de mise en forme :

var monTexte:TextField = new TextField();

monTexte.autoSize = TextFieldAutoSize.LEFT;

monTexte.text = "Voici du texte mis en forme"; addChild ( monTexte );

// création de l'objet TextFormat ( mise en forme )

var miseEnForme:TextFormat = new TextFormat();

// activation du style gras miseEnForme.bold = true;

// modification de la taille du texte miseEnForme.size = 14;

// modification de la police miseEnForme.font = "Verdana";

Afin d’appliquer cette mise en forme, nous devons à present appeler la

la méthode setTextFormat de la classe TextField signature : dont voici la public function setTextFormat(format: TextFormat, beginIndex:int = -1,

endIndex:int = -1):void

Analysons chacun des paramètres :



  • format : l’objet TextFormat déterminant la mise en forme du texte.
  • beginIndex : la position du caractère de départ auquel appliquer la mise en forme, la valeur par défaut est -1.
  • endIndex : la position du caractère de fin auquel appliquer la mise en forme, la valeur par défaut est -1.

Dans le code suivant, nous appliquons la mise en forme à la totalité du champ texte :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.text = "Voici du texte mis en forme"; addChild ( monTexte );

// création de l'objet TextFormat ( mise en forme ) var miseEnForme:TextFormat = new TextFormat();

// activation du style gras miseEnForme.bold = true;

// modification de la taille du texte miseEnForme.size = 14;

// modification de la police miseEnForme.font = "Verdana";

// application de la mise en forme monTexte.setTextFormat( miseEnForme );

La figure 16-16 illustre le résultat :

Figure 16-16. Mise en forme du texte par l’objet TextFormat.

En spécifiant les positions des caractères de début et fin, nous pouvons affecter le style à une partie du texte seulement :

// application de la mise en forme à une partie du texte monTexte.setTextFormat( miseEnForme, 22, 27);

Comme l’illustre la figure 16-17, seul le mot forme est affecté :

 Figure 16-17. Mise en forme partielle du texte.

En interne, l’affectation de la mise en forme genère les balises HTML appropriées :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; monTexte.text = "Voici du texte mis en forme"; addChild ( monTexte );

// création de l'objet TextFormat ( mise en forme ) var miseEnForme:TextFormat = new TextFormat();

// activation du style gras miseEnForme.bold = true;

// modification de la taille du texte miseEnForme.size = 14;

// modification de la police miseEnForme.font = "Verdana";

/* affiche :

<P ALIGN="LEFT"><FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">Voici du texte au format HTML</FONT></P> */

trace( monTexte.htmlText );

// application de la mise en forme

monTexte.setTextFormat( miseEnForme, 22, 27 );

/* affiche :

<P ALIGN="LEFT"><FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">Voici du texte au format <FONT FACE="Verdana" SIZE="14"><B>HTML</B></FONT></FONT></P>

*/

trace( monTexte.htmlText );

Il est important de noter que lors de l’affectation de contenu par la propriété text ou htmlText, le lecteur crée automatiquement en interne un objet TextFormat associé.

Il convient donc d’appeler la méthode

setTextFormat après l’affectation du contenu, au risque de voir la mise en forme préalablement appliquée écrasée. En revanche, une fois la méthode setTextFormat appelée, tout ajout de texte par la méthode appendText conserve la mise en forme en cours.

Dans le code suivant, le texte est affecté après l’application de la mise en forme, celle-ci est donc écrasée :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; addChild ( monTexte );

// création de l'objet TextFormat ( mise en forme ) var miseEnForme:TextFormat = new TextFormat();

// activation du style gras miseEnForme.bold = true;

// modification de la taille du texte miseEnForme.size = 14;

// modification de la police miseEnForme.font = "Verdana";

// application de la mise en forme monTexte.setTextFormat( miseEnForme );

// le contenu est affecté après l'application de la mise en forme monTexte.text = "Voici du texte mis en forme";

La figure 16-18 illustre le résultat :

Figure 16-18. Mise en forme du texte inchangée.

Notons que si nous utilisons la méthode appendText après l’application de la mise en forme, celle-ci est conservée. En revanche, si le contenu est remplaçé, la mise en forme est perdue. ActionScript 3 intègre une nouvelle propriété defaultTextFormat permettant de remédier à cela en définissant un style par défaut :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; addChild ( monTexte );

// création de l'objet TextFormat ( mise en forme ) var miseEnForme:TextFormat = new TextFormat();

// activation du style gras miseEnForme.bold = true;

// modification de la taille du texte miseEnForme.size = 14;

// modification de la police miseEnForme.font = "Verdana";

// application d'une mise en forme par défaut monTexte.defaultTextFormat = miseEnForme;

// tout contenu affecté prend la mise en forme par défaut monTexte.text = "Voici du texte mis en forme";

Tout texte ajouté par la suite prendra automatiquement la mise en forme définie par l’objet miseEnForme.

Si nous souhaitons modifier le style par défaut, nous pouvons affecter à l’aide de la méthode setTextFormat une mise en forme spécifique à l’aide d’un autre objet TextFormat :

var monTexte:TextField = new TextField(); monTexte.autoSize = TextFieldAutoSize.LEFT; addChild ( monTexte );

// création de l'objet TextFormat ( mise en forme ) var miseEnForme:TextFormat = new TextFormat();

// activation du style gras miseEnForme.bold = true;

// modification de la taille du texte miseEnForme.size = 14;

// modification de la police miseEnForme.font = "Verdana";

// application d'une mise en forme par défaut monTexte.defaultTextFormat = miseEnForme;

// tout contenu affecté prend la mise en forme par défaut monTexte.text = "Voici du texte mis en forme";

// création de l'objet TextFormat ( mise en forme ) var autreMiseEnForme:TextFormat = new TextFormat();

// modification de la police autreMiseEnForme.font = "Arial";

// modification de la taille autreMiseEnForme.size = 18;

// affectation partielle de la nouvelle mise en forme monTexte.setTextFormat( autreMiseEnForme, 22, 27 );

La figure 16-19 illustre le résultat :

Figure 16-19. Mise en forme du texte partielle.

La classe TextField définit une autre méthode très pratique en matière de mise en forme du texte nommée getTextFormat dont voici la signature :

public function getTextFormat(beginIndex: int = -1, endIndex:int = -

1):TextFormat

Analysons chacun des paramètres :

  • beginIndex : position du caractère de début à partir duquel la mise en forme doit être extraite, la valeur par est défaut -1.
  • endIndex : position du caractère de fin à partir duquel la mise en forme doit être extraite, la valeur par défaut est -1.

Cette dernière renvoie un objet TextFormat associé à la partie du texte spécifiée. Si aucun paramètre n’est spécifié, l’objet TextFormat renvoyé concerne la totalité du champ texte.

Comme nous l’avons vu précédemment, lorsque du contenu est affecté à un champ texte, le lecteur Flash crée un objet TextFormat interne contenant les options de mise en forme du texte.

Dans le code suivant, nous récupérons les informations de mise en forme du champ monTexte :

var monTexte:TextField = new TextField(); monTexte.text = "Voici du texte !";

monTexte.autoSize = TextFieldAutoSize.LEFT; addChild ( monTexte );

// extraction de l'objet TextFormat

var miseEnForme:TextFormat = monTexte.getTextFormat();

// affiche : Times New Roman trace( miseEnForme.font );

// affiche : 12

trace( miseEnForme.size );

// affiche : left

trace( miseEnForme.align );

// affiche : 0

trace( miseEnForme.color );

// affiche : false

trace( miseEnForme.bold );

// affiche : false

trace( miseEnForme.italic );

// affiche : false

trace( miseEnForme.underline );



278