AS3, c'est parti !!

  • warning: array_map(): Argument #2 should be an array in /var/www/titouille.ch/www/modules/system/system.module on line 1050.
  • warning: array_keys() expects parameter 1 to be array, null given in /var/www/titouille.ch/www/includes/theme.inc on line 1845.
  • warning: Invalid argument supplied for foreach() in /var/www/titouille.ch/www/includes/theme.inc on line 1845.
Portrait de titouille

Allons-y, AS3, c'est parti !!

Il y a un peu plus d'une année maintenant, une certaine frénésie s'emparait de l'univers Flash. Tout d'abord, le rachat de Macromedia par Adobe laissa planer des doutes dans l'esprit des développeurs et des graphistes. L'avenir de leur outil de travail de prédilection semblait être en suspend. On pouvait lire de ça de là sur le web les incertitudes des gens à propos du Flash, mais la plupart restaient confiants en l'avenir et imaginaient même une évolution à la hauteur des espérances de chacun

Puis Adobe annonça Flex2, l'ActionScript 3, une ouverture vers les milieux open-source, un lecteur client plus chargé pour des applications orientées utilisateur (Appolo) et j'en passe. Notre petit monde du Flash était tout d'un coup ébranlé par une quantité impressionnante de nouvelles technologies gravitant autour de notre player favori. Depuis un moment déjà, mtasc, swfmill et autres projets hébergés sur osflash.org commençaient à émerger et à s'imposer, mais l'annonce de la 3ème version du language de programmation cher à nos éditeurs arriva comme une bombe. Une évolution ? non, cette fois-ci, une révolution.

Nouveau player, nouveaux frameworks, nouveaux procédés, bref, que de nouveautés !

Mais voilà... Lorsqu'on a passé plusieurs années à travailler avec une technologie qu'on commence à vraiment maitriser, on n'a pas envie d'en changer. C'est là que l'évolution de l'informatique intervient et nous ramène à la triste réalité : nous revoilà quelque part devenu de simples novices. Dur à avaler, après tant d'efforts fournis pour devenir un bon développeur.

M'y voilà donc, à me demander pourquoi tous les codes basiques que je tente m'affichent lamentablement une animation vide, me questionnant même sur la validité de ces codes glanés sur la toile ?
Soudain un éclair de lucidité traverse mon esprit : je visualise mon animation en exécutant directement le fichier swf. Ce dernier se lance dans le player stand-alone, Flash8 bien entendu Tongue Allez-y, moquez-vous, je l'ai bien cherché Smile

Après avoir compris mon erreur de débutant, j'édite mon script et là, hoo, magie, je découvre que ça fonctionne !! l'apprentissage avance, c'est bien. Mais au fait, c'est quoi un Sprite ? Tongue

[mode prise de note]
Prochaine leçon, comprendre l'architecture des classes
[/mode prise de note]

Aujourd'hui, je m'arrêterai sur le simple "hello world" par lequel on commence toujours.

Loin de moi l'idée de vous accaparer l'esprit avec de telles banalités, l'originalité de l'exercice sera de mettre en place les éléments nécessaires à la compilation de notre animation et son affichage via JEdit et Ant.

Les besoins tout d'abord :

  • Le "Flex SDK 2"
  • un fichier Ant nommé build.xml
  • un fichier de type batch pour exécuter l'animation
  • un fichier index.html pour contenir l'animation
  • une classe ActionScript (HelloWorld.as)

Téléchargez d'abord le SDK si vous ne le possédez pas encore.
Vous pouvez ensuite le décompressez où bon vous chante, nous utiliseront une petite astuce qui va permettre de rendre le compilateur accessible de partout.
Une fois le fichier décompressé dans le répertoire de votre choix, faites tout d'abord une petite expérience :
Le compilateur se nomme mxmlc.exe
Lancez une invite de commande via le menu démarrer -> exécuter -> cmd
Puis tapez dans celle-ci "mxmlc".
Vous verrez que l'invite vous retourne un message comme quoi cette commande est non valide.

Débutons la configuration : faites un click-droit sur le poste de travail, sélectionnez "propriétés" et dans la fenêtre qui s'ouvre, choisissez l'onglet "Avancé". Sur ce dernier, au fond se trouve un bouton "Variables d'environnement" sur lequel vous cliquez.

Une fenêtre s'ouvre alors, pour vous permettre d'insérer des valeurs.
Dans la partie du bas se trouvent les variables système. Recherchez si vous avez une variable nommée "Path". Si cette dernière existe, double-cliquez dessus, et dans le champs de saisie, allez à la fin des valeurs déjà insérées et ajoutez un point-virgule. Si elle n'existe pas, créez-là via le bouton "Nouveau".

Insérez enfin le chemin vers le compilateur qui devrai logiquement se terminer par \flex\bin.

Une fois ces opérations effectuées, validez les différentes fenêtres. Vous venez d'ajouter une nouvelle variable dans votre "Path".
Cette action va permettre d'atteindre le répertoire flex\bin à partir d'une invite de commande sans avoir à cibler son chemin complet.

Réouvrez une invite de commande et tapez "mxmlc". Si le chemin vers mxmlc.exe a bien été validé dans la variable d'environnement "Path", cette fois le compilateur va afficher une sortie.

Déjà un grand pas de fait.

Il ne reste plus maintenant qu'a mettre en place les scripts de création :

script AS (HelloWorld.as) :

package
	{
	import flash.text.TextField;
	import flash.display.MovieClip;
 
	public class HelloWorld extends MovieClip
		{
		function HelloWorld()
			{
 
			var tf:TextField = new TextField() ;
			with( tf )
				{
				x = 0 ;
				y = 10 ;
				width = 120 ;
				height = 20 ;
				selectable = false;
 
				text = "Hello World" ;
				}
			this.addChild( tf ) ;
			}
		}    
 
	}

Fichier d'exécution pour la visualisation (build.bat) :

start "C:\Program Files\mozilla.org\Mozilla\mozilla.exe" E:\Projects\Flash\as3\projects\helloworld\index.html

Le script Ant (build.xml) et le fichier html de prévisualisation seront annexés en fin de ticket, car je me rend compte que le module geshi de coloration syntaxique pour drupal a un peu de peine avec les balises de type xml/html. Je vais devoir faire quelques recherches pour régler le problème Tongue

Dans le script Ant, vous pourrez trouver une liste non-exhaustive de variables possible pour le compilateur. La commande mxmlc -help vous en dira plus sur tous ces flags à disposition. Si quelqu'un connait un endroit ou se trouve la liste complète avec description de chaque variable, un lien ne sera pas de refus.

[edit]
la liste complète des options de compilation.
[/edit]

Voilà, ça sera tout pour aujourd'hui. Déjà un premier pas dans l'AS3, il faut maintenant se lancer !