Ce premier tutoriel est dédié aux utilisateurs Linux et Mac qui veulent compiler les sources ActionScript 3 en ligne de commande. Les utilisateurs Windows pourrons eux aussi suivre ce tutoriel pour comprendre comment compiler leurs sources en ligne de commande, cependant je n’explique pas comment configurer le path sous Windows (Regardez plutôt du côté du tutoriel Windows), ce tutoriel est destiné avant tout aux utilisateurs Linux/Mac.
La première étape va être de mettre en place notre environnement de développement, il va donc nous falloir les outils suivants :
- Un éditeur de texte ou un environnement de développement intégré ;
- Un compilateur ActionScript 3 ;
- Un navigateur Web avec le lecteur Adobe Flash 10.x d’installé ;
- Un terminal (une console) ;
- (optionnel) Un lecteur debug pour tester les application sans navigateur et avoir des informations supplémentaires.
1 – Le compilateur
Vous devez télécharger le Flex SDK sur le site d’Adobe, il va nous permettre de compiler nos projets en SWF, le format Flash lisible par le lecteur Flash. Il existe actuellement plusieurs versions, nous utiliserons la 4.1 dans cette série d’article. On peut voir sur le site d’Adobe qu’il y a plusieurs versions (nightly, Milestone, Stable) en plusieurs variantes (Open Source, Adobe, Addons). Pour synthetiser rapidement la version « Open Source » contient uniquement du code Open Source sans certains composants fermés d’Adobe (fonts, lecteur flash, air, etc…), ces composants sont d’ailleurs présents dans les Addons que l’on peut télécharger à côté. Je vous invite à prendre la version Adobe qui est gratuite (mais pas totalement Open Source donc) afin d’avoir tout les composants disponibles.
Vous devrez aussi installer un environnement de développement Java (un JDK), pour cela référez vous à votre distribution pour connaitre le nom du paquet à installer, sous Ubuntu par exemple il faut activer le dépôt partner et taper en console : sudo apt-get install sun-java6-jdk. Si votre distribution ne propose pas de paquet vous pouvez télécharger gratuitement le JDK sur le site d’Oracle.
Pour les utilisateurs Mac pas de problème le paquet est présent d’origine sur votre système 🙂 .
Il faut maintenant configurer la variable d’environnement PATH avec le compilateur pour que la commande mxmlc soit reconnue par votre terminal. Commencez avant tout par décompresser le SDK de Flex dans un dossier de votre choix, pour ma part je l’ai mis dans /home/cyannick/Programmes/Flash/Flex-sdk-4.1/ puis éditez, avec votre éditeur de code préféré le fichier .bashrc présent dans votre dossier personnel : nano .bashrc puis allez tout à la fin du fichier et ajoutez la ligne suivante :
export PATH=$PATH:/chemin/vers/flex/sdk/flex-sdk-4.1/bin/
Voilà ce que j’ai renseigné export PATH=$PATH:/home/cyannick/Programmes/Flash/flex-sdk-4.1/bin/ on ajoute donc à la variable PATH le contenu du dossier bin/ du Flex SDK. Une fois que cela est fait, tapez bash pour relancer le bash et tapez mxmlc pour voir si la commande est disponible, vous devriez avoir quelque chose comme ça :
Chargement du fichier de configuration /home/cyannick/Programmes/Flash/flex-sdk-4.5/frameworks/flex-config.xmlCompilateur Adobe Flex (mxmlc)Version 4.5.0 build 19786Copyright (c) 2004-2009 Adobe Systems, Inc. Tous droits réservés. Erreur: un fichier cible doit être spécifié Utilisez mxmlc -help pour en savoir plus sur l'utilisation de la ligne de commande.
2 – Un template de projet
Je vous fournis un « template » de projet que vous pourrez utiliser pour tout vos nouveaux projets ActionScript 3, celui ci est composé de 4 dossiers qui eux même contiennent quelques fichiers dont je vais vous expliquer le fonctionnement :
- assets : Ce dossier est vide mais c’est ici que vous pourrez placerez vos ressources (images, musiques, son, etc…);
- bin : C’est dans ce dossier que le fichier SWF sera placé après la compilation, ce dossier contient aussi une page web html et un script javascript. Vous pouvez modifier cette page sans problème (d’ailleurs il faudra si vous voulez faire une intégration perso) ;
- lib : Ce dossier est vide mais c’est ici que vous placerez vos librairies externes comme Flixel ou As3IsoLib ;
- src : C’est le dossier qui contiendra toutes vos sources, donc des fichiers avec une extension .as, il contient déjà une classe que j’ai appelée Main.as et qui affiche un texte à l’écran.
Vous trouverez aussi un fichier script qui permet de compiler entièrement votre projet en une ligne de commande, son utilisation est des plus simple mais nous y reviendrons. Je fournis dans ce template un Makefile pour ceux qui aiment utiliser make, cependant je n’utiliserais pas le makefile dans ces articles. Si vous ne voulez pas utiliser de script et compiler à la main vos fichier vous pouvez utiliser la commande suivante :
mxmlc -sp ../lib/dossier/vers/vos/lib -- VotreFichierPrincipal.as
Pour plus d’information sur le fonctionnement de mxmlc vous pouvez soit consulter l’aide en console, soit aller sur le site d’Adobe. En gros la commande mxmlc va lancer la compilation du fichier passé en paramètre, l’option -sp permet de spécifier un dossier contenant d’autres fichiers sources (comme des librairies par exemple en .as ou en .swf). Si vous n’utilisez pas de librairie spécifique vous pouvez simplement taper mxmlc votreFichier.as .
-
Télécharger le Template
2.1 – Optionnel – Installer le lecteur debug
Bien que l’installation du lecteur debug (aussi appelé projector) ne soit pas obligatoire c’est quand même un outils assez pratique pour faire des tests. Vous pouvez le télécharger sur cette page et le copier où vous voulez (pour ma part c’est dans /home/cyannick/Programmes/Flash/).
Il y a deux type de debugger, la version plugin et la version projector. Nous prendrons la version « Projector » qui est livrée sous la forme d’un logiciel à part entière et pas comme un plugin pour navigateur. On pourra donc avoir nos applications/jeux dedans sans navigateur à la manière d’une application Air.
3 – Tester la compilation
Ouvrez un terminal dans le dossier du projet et tapez simplement :
./build.sh
Un fichier Main.swf a été généré et copié dans le dossier bin, vous pouvez donc vous rendre dans ce dossier et soit lancer le fichier Main.swf (avec le lecteur debug) ou lancer la page web index.html qui le lancera pour vous (celle ci utilisant le plugin Flash).
Au niveau du SDK Flex il est très facile de compiler un fichier, le script build.sh contient juste l’appel à la commande mxmlc avec un paramètre qui est le dossier lib, vue que pour cet exemple nous n’utilisons pas de librairie nous aurions pu nous mettre dans le dossier src et taper simplement mxmlc Main.as on aurait eu en retour un fichier Main.swf (le même nom que la classe du fichier) dans le dossier src. Nous sommes prêt pour démarrer les choses sérieuses, quoi que… vous avez besoin d’un éditeur pour programmer !
4 – Le choix difficile de l’éditeur
Hélas mes amis, sous Linux ou Mac il n’y a pas encore d’EDI digne de ce nom gratuit et potable, c’est d’ailleurs un comble mais hurler n’y changerais rien (ça calme), il faut soit créer son EDI (j’y ai pensé et j’avais commencé un truc il y a un moment mais j’ai arrêté pour l’instant) soit se tourner vers les solutions qui existes.
- Utiliser un éditeur de texte simple (là par contre : On a du choix 🙂 ) ;
- Utiliser un plugin pour Eclipse (axdt pour ne citer que lui) ;
- Utiliser un EDI spécialisé gratuit (Je n’en connais pas de vraiment valables actuellement) ;
- Utiliser un plugin ou un EDI propriétaire (mon but c’est de vous faire faire de l’ActionScript 3 et générer du contenu Flash gratuitement et légalement donc on ne parlera pas de ça) ;
- Utiliser une machine virtuelle avec Windows et utiliser FlashDevelop.
Ca sera donc suivant les personnes, si utiliser un éditeur de texte (avancé) ne vous pose pas de problème (c’est ce que je fais) vous pouvez regarder du côté des éditeur suivant :
- Kate (KDE) ;
- Gedit (Gnome) ;
- Scite ;
- jEdit (Java -> il est assez lent pour un éditeur avancé, autant utiliser Eclipse) ;
- Notepad++ avec Wine (ou tout autre éditeur Windows fonctionnant avec Wine).
Sinon si vous avez absolument besoin d’un éditeur qui gère les projets, etc… vous pouvez regarder du côté d‘Eclipse et des plugins Axdt et AirGear, par contre je vous préviens tout de suite : Eclipse + Plugin = Lenteur 😉
Nous sommes maintenant prêt pour démarrer des projets ActionScript 3 sous Linux/Mac en ligne de commande.