Apprenez à utiliser des polices partagées dynamiquement en AS2

I. Technique utilisée
II. Exemple d'utilisation
II-a. Créer le swf contenant le(s) police(s) partagée(s) avec swfmill
II-b. Utiliser la police dynamique avec un textField
III. Téléchargement
IV. Remerciement

I. Technique utilisée

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, il suffit de charger le swf généré pour que la police soit disponible pour tous les TextField, via son identifiant de liaison.

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 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 de mon site qui utilise ce système de polices partagées : Delfiweb

II. Exemple d'utilisation

II-a. 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>

on spécifie la taille du swf et le nombre d'image par seconde (movie width= ...).
dans le noeud 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).
ne pas oublier de 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 noeud font de cette manière :


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

On crée le swf grâce à swfmill avec la ligne de commande suivante (adapter les chemins en fonction de vos dossiers) :


swfmill.exe simple "bin\bienvenue.xml" "fonts\Bienvenue.swf"

II-b. Utiliser la police dynamique avec un textField

Voici un exemple complet utilisant les TextField de flash et les composants du framework Delfiweb.

création d'un TextField avec du texte non HTML et d'un TextField avec du texte HTML.
création d'un objet TxtField Delfiweb.
création d'un objet PlaceHolder Delfiweb qui contenir l'objet TextField.
dans un premier temps, tous les champs contiendront du texte avec la police par défaut Time New Roman ou Arial.

Exemple


			// création d'un TextField basic avec du texte sans HTML
		_oTxtFieldNoHtml = this._mcBase.createTextField("TxtFieldNoHtml", _nDepth++, 10, 10, 550, 30);		
		_oTxtFieldNoHtml.selectable = false;
		_oTxtFieldNoHtml.text = "Lorem Lipsum test de la police partagée 1; êéèçà@ù%.";
		_oTxtFieldNoHtml.html = false;
		_oTxtFieldNoHtml.embedFonts = false;
		
		
		// création d'un TextField basic avec du texte HTML
		_oTxtFieldHtml =  this._mcBase.createTextField("TxtFieldHtml", _nDepth++, 10, 50, 550, 30);	
		_oTxtFieldHtml.selectable = false;
		_oTxtFieldHtml.html = true;
		_oTxtFieldHtml.htmlText = "lien Google Test de la Police partagée 2; ; êéèçà@ù%.";
		_oTxtFieldHtml.embedFonts = false;
		
		
		/* utilisation des composant du framework delfiweb 
		 * un champ texte ajouté dans un PlaceHolder
		 */
		var otxtfield:Object = {background:true, backgroundColor:0xcccccc};
		var otxtformat:Object = {font:"Arial", size:14};
		
		// création de l'objet recevant du texte
		_oTxtFieldPack = new TxtField(_sTxtSample, 0, 0, 450, 50, otxtfield, otxtformat);
		
		// création de l'objet pouvant afficher des DisplayObject, notamment un TxtField
		_oPlaceHolder = new PlaceHolder(10, 100, null, 1, 16, PlaceHolder.SCROLL_AUTO, null, 540, 450);
		_oPlaceHolder.attach(_mcBase, _nDepth++);
		_oPlaceHolder.addContent(_oTxtFieldPack, "center" );

création de l'objet FontLoader qui va s'occuper de charger les swf contenant les polices partagées.

Cette classe utilise la classe LoadStack du framework Delfiweb, en ajoutant le clip _mcBase non visible (aucun contenu ne doit être affiché) et rajout 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.

Exemple


		var mcFont:MovieClip = this._mcBase.createEmptyMovieClip("shared_font", this._nDepth++);
		
		_oSharedFont = new FontLoader();
		_oSharedFont.attach(mcFont);
		_oSharedFont.addListener(this); // ajout en tant qu'écouteur de l'objet FontLoader
		
		// ajout des swf à charger
		_oSharedFont.addFont( "swf/fonts/Bienvenue.swf" );
		_oSharedFont.addFont( "swf/fonts/Amaze.swf" );
		_oSharedFont.addFont( "swf/fonts/Astron_Boy_Video.swf" );
		_oSharedFont.startLoad();// lance le chargement	de spolices partagées

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.

Exemple


		/* 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
	
		
		_oTxtFieldNoHtml.setTextFormat( _tformat );// application du nouvel objet TextFormat
		_oTxtFieldNoHtml.embedFonts = true; // activation des polices embarquées
		
	
		_tformat = new TextFormat();
    	_tformat.font = "Amaze";// définie la police partagée à utiliser
    	_tformat.color = 0x0033ff;// modifie la couleur du texte
		_tformat.size = 23;// modifie la taille du texte

		_oTxtFieldHtml.embedFonts = true;// activation des polices embarquées
		_oTxtFieldHtml.setTextFormat( _tformat );// application du nouvel objet TextFormat
		
		
		/* objet delfiweb TxtField */
		_oTxtFieldPack.txt = _sTxtSample;
		var otxtfield:Object = {embedFonts:true};
		var otxtformat:Object = {font:"Bienvenue", size:16};
		
		_oTxtFieldPack.setTxtField(otxtfield);
		_oTxtFieldPack.setTxtFormat(otxtformat);
		
		_oTxtFieldPack.txt = "___>> police partagée : "+_sTxtSample;// modification du texte à afficher

Résultat graphique dans un swf.
Avec les polices systèmes :
as2_sharedfonts

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

Le flash de démonstration (les polices se chargent dynamiquement, affiche les polices systèmes en premier) :

III. Téléchargement

Voici un exemple d'utilisation des polices partagées (compilable avec MTASC).
Pour la compilation du swf, vous aurez besoin du framework Delfiweb : Télécharger Framework Delfiweb

Voici le lien des sources qui ont servi à la création de ce tutorial : Télécharger l'exemple des sharedfonts

IV. Remerciement

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