Pablo Prieto - Blog - flex

Chargement dynamique de polices avec Flash et Actionscript 3

Pab. — Fri, 22 Feb 2008 11:07:00 +0100

Ayant eu récemment besoin de faire ce genre de choses sur un projet, voici un tutoriel sur le chargement dynamique de polices de caractères en Actionscript 3. Ceci peut être particulièrement utile dans le cas par exemple de sites multilingues comportant des langues asiatiques, les polices de caractères chinoises ou japonaises pouvant être particulièrement lourdes à charger...

Le principe sera le suivant :

La police de caractère est contenue dans un fichier SWF externe.
Dans ce SWF, la police est exportée et est disponible sous la forme d'une classe héritant de la classe Font.
Le SWF principal charge ce SWF avec un objet Loader, puis enregistre la classe de police dans la liste des polices disponibles.
La police est ensuite utilisable dans l'application principale, dans un objet TextFormat ou pour un style CSS avec l'objet StyleSheet, comme vous voulez.

Création du SWF contenant la police

Pour générer le fichier de police, vous pouvez utiliser au choix Flex ou Flash. Le résultat est similaire, en revanche Flex permet de choisir une plage limitée de caractères à exporter (par exemple uniquement les minuscules, uniquement les caractères cyrilliques, etc...). Ceci permet donc d'optimiser au mieux le poids de votre SWF en fonction de vos besoins. Avec Flash en revanche, vous êtes contraint d'embarquer tous les caractères de la police dans le SWF final, c'est tout ou rien :)

Je vais détailler les deux méthodes, en commençant par Flex :

Avec Flex

Nous allons ici utiliser le SDK de Flex pour générer ce fichier. Voici ce à quoi va ressembler notre classe pour générer le fichier SWF contenant la police. j'ai au préalable placé le fichier de police Futura.ttf dans un dossier "assets".

package{
	
	import flash.display.Sprite;
	
	[SWF(backgroundColor='0xFFFFFF', width='100', height='100')]

	public class Futura extends Sprite {
		
		[Embed(source = "assets/Futura.ttf", fontName = "Futura")]
		
		public static var Futura:Class;
		
	}
	
}

Compilez et vous obtenez un magnifique SWF vide, mais contenant bien la police embarquée.

En bonus, choisir la plage de caractères :

Pour limiter l'exportation à une plage prédéfinie de caractères, la première chose à faire est d'éditer le fichier flex-config.xml présent dans le dossier "frameworks", à l'intérieur du dossier d'installation du SDK Flex. Ouvrez également le fichier flash-unicode-table.xml qui se trouve dans le même dossier.

Dans flex-config.xml, rendez-vous dans la balise <fonts>, c'est ici que vous allez pouvoir créer des plages de caractères personnalisées, de cette manière :

 <fonts>
 	[...]
	<languages>
		<language-range>
			<lang>Uppercase</lang>
			<range>U+0020,U+0041-U+005A</range>
		</language-range>
	</languages>
 	[...]
</font>

Comme vous le voyez, il suffit de créer un noeud <language-range> avec à l'intérieur une balise <lang> pour donner un nom à votre plage, et une balise <range> pour spécifier les plages de caractères unicodes. Bien bien, mais comment connaitre ces plages ? C'est le moment d'ouvrir le fichier flash-unicode-table.xml qui se trouve juste à coté :) Vous y trouverez plein de plages prédéfinies (majuscules uniquement, Kanji japonais, etc...) que vous pouvez copier-coller dans votre flex-config.xml.

Revenez ensuite à votre classe, et modifiez le metatag Embed comme ceci :

[Embed(source = "assets/Futura.ttf", fontName = "Futura", unicodeRange="Uppercase")]

Compilez et c'est prêt !

Avec Flash CS3

Si vous optez pour Flash, voici la procédure :

Créer un nouveau document
Créez un nouveau symbole de police dans la librairie (clic droit -> "Nouvelle police...")
Dans le champ Nom, donnez lui... un nom (de préférence le même que le nom original de la police, ça évitera les confusions...)
Vous pouvez choisir les version gras, italique, ou gras italique en cochant les cases appropriées, puis cliquez sur OK. Attention il s'agit d'un choix exclusif, si vous voulez que la police soit disponible en version normale et gras par exemple, vous devrez avoir 2 symboles de police dans votre bibliothèque, comme deux polices distinctes.
Faites ensuite un clic droit sur le symbole de police, puis cliquez sur "Liaison..."
Choisissez un nom de classe pour votre police, puis cliquez sur OK.

Voilà, votre police est désormais exportée pour Actionscript et sera donc exportée et utilisable lors de la compilation du SWF. Cette police sera disponible sous la forme d'une classe héritant de la classe Font.

Compilez et votre fichier SWF de police est prêt.

Création de l'animation principale

L'application principale sera composée d'un simple champ texte auquel on va appliquer un objet TextFormat avec notre police chargée dynamiquement.

Créez un nouveau document FLA
Placez un champ texte dynamique sur la scène, et donnez lui "message_txt" comme nom d'occurrence.

Voici ensuite le code à placer sur la première frame de l'application (vous pouvez bien sûr créer une classe d'application à la place, je vous laisse adapter le code en fonction)

Première étape, charger le fichier SWF contenant la police, avec la classe Loader :

var loader:Loader;

function init(){	
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontCompleteHandler);
	loader.load(new URLRequest("Futura.swf"));
}

Lorsque le chargement est fini, nous allons enregistrer la classe correspondant au symbole de police dans la liste des polices disponibles :

function fontCompleteHandler(event:Event){	
	var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;
	var font:Class = domain.getDefinition("Futura") as Class;
	Font.registerFont(font);
	
	initStyles();
}

Petite subtilité ici, la classe Futura n'est pas directement disponible dans le contexte de l'application principale. En effet, chaque SWF contient son propre "domaine d'application, c'est à dire que chaque classe est "rangée" dans un domaine distinct pour chaque SWF chargé, ceci pour éviter par exemple des conflits entre classes.

Ici on récupère donc la classe en allant chercher le domaine d'application du SWF chargé, puis avec la méthode getDefinition(). Le paramètre à passer ici est le nom de la classe tel que vous l'avez renseigné dans la boite de dialogue Liaison.

Enfin il nous reste à créer l'objet TextFormat, et à remplir et styler notre champ texte :

function initStyles(){	
	var tf:TextFormat = new TextFormat("Futura",16,0xFF0000);
	
	message_txt.embedFonts = true;
	message_txt.antiAliasType = AntiAliasType.ADVANCED;
	message_txt.text = "Lorem ipsum dolor sit amet";
	message_txt.setTextFormat(tf);
}

Attention ici, le nom de la police à utiliser pour l'objet TextFormat est le nom que vous avez défini dans la boite de dialogue "Propriétés".

Voici donc le code complet de l'application :

var loader:Loader;

init();

function init(){	
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontCompleteHandler);
	loader.load(new URLRequest("Futura.swf"));
}

function fontCompleteHandler(event:Event){	
	var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;
	var font:Class = domain.getDefinition("Futura") as Class;
	Font.registerFont(font);
	
	initStyles();
}

function initStyles(){	
	var tf:TextFormat = new TextFormat("Futura",16,0xFF0000);
	
	message_txt.embedFonts = true;
	message_txt.antiAliasType = AntiAliasType.ADVANCED;
	message_txt.text = "Hello Futura !";
	message_txt.setTextFormat(tf);
}

Une classe pour manipuler une base de données dans AIR

Pab. — Thu, 04 Oct 2007 14:32:00 +0200

Je viens d'écrire une petite classe assez simple pour faciliter la manipulation d'une base de données SQLLite dans une application AIR. Cette classe fonctionne comme une couche d'abstraction entre l'application et la base de données.

La classe peut être téléchargée ici, sous licence Creative Commons.

Par défaut la méthode "select" retourne un tableau d'objets mais il est possible d'indiquer une classe personnalisée à utiliser à la place. En effet, grâce à la propriété itemClass de la classe SQLStatement il est possible de faire correspondre facilement une classe Actionscript à une table de la base, les propriétés publiques de la classe sont alors remplies automatiquement avec les valeurs des colonnes de la table portant le même nom, super pratique :)

Voici un exemple d'utilisation :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import net.burnyourbrowser.data.SQLiteManager;
			import User;
			
			[Bindable]
			private var db:SQLiteManager;
			
			private function init():void{		
				this.db = new SQLiteManager("app-resource:/base.db");
				this.db.select("SELECT * FROM users", User);
			}
			
			private function removeSelectedItem():void{
				var id:int = resultDataGrid.selectedItem.id;
				this.db.remove("DELETE FROM profiles WHERE id="+id);
			}
			
		]]>
	</mx:Script>
	
	<mx:DataGrid id="resultDataGrid" dataProvider="{db.result}">
		<mx:columns>
			<mx:DataGridColumn headerText="id" dataField="id"/>
			<mx:DataGridColumn headerText="name" dataField="firstname"/>
			<mx:DataGridColumn headerText="url" dataField="lastname"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button label="Supprimer" click="removeSelectedItem()"/>
	
</mx:WindowedApplication>

Pour la création initiale de la base, je vous conseille SQLite Administrator, gratuit et qui fonctionne plutôt bien.

Je vous file le code sous licence Creative Commons, vous pouvez donc en faire ce que bon vous semble :)

Invoquer le webservice XML/RPC de Dotclear avec Flex

Pab. — Mon, 24 Sep 2007 14:08:00 +0200

Voici un petit tutorial rapide pour apprendre à communiquer avec un webservice XML/RPC en Actionscript 3.

XML/RPC est un protocole utilisé notamment par les principales plate-formes de blog pour permettre d'administrer ceux-ci sans devoir se connecter à l'interface d'administration. Nous allons justement dans l'exemple suivant nous connecter au webservice fourni par Dotclear pour afficher la liste des derniers billets.

Dotclear implémente les principales API de blog, à savoir blogger, Movable Type et MetaWeblog. Nous allons donc pouvoir invoquer les méthodes fournies par ces 3 API. Pour info ce même exemple peut servir pour les autres plate-formes de blog comme Wordpress, qui implémente également ces API. J'ai choisi Dotclear uniquement parce que c'est ce que j'utilise :)

Avant de commencer, pensez à activer l'interface XML/RPC de votre blog dans l'interface d'administration. Pour Dotclear cela se situe dans les paramètres du blog.

Création du projet

Coté client, la librairie qui va nous simplifier le travail s'appelle As3 RPC lib, disponible sur Google Code.

Après avoir crée un nouveau projet Flex, téléchargez la librairie as3 RPC lib et copiez le fichier as3-rpclib.swc dans votre dossier projet. Allez ensuite dans les propriétés du projet puis dans "Flex Build Path", onglet "Library Path", et importez le fichier SWC en cliquant sur "Add SWC...".

Utilisation de l'objet XMLRPCObject

Cette librairie nous permet de créer un objet XMLRPCObject qui appelera les fonctions du webservice avec la méthode "call()". L'url du webservice est précisée avec les propriétés endpoint et destination :

<ak33m:XMLRPCObject id="blogapi" endpoint="http://www.burnyourbrowser.net/" destination="index.php/xmlrpc/default" />

Après invocation de la méthode "call()", l'évenement ResultEvent permet de réceptionner les données directement sous forme d'objet.

Voici le code final de l'application, composée pour l'affichage d'un DataGrid et d'un texte destiné à recevoir les eventuels messages d'erreur.

L'objet XMLRPCObject est ici instancié en MXML, mais vous pouvez évidemment le faire en actionscript.

Enfin les résultats retournés sont stockés dans un ArrayCollection "bindable", ce qui nous permet de mettre à jour automatiquement le DataGrid :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ak33m="http://ak33m.com/mxml" 
	layout="vertical" 
	horizontalAlign="left" 
	creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
		
			private var login:String = "******";
			private var password:String = "******";
			
			[Bindable]
			private var recentPosts:ArrayCollection;
			
			private function init():void{				
				blogapi.call("mt.getRecentPostTitles","1",login,password,10);
				blogapi.addEventListener(ResultEvent.RESULT, showRecentPosts);
				blogapi.addEventListener(FaultEvent.FAULT, faultHandler);
			}
			
			private function showRecentPosts(e:ResultEvent):void{
				recentPosts = new ArrayCollection(e.result as Array);
			}
			
			private function faultHandler(e:FaultEvent):void{
				errorMessage.text = e.fault.faultCode+": "+e.fault.faultString;
			}
			
		]]>
	</mx:Script>
	
	<ak33m:XMLRPCObject id="blogapi" endpoint="http://www.burnyourbrowser.net/" destination="index.php/xmlrpc/default" />
	
	<mx:DataGrid dataProvider="{recentPosts}" width="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="ID" dataField="postid" width="30"/>
			<mx:DataGridColumn headerText="Title" dataField="title"/>
			<mx:DataGridColumn headerText="Date" dataField="dateCreated"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Text id="errorMessage"/>
	
</mx:Application>

Et voilà le résultat :

Je vous laisse continuer, en vous aidant de la documentation des API, pour vous créer votre propre interface de gestion de blog en Flex :)