Gestion des champs de texte et des Polices

Ajouter des textes sur une animation flash est très simple à partir des outils de dessin de l'interface utilisateur Flash, on peux aller beaucoup plus loin afin de manipuler ces textes, modifier leur contenu, leur style, leur police etc.

La classe sous-jacente aux champs de texte que l'on ajoute aux textes dans Flash est TextField. C'est dans cette classe Textfield que seront définis tous les attributs et les fonctions auxquelles l'on aura accès. Tous les champs texte de saisie et dynamique dans un fichier SWF sont des occurrences de la classe TextField et donc de type Textfield : pour instancier une occurrence de TextField :

var txt:TextField = new TextField();

Ajout d'un champs de texte sur une animation

Sélectionnez l'outil texte dans la palette d'outil puis tracer un champ de texte sur la scène :

Sélectionnez ensuite votre TextField, puis regardez le panneau propriétés, ajoutez un nom d'occurrence afin que nous puissions le manipuler en actionscript. Vous avez ensuite la possibilité de choisir entre Texte Statique, Texte dynamique et Saisie de texte : les 2 derniers sont manipulables en Actionscript, à la différence du premier qui n'est qu'un outil de dessin :

Le nom d'occurrence choisi pour cet exemple est txt.

Manipulation en actionscript

Une fois placé le nom d'occurrence, vous avez la possibilité de manipuler le champs de texte en programmation, en lui ajoutant du texte par exemple avec l'attribut text de la classe TextField :

this.txt.text = "Hello World !";

Les TextField permettent également d'y placer du HTML (ne pensez pas y placer des mises en forme trop complexes et oubliez un instant les règles W3 :) ) :

this.txt2.htmlText = "<font color='#FF0000'>Hello world !</font>";

Vous pouvez également placer des images dans les TextField :

this.txt3.htmlText = "<font color='#FFCC00'>Une belle ampoule : </font> <img src='image.png'>";

Attention avec les images, on constate souvent des défauts d'affichage avec les images et les TextField.

Téléchargement du fichier de travail

Ajout dynamique de TextField

Notez que l'on pourrait tout aussi bien créer dynamiquement l'objet TextField en AS3 :

var txt:TextField = new TextField();
txt.x = 10;
txt.y = 10;
txt.width = 500;
txt.height = 400;

this.addChild(txt);

txt.text = "hello world !";

Téléchargement du fichier de travail

Les Polices

L'un des nombreux avantages de flash, c'est que l'on est pas contraint à n'utiliser que quelques Polices : on peut intégrer de nombreuses polices dans les champs de texte voire dans l'animation.

Intégration d'une police dans un TextField

On intègre facilement une police de caractère dans un champs de texte : dans le panneau propriétés du TextField, sélectionnez la police de caractère exotique que vous souhaitez (Famille), puis cliquez sur le bouton intégration de caractères :

Une fenêtre vous propose alors de sélectionnez les caractères à intégrer, il est alors judicieux de ne pas sélectionner tous, mais uniquement les caractères utiles à ce champ texte : généralement pour un texte classique, on sélectionne Majuscules, Minuscules, Chiffres, Ponctuation, Latin Basique, Latin I, Latin étendu A, Latin étendu B et Latin étendu supplémentaire ce qui est largement suffisant pour la plupart des utilisations.

Ajout d'une police dans la bibliothèque

Il est possible d'ajouter une police dans la bibliothèque, cliquez droit dans la bibliothèque puis sélectionnez nouvelle Police :

Sélectionnez ensuite un nom pour cette police, puis exportez la pour actionscript de la même manière que pour les symboles.

Intégration dynamique d'une police dans un TextField

La classe TextFormat représente les informations de mise en forme de caractères. On peut créer des format (TextFormat) et les affecter à un TextField, c'est dans ce format que nous allons affecter la police.

var _format:TextFormat = new TextFormat();
_format.font="Hobo Std"; //correspond à l'intitulé de la Police (champs Police sur la dernière figure)
_format.size=50; // taille de la police

//création d'un objet TextField
var txt2 = new TextField();
//positionnement
txt2.x = 34;
txt2.y = 106;
//ajout du texte
txt2.htmlText = "<font color='#FF0000'>Hello world !</font>";
//signale qu'une police incorporée est utilisée
txt2.embedFonts = true;
//Adaptation de la grille
txt2.gridFitType = GridFitType.PIXEL;
// AJout de l'anti-alias
txt2.antiAliasType=AntiAliasType.ADVANCED;
//Règlage dimensionnement et l'alignement automatiques des champs texte
txt2.autoSize = TextFieldAutoSize.LEFT;
//Affectation du format
txt2.setTextFormat(_format);

Nous avons ainsi crée un TextField dynamiquement et l'avons formaté en y incluant la police de caractère.

Téléchargement du fichier de travail