Merci à toutes et à tous d’être venus nombreux à la journée RIA au centre de formation regart.net, et particulièrement aux personnes ayant assisté à la session « Do you FlaX? » animée par moi-même et Nicolas Gans.
Voici un petit résumé de ma présentation. Mes fichiers source sont téléchargeables au bas de cet article (ce sont des projets Flex) Les slides au format PDF sont dans la même archive.
J’ai commencé à faire de l’AS3 dans Flash, mais vu la médiocrité du panneau actions je me suis naturellement tourné vers Flex. En créant des projets ActionScript, et grâce à l’intellisense de l’éditeur de code, (et à la documentation quand même) j’ai appris progressivement les bases du langage.
J’ai ensuite commencé à développer des projets MXML pour profiter des classes mx, mais le jour où j’ai voulu créer des éléments graphiques pour ces projets, j’ai été confronté à un problème de taille : Flex en est incapable. Il est évidemment possible de préparer des assets sous forme d’images .jpg ou .png ou même et de les intégrer avec la balise [Embed], mais j’ai une longue pratique de Flash derrière moi (j’ai commencé avec Flash 3 !) et délaisser ce programme du jour au lendemain ne me disais rien. Il est vrai que la balise [Embed] permet l’intégration d’actifs de bibliothèque ou de fichiers .swf entiers, mais dans ce cas, le code présent dans le .swf est ignoré.
J’ai donc décidé de changer ma méthode de travail et d’utiliser Flash uniquement pour préparer non plus des .swf mais des .swc qui sont des bibliothèques qui peuvent contenir du code, des objets interactifs animés ou non, en vue de les intégrer dans des projets Flex ou Air.
Pour parvenir à ce résultat, il y a cinq étapes :
1/ création des actifs de bibliothèque dans Flash sous forme de MovieClip
2/ transformation de ces actifs soit en UIMovieClip, soit en MovieClipContainer (cf plus bas)
3/ export d’un .swc
4/ import du .swc dans un projet Flex
5/ utilisation des assets contenus dans le .swc à l’intérieur du projet
Un MovieClip ne peut être ajouté directement à la liste d’affichage d’un conteneur Flex, c’est la raison pour laquelle on doit le transformer soit en UIMovieClip, soit en MovieClipContainer en utilisant une extension gratuite pour Flash CS3 ou CS4, le « Flex Component Kit« . La classe UIMovieClip permet d’insérer du contenu Flash dans un projet Flex, tandis que la classe MovieClipContainer permet d’habiller un composant Flex dans Flash, puis de l’insérer dans un projet Flex.
Exemple pour le UIMovieClip (ici une petite télécommande contenant deux boutons)
<local:VideoRemote id="videoRemote" horizontalCenter="0" y="453"/>
Exemple pour le MovieClipContainer (le conteneur d’un composant VideoDisplay)
<local:VideoContainer id="videoContainer" horizontalCenter="0" y="92"> <mx:VideoDisplay id="vid" width="100%" height="100%" source="media/the_internet.f4v" autoRewind="false" autoPlay="false"/> </local:VideoContainer>
