Utiliser des polices partagées dynamiquement en AS3, HAXE et AS2

Le principe consiste à utiliser le logiciel swfmill qui s’occupe de créer un swf contenant la(les) police(s) partagée(s). Ensuite, avec la classe MovieClipLoader (en AS2), il suffit de charger le swf généré pour que la police soit disponible pour tous les TextField, via son identifiant de liaison.

Explications

Pour les explications détaillées : il s’agit d’un hack trouvé sur la Mailing List de swfmill et le blog d’erixtekkila : v-i-a.net.

Swfmill permet de créer des swf gratuitement quelque soit sa plateforme de développement (Linux, Windows, MAC). Il supporte la création d’animation, d’interfaces flash avec interactions utilisateurs et bien d’autres fonctionnalités.

Le principe est que le swf qui contient les polices charge sa propre référence, ce qui donnera accès ensuite à sa bibliothèque partagée à
toute animation qui le chargera.

Comme exemple d’application, voici l’adresse d’un site qui utilise ce système de polices partagées : Musicotest.

Exemple d’utilisation

Créer le swf contenant le(s) police(s) partagée(s) avec swfmill

Prendre le fichier ttf de la police voulue pour créer le swf à charger. Il est possible d’inclure plusieurs polices dans le même swf.
De plus, pour la même police, il est possible d’inclure dans le même swf : la police en bold, italique et normal (avec le même identifiant de liaison).

Il faut donc créer un fichier xml de ce type :

	< ?xml version="1.0" encoding="UTF-8" ?>
	<movie width="1" height="1" framerate="12">
	    <frame>
	        <library>
	           <font name="Bienvenue" import="bin/fonts/BienvenueBold.ttf" />	
			   <font name="Bienvenue" import="bin/fonts/BienvenueItalique.ttf" />	
			   <font name="Bienvenue" import="bin/fonts/Bienvenue.ttf" />
	        </library>
	        <import url="http://www.delfiweb.com/v2/swf/fonts/Bienvenue.swf"></import>
	    </frame>
	</movie>

• Spécifier la taille du swf et le nombre d’image par seconde (movie width= …).

• Dans le nœud library, à chaque police que l’on souhaite ajouter, on créer le noeud font contenant l’attribut name (identifiant de liaison pour les textfield), et l’attribut import (url vers la police ttf). Pour avoir accès à tous les styles de la même police (bold, italique, normal), on donnera le même name (identifiant de liaison).
• Renseigner le noeud import, qui contient l’url complète vers le swf contenant le(s) police(s).

Pour chaque police partagée, il est possible de choisir les glyphes à importer. Il faut utiliser le nœud font de cette manière :

<font id="vera" import="bin/fonts/vera.ttf" glyphs="abcdefghijklmnopqrstuvwxyz"/>

Il ne reste plus cas créer le swf grâce à swfmill avec la ligne de commande suivante (adapter les chemins en fonction de vos dossiers)  :

swfmill.exe simple "bienvenue.xml" "fontsBienvenue.swf"

Utiliser la police dynamique avec un textField

Voici un exemple complet utilisant les TextField de flash :

• Créer un objet TextField avec du texte non HTML et d’un TextField avec du texte HTML.
• Dans un premier temps, tous les champs contiendront du texte avec la police par défaut Time New Roman ou Arial.
• Charger les swf contenant les polices partagées.

Lors des tests en AS2, j’ai du ajouter d’un timer de 200 ms avant de diffuser l’évènement onLoadFontComplete. Pour les polices une fois chargées, il est nécessaire d’attendre un petit délai avant de pouvoir les utiliser.

Une fois tous les swf chargés, toutes les polices contenues sont disponibles pour chaque TextField.

Pour assigner une police, on utilisera l’identifiant de liaison déterminé dans le fichier xml de création du swf des sharedfonts.

/* attribution des différentes polices aux TextField */
var tformat:TextFormat = new TextFormat();
tformat.font = "Astron Boy Video";// définie la police partagée à utiliser
tformat.color = 0x2488B3;// modifie la couleur du texte
tformat.size = 23;// modifie la taille du texte
 
.embedFonts = true;// activation des polices embarquées via l'objet TextFiled

Résultat graphique dans un swf

Avec les polices systèmes :

Avant le chargement des polices dynamiques

Dans le même swf, après le chargement des polices partagées :

Après le chargement du swf des polices dynamiques

Compléments de l’article

Voici les liens des sites qui m’ont aidé à comprendre le principe des polices partagées en AS2 :

• blog deja-vue article as2-sharedfonts-datagrid-example-the-last-stand
• blog deja-vue article open-source-flash-pizza
• swfmill

Articles sur le même sujet :

1. Présentation du Langage HAXE
2. Freelance – Protéger votre application flash
3. Créer une bibliothèque swf avec haXe