Sujets sur : flash texte dynamique as3 font importée
Cours ActionScript 3 ‘flash texte dynamique as3 font importée’
Comment utiliser du texte dynamique en AS3 avec TextField ?
Pour travailler avec du texte dans Flash, il est nécessaire d‘utiliser une multitude de classes différentes !
En effet, les classes ( TextFieldAutoSize, TextFieldAlign, TextFieldType, TextFormat, Font, TextField etc… sont utiles pour définir la mise en forme d’un champ texte.
Dans ce tutoriel, nous allons créer le Composant AS3 TextField pour simplifier la manipulation d’un champ texte.
Ce composant étendra tout simplement la classe de base TextField et ajoutera des fonctionnalités très intéressantes !
I – Cahier Des Charges Fonctionnel du TextField
Comme d’habitude, nous passons à la rédaction du CDCF (Cahier Des Charges Fonctionnel).
La liste des fonctionnalités pour un champ de type UITextField est déjà disponible de manière native en ActionScript.
La seule chose qui change, c’est la façon de les implémenter.
Nous passons donc directement à la création du Cahier Des Charges Techniques.
II – Cahier Des Charges Techniques du TextField
Pour cela, nous allons créer la classe UITextField. Nous lui ajoutons des méthodes supplémentaires. Celles-ci nous permettront de formater le texte sans passer par la classe TextFormat ni les autres classes annexes.
Voici l’ensemble des méthodes de la classe UITextField :
- Méthode changeFormat : elle permet de définir le formatage du texte ou d’un groupe de caractères à l’aide d’une seule et unique méthode.
- Méthode changeLetterFormat : cette méthode permet de définir le format d’une seule lettre.
- Méthode getLetterFormat : elle permet de récupérer le format d’une seule lettre.
- Getter/ Setter appelé font : pour changer et récupérer la police de caractère. L’embarquement des polices sera géré automatiquement par le setter qui déterminera si la police est une police système ou non.
- Méthode convertToInput : pour convertir le texte en champ de saisie.
- Méthode convertToDynamic : pour convertir le texte en champ dynamique.
- Nous implémentons également des méthodes pour changer l’alignement et le redimensionnement automatique du texte : alignCenter, alignRight, alignLeft, alignJustify, autoSizeRight, autoSizeLeft, autoSizeCenter, autoSizeNone. Des méthodes qui nous simplifient l’utilisation des classes TextFieldAutoSize et TextFieldAlign.
- Getters / Setters maxWidth et maxHeight : permettent de définir une largeur et une hauteur maximale.
- Méthode destroy : et enfin nous implémentons une méthode qui permet de détruire proprement notre composant. Elle ressemble de très près à la méthode destroy de la classe UIComponent.
Conclusion
Nous disposons maintenant d’un champ texte avec une mise à jour de son formatage grandement facilitée.
A l’utilisation, le composant UITextField se révèle être une véritable bénédiction pour manipuler un champ texte.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/textfield_exemple.swf |
Évolutions des fonctionnalités
Pour améliorer notre Composant AS3 TextField, vous trouverez ci-dessous un exemple d’utilisation.
A vous de jouer !
TextField avec des fonts dynamiques
Je vous propose d’utiliser des fonts (polices) dynamiques pour vos textes.
Amusez-vous en utilisant des polices originales : découvrez un vaste choix de polices gratuites sur dafont. Elles ne sont généralement pas disponibles dans les polices de bases des systèmes d’exploitations (Windows, Linux, MAC). Il est donc nécessaire de les charger dans le Flash Player.
La lecture de cet article : Utiliser des polices partagées dynamiquement en AS3, devrait grandement vous faciliter la tâche!
L’Editeur ActionScript FDT 4.0 simplifie énormément la création des swf de polices partagées : Téléchargez le guide d’utilisation de l’Editeur ActionScript FDT.
Sources commentées
- com.actionscriptfacile.ui.text.UITextField.as
- UITextFieldExample.as
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.
Vous pouvez télécharger le fichier zip : Télécharger “Component TextField Framework actionscript-facile” component_textfield_framework_actionscript-facile.zip – Téléchargé 1454 fois – 74,15 Ko
Et vous, comment utilisez-vous le texte / TextField en AS3 ?
Quelles classes avez-vous développé pour simplifier la création des champs textes dynamiques avec Flash ?
Je serais ravis de voir vos différentes implémentations. Utilisez les commentaires juste en dessous pour partager votre code.
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.text.UITextField.as » bookmarkname= »com.actionscriptfacile.ui.text.UITextField.as « ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 | package com.actionscriptfacile.ui.text { import flash.text.Font; import flash.text.FontType; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; import flash.text.TextFormatAlign; import flash.utils.Dictionary; import flash.utils.getDefinitionByName; /** * La classe UITextField est une extension de la classe flash.text.TextField de base. * Elle inclut quelques fonctionnalités qui permettent de gérer plus facilement la mise * en forme d'un champ texte. * * @author Matthieu */ public class UITextField extends TextField { protected static var m_allowedFonts:Dictionary; // Une liste des différentes polices de caractères autorisées. protected var m_currentFont:String; // Le nom de la police de caractère utilisée actuellement protected var m_maxWidth:Number; // la largeur maximale du champ texte protected var m_maxHeight:Number; // la hauteur maximale du champ texte public function UITextField() { super(); /* * on crée une méthode init pour gagner des ressources, * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est * pas optimisé à la compilation, * on met donc toutes nos instructions dans une méthode privée init * */ init(); } /** * Initialise proprement les différents éléments du composant * */ private function init():void { // si le tableau de fonts n'est pas encore initialisé alors ... if ( m_allowedFonts == null ) { m_allowedFonts = new Dictionary(); // on le crée var fonts:Array = Font.enumerateFonts( true ); // on récupère toutes les polices utilisables var max:int = fonts.length - 1; /** * On boucle sur toutes les polices et on les ajoute à la liste des typos autorisées */ for ( ; max > -1; max-- ) { m_allowedFonts[Font( fonts[max] ).fontName ] = fonts[max]; } // on définit une police par défaut m_currentFont = Font( fonts[ 0 ] ).fontName; } // puis on définit une hauteur et une largeur maximale théorique. m_maxHeight = m_maxWidth = 500; } /** * Cette fonction sert à changer le format d'un caractère * * @param p_letterIndex Index du caractère dont on veut changer le formatage * @param p_propertyName La nom de la propriété de formatage que l'on veut changer * @param p_value La valeur de la propriété de formatage */ public function changeLetterFormat( p_letterIndex:int, p_propertyName:String, p_value:* ):void { changeFormat( p_propertyName, p_value, p_letterIndex, p_letterIndex + 1, false ); } /** * Cette fonction sert à récupérer le format d'un caractère * * @param p_letterIndex Index du caractère dont on veut récupérer le formatage * @return Un objet de type TextFormat */ public function getLetterFormat( p_letterIndex:int ):TextFormat { return getTextFormat( p_letterIndex, p_letterIndex ); } /** * Cette méthode permet un accès direct aux propriétés de l'objet TextFormat du TextField. * Elle a pour but de simplifier la mise à jour graphique d'un champ texte par le biais * d'un appel à une seule méthode. * http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/text/TextFormat.html * * @param p_propertyName nom de la propriété à changer @see flash.text.TextFormat * @param p_value valeur de la propriété * @param p_startIndex index de départ à partir duquel les changements opéreront dans le texte. * @param p_endIndex index de fin. */ public function changeFormat( p_propertyName:String, p_value:*, p_startIndex:int = -1, p_endIndex:int = -1, p_isDefault:Boolean = false ):void { // si la longueur du champ texte est inférieur à l'index maximal des caractères demandés alors on arrête tout if ( text.length < p_endIndex ) return; // on récupère le format des caractères compris entre p_startIndex et p_endIndex var format:TextFormat = getTextFormat( p_startIndex, p_endIndex ); // si le textformat possède la propriété p_propertyName if ( format.hasOwnProperty( p_propertyName ) ) { // alors on définit la nouvelle valeur de la propriété en question format[ p_propertyName ] = p_value; } // si on a définit le paramètre p_isDefault à true if ( p_isDefault ) { // alors le format devient le format par défaut defaultTextFormat = format; } // enfin, on applique le format au champ texte pour les caractères spécifiés. setTextFormat( format, p_startIndex, p_endIndex ); } /** * Convertir le champ texte en champ de saisie */ public function convertToInput():void { type = TextFieldType.INPUT; } /** * Convertir le champ texte en champ dynamique */ public function convertToDynamic():void { type = TextFieldType.DYNAMIC; } /** * Aligne le champ texte par le centre */ public function alignCenter():void { changeFormat( 'align', TextFormatAlign.CENTER ); } /** * Aligne le champ texte en mode justifié */ public function alignJustify():void { changeFormat( 'align', TextFormatAlign.JUSTIFY ); } /** * Aligne le champ texte par la gauche */ public function alignLeft():void { changeFormat( 'align', TextFormatAlign.LEFT ); } /** * Aligne le champ texte par la droite */ public function alignRight():void { changeFormat( 'align', TextFormatAlign.RIGHT ); } /** * Redimensionne automatiquement le champ texte par le centre */ public function autoSizeLeft():void { autoSize = TextFieldAutoSize.LEFT; }; /** * Précise que le champ texte ne doit plus se redimensionner automatiquement */ public function autoSizeNone():void { autoSize = TextFieldAutoSize.NONE; }; /** * Redimensionne automatiquement le champ texte par la droite */ public function autoSizeRight():void { autoSize = TextFieldAutoSize.RIGHT; }; /** * Redimensionne automatiquement le champ texte par la gauche */ public function autoSizeCenter():void { autoSize = TextFieldAutoSize.CENTER; }; /** * Définit la nouvelle police de caractère utilisée pour ce champ texte. * Si la police ne fait pas partie des polices autorisées, le système va tenter * de la retrouver. En cas d'échec la police ne sera pas changée, dans le cas contraire * la nouvelle police sera utilisée et ajoutée à la liste des polices autorisées. */ public function set font( p_font:String ):void { var fontDefinition:Class; if ( m_allowedFonts[p_font] == null || // si la police n'est pas autorisée alors ... Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE // ou qu'il ne s'agit pas d'une typo système ) { try { // on tente de récupérer sa définition fontDefinition = getDefinitionByName( p_font ) as Class; // on l'enregistre auprès du flash player Font.registerFont( fontDefinition ); // et on l'ajoute à la liste des typos autorisées m_allowedFonts[ p_font ] = new fontDefinition() as Font; } catch ( e:Error ) { // dans le cas ou l'on n'est pas arrivé à récupérer la définition de la classe on arrête tout return; } } // si il s'agit d'une police du système alors emebedFonts = false sinon embedFonts = true embedFonts = ( Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE ); // on redéfinit la font utilisée m_currentFont = p_font; // et on applique la nouvelle police de caractère au format changeFormat( 'font', p_font ); } /** * Récupère le nom de la police utilisée pour ce champ texte */ public function get font():String { return m_currentFont; } /** * Récupère / définit la valeur de la largeur maximale autorisée pour ce champ texte */ public function get maxWidth():Number { return m_maxWidth; } public function set maxWidth(value:Number):void { m_maxWidth = value; } /** * Récupère / définit la valeur de la hauteur maximale autorisée pour ce champ texte */ public function get maxHeight():Number { return m_maxHeight; } public function set maxHeight(value:Number):void { m_maxHeight = value; } /** * Définit la largeur / hauteur du champ texte */ override public function set width( p_width:Number ):void { super.width = ( p_width > m_maxWidth ) ? m_maxWidth : p_width; } override public function set height( p_height:Number ):void { super.height = ( p_height > m_maxHeight ) ? m_maxHeight : p_height; } /** * Détruit proprement un composant de type UITextField */ public function destroy():void { // la police de caractère est passée à null. m_currentFont = null; // on enlève le composant de la displayList de son parent if ( parent && parent.contains( this ) ) { parent.removeChild( this ); } delete this; } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »UITextFieldExample.as » bookmarkname= »UITextFieldExample.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | package { import com.actionscriptfacile.ui.combo.element.ComboBoxElement; import com.actionscriptfacile.ui.combo.ComboBox; import com.actionscriptfacile.ui.text.UITextField; import com.as3facileexemple.skin.classic.DefaultComboBoxSkin; import flash.display.Sprite; import flash.events.Event; import flash.text.Font; /** * Exemple d'utilisation du composant UITextField * * @author Matthieu */ public class UITextFieldExample extends Sprite { protected var m_comboFonts:ComboBox; protected var m_textField:UITextField; public function UITextFieldExample() { /** * On construit la combobox */ m_comboFonts = new ComboBox(); m_comboFonts.applySkin( new DefaultComboBoxSkin() ); // on écoute les changements qui interviennent dans la combobox m_comboFonts.addEventListener(Event.CHANGE, changeHandler ); m_comboFonts.resize( 300, 100 ); m_comboFonts.componentsHeight = 25; // on ajoute tous les noms de polices autorisées comme élément de la combobox var fonts:Array = Font.enumerateFonts( true ); var boxElement:ComboBoxElement; for each ( var font:Font in fonts ) { boxElement = m_comboFonts.addElement( font.fontName, font.fontName ); boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte } /** * On construit un UITextField */ m_textField = new UITextField(); m_textField.text = 'Enjoy :)'; m_textField.x = m_textField.y = 5; m_textField.width = m_textField.maxWidth = 300; m_textField.height = m_textField.maxHeight = 30; m_comboFonts.y = m_textField.y + m_textField.height + 20; m_comboFonts.x = 5; addChild( m_comboFonts ); addChild( m_textField ); } /** * Fonction servant à écouter le changement de police au sein de la combobox. * On applique la police à l'UITextField que l'on a crée et placé sur la * scène. * * @param e Evenement de type Event.CHANGE */ private function changeHandler(e:Event):void { m_textField.font = m_comboFonts.currentLabel; } } } |
[/codesyntax]
Développement Facile