Formatage du texte

Par
tannoy
– 24 mars 2008Publié dans : Les textes

Formater un texte en ActionScript 3 (AS3).

Après avoir étudier la création d'un champ de texte dynamique, nous allons maintenant utiliser la classe TextFormat afin de mettre en forme du texte.

Cette classe va vous permettre de définir différentes propriétés de formatage :

  • La police
  • La taille des caractères
  • La couleur
  • L'alignement
  • La graisse
  • L'italique
  • L'espacement des lettres
  • Les marges à gauche et à droite
  • L'interlignage
  • La création d'un lien
  • Le soulignement

La mise en forme classique : police, taille et couleurs

Création du formatage

On utilise le constructeur de la classe TextFormat pour créer l'objet de formatage.

COPIER-COLLER
Actionscript:
  1. var formatSimple:TextFormat = new TextFormat();

Les propriétés font, size et color vont nous permettre de définir la police, la taille en pixels et la couleur des caractères.

COPIER-COLLER
Actionscript:
  1. formatSimple.font = "Calibri";
  2. formatSimple.size = 12;
  3. formatSimple.color = 0x666666;

Formatage du champ de texte

La propriété defaultTextFormat de la classe TextField permet d'indiquer quel sera le formatage par défaut d'un champ de texte. Cette propriété doit être définie avant d'affecter un contenu au champ texte avec la propriété text. Si l'on modifie par la suite le contenu du champ de texte, le formatage est conservé.

COPIER-COLLER
Actionscript:
  1. var zoneTexte:TextField = new TextField();
  2. zoneTexte.multiline = true;
  3. zoneTexte.wordWrap = true;
  4. zoneTexte.width = 400;
  5. zoneTexte.defaultTextFormat = formatSimple;
  6. zoneTexte.text = "La géométrie peut être une matière difficile à retenir mais quelques connaissances peuvent être un instrument très utile pour utiliser ActionScript.";
  7. addChild(zoneTexte);

La mise en forme des blocs : marges, alignement et interlignage

Les propriétés leftMargin, rightMargin, align et leading vont nous permettre de gérer les marges gauche et droite, l'alignement et l'interlignage. Afin d'éviter toutes erreurs de saisie, on utilisera les constantes de la classe TextFormatAlign (TextFormatAlign.CENTER, TextFormatAlign.JUSTIFY...) comme valeur de la propriété align.

COPIER-COLLER
Actionscript:
  1. var formatTitre:TextFormat = new TextFormat();
  2. formatTitre.font = "Eras Bold ITC";
  3. formatTitre.size = 25;
  4. formatTitre.color = 0x2B6DA4;
  5. formatTitre.align = TextFormatAlign.CENTER;
  6.  
  7. var titre:TextField = new TextField();
  8. titre.width = 500;
  9. titre.defaultTextFormat = formatTitre;
  10. titre.text = "ActionScript 3";
  11. titre.y = zoneTexte.textHeight + 50;
  12. addChild(titre);
  13.  
  14. var formatCadre:TextFormat = new TextFormat();
  15. formatCadre.font = "Calibri";
  16. formatCadre.size = 12;
  17. formatCadre.color = 0x666666;
  18. formatCadre.leftMargin = 50;
  19. formatCadre.rightMargin = 10;
  20. formatCadre.leading = 10;
  21.  
  22. var zoneTexteCadre:TextField = new TextField();
  23. zoneTexteCadre.multiline = true;
  24. zoneTexteCadre.wordWrap = true;
  25. zoneTexteCadre.width = 400;
  26. zoneTexteCadre.y = titre.y + titre.textHeight + 20;
  27. zoneTexteCadre.border = true;
  28. zoneTexteCadre.borderColor = 0x2B6DA4;
  29. zoneTexteCadre.defaultTextFormat = formatCadre;
  30. zoneTexteCadre.text = "La géométrie peut être une matière difficile à retenir mais quelques connaissances peuvent être un instrument très utile pour utiliser ActionScript.";
  31. addChild(zoneTexteCadre);

La création d'un lien

Les propriétés url et underline vont nous permettre de créer un lien et de le souligner. Nous utiliserons la méthode setTextFormat() de la classe TextField pour appliquer le lien non pas sur le bloc de texte en entier mais sur un ou plusieurs mots. En effet, cette méthode accepte 2 paramètres facultatifs correspondant à l'index du 1er caractère à mettre en forme et à l'index + 1 du dernier caractère à mettre en forme.

COPIER-COLLER
Actionscript:
  1. var formatCadre:TextFormat = new TextFormat();
  2. formatCadre.font = "Calibri";
  3. formatCadre.size = 12;
  4. formatCadre.color = 0x666666;
  5. formatCadre.leftMargin = 50;
  6. formatCadre.rightMargin = 10;
  7. formatCadre.leading = 10;
  8.  
  9. var formatLien:TextFormat = new TextFormat();
  10. formatLien.color = 0x0000FF;
  11. formatLien.url = "http://fr.wikipedia.org/wiki/Geometrie";
  12. formatLien.underline = true;
  13.  
  14. var zoneTexteCadre:TextField = new TextField();
  15. zoneTexteCadre.multiline = true;
  16. zoneTexteCadre.wordWrap = true;
  17. zoneTexteCadre.width = 400;
  18. zoneTexteCadre.y = titre.y + titre.textHeight + 20;
  19. zoneTexteCadre.border = true;
  20. zoneTexteCadre.borderColor = 0x2B6DA4;
  21. zoneTexteCadre.defaultTextFormat = formatCadre;
  22. zoneTexteCadre.text = "La géométrie peut être une matière difficile à retenir mais quelques connaissances peuvent être un instrument très utile pour utiliser ActionScript.";
  23. zoneTexteCadre.setTextFormat(formatLien, 3, 12);// le format lien est appliqué sur le mot qui commence à l'index 3 et se termine à l'index 11 soir le mot géométrie
  24. addChild(zoneTexteCadre);

 Le script complet

Téléchargez le script complet : Formatage du texte