Pablo Prieto - Blog - flash

Flash et bugs : switch/case et variables de type XML

Pab. — Tue, 08 Sep 2009 19:46:00 +0200

Bonjour les amis, aujourd'hui un bug tout en subtilité sur lequel je suis tombé hier :

Conditions :

Vous êtes à l'intérieur d'une clause switch/case
Vous voulez déclarer une variable de type XML ou XMLList et lui affecter une valeur sur une même ligne

Bingo, le contenu de la variable sera null ...

Exemple :

switch(condition)
{	
  case 0:
  var content:XML = xmlListObject.node.(@id == id)[0]; // l'expression renvoie bien un noeud XML
  trace(content); // -> null
  break;

  case 1:
  ...
}

Solution :

Très simple à résoudre, il suffit de déclarer puis affecter la valeur en 2 temps :

switch(condition)
{	
  case 0:
  var content:XML;
  content = xmlListObject.node.(@id == id)[0];
  trace(content);
  break;

  case 1:
  ...
}

Voilà, simple et efficace. Merci à ce billet pour avoir trouvé la solution, à Fred pour avoir trouvé ce billet, et visiblement à Adobe pour avoir corrigé le souci dans la dernière version du player (la page du bug sur Jira est ici).

Flash et bugs : Mozilla, wmode et champs de saisie

Pab. — Tue, 30 Jun 2009 11:54:00 +0200

J'inaugure aujourd'hui une nouvelle rubrique consacrée aux bugs de Flash (oui ça mérite bien une rubrique à part entière).

Pour commencer, un bug malheureusement assez connu et très ennuyeux, qui perdure depuis Flash 6 et toujours pas vraiment résolu à ce jour : le bug "du wmode". Pour les chanceux qui ne seraient pas encore tombés dessus, voici une démonstration.

Conditions :

Vous êtes sur Firefox, Safari ou Opera, sur Windows uniquement
Vous n'êtes pas américain et votre clavier n'est pas en configuration qwerty US
Vous avez une animation flash avec le paramètre wmode reglé sur "transparent" (pour pouvoir superposer des éléments html)
Vous avez un champ de saisie

Si vous réunissez ces conditions, bravo, vous vous rendez compte que vous ne pouvez pas taper le caractère "@", "?" ou bien un chiffre de la rangée haute (les chiffres du pavé numériques fonctionnent). Plutôt gênant par exemple quand vous devez saisir une adresse email.

Solutions possibles :

Attendre la saint glinglin qu'Adobe se bouge les fesses (le rapport de bug est ici)
Prévenir votre client du souci le plus en amont possible (ne vous inquietez pas, votre client adore entendre ce genre de justification technique)
Essayer un des hacks proposés ici, ici, ou encore là, principalement à base de javascript à la rescousse.

Pour aller plus loin...

Le souci vient en fait des deux cotés, Adobe et Mozilla, comme on peut le voir dans cette discussion. Voir notamment les messages de Masayuki Nakano pour Mozilla, et Jeff Mott pour Adobe.

En résumé, un correctif vient d'être intégré récemment dans le lecteur Flash pour qu'il supporte correctement les entrées clavier unicode, et on attend maintenant la prochaine release de Firefox pour les corrections coté Mozilla. Je viens de tester avec Firefox 3.5 et ça fonctionne effectivement mais seulement à partir du deuxième caractère saisi (!). Bref, c'est pas encore trop ça mais ils y travaillent. À suivre donc...

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 :)