La solution pour parvenir à cette importante amélioration peut quasiment se résumer à un sigle : FXG ( Flash XML Graphics ). Le FXG est un langage de description XML d’éléments graphiques, une déclinaison du SVG à la sauce Adobe. Il est utilisé pour « traduire » en XML, les « compositions » créées dans les applications graphiques de la CS. Les interfaces d’applications Flex pouvant être décrites en MXML, un autre langage dérivé du XML, la « traduction » FXG peut y être « naturellement » intégrée, la rendant rapidement manipulable par le développeur.
C’est là qu’arrive Flash Catalyst : son rôle est de transformer les fichiers Illustrator, Photoshop ou FXG ( exportés depuis Fireworks ou Flash Pro ) en projet Flex.

LoginBox

Dans cet exemple, nous allons voir comment intégrer dans une application Flex, une fenêtre d’identification dessinée dans Illustrator. Au niveau graphique, le choix a été volontairement porté vers une apparence « originale », à laquelle nous n’aurions pas pu parvenir à l’aide de CSS seules.
Télécharger les sources.

Les trois grandes étapes de ce processus sont :
1. la création de la maquette ( à l’aide d’Illustrator dans cet exemple )
2. la transformation des éléments graphiques en composants Flex dans FC (Flash Catalyst)
3. l’intégration des composants de l’application dans FB (Flash Builder)

Préparation de la maquette dans Illustrator

Le fichier loginBox.ai contient l’habillage proposé pour un composant d’identification. Les différents « états » et comportements du composant y sont représentés et décrits.

C’est ce fichier que nous allons importer dans Flash Catalyst et transformer en composant Flex.
En terme de préparation du document Illustrator, il n’y a pas vraiment d’obligation, mais comme d’habitude, un peu d’organisation peut faire gagner du temps par la suite.
Il peut être, par exemple, pratique de répartir les différents éléments sur plusieurs calques. Ici, deux calques ont été créés : « composant » et « notes ». On peut également grouper/dégrouper et nommer « distinctement » les différentes « entités cohérentes » du composant ( icônes, champs de saisie, bouton, …).

Flash Catalyst

Lançons maintenant FC, et créons un nouveau projet à partir de notre fichier Illustrator.

Différentes options d’importation nous sont proposées : maintien des polices, des dégradés… Dans cet exemple, nous nous contenterons des conversions automatiques.

Quelques secondes de conversion plus tard, la maquette dessinée dans Illustrator, apparait « à l’identique“ dans l’interface de FC.

A ce stade, le projet généré par FC est déjà un projet « Flex ». En l’enregistrant, nous nous apercevons que le fichier est sauvegardé au format FXP ( Flex Project ). Si l’on publie le projet ( Menu Fichier » Run Project ), il est compilé et ouvert dans un navigateur. Ce fichier pouvant être importé dans Flash Builder, le travail de FC pourrait s’achever ici… Mais nous allons aller un peu plus loin dans la préparation de ce composant d’identification. FC va en effet nous permettre de transformer les éléments de cette maquette graphique en composants interactifs.

Les différents sous-composants de notre loginBox sont :
- les deux champs de saisie
- les deux icônes
- la CheckBox de mémorisation
- le bouton de validation
- la zone d’affichage d’erreur

Les champs textes

Commençons par les champs de saisie. Nous allons sélectionner les deux élements graphiques représentant un des champs : la bordure et le champ texte. Le petit panel de Conversion ( Menu Window/HUD ) va nous permettre de transformer ces deux éléments graphiques en un composant TextInput Flex.

L’architecture Spark, introduite dans Flex 4, est basée sur la séparation entre la couche logique des composants, définie dans une classe AS3, et leur couche graphique ou « Skin », définie elle, dans un fichier MXML. Cette séparation s’appuie sur un « contrat » entre l’actionScript et la skin. Le contrat stipule entre autre, le(s) sous- élément(s) qui doivent être définis dans la skin : ces éléments sont appelés « SkinParts« . Dans le fichier AS du composant, ils sont déclarés à l’aide de la metadata [SkinPart]

Un TextInput est généralement constitué d’une bordure et d’un champ de texte éditable. Pour ce composant, une seule skinPart est définie, il s’agit du champ de texte, le Text Display ( propriété nommée labelDisplay dans le fichier AS de définition du composant spark.TextInput ). En sélectionnant notre composant, on peut voir que le panel HUD nous propose d’éditer les « parts ». Une fois ce bouton cliqué, nous avons accès à l’édition « interne » du composant TextInput.

Il nous faut à présent vérifier lequel des éléments graphiques inclus dans le composant, est considéré comme la représentation du champ de texte. Pour cela, nous sélectionnons le champ de texte, et nous nous assurerons qu’il s’agit bien de la skinPart « Text Display ».

Une fois à l’intérieur de cette skin de composant, on peut également définir l’apparence en fonction de l’état. Un TextInput défini deux états : « normal » et « disabled ». Ces états sont appelés « SkinStates », et font également partie du contrat entre le composant et sa skin : la skin d’un composant doit définir l’ensemble des skinStates déclarés dans son composant de référence.

Nous pouvons ici définir que dans l’état “disabled », notre composant aura une opacité de 30%. Pour cela :
- sélectionnez la vignette ‘Disabled’,
- sélectionnez la bordure et le champ texte,
- modifiez l’opacité dans le panel « Propriétés »

Nous pouvons maintenant re-publier le projet. Notre maquette contient à présent un champ de texte éditable.

Nous pouvons maintenant revenir sur la scène principal à l’aide du fil d’ariane affiché sous les vignettes d’états.
Les deux champs textes n’ayant pas exactement la même apparence, nous allons refaire une deuxième fois, les mêmes opérations, cette fois pour le champ « Mot de passe ».
Ce dernier devra en plus, masquer ses caractères, et pour cela nous pouvons cocher la propriété « Display as Password » du panel.

Pour rester organisé, renommons dès maintenant les deux TextInputs dans le panel de calques.

FC permet de définir quelques interactions ( lancement de transitions, de vidéos, ouverture d’url…), mais pas suffisamment pour gérer un système de « prompt » ( texte affiché par défaut ) dans un TextInput. De même pour le changement de caractère de masquage dans le champ Password. Ces fonctionnalités pourront par contre être ajoutées côté développeur, dans Flash Builder.

Passons au composant CheckBox

Pour Flex, une CheckBox est constituée d’un bouton et d’un label.
Nous allons donc sélectionner les éléments représentant la case, la coche et le label ‘Mémoriser », et comme pour le TextInput, convertir ces éléments en composant, cette fois de type CheckBox. Nous pouvons utiliser le panel HUD, ou un clic-droit sur la sélection » Convert Artwork to Component » CheckBox.

Une checkbox peut être affichée dans différents états, et doit définir une skinPart appelée « label ».
Pour définir le label :
- Double-cliquez sur le composant pour l’éditer,
- sélectionnez le champ de texte,
- convertissez-le en skinPart « label » à l’aide du panel HUD.

Nous pouvons ensuite modifier l’apparence du bouton en fonction de son état. Pour les CheckBox, 7 états sont définis : up ( dé-sélectionné normal ), over ( dé-sélectionné rollover ), down ( dé-sélectionné cliqué ), selectup up ( sélectionné normal ), selected over ( sélectionné rollover ), down ( cliqué ) et disabled.
Vous pouvez sélectionnez chaque vignette d’état et apporter les changements d’apparence nécessaires dans le panel Propriétés ( par exemple, supprimer la coche dans les états « dé-sélectionné », afficher la coche et le label en gris dans les états « rollOver », une opacité de 30% pour l’état « disabled »… )

Une fois les différents états définis vous pouvez tester dans le navigateur. La case à cocher est active.

Le composant Button

Pour créer le bouton de validation :
- sélectionnez la bordure du bouton et le champ texte de label,
- convertissez en Composant « Button »,
- double-cliquez sur le composant créé,
- sélectionnez le champ de texte et dans le panel HUD, choisissez la part « Label »
- éditez l’apparence pour les 4 états

Icônes

Dernière étape, nous allons convertir les icones vectorielles en bitmap.
- sélectionnez chaque icône
- clic-droit » rasterize

Pour finir, nous allons créér notre composant d’identification global, constitué des différents sous-composants créés et des formes d’arrière-plan.

Pour cela :
- sélectionnez les différentes parties,
- convertissez les en « Custom/Generic component« .

Un peu de ménage sur la scène, de renommage dans le panel Librairie, et notre composant est prêt à être exporté vers Flash Builder.

Plusieurs techniques sont possibles pour utiliser ce composant dans une application Flex. La plus simple pour préserver un maximum de souplesse pour le designer et le développeur, sera d’exporter le projet sous la forme d’un projet de Librairie Flex. Cela permettra, entre autre d’utiliser les composants créés dans plusieurs projets. Pour cela:
- affichez le panel Librairie,
- cliquez sur le bouton « Exporter la librairie »

Le fichier est exporté au format FXPL ( Flex Project Library). Nous verrons prochainement comment utiliser cette librairie dans une application Flex…

Avec la sortie de AIR 2.5, il est maintenant possible de développer avec Flash ou Flash Builder 4 des appli AIR s’exécutant sous Android 2.2 (Froyo).

Très bonne nouvelle donc, mais passer de l’intention à la pratique n’est pas de tout repos. Avec un peu de patience et ce tutoriel, vous devriez y parvenir !

Nous allons donc voir ensemble comment créer une appli AIR pour Android à l’aide Flash Builder 4.

Installation de AIR 2.5 pour Flash Builder 4

Tout d’abord il faut télécharger le SDK de AIR 2.5 à cette URL
http://www.adobe.com/products/air/sdk/

Si Flash Builder 4 est ouvert, le fermer.

Puis aller dans le répertoire de FB4 qui contient les SDK.
Sur windows, il se trouve par défaut ici : C:\Program Files\Adobe\Adobe Flash Builder 4\sdks

Dans ce répertoire se trouvent les différents SDKs installés :
Vérifier que le 4.1.0 est bien installé (si ce SDK n’est pas installé, il faut le télécharger à cette URL http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4, et suivre la même procédure) :

Créer une copie du répertoire 4.1.0 :

Renommer la copie en ‘AIR2.5′ :

Coller le .zip du SDK téléchargé précédemment dans ce répertoire, et extraire le .zip dans le répertoire en veillant bien à ce que les fichiers extraits écrasent les fichiers existant portant le même nom (c’est important) :

Lancer FB et aller dans les préférences. Window > preferences (Fenêtre > préférences)
Dans le moteur de recherche, taper “sdk”, puis sélectionner “Installed Flex SDKs”.
Vous pouvez voir la liste des SDKs installés, les mêmes que dans le répertoire ‘sdks’ vu précédemment. Cliquer sur le bouton ‘Add…’ situé à droite de la liste :

Dans la fenêtre ouverte,
‘Flex SDK location’ : parcourir le disque dur et sélectionner le répertoire ‘AIR2.5′ crée précédemment.
‘Flex SDK name’ : taper ‘AIR2.5′
Puis valider en cliquant sur ‘OK’ :

En principe, le SDK doit dorénavant apparaître dans la liste des SDKs installés :

Nous pouvons maintenant créer notre premier projet Android dans Flash Builder 4.

Créer un projet AIR 2.5 dans Flash Builder 4

Pour faire du AIR2.5 en ActionScript 3 pur (sans le framework Flex), il faut créer un projet « Flex Project ».
Il est en effet impossible de créer un projet AIR dans FB4 avec les projets ‘ActionScript’ ou ‘Flash Professional’.

Pour faire un projet Flex pour Android, il faudra attendre la sortie de Flex « Hero ».

Aller dans le menu ‘File > new > Flex Project’.
Donner un nom à votre projet, ici ‘PremiereAppli’
Laisser l’emplacement par défaut ou choisir un autre emplacement.
Sélectionner ‘Desktop’.
Sélectionner le SDK ‘AIR2.5′ crée précédemment.
Puis cliquer sur ‘Next’, puis à nouveau sur ‘Next’ pour arriver à la troisième étape.

Dans le champ ‘Main application file’ (la classe du document de votre projet), changer l’extension ‘.mxml’ en ‘.as’.
Donner une ID unique à votre projet en ajoutant un namespace (com.votresite.VotreAppli) dans le champ du dessous.
Puis cliquer sur ‘Finish’ :

En principe, votre projet doit apparaître dans le ‘Package Explorer’.
Dans le dossier ‘src’ (les sources), vous devriez voir votre classe du document (PremiereAppli.as) ainsi qu’un fichier ‘PremierAppli-app.xml‘ : il s’agit du fichier Descriptor, qui va vous permettre de configurer l’apparence et le comportement de base de votre appli Android.

Le fichier descriptor

Le fichier ‘PremierAppli-app.xml‘ est un fichier ‘descriptor’. Ce fichier est généré automatiquement lors de la création d’un projet AIR dans FB. Il s’agit d’un template, qu’il va falloir modifier.
Vous y trouverez une flopée de nœuds XML qui permettent de configurer notre appli. La plupart sont commentés (<!– <noeud> –>) : il faudra décommenter les noeuds que vous souhaitez renseigner.

Pour cibler AIR Android, il faudra obligatoirement renseigner certains noeuds.

Pour la liste complète des noeuds et leur description, c’est ici : http://j.mp/dB688N

Ouvrer le fichier descriptor du répertoire ‘src’ dans FB ou avec un éditeur XML.

A renseigner obligatoirement :

- Le namespace : version de AIR ciblée. Si vous ne voyez pas ceci au début du fichier, il y a un soucis :

<application xmlns="http://ns.adobe.com/air/application/2.5">

- Les ‘profiles‘ : un ‘profile’ permet de cibler tel ou tel device (appli de bureau, appli mobile…) en activant ou désactivant certaines fonctionnalités de AIR en fonction de cette cible. Pour la liste complète des ‘profiles’ AIR 2.5 et leur description, voir ici : http://bit.ly/aOlHQ3.
Si vous utilisez l’accéleromètre ou la géolocalisation dans votre appli, il faudra renseigner le noeud <supportedProfile> (penser à décommenter !) :

<supportedProfiles>mobileDevice</supportedProfiles>

- Décommenter le noeud <visible> et le passer à true :

<visible>true</visible>

Optionnel :
les icones de l’appli (pour android, ne mettre que les suivantes)

<icon>
<image16x16>icone_16x16.png</image16x16>
<image32x32>icone_32x32.png</image32x32>
<image48x48>icone_48x48.png</image48x48>
<image128x128>icone_128x128.png</image128x128>
</icon>

Pour Android, décommenter le noeud <android> qui va permettre de générer un manifest.xml dans l’appli :
<android>
…
</android>

Le certificat

Pour générer votre appli, il va vous falloir la signer avec un certificat, fichier au format .p12.

Si vous possédez déjà un tel fichier, vous pouvez l’utiliser, sinon il va falloir générer ce certificat. Flash Builder permet de le faire.

Cliquer sur l’icone ‘export release build’ :

Laisser tel quel et cliquez sur ‘next’ :

Cliquer sur ‘Create…’ pour créer un certificat :

Renseigner le certificat en indiquant votre nom, celui de votre organisation, le pays et taper un mot de passe.
Puis choisir l’emplacement de sauvegarde de votre certificat (‘Save as’). Pour ma part, j’ai créé un dossier ‘release’ dans mon projet Flex.

Pour générer le certificat, cliquez sur ‘Finish’ :

Courage, nous y sommes bientôt !

Fichiers de release

Dernière étape avant la génération de notre appli Android, vérifiez que vous avez en votre possession tous les fichiers requis. Pour ma part, j’ai crée un dossier ‘release’ dans lequel j’ai placé tous ces fichiers :

Au minimum, il vous faut :

• MonAppli.swf > l’appli
• MonAppli-app.xml > le fichier descriptor de l’appli .air
• monCertif.p12 > certificat

Voilà vous êtes prêts !

Création du fichier .apk

Dernière étape, il va nous falloir packager notre appli AIR dans un fichier .apk (le format des appli Android), qui n’est autre qu’un fichier .zip contenant pleins de fichiers ainsi que les fichiers de votre appli.

Pour packager, plusieurs options se présentent :

• Option NERD : ligne de commande…
  Voir http://polygeek.com/2958_flex_creating-your-first-air-app-for-android-using-flash-builder

• Option GEEK : tache Ant
  Voir http://unitedmindset.com/jonbcampos/2010/07/19/android-mobile-development/

• Option NOOB : package assistant pro de Serge Jespers
  http://www.webkitchen.be/package-assistant-pro/

Etant allergique à la ligne de commande et pas assez flexeux pour utiliser Ant, j’ai choisi l’option Noob, une petite appli AIR crée par Serge Jespers, qui vous package automatiquement votre .apk.

Serge, I Love You !

Après installation de package assistant pro, lancer l’appli.

Première étape, les préférences :

Where is JAVA.exe ?
Trouver le l’emplacement du fichier java.exe sur votre HDD.
Sur windows, il devrait se trouver ici : C:\Program Files\Java\jre6\bin\java.exe

Where is ADT.jar for AIR 2.5 ?
En principe, vous le trouvez ici : C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\AIR2.5\lib\adt.jar

Where is your certificate ?
Indiquez l’emplacement du certificat .p12 généré précédemment (chez moi, il se trouve dans le dossier ‘release’ de mon projet FB4).

Cliquez ensuite sur ‘Save’ :

Choisir Package APK :

1ere étape :
Indiquer l’emplacement de votre fichier descriptor (‘PremierAppli-app.xml’) :

2e étape :
Vérifier que le fichier SWF indiqué dans le champ est bien le bon. Sinon, sélectionnez le bon fichier :

3e étape :
Ajouter les éventuels fichiers additionnels de votre appli (assets, fichiers de config…) :

4e étape :
Indiquer le mot de passe de votre certificat :

5e étape :
Indiquer l’emplacement de sauvegarde et le nom de votre fichier .apk.
Puis cliquer sur ‘COMPILE‘ :

Roulements de tambour………
ça passe !

Vous retrouverez votre fichier .apk à l’emplacement indiqué :

OUF ! On a échappé à la ligne de commande ! Encore merci M. Jespers !

Conclusion

Comme vous le voyez, le process de création d’un .apk n’est pas d’une grande simplicité pour le moment… Souhaitons qu’Adobe fournisse très vite des outils intégrés à Flash Builder qui simplifient un peu tout ça.

Prochaine étape de ce tutoriel très bientôt : tester votre appli .apk sur votre device Android.

Cette présentation vidéo en deux parties de David Deraedt s’adresse aux développeurs Flex qui désirent d’avoir un aperçu des nouveautés apportées par la version 4 de Flex, actuellement disponible en version Beta.

La première partie s’intéresse à l’environnement de développement Flash builder 4 beta, et expose un certain nombre de nouvelles fonctionnalités telles que le package explorer, ou encore la génération de getter/setters.

La deuxième partie présente le framework Flex 4 Beta, en particulier la nouvelle architecture de composants et le skinning.

Liens et références ayant aidés à réaliser cette présentation

Télécharger Flex 4 Beta (IDE + framework)
http://labs.adobe.com/technologies/flashbuilder4/

Télécharger les versions les plus récentes du SDK
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Télécharger Flash Catalyst
http://labs.adobe.com/technologies/flashcatalyst/

Différences Flex3 / Flex4 (avec un guide de migration)
http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

L’architecture des composants spark en détails:
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

Etudes de workflow catalyst / FB4
http://www.rogue-development.com/blog2/2009/06/a-flash-catalyst-builder-workflow-method/

Présentation du skinning
http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Les nouveautés Flash Builder 4
http://www.adobe.com/devnet/flex/articles/flashbuilder4_whatsnew.html

David Deraedt est développeur, consultant indépendant en Flex et Air et formateur certifié Adobe chez Regart.net. Il est l’auteur d’un blog de référence sur Flex et AIR (http://www.dehats.com/drupal/) et fait profiter la communauté de nombreuses applications AIR comme Lita, un outil d’administration pour SQLLite.

Cette présentation vidéo en deux parties de David Deraedt s’adresse aux développeurs Flex qui désirent d’avoir un aperçu des nouveautés apportées par la version 4 de Flex, actuellement disponible en version Beta.

La première partie s’intéresse à l’environnement de développement Flash builder 4 beta, et expose un certain nombre de nouvelles fonctionnalités telles que le package explorer, ou encore la génération de getter/setters.

La deuxième partie présente le framework Flex 4 Beta, en particulier la nouvelle architecture de composants et le skinning.

Liens et références ayant aidés à réaliser cette présentation

Télécharger Flex 4 Beta (IDE + framework)
http://labs.adobe.com/technologies/flashbuilder4/

Télécharger les versions les plus récentes du SDK
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Télécharger Flash Catalyst
http://labs.adobe.com/technologies/flashcatalyst/

Différences Flex3 / Flex4 (avec un guide de migration)
http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

L’architecture des composants spark en détails:
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

Etudes de workflow catalyst / FB4
http://www.rogue-development.com/blog2/2009/06/a-flash-catalyst-builder-workflow-method/

Présentation du skinning
http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Les nouveautés Flash Builder 4
http://www.adobe.com/devnet/flex/articles/flashbuilder4_whatsnew.html

David Deraedt est développeur, consultant indépendant en Flex et Air et formateur certifié Adobe chez Regart.net. Il est l’auteur d’un blog de référence sur Flex et AIR (http://www.dehats.com/drupal/) et fait profiter la communauté de nombreuses applications AIR comme Lita, un outil d’administration pour SQLLite.

Depuis l’apparition de Flex Builder 2 puis 3, de plus en plus de codeurs issus du monde Flash adoptent cet outil de développement qui améliore sensiblement leur quotidien. Si Flex est à ce jour un des tous meilleurs outil pour qui veut développer des RIA ou des sites, il reste extrêmement limité sur le plan du design graphique. De son côté, si Flash n’est pas vraiment satisfaisant pour coder en AS3 (pauvreté de l’éditeur de code), il n’en demeure pas moins un outil de graphisme et d’animation insurpassable pour qui est soucieux du design de ses applications.

Dès lors, comment profiter du meilleur des deux mondes ? Cette série de trois tutoriels vidéo fera un tour d’horizon des différentes techniques permettant d’interconnecter ces deux outils : utilisation des métadonnées et des librairies .swc dans Flash, développement de projet Flash avec Flex et design de composants Flex dans Flash.

Dans la troisième partie de ce tutoriel, Vincent Maitray aborde les différentes façons d’utiliser Flash pour créer l’habillage graphique de composants Flex :
- les CSS permettant de skinner tous les composants de Flex
- les MovieClipContainer créés dans Flash et qui peuvent contenir des composants Flex
- les UIMovieClip crées dans Flash, sorte de MovieClip utilisables dans Flex

Vincent Maitray est développeur et designer freelance AS3/Flex/Flash Media Server spécialisé dans la vidéo et formateur Flash Media Server/Vidéo chez Regart.net. Il est l’auteur de sites pour des clients comme Tse-Tse ou PetitPan et travaille en collaboration avec des artistes sur des applications artistiques connectées (In my room avec Agnès de Cayeux).

Nicolas Gans est développeur et designer Flash/ActionScript 3/Flex et formateur certifié Adobe Flash/ActionScript chez Regart.net. Il anime le portail Flashxpress.net et collabore avec des artistes sur des projets de Net Art (dotred.fr, projet de David Guez).

[Ce tutoriel est transposé d'une conférence donnée lors de la journée RIA au centre de formation Regart.net le 30 avril 2009]

Cliquez ici pour télécharger le flex component kit pour Flash CS3 évoqué dans le tutoriel.

Les autres parties sont visibles ici :

Do you Flax ? Le workflow Flash/Flex [part 1]

Do you Flax ? Le workflow Flash/Flex [part 2]

Depuis l’apparition de Flex Builder 2 puis 3, de plus en plus de codeurs issus du monde Flash adoptent cet outil de développement qui améliore sensiblement leur quotidien. Si Flex est à ce jour un des tous meilleurs outil pour qui veut développer des RIA ou des sites, il reste extrêmement limité sur le plan du design graphique. De son côté, si Flash n’est pas vraiment satisfaisant pour coder en AS3 (pauvreté de l’éditeur de code), il n’en demeure pas moins un outil de graphisme et d’animation insurpassable pour qui est soucieux du design de ses applications.

Dès lors, comment profiter du meilleur des deux mondes ? Cette série de trois tutoriels vidéo fera un tour d’horizon des différentes techniques permettant d’interconnecter ces deux outils : utilisation des métadonnées et des librairies .swc dans Flash, développement de projet Flash avec Flex et design de composants Flex dans Flash.

Dans la seconde partie de ce tutoriel en trois épisodes sont abordés :
- la création de fichiers .swc dans Flex Builder au travers d’un « Flex Library Project »
- comment faire un projet Flash en codant et en compilant avec Flex Builder au travers d’un « ActionScript Project »
- l’intégration d’une bibliothèque externe (MovieClip créés et animés dans Flash) au sein d’un projet ActionScript Flex via deux méthodes distinctes : l’embed d’un .swf utilisé comme bibliothèque externe et l’utilisation d’une bibliothèque Flash externe compilée en .swc au sein de Flash

Vincent Maitray est développeur et designer freelance AS3/Flex/Flash Media Server spécialisé dans la vidéo et formateur Flash Media Server/Vidéo chez Regart.net. Il est l’auteur de sites pour des clients comme Tse-Tse ou PetitPan et travaille en collaboration avec des artistes sur des applications artistiques connectées (In my room avec Agnès de Cayeux).

Nicolas Gans est développeur et designer Flash/ActionScript 3/Flex et formateur certifié Adobe Flash/ActionScript chez Regart.net. Il anime le portail Flashxpress.net et collabore avec des artistes sur des projets de Net Art (dotred.fr, projet de David Guez).

[Ce tutoriel est transposé d'une conférence donnée lors de la journée RIA au centre de formation Regart.net le 30 avril 2009]

Les autres parties sont visibles ici :

Do you Flax ? Le workflow Flash/Flex [part 1]
Do you Flax ? Le workflow Flash/Flex [part 3]

Depuis l’apparition de Flex Builder 2 puis 3, de plus en plus de codeurs issus du monde Flash adoptent cet outil de développement qui améliore sensiblement leur quotidien. Si Flex est à ce jour un des tous meilleurs outil pour qui veut développer des RIA ou des sites, il reste extrêmement limité sur le plan du design graphique. De son côté, si Flash n’est pas vraiment satisfaisant pour coder en AS3 (pauvreté de l’éditeur de code), il n’en demeure pas moins un outil de graphisme et d’animation insurpassable pour qui est soucieux du design de ses applications.

Dès lors, comment profiter du meilleur des deux mondes ? Cette série de trois tutoriels vidéo fera un tour d’horizon des différentes techniques permettant d’interconnecter ces deux outils : utilisation des métadonnées et des librairies .swc dans Flash, développement de projet Flash avec Flex et design de composants Flex dans Flash.

Dans la première partie de ce tutoriel en trois épisodes sont abordés :
- l’utilisation des metadonnées Flex dans Flash CS4 et notamment la métadonnée [Embed] qui permet d’inclure des éléments multimédias externes dans un .swf
- la définition et l’intégration de librairies .swc dans Flash CS4
- l’utilisation du framework Flex (package mx.*) à travers l’exemple de la classe WebService issue du rpc.swc : chargement d’un webService via la méthode loadWSDL(), appel des méthodes distantes du webservice et traitement du résultat

Vincent Maitray est développeur et designer freelance AS3/Flex/Flash Media Server spécialisé dans la vidéo et formateur Flash Media Server/Vidéo chez Regart.net. Il est l’auteur de sites pour des clients comme Tse-Tse ou PetitPan et travaille en collaboration avec des artistes sur des applications artistiques connectées (In my room avec Agnès de Cayeux).

Nicolas Gans est développeur et designer Flash/ActionScript 3/Flex et formateur certifié Adobe Flash/ActionScript chez Regart.net. Il anime le portail Flashxpress.net et collabore avec des artistes sur des projets de Net Art (dotred.fr, projet de David Guez).

[Ce tutoriel est transposé d'une conférence donnée lors de la journée RIA au centre de formation Regart.net le 30 avril 2009]

Les autres parties sont visibles ici :

Do you Flax ? Le workflow Flash/Flex [part 2]

Do you Flax ? Le workflow Flash/Flex [part 3]

Ces dernières années ont été marquées par l’avènement du navigateur en tant qu’environnement d’exécution d’applications, par opposition au modèle traditionnel qui voulait que celles-ci s’exécutent directement sur le bureau. Mais, aujourd’hui, des technologies comme Adobe AIR permettent d’exécuter sur ce même bureau des application basées sur les technologies du web, telles que Flash et HTML. Cette tendance a pu sembler anachronique, voire paradoxale, pour certains observateurs. Mais n’est-ce pas plutôt la pertinence de la distinction entre ces deux types d’application qui serait remise en cause ?

David Deraedt est développeur, consultant en Flex et Air et formateur certifié Adobe chez Regart.net. Il est l’auteur d’un blog de référence sur Flex et AIR (http://www.dehats.com/drupal/) et fait profiter la communauté de nombreuses applications AIR comme Lita, un outil d’administration pour SQLLite.

[Conférence donnée lors de la journée RIA au centre de formation Regart.net]

Dernièrement lors de la réalisation d’un projet, j’ai eu besoin d’utiliser l’évènement RESIZE de la classe Stage, mais je n’étais pas entièrement satisfait de son fonctionnement. En effet, il est diffusé de manière répétée (et incontrôlable…) lorsque l’utilisateur redimensionne la scène, et cela était parfaitement incompatible avec ce que je voulais faire, à savoir une boucle sur plusieurs dizaines de Sprites avec repositionnement de chacun d’entre eux + mouvement. J’ai donc crée cette petite classe StageResizeManager qui diffuse un évènement au début du resize (RESIZE_START), puis ensuite l’évènement classique est diffusé de manière répétitive lors du redimensionnement (notez qu’il ne s’appelle plus RESIZE mais RESIZE_PROGRESS ) et enfin un dernier évènement (RESIZE_END) est diffusé à la fin du redimensionnement, c’est à dire n millisecondes après la fin de détection de mouvement de souris continu lors d’un resize. C’est lui qu’il est intéressant d’écouter.

La classe est un singleton, et la méthode qui permet de l’instancier prend deux paramètres. Le premier, pStage est obligatoire  et c’est la référence à la scène, le second est facultatif, sa valeur par défaut est de 250ms, et représente le délai après lequel l’évènement RESIZE_END est diffusé.

Le fichier d’exemple qui contient la classe est un projet Flex 3 qui ne fait rien d’autre que de tracer PIM, PAM et POUM en fonction des évènements diffusés. Cette classe n’utilise aucune particularité du framework Flex, elle est donc entièrement compatible avec tout projet en AS3.

################# edit du 8/05/2009
Après plusieurs demandes, j’ai ajouté les sources au format Flash CS3/CS4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

//-----------------------------------------------------------------------------------
 
/*
	Copyleft (¢) 2009  Vincent Maitray - www.electrofrog.com
 
	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:
 
	The above copyright notice and this permission notice shall be included in
	all copies or substantial portions of the Software.
 
	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	THE SOFTWARE.
 
	Mention to the author would be appreciated !
*/
 
//-----------------------------------------------------------------------------------
 
package com.electrofrog.utils
{
	import com.electrofrog.events.StageResizeManagerEvent;
 
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.TimerEvent;
	import flash.ui.Mouse;
	import flash.utils.Timer;
 
	/**
	 * Handle the resize process of the stage more accuratly than the simple Event.resize event.
	 *
	 * @param pStage The stage instance to be listen to.
	 * @param pResizeEndDelay The delay in ms after which the ResizeManagerEvent.STAGE_RESIZE_END event is dispatched.
	 *
	 * @author Vincent Maitray
	 * @date April 03, 2009.
	 */
	public class StageResizeManager extends EventDispatcher
	{
 
		private static var _instance:StageResizeManager;
		private var _stage:Stage;
		private var _t1:Timer;
		private var _resizeEndDelay:int;
 
		/**
		 * Method for instanciating this class as a Singleton
		 */
		public static function getinstance( pStage:Stage, pResizeEndDelay:int = 250 ):StageResizeManager
		{	
 
			if ( !_instance )
				_instance = new StageResizeManager( new SingletonEnforcer(), pStage, pResizeEndDelay );
			return _instance;
 
		}
 
		/**
		 * hidden constructor.
		 * @private
		 */
		public function StageResizeManager( se:SingletonEnforcer, pStage:Stage, pResizeEndDelay:int )
		{
 
			if ( !se )
				throw( new Error( "operator 'new' is not not allowed with singleton classes. Use ResizeManager.getInstance() instead !" ) );
 
			_stage = pStage;
			_resizeEndDelay = pResizeEndDelay;
 
			_stage.addEventListener( Event.RESIZE, onStageResize );
 
			_t1 = new Timer( 50, 0 );
			_t1.addEventListener( TimerEvent.TIMER, onTimer );
 
		}
 
		/**
		 * Fired when the user resizes the stage
		 *
		 * @param e Event
		 */
		private function onStageResize( e:Event ):void
		{
 
			if( !_t1.running )
			{
 
				dispatchEvent( new StageResizeManagerEvent( StageResizeManagerEvent.STAGE_RESIZE_START, false, false ) );
				_t1.start();
 
			}
			else
			{
 
				dispatchEvent( new StageResizeManagerEvent( StageResizeManagerEvent.STAGE_RESIZE_PROGRESS, false, false ) );
				_t1.reset();
				_t1.start();
 
			}
 
		}
 
		/**
		 * Fired each pResizeEndDelay ms ( eg 250 ) when the timer is running.
		 *
		 * @param e Event
		 */
		private function onTimer( e:TimerEvent ):void
		{
 
			var t:Timer = e.currentTarget as Timer
			var count:int = t.currentCount * t.delay;
 
			if( count > _resizeEndDelay )
			{
 
				_t1.reset();
				dispatchEvent( new StageResizeManagerEvent( StageResizeManagerEvent.STAGE_RESIZE_END, false, false ) );
 
			}
 
		}
 
	}
 
}
 
/**
 * Dummy class, part of the Singleton subsystem
 */
class SingletonEnforcer
{
}

Approche de conception d’une application

Il existe deux types de créateurs de sites Web, il y a ceux qui divisent leur application en une série de SWF autonomes, qui les chargent ensuite dans un SWF principal et le tout étant propulsé par un script unique, de nos jours, une classe document.

Et d’autres préfèrent  utiliser la timeline de flash et considérent les Frames comme des écrans :
frame1 = préloader, frame 2 = écran accueil, frame3 = Biographie, etc. Et naviguer d’un écran à l’autre à l’aide gotoAndStop() en fonction des clicks utilisateur.

Une méthode est elle meilleure que l’autre ? Bof, je ne pense pas, c’est surtout dépendant de l’application à réaliser et des affinités du réalisateur avec le code AS3 ou l’IDE Flash. La deuxième est du code spaghettis ? Pas forcément, cela peut être très propre, même si plusieurs images clefs avec code, comme il y a moyen de faire du code spaghettis au sein d’un script unique.

D’ailleurs, la deuxième méthode s’apparente aux « States » de Flex , dans Flex, c’est la seule possibilité de modifier certaines propriétés de contrôles qui sont impossibles à changer au RunTime.

Attention toutefois que la deuxième méthode va recharger et réinstancier les éléments instanciés par code, il faut vérifier l’état de mémoire et regarder à ne pas la surcharger par des redondances au fil de la navigation.

Même en utilisant la première méthode, une Timeline de 2 images est intéressante afin de faire un preloader intégré à la Main application.

Dès lors, est-il possible de créer plusieurs images clefs par code?

Sous Flash .. « Dessine moi une Timeline.. »

Sous Flash, rien de plus simple, on crée les frames nécessaires, on place les éléments, le code et on compile.

Mais justement, comment Flash fait il ? Car c’est en wysiwyg et le code ou les directives de création de frames nous échappent.

Créons un FLA « test.fla », créons 2 images Clefs vides et compilons. Nous obtenons un SWF contenant 2 frames vides, rien d’autre.
A présent, ajoutons une instruction stop() ; sur chaque frame. Nous obtenons un SWF avec 2 Frames vides et une Classe MainTimeline que voici :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

package test_fla
{
    import flash.display.*;
 
    dynamic public class MainTimeline extends MovieClip
    {
 
        public function MainTimeline()
        {
            addFrameScript(0, this.frame1, 1, this.frame2);
            return;
        }// end function
 
        function frame1()
        {
            stop();
            return;
        }// end function
 
        function frame2()
        {
            stop();
            return;
        }// end function
 
    }
}

En AS2, on aurait trouvé 2 frames avec du code dans chaque frame. En AS3, les choses sont différentes ! Flash crée une classe document et le code associé à chaque frame est une fonction dont la référence est ajoutée par code à chaque frame vide. Ce qui nous permet de découvrir l’instruction addFrameScript.

Si on consulte la classe MovieClip du globalPlayer.swc, on trouve cette méthode. Elle est donc bien accessible que via la classe MovieClip, voilà, pourquoi, une classe possèdant une Timeline doit forcément étendre MovieClip et non Sprite qui est au départ la valeur par défaut que le player instancie afin de créer la scène d’affichage.

En AS3 ..  « Code moi une Timeline.. »

Pas de problème, vous créer une MainClass qui étend MovieClip. Vous tracez la propriété totalFrames et vous constatez qu’il  y a 1 frame par défaut. Qu’à cela ne tienne, vous aller dans la doc chercher cette fameuse méthode addFrame ou équivalent.. C’est là que ça se complique.. vous n’en trouvez pas !
Vous essayer d’utiliser addFrameScript, peut être que le compilateur va créer les frames en fonction de ça.. Vous compilez et..  Kedal, nada, zero !! toujours 1 frame :S

La classe MovieClip possède bien en Array scenes, mais il est en lecture seule! Donc, même on créeant un objet à l’aide la classe Scene, impossible de l’ajouter à l’objet MovieClip.

Flash crée plusieurs images Clefs!!, donc, soit, il utilise des instructions cachées, soit une directive de compilation cachée, soit un argument à l’invocation du compilateur.. !? A moins que le compilateur de Flash soit différent du mxmlc??

On pourrait envisager d’écrire une classe Timeline qui imiterait toutes les propriétés et méthodes de la classe MovieClip en y ajoutant addFrame etc.
Mais cela ne sera pas une vraie timeline exécutée automatiquement par le player..

On ouvre une console DOS, on lance la commande:  mxmlc.exe -help -advanced -details

Et là, une longue liste d’arguments apparaît.. on scrute.. mais pas le moindre signe addFrame ou addScene à l’horizon.. Sauf quand même qu’une commande attire notre attention.. La commande

-frame.frame ayant l’alias -frame.

Sous FlashDevelop, on crée un nouveau projet AS3,  on ouvre les propriétés du projet, onglet Compiler Options, et dans Additional Compiler Options, on ajoute :

-frame frame2 Main

Comme il est obligatoire de passer un Label et une classe à associer en paramètre, on l’appelle frame2 et on lui passe la classe Main en se disant qu’il ne la dupliquera pas et que cela aura le même effet qu’ajouter une image en Flash par la touche F5.

On étend la classe MovieClip et on ajoute un test du nombre de frames :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package
{
    import flash.display.*;
 
	public class Main extends MovieClip
    {
 
		public function Main()
        {
 
			trace(this.totalFrames);
 
        }
 
    }
}

On compile, les yeux rivés sur la fenêtre Output.. et là, un chiffre apparaît ! on peut lire « 2 » !! :D

Génial !! Ca y est !!! Ca fonctionne!! On a bien 2 frames !!

Ensuite, on va ajouter du code lié aux frames  comme ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package
{
    import flash.display.*;
 
	public class Main extends MovieClip
    {	
 
		public function Main()
        {
			trace(this.totalFrames);
			addFrameScript(0, frame1);
			addFrameScript(1, frame2);
        }// end function
 
		private function frame1():void
        {
 
			stop();
			trace(this.currentFrameLabel);
			nextFrame();
        }// end function
 
		private function frame2():void
        {
                        stop();
			trace(this.currentFrameLabel);
        }// end function
 
    }
}

On teste et tout va bien ! On a créé en code une vraie Timeline, on peut addChilder des objets dans chaque frame et y associer du code.. Voilà, c’est parfait pour un preloader en frame1 et le reste en frame2.

Conclusion

Il est tout à fait possible de créer une Timeline de la manière vue ci avant, pour ajouter des frames, il faut répéter l’option de compilation -frame Label Class autant de fois que de frame désirés.

-frame frame2 Main
-frame frame3 Main
-frame frame4 Main
..

Etant donné que pour chaque frame, on doit associer une classe, il peut être plus simple de créer une classe pour chaque frame et de ne plus utiliser les addFrameScript dans la classe de frame1

Exemple, on peut créer les classes  Frame1.as, Frame2.as, frame3.as, etc Et les associer aux frames correspondants.  Frame1 étant la classe document.

La classe devant contrôler la tête de lecture ou devant utiliser des méthodes ou propriétés de MovieClip devra étendre MovieClip, Dans les autres cas, les frames peuvent étendre Sprite, il n’y aura pas d’erreur de compilation, cela suffit si elle ne sont destinées qu’a addChilder des objets.

Il est tout à fait possible de créer un SWF dont la classe document est un Sprite et contenant une Timeline de plusieurs frames, le SWF fonctionnera, il lira la timeline en boucle, mais aucune méthode ni propriété de Movieclip ne sera accessible, nous n’aurons aucun contrôle dessus, même pas un stop() et surtout, impossible d’y insérer du code. Si on essaye quand même, cela générera une erreur de compilation.

Les gens aimant le principe des frames représentant les états de leurs applications peuvent le faire en AS3 pur ! ;)

Ceux qui aiment avoir un Preloader en frame1 et le reste en frame2 seront également ravis.. dans ce cas, la classe Preload devra être la documentClass et étendre MovieClip.

De cette manière on peut créer l’équivalent des symboles MovieClip sous forme de SWF.
Ceux qui possèdent Flash peuvent faire leurs MC dans Flash et exporter en SWC.