Flash platform development and training – Flash – Flex – AIR – FMS – ActionScript

Voilà, chose promise chose due, je commence une série de tutos sur FlashDevelop, AIR et AIR on Android.

Ces tutos auront pour but de reprendre pas à pas les différentes étapes, les pièges à éviter, les choses à ne pas oublier pour construire dans un premier temps une application AIR desktop et ensuite pour la porter vers Android.

Le but n’étant pas d’apprendre l’AS3 mais bien d’apprendre à utiliser les différents outils mis à notre disposition.

Je vais partir du principe que, tout comme moi, vous n’êtes toujours pas passé CS5 et que vous n’avez donc pas accès aux différents  « plugins » existants pour créer las apps AIR et AIR/Android.

Nous utiliserons Flash CS4 pour créer les différents assets graphiques et FlashDevelop pour la partie AS.

Le but n’étant pas d’apprendre l’AS3, nous allons créer une application très simple. Un white-board permettant de dessiner avec la souris puis de sauver localement une capture de l’application au format .jpg

Tout le monde est prêt ? Alors, c’est parti !

Première chose à faire, installer FlashDevelop (FD), qui en est à la version 3.2.2 RTM au moment ou j’écris ces lignes. Pour ça, rien de plus simple, il suffit de se rendre à l’adresse suivante et de suivre les instructions: http://www.flashdevelop.org/community/viewtopic.php?f=11&t=6956&sid=9569c6bc4b2696a308f7d0446524fd84

Attention !!! N’oubliez pas de charger et d’installer la version 10.1 debugger du player Flash et le Java runtime. Les liens sont indiqués dans la page de téléchargement (lien ci-dessus) dans la rubrique « Important »

Ensuite, il vous faudra télécherger le Flex SDK. SDK signifie « Software Development Kit », c’est à dire, le kit fourni par Adobe pour développer des application Flex (ou Flash, ou AIR). Il contient tous ce dont nous allons avoir besoin pour créer des .swf sans passer par le compilateur de Flash.

Pour le télécharger, rendez-vous à cette adresse: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Une fois chargé, dézipez le contenu dans un endroit facilement accessible… nous aurons parfois besoin d’y accéder en ligne de commande alors ne choisissez pas un chemin trop compliqué ;) Voilà le mien: E:\sdks\flex_sdk_4_1

Et voilà une capture de son contenu:

Lors du portage vers Android, il faudra modifier ce sdk mais nous n’en sommes pas encore là :)

L’étape suivante consiste à configurer FlashDevelop pour qu’il utilise le Flex SDK pour compiler vos projets et créer les .swf

Ouvrez FD et rendez-vous dans Tools->Program Settings (ou F10). Cliquez sur AS3 Context dans la colonne de gauche puis sur Flex SDK Location dans la colonne de droite et faites pointer le browser vers le répertoire qui contient les fichiers que vous venez de déziper.

A ce stade, FD devrait être à même de vous créer un .swf

Pour celà, nous allons créer un nouveau projet. Pour commencer, un projet AS3 « classique », ensuite, nous testerons avec un projet AIR

Cliquez sur Project -> New Project

Vous pouvez voir qu’il y a pas mal de choix. Nous allons choisir pour commencer « AS3 Project ».

Définissez un nom pour votre projet, un endroit sur votre machine ou seront stockés les fichiers et demandez lui de créer un répertoire pour votre projet (ou pas… :)  ).

Vous obtenez la structure de projet suivante (Voir la colonne « Project » à droite de FD):

J’ai un fichier supplémentaire que vous ne devriez pas avoir qui est du à un plugin installé sur ma version de FD: SWCSettings.lxml

Ouvrez le fichier Main.as et créez un TextField.

Testez l’animation (Ctrl+Enter ou F5 ou la flèche verte au dessus de FD).

Normalement, votre animation devrait s’ouvrir dans une fenêtre popup.

Vous avez la possibilité de modifier les différents paramètres de votre animation (FPS, Taille, affichage en popup ou dans un onglet, etc…)

Allez dans Project -> Properties et modifiez comme bon vous semble :)

Vous verrez que cette fenêtre sera très importante dans un avenir proche.

Voilà qui termine ce premier tuto dédié à FlashDevelop. Dans le prochain, nous verrons comment créer une application AIR.

N’hésitez pas à me contacter par email (j’oublie souvent de valider les commentaires) en cas de questions ou sur Twitter pour les plus geek’s d’entre-vous. (twitter.com/baizone)

A bientôt.

Yeah !!! Je suis fier de vous annoncer la sortie de la nouvelle version de MusicPlay’AIR (anciennement BaizoneRadioAIR) rebaptisé ainsi pour l’occasion.

En effet, j’y ai ajouté la possibilité de jouer les mp3’s locaux, il n’y a donc plus de raison de l’appeler « radio player » :)

N’attendez plus pour l’installer ou faire la mise à jour et surtout, n’hésitez pas à m’envoyer un message pour me tenir informé des bugs que vous allez trouver… car il y en a, j’en suis sur ;)

http://www.baizone.be/BaizoneRadioAIR/

Musicalement vôtre :)

Il est parfois utile d’insérer une information à l’intérieur d’un swf pour pouvoir déterminer quelle est la version ou la date de compilation pendant l’exécution de celui-ci.

Voilà un petit truc que j’utilise avec FlashDevelop.

On a la possibilité, dans FlashDevelop, de lancer une ["pre-build command line"] (Project -> Properties -> Build) qui comme son nom l’indique exécute une ou des lignes de commandes AVANT la compilation du swf.
J’utilise cette propriété pour lancer un fichier .bat qui crée un fichier texte contenant une chaine de caractères représentant la date de l’exécution.
Je charge le fichier texte au format binaire au moment de la compilation du swf et j’utilise son contenu (qui est une chaine de caractères contenant la date de compilation) ou je veux et quand je veux dans mon application.

Le fichier .bat:
echo %date% %time%>version.txt

Le fichier texte créé par le .bat:
mar. 19/01/2010 20:07:03,92

Et surtout, la méthode pour récupérer ce fichier texte et comment l’utiliser.
Dans une classe (votre classe Main, par exemple) vous codez ceci:

//chargement du texte au format binaire
[Embed(source = "version.txt", mimeType = "application/octet-stream")]

//création d’une variable qui permettra de créer une occurence de la classe versionClass
private static var versionClass:Class;

//une fonction statique qui permettra de récupérer une chaine de caractère représentant la date de compilation
public static function GET_VERSION():String
{

var xmlObj:Object = new versionClass();

return xmlObj.toString();

}

//récupération de la date depuis n’importe quelle classe de votre application
trace(Main.GET_VERSION());

Bien sur, il faut que votre fichier texte se trouve à côté de votre fichier Main.as

En espérant vous avoir aidé :)

Je viens de recevoir la version papier, qui contient les nouveautés du player 10, de « Pratique d’ActionScript 3 » de Thibault Imbert.

Une brique de presque mille (1000 !!!) pages.

Ne pas me déranger pendant 2… 3 jours.  :)

Voilà, après moultes mises à jours de Java et de Vista, les problèmes d’affichages de Flex, que je suis le seul à rencontrer, visiblement, subsitent encore et toujours. J’ai donc décidé de prendre le taureau (ou le Bison) par les cornes et de passer à FlashDevelop. Install ultra facile et rapide et après quelques recherches sur les forums, j’ai pu compiler mes application Flex (projets AS) sans trop de problème. Il faut avouer que niveau doc, c’est pas toujours simple. Par contre, quand on a saisi le fonctionnement, ça devient vraiment intuitif. L’importation de librairies et packages est même nettement plus simple que dans Flex. On peut même « browser » les fichiers .swc et .swf pour connaitre leur contenu (nom des classes et des symboles). Je continue mon exploration de ce fabuleux éditeur et vous tiens au courant.

ps: et en plus, il est totalement gratuit. :)
pps: me reste également à tester les composants Flex dans FlashDevelop