Comment utiliser une police incorporée dans Flash en AS3 avec de l'html et du gras
6 10 2008For english readers : How to embed a font in Flash and use it in Actionscript 3 with html, bold, italic, etc...
Fallait que je fasse un billet sur ça, parce que depuis le temps que je m'énerve a retrouver comment faire à chaque fois. C'est jamais vraiment clair avec Flash et les polices incorporées...
En gros, vous avez du texte html qui contient du gras, du pas gras, de l'italic, et vous voulez mettre ce texte dans un textfield (crée en code ou non), en utilisant une police incorporée (embed) afin d'appliquer des effets ou juste pour que s'affiche chez tout le monde pareil.
Je vais utiliser une classe externe pour créer le champ texte, mais vous pouvez très bien utiliser la même méthode sans classe, mais étant donné que la classe externe est le plus compliqué, je préférai faire mon exemple avec ça.
D'abord, vous créez un un fichier flash en AS3. Dans la bibliothèque, vous ajoutez votre police en cliquant sur la flèche dans le coin en haut à droite de votre bibliothèque, et vous choisissez "Nouvelle Police" :
Ensuite, vous lui donnez un nom, là j'ai mis myArial (indiquez un nom différent de celui de la police que vous allez choisir), vous choisissez la police dans la liste, vous ne cochez ni bitmap, ni gras, ni italique : 
Vous validez, ensuite cliquez droit sur votre police dans la bibliothèque, et choisissez "Liaison" : 
ici vous allez cocher "Exporter pour Actionscript" et "Exporter dans la première image", valider et acquiescez lors de l'alerte vous indiquant qu'une nouvelle classe sera créée : 
Répétez l'opération avec toutes les déclinaisons dont vous aurez besoin, en général italique puis gras, on peut aussi avoir italique et gras ensemble. Vous leur donnez des noms différents. Chez moi, avec Arial, Arial Bold, et Arial Italique, mon animation compressée fait 148Ko. Il est temps de passer au code.
Dans votre fichier FLA, allez sur Actions, puis vous pouvez mettre ça :
import MyClass;
var myClass:MyClass = new MyClass();
addChild(myClass);
Ensuite, on va donc créer la classe MyClass : créez un nouveau fichier actionscript, appelez le MyClass et enregistrez le dans le même dossier que votre animation. Mettez ça dedans :
package {
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.AntiAliasType;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
public class MyClass extends Sprite {
private var my_txt:TextField = new TextField();
private var my_fmt:TextFormat;
public function MyClass():void {
my_fmt = new TextFormat("Arial", 22, 0x000000, false, false, false, null, null, TextFormatAlign.CENTER);
my_txt.embedFonts = true;
my_txt.defaultTextFormat = my_fmt;
my_txt.multiline = true;
my_txt.wordWrap = true;
my_txt.selectable = false;
my_txt.autoSize = TextFieldAutoSize.LEFT;
my_txt.antiAliasType = AntiAliasType.ADVANCED;
my_txt.htmlText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <b>Cras magna lorem</b>, pulvinar at, venenatis tempus, <i>posuere nec</i>, augue. <u>Mauris porta</u> elementum libero. Vestibulum egestas, enim ac lobortis sodales, ipsum justo viverra enim, vel tincidunt justo augue sed nunc. Etiam aliquam magna eu dui. In hac habitasse platea dictumst. Curabitur interdum tempor sapien. Aliquam sed quam sed ipsum interdum blandit. Etiam dictum elementum massa.";
my_txt.condenseWhite = true;
addChild(my_txt);
addEventListener(Event.ADDED_TO_STAGE, added);
}
private function added(e:Event):void {
my_txt.width = stage.stageWidth;
}
}
}
Bon, voilà, je sais pas si j'ai vraiment besoin d'expliquer. On va forcer embed à true pour être sûr qu'il cherche bien la police dans la bibliothèque, mais la vraie clé de l'énigme est dans le fait d'utiliser le vrai nom de la police dans le textFormat, sinon il ne prendra pas automatiquement les déclinaisons grasse et italique. Ensuite j'utilise l'eventListener pour adapter la largeur du champ texte à la largeur de la scène au moment où l'élément est ajouté à la scène. J'utilise wordWrap pour faire passer automatiquement à la ligne quand le texte est trop long. CondenseWhite pour n'avoir que des sauts lignes désirés (<br />). Autosize pour que la hauteur s'adapte au contenu, AntiAliasType pour que le texte soit un peu mieux lissé. Voilà, je pense avoir fait le tour.
Commentaires