II Flash - SWF - haxe

Transcription

1 II Flash - SWF - haxe A. Introduction On appelle communément «animation Flash» ou «application flash», un contenu animé, dynamique, interactif d un site Internet. Flash existe depuis plus de dix ans maintenant et est à l origine un logiciel d animation vectorielle. «FuturSplash Animator» devient Macromedia Flash 1.0 en 97. Puis, des fonctionnalités de programmation, s ajoutent au fur et à mesure des nouvelles versions. Flash est aujourd hui un puissant outil pour les designers et/ou développeurs, principalement orientés vers le web. Le logiciel permet de créer des fichiers «SWF» qui est un bytecode pour le «Flash Player», contenant des objets multimédia et des instructions pour manipuler ces objets (code exécuté par la machine virtuelle). L IDE Flash 8 : Depuis la version 9 du Flash Player, sortie en juin 2006, ce dernier embarque 2 machines virtuelles : la AVM1 et la AVM2. La première, permet d exécuter du bytecode ActionScript 1/2 (Flash6-8), la dernière, plus performante, de l AS3 (Flash9). Un fichier SWF contient donc du code et des données multimédia (images, sons, vidéo, polices de caractères ). 1

2 Il existe des outils «open source» pour créer d un coté, une «bibliothèque multimédia» (un SWF contenant uniquement des objets multimédia) et de l autre pour «injecter» du code dans cette bibliothèque. SWFmill est un programme en ligne de commande qui permet de créer ou d assembler des bibliothèques multimédia à partir de XML. MTASC est le «prédécesseur» de haxe, pour les développeurs Flash. C est un compilateur libre ActionScript 2 (de Motion-Twin), et injecte donc de l AS2 haxe, «injecte» du bytecode AS2 ou AS3. MTASC ou haxe couplés à SWFMill permettent de créer des applications flash très performantes et riches de contenu. B. Les «concepts Flash» Flash comporte des spécificités parmi lesquelles le «movieclip» et la «timeline» qui sont indissociables. 1. Movieclip C est un symbole de la bibliothèque multimédia, un «objet visuel», manipulable depuis le code et qui peut évoluer dans le temps. Chaque «movieclip» possède sa propre «timeline» et une «profondeur» unique. La profondeur d un movieclip détermine sa visibilité sur l «axe Z» par rapport à un autre élément. Autrement dit, si deux objets sont placés à la même position x et y, celui qui a la profondeur la plus élevée passe devant les autres. Les movieclips s imbriquent parfaitement les uns dans les autres : Si un movieclip contenant une animation d un «va et vient horizontal» est à l intérieur d un autre movieclip qui a un mouvement de haut en bas, alors on obtient une sinusoïde simulant la tombé d un flocon de neige. Un movieclip peut être associé à une classe, en programmation. Ainsi des initialisations ou des customisations peuvent être effectuées transformant un simple movieclip en bouton qui réagit aux événements de la souris, par exemple. Avec Flash9, est apparu un sous ensemble des movieclips, qui est un sprite (un movieclip sans timeline, avec une seule image clé). La scène principale d une animation Flash est un movieclip également (ou un sprite). 2. Timeline C est une échelle de temps pour un «movieclip», une succession d «images clés» qui forme une animation. Toutes les animations / applications Flash, sont cadencés à un certain rythme (images par seconde). Ce rythme est défini pour l ensemble des éléments d une même animation Flash. Si on définit 40 ips (ou fps), alors un movieclip contenant 80 «images clés» sur sa «timeline» va boucler toutes les 2 secondes. Cette cadence peut être utilisée depuis le code par l interception d un événement «onenterframe» (ou ENTER_FRAME pour flash9), provoqué à la cadence du Flash. Si on définit une fréquence de 40 ips alors la fonction «onenterframe» va être appelée toutes les 25 ms. 2

3 Pour les versions de Flash antérieures à 9, il est impossible de changer la cadence d un flash à l exécution (par le code). Principe de l encapsulation des movieclips : Soit un movieclip A qui a un mouvement rectiligne sur 80 images clés, de haut en bas : Soit B un movieclip qui est a gauche à la première image-clé, a droite à la 20 ème et de nouveau à gauche à la 40 ème. 3

4 Si le movieclip B est dans le movieclip A, alors on obtient le mouvement suivant : C. La bibliothèque multimédia et SWFMill Une bibliothèque multimédia de flash peut contenir des éléments comme : Une forme vectorielle Une image bitmap Un son ou une musique Une vidéo Une police de caractères Un bouton Un movieclip Ces éléments peuvent être placés directement sur la scène du flash ou appelés depuis le code, à l exécution. SWFMill permet de convertir un fichier XML en fichier SWF, qui servira de bibliothèque à un SWF final. Le fichier XML peut être écrit dans le dialecte simple ou avancé de SWFMill. Nous utiliserons SWFMill avec l option «simple» comme suit : swfmill simple library.xml library.swf 4

5 Pour plus d informations sur l utilisation de SWFMill consultez le site 1. Structure d un XML en mode «simple» pour SWFMill Les propriétés «globales» d un SWF, telles que : sa taille, sa cadence ou la couleur de fond, sont définis de la façon suivante : <movie width="320" height="240" framerate="12" version="7"> <background color="#ffffff"/> <frame/> <frame/> </movie> Ici, on obtient un SWF de 320 pixels de largeur par 240 pixels en hauteur, cadencé à 12 images par seconde, blanc de fond et contenant 2 images clés vides. L attribut «version» précise la version du Flash Player ciblée. 2. Exemple d un bouton Chaque balise «frame» (image clé) peut contenir des éléments à placer sur la scène directement, à l aide de la balise «place», ou des éléments à l intérieur d une balise «library» (bibliothèque), qui seront disponibles par le code depuis la bibliothèque. On utilise des images png contenues dans le dossier «assets» Library.xml : <movie width="320" height="240" framerate="12" version="9"> <clip id="upstateid" import="assets/up.png"/> <clip id="downstateid" import="assets/down.png"/> <clip id="overstateid" import="assets/over.png"/> <frame> <library> <clip id="buttonid"> <frame name="up"> <place id="upstateid" name="mcupstate" depth="1"/> </frame> <frame name="over"> <place id="overstateid" name="mcoverstate" depth="2"/> </frame> <frame name="down"> <place id="downstateid" name="mcdownstate" depth="3"/> </frame> </clip> </library> </frame> <frame/> </movie> 5

6 On compile cet exemple comme suit : swfmill simple library.xml library.swf Dans cet exemple on créer un SWF contenant 2 frames. La première image clé, contient un movieclip qui sera accessible par le code sous l identifiant «ButtonId» (attribut «id» de la balise «clip»). La deuxieme image clé est vide. Le movieclip ButtonId contient 3 images clés : «up», «over» et «down» (attribut «name» de la balise «frame»). Dans chacune des frames, on place sur la scène, des movieclips suivant leurs identifiants SWFMill (attribut «id» de la balise «place») à la profondeur définie par l attribut «depth» de la balise «place». Ces derniers peuvent être manipulés par le code grâce à leur nom sur la scène (attribut «name» de la balise «place»). La différence entre le clip «upstateid» et le «ButtonId» est que, upstate est utilisé par SWFMill pour être directement placé sur la scène et non dans la bibliothèque. Il peut être manipulé par le code grâce à son nom, alors que ButtonId peut être utilisé par le code, grâce à son identifiant et être associé à une classe. ButtonId fait parti de la bibliothèque multimédia. D. La bibliothèque multimédia et haxe haxe permet de compiler des SWF finaux en «injectant» du code dans une bibliothèque SWF créée à partir de l IDE Flash ou à l aide de SWFMill. Pour générer un SWF, il existe des options du compilateur (cf. haxe-1-i-c-1 : «listes des paramètres». 1. Paramètres de compilation -swf <file> : compile pour le Flash Player -swf-lib <fichier> : ajoute un SWF en tant que bibliothèque multimédia --flash-use-stage : affiche les objets présents sur la scène principale du SWF, bibliothèque multimedia (à utiliser si des objets visuels sont placés directement sur la première frame de la scène principale du flash). -swf-header <entête> : attribue l entête du SWF (largeur:hauteur:ips:couleur), ou écrase les paramètres spécifiés dans la bibliothèque multimédia -swf-version <version> : attribue ou change la version du SWF (6,7,8,9). Cette option est utilisée pour spécifier la version de l API Flash que nous allons utiliser pour manipuler les objets, bytecode pour la AVM1 ou AVM2. 2. Exemple d un bouton Dans l exemple qui suit, nous allons donner des instructions, de l interactivité au bouton visuel créé précédemment avec SWFMill. Voici un exemple de code en haxe, donnant le comportement de base d un bouton à un movieclip. 6

7 Exemple Flash8 : import flash.movieclip; class ButtonId extends MovieClip var mcupstate : MovieClip; var mcoverstate : MovieClip; var mcdownstate : MovieClip; public function new () gotoandstop( "up" ); onrollover = onrelease = over; onrollout = onreleaseoutside = out; onpress = down; function over () gotoandstop( "over" ); function out () gotoandstop( "up" ); function down () gotoandstop( "down" ); class Main static function main() flash.lib.current.attachmovie( "ButtonId", "button", 1 ); On lance la compilation comme suit : haxe swf swf-lib library.swf main Main Le point d entrée du programme est une «static function main» qui se trouve dans la classe spécifiée par l option main. On utilise la bibliothèque multimédia créée précédemment «library.swf». 7

8 Le programme compilé, executé par le FlashPlayer Stand Alone (sur le bureau) : Le même exemple en flash 9 : import flash.display.movieclip; import flash.display.sprite; import flash.events.mouseevent; class ButtonId extends MovieClip var mcupstate : Sprite; var mcoverstate : Sprite; var mcdownstate : Sprite; public function new () super(); gotoandstop( "up" ); addeventlistener( MouseEvent.ROLL_OVER, over ); addeventlistener( MouseEvent.ROLL_OUT, out ); addeventlistener( MouseEvent.MOUSE_DOWN, down ); addeventlistener( MouseEvent.MOUSE_UP, over ); function over ( e : MouseEvent ) gotoandstop( "over" ); function out ( e : MouseEvent ) gotoandstop( "up" ); function down ( e : MouseEvent ) gotoandstop( "down" ); 8

9 class Main static function main() var mcbutton = new ButtonId(); flash.lib.current.addchild( mcbutton ); La ligne de commande pour la compilation s écrit : haxe swf swf-lib library.swf swf-version 9 main Main On a simplement ajouté l option «-swf-version 9» en spécifiant qu on va écrire un programme destiné à l AVM2 du Flash Player 9. L API flash6-8 et l API flash9 sont différentes, mais le principe reste relativement le même. Dans cet exemple, on attache, à la scène principale (flash.lib.current), le movieclip nommé ButtonId et dont la classe porte le même nom. Aussitôt le constructeur de cette classe est appelé («function new»). Dans le constructeur, le movieclip (composé donc de 3 frames) est stoppé sur la frame nommée «up», pour se figer sur l image du bouton en état «relâché». Puis des «écouteurs» sont activés pour répondre aux événements de la souris (survol, appui, relâchement ). 9