Pablo Prieto - Blog - flash

3D isométrique et pathfinding

Pab. — Mon, 27 Oct 2008 10:09:00 +0100

Voici quelques temps que je voulais me mettre au développement de jeux en Flash, je me suis donc confronté récemment à la réalisation d'un moteur 3D isométrique. Je me suis notamment intéressé à la génération et au positionnement des "tiles" et des différents objets de la carte, ainsi qu'à la gestion du pathfinding, c'est à dire le déplacement des objets sur la carte en tenant compte des obstacles.

Le code est très largement inspiré de cet excellent tutorial, que j'ai réadaptée et réécrit en Actionscript 3.

La principale différence concerne la gestion du Z-Sorting. En effet en Actionscript 3 plus question de placer un symbole sur un niveau au choix avec un swapDepths()... Pour y remédier, la méthode render() de la class Map se charge donc de réorganiser la profondeur de tous les objets de la carte lorsque l'un d'entre eux se déplace.

Je suis donc arrivé à un petit moteur très basique que vous pouvez télécharger librement, le code étant sous licence Creative Commons

Et voici la démo, cliquez sur un des "personnages" puis sur n'importe quel endroit de la carte pour qu'il s'y déplace :

Enjoy :)

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);
}

Du nouveau du coté de l'intégration Flash

Pab. — Mon, 12 Nov 2007 11:26:00 +0100

Après avoir réglé son différent avec Eolas et conclu un accord "à l'amiable", Microsoft a décidé de supprimer l'avertissement d'activation pour les contenus Active X dans Internet Explorer. La mise à jour, prévue pour avril 2008 (!) nous fera donc enfin oublier le message "Cliquez ici pour activer et utiliser ce contrôle" sur les animations Flash.

Pendant ce temps, le développement de SWFObject se poursuit, Geoff Stearns travaille désormais avec Bobby van der Sluis et Michael Williams d'Adobe sur SWFObject 2.0, qui deviendra la méthode standard d'intégration Flash préconisée par Adobe. SWFObject 2 sera donc le successeur désigné de SWFObject, UFO et du Flash player detection kit d'Adobe. La beta 6 est actuellement disponible sur Google Code.

Classe principale en Actionscript 2

Pab. — Thu, 09 Aug 2007 11:24:00 +0200

La possibilité dans Flash CS3 de pouvoir spécifier une classe principale pour son application, ça donne envie de pouvoir faire la même chose en Actionscript 2/Flash 8 .

Pas de souci, voici le code de la classe :

class Application extends MovieClip{
	
	public function Application(){
		//...
	}
	
	public static function main(target:MovieClip):Void {
		target.__proto__ = Application.prototype;
		Function(Application).apply(target, null);
	}
	
}

Oui alors bon il reste quand même une ligne de code à placer sur la première frame dans le FLA:

Application.main(this);

Voilà, c'est tout. La méthode main permet dans un premier temps, de spécifier le niveau 0 du swf comme une instance de la classe Application (this dans notre classe fera donc bien référence à _root). La deuxième ligne permet ensuite d'appeler le constructeur.

Astuce trouvée via Danny Patterson et BIT-101

Sloppy, le simulateur de modem 56k

Pab. — Mon, 23 Jul 2007 14:06:00 +0200

Sloppy est un petit logiciel bien pratique, puisqu'il permet de simuler une bande passante réduite. Ça permet par exemple de tester son site en local, dans son navigateur habituel, à la vitesse d'une connexion 56k ou autre (les choix vont de 9,6 à 512k).

C'est particulièrement utile pour un site flash avec beaucoup de chargements asynchrones, cela permet de vérifier que ceux-ci se font correctement dans un environnement "réel", contrairement au mode "Simuler le téléchargement" disponible dans Flash.

Sloppy est une application Java, disponible donc sur Windows, Mac OS X et Linux.

Red5 : installation sous Mac OS X

Pab. — Tue, 15 May 2007 12:58:00 +0200

Un petit tutoriel pour vous permettre de démarrer rapidement sous Red5 : installer et configurer le serveur, puis créer votre première application. Je vais détailler l'installation sous Mac OS X mais à quelques détails prêt ce tutorial peut être suivi et adapté pour les autres plates-formes.

Vous aurez besoin :

de Red5...
d'Eclipse
de Java et Apache Ant, qui sont déjà fournis avec Mac OS X, ce qui va nous faire gagner du temps, on peut donc directement commencer par configurer Eclipse. Pour Windows, ces 2 composants doivent être installés au préalable.

Par défaut Red5 s'installe dans /Applications/Red5. Toutes les applications Red5 doivent être placées dans un dossier distinct à l'intérieur du dossier /webapps.

Au lancement d'Eclipe, définir le workspace à /Applications/Red5/webapps/. Le dossier webapps est le dossier contenant toutes les applications Red5, chacune dans un dossier distinct. Dans chaque dossier d'application doit se trouver un dossier /WEB-INF contenant les classes java et les fichiers xml de configuration.

Red5 propose dans le dossier /docs/templates un dossier d'application "modèle" qui va nous servir de base. Copiez donc le dossier /docs/templates/myapp dans le dossier /webapps et le renommer du nom de votre application (ici /webapps/monappli)

Dans Eclipse, créez un nouveau projet ("File" > "New" > "Project..."), choisir "Java Project", puis donner un nom à l'application. Choisir en dessous "Create project from existing source" puis choisir le dossier crée à l'étape précédente (/webapps/monappli) comme dossier du projet.

Dans le dossier /WEB-INF, créez les dossiers /src et /classes. Le dossier /src sera le dossier contenant les sources java, /classes sera le dossier d'export pour les classes compilées.

Définir le dossier /WEB-INF/src comme dossier de sources, par un clic droit sur ce dossier puis "Build Path" > "Use as Source Folder"

Faites un clic droit sur le dossier du projet puis "Properties", "Java Build Path" à gauche, onglet "Source", définir le dossier /WEB-INF/classes comme dossier de sortie ("Default output folder")

Toujours dans la fenêtre de propriétés du projet, onglet "Librairies", cliquez sur "Add External JARs" puis sélectionnez red5.jar situé dans le dossier d'installation de Red5. Ceci va nous permettre d'utiliser l'API de Red5 dans notre application.

Fichiers de configuration

Ouvrez le fichier red5-web.properties et changez l'url de votre application :

webapp.contextPath=/monappli

Ouvrez ensuite le fichier red5-web.xml. Dans ce dernier il va falloir changer le chemin vers la classe principale de notre application. Comme nous allons le voir à l'étape suivante, celle-ci s'appelle "Application" et est située dans le package "demo" :

<bean id="web.handler" class="demo.Application" singleton="true" />

Juste en dessous vous pouvez supprimer le noeud :

<bean id="myhandler.service" class="the.path.to.my.ServiceHandler" singleton="true" />

Ouvrez enfin web.xml et modifiez la valeur de webAppRootKey avec le chemin vers votre application :

<context-param>
		<param-name>webAppRootKey</param-name>
		<param-value>/monappli</param-value>
</context-param>

Création de la classe Application

Dans le dossier de sources, créez un nouveau package "demo" (clic droit sur le dossier WEB-INF/src -> "New" -> "Package") puis une nouvelle classe dans ce dernier. Nommez-là "Application".

Je vais ici reprendre l'exemple de base fourni dans la doc de Red5. Nous allons créer une application minimaliste qui possède une simple et unique fonction qui renvoie la somme entre 2 nombres. Plus simple tu meurs :)

A noter, notre classe Application doit hériter de la classe org.red5.server.adapter.ApplicationAdapter.

package demo;

import org.red5.server.adapter.ApplicationAdapter;

public class Application extends ApplicationAdapter {
	
	public double add(double a, double b){
		return a+b;
	}

}

Compilation et lancement du serveur

Red5 utilise Ant pour simplifier et automatiser l'étape de compilation. Ant se configure à l'aide d'un fichier build.xml qui se trouve à l'intérieur du dossier d'installation de Red5 (/Application/Red5). Il va donc falloir modifier ce fichier afin d'intégrer notre classe dans le processus de compilation.

Ouvrez le fichier build.xml puis à l'intérieur du noeud <target name="compile_demos">, rajoutez un nouveau noeud comme ceci :

<javac sourcepath="" srcdir="${webapps.dir}/monappli/WEB-INF/src" destdir="${webapps.dir}${tmp.war.dir}/monappli/WEB-INF/classes"
	 classpathref="webapps.classpath" optimize="${build.optimize}" verbose="${build.verbose}"
	 fork="${build.fork}" nowarn="${build.nowarn}" deprecation="${build.deprecation}"
	 debug="${debug.state}" compiler="${compiler}" source="${java.target_version}" target="${java.target_version}"/>

Voilà, à présent tout est configuré, il ne reste plus qu'à lancer le processus de compilation et lancer le serveur. Pour ce faire, ouvrez une fenêtre du terminal, déplacez vous dans le dossier /Applications/Red5 puis lancez la commande :

sudo ant server

A noter : sudo est nécessaire car les droits root sont requis dans le dossier /Applications pour y créer et modifier des dossiers et/ou fichiers. Si vous avez installé Red5 dans votre dossier personnel, vous pouvez vous passer de sudo.

A la fin de la compilation, le serveur démarre, Red5 est lancé !

Coté client

Nous allons désormais créer l'application cliente sous Flash. Dans un nouveau FLA, tapez le code suivant sur la première frame :

var nc:NetConnection = new NetConnection();

nc.connect("rtmp://localhost/monappli");

nc.onResult = function(obj) {
	trace("Le résultat est " + obj);
}

nc.call("add", nc, 1, 2);

Vous l'avez déjà deviné, la méthode call permet d'appeler une méthode de l'application distante, puis le gestionnaire onResult permet de capter la réponse du serveur.

Sauvegardez, testez, et admirez :)

Apollo, WebKit et Windows

Pab. — Mon, 19 Mar 2007 17:37:00 +0100

Apollo vient de sortir aujourd'hui en version alpha sur le labs d'Adobe. En très bref, Apollo permet de créer des applications Internet riches (RIA) multi-plateformes en mixant Flash, HTML, CSS et JavaScript.

Une bonne nouvelle c'est que Apollo utilise WebKit pour le rendu HTML/CSS, c'est à dire le même moteur de rendu que Safari. Apollo permet donc d'avoir le moteur WebKit disponible sous Windows, ce qui est plutôt intéressant pour les designers qui veulent tester leurs pages sans avoir de mac sous la main...

Et justement, Adobe fournit dans ses exemples, une application dénommée Scout et qui permet d'afficher n'importe quelle page web au sein d'Apollo. Un bon plan pour vérifier le rendu d'un design html/css (presque) comme sous Safari ;) Grand luxe, Scout permet même d'analyser le DOM, le code source, ... un peu comme Firebug pour Firefox.

Je ne pense pas que la version de WebKit utilisée soit exactement la même que celle de Safari mais les différences de rendus sont à priori négligeables. Le moteur JavaScript en revanche n'est pas le même, donc prudence là dessus.

Pour utiliser Scout, installez d'abord Apollo puis télécharger ensuite Scout à partir de cette page (l'enregistrement sur le site d'Adobe est nécessaire).

Actionscript : délégation et passage d'arguments

Pab. — Mon, 05 Mar 2007 10:40:00 +0100

Le principe de la délégation en Actionscript : à quoi ça sert, comment bien l'utiliser, contourner le problème du passage de paramètres et enfin ce qui va changer en AS 3.

La délégation : à quoi ça sert

Un cas très courant nécessitant la délégation se présente dans l'exemple suivant : un objet graphique (héritant de MovieClip) possède un bouton qui exécute une fonction de l'objet lorsque on lui clique dessus :

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){	
		monBouton.onRelease = this.faitUnTruc;
	}
	
	public function faitUnTruc(){
		trace(this);
	}

}

Explication : je passe la fonction faitUnTruc en référence à monBouton.onRelease. Ainsi, lorsque je vais cliquer sur monBouton, la fonction faitUnTruc sera exécutée. Enfin dans la fonction faitUnTruc, je fais un trace de l'objet courant (this).

Et bien dans cette situation, this fera référence non pas à l'occurrence de MonObjet, mais à celle du bouton ! La faute au passage par référence de la fonction faitUnTruc à monBouton.onRelease : la fonction faitUnTruc s'exécute bien, mais dans le "scope" du bouton, c'est à dire comme une fonction du bouton, et non de l'objet.

Mise en place de la délégation avec la classe Delegate

C'est à ce moment précis qu'arrive la classe Delegate pour contourner ce problème de manière simple et élégante. Cette classe, écrite par Mike Chambers, est disponible depuis Flash MX 2004. Voici la modification à apporter à notre exemple de départ :

import mx.utils.Delegate;

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){	
		monBouton.onRelease = Delegate.create(this, faitUnTruc);
	}
	
	public function faitUnTruc(){
		trace(this);
	}

}

On commence par importer la classe qui se trouve dans le package mx.utils. Ensuite, au lieu de faire référence directement à la fonction faitUnTruc, on fait référence à la méthode statique Delegate.create avec deux arguments : le premier est le scope, c'est à dire l'objet quoi doit garder la référence, et le deuxième est la fonction à exécuter. Cette fois bingo, this dans la fonction faitUnTruc désigne bien l'objet.

Pour résumer, lorsque j'écris :

Delegate.create(UnObjet, faitUnTruc);

Cela peut se traduire par :

"Exécute la fonction faitUnTruc comme étant une fonction de l'objet UnObjet"

Passer des arguments

Passée l'euphorie (si si...), on tombe assez vite sur le prochain problème (ah flûte...) : Delegate ne permet pas de passer de paramètres à la fonction appelée. Imaginons que la méthode faitUnTruc doit pouvoir recevoir un ou plusieurs paramètres pour s'exécuter correctement, on ne peut pas les spécifier au moment de la délégation.

Il existe heureusement plusieurs techniques pour pouvoir le faire quand même :

Rajouter des propriétés à la méthode appelante

Ne jamais oublier LE truc chouette en Actionscript : (presque) tout est objet, donc une fonction est un objet. Et comme n'importe quel objet je peux donc lui rajouter des propriétés... c'est le principe de cette première solution :

import mx.utils.Delegate;

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){
		var d = Delegate.create(this, faitUnTruc);
		d.p1 = "toto";
		d.p2 = 42;
		monBouton.onRelease = d;
	}
	
	public function faitUnTruc(){
		trace(arguments.caller.p1+","+arguments.caller.p2);
	}

}

Je passe en référence à monBouton.onRelease une fonction qui est elle-même une référence à Delegate.create(this, faitUnTruc), à laquelle j'ai rajouté au préalable deux propriétés p1 et p2. Celle-ci est ensuite disponible dans la fonction faitUnTruc grâce à arguments.caller. C'est une solution simple et rapide, mais pas très propre car elle nécessite de connaître le nom des propriétés dans la fonction appelée.

Relegate

Tekool nous propose sur son site une méthode plus élégante et moins verbeuse sous la forme d'une fonction Relegate qui ressemble en tous points à Delegate, excepté qu'elle accepte des paramètres supplémentaires qui seront transmis à la fonction appelée. Voici comment l'utiliser dans notre exemple :

import Relegate;

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){
		monBouton.onRelease = Relegate.create(this, faitUnTruc, "toto", 42);
	}
	
	public function faitUnTruc(p1,p2){
		trace(p1+","+p2);
	}

}

La délégation et ActionScript 3

Attention car avec ActionScript 3 tout ceci va changer ! Oui en gros tout ce que j'ai écrit juste au dessus sera bientôt obsolète (et l'est déjà pour les gens qui développent sous Flex 2) !

Le tout nouveau modèle événementiel, basé sur celui du DOM Level 3, permet donc que le scope soit conservé lors du passe d'une fonction par référence ! Ainsi en reprenant l'exemple inital en AS3 :

package{

	Class MonObjet extends MovieClip{

		private var monBouton:MovieClip;

		public function MonObjet(){
			monBouton.onRelease = this.faitUnTruc;
		}
	
		public function faitUnTruc(){
			trace(this);
		}

	}

}

le this à l'intérieur de la fonction faitUnTruc désignera bien l'occurrence de MonObjet, et non plus le bouton, ce qui est quand même plus simple ;)