II Flash - SWF

Transcription

II Flash - SWF

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…).
Support de cours « haxe et les outils open source de développement web »
2ème partie : Flash – SWF – haXe
2007 / 2008 - M.Romecki
1
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.
2007 / 2008 - M.Romecki
2
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.
2007 / 2008 - M.Romecki
3
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
2007 / 2008 - M.Romecki
4
Pour plus d’informations sur l’utilisation de SWFMill consultez le
site http://swfmill.org/
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>
2007 / 2008 - M.Romecki
5
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.
2007 / 2008 - M.Romecki
6
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 ()
{
}
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 ».
2007 / 2008 - M.Romecki
7
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();
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 )
{
}
function down ( e : MouseEvent )
{
gotoAndStop( "down" );
}
}
2007 / 2008 - M.Romecki
8
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…).
2007 / 2008 - M.Romecki
9

II Flash - SWF

Transcription

Documents pareils

version texte

Flash-Banniéres Web - Alternative Formation

Créer un bouton interactif sans écrire une ligne de code

insérer une vidéo avec Flash 8.

Logiciels : Animations - MS.LP

PHR004 : Mécanique Ondes Directives générales pour la formation

Classe de 1 F10 TP D` APPAREILLAGE LTI R

questions/réponses - Crédit Agricole Toulouse 31

Iris Jacquier avec un Voigtländer Bessa R Dessin d`Elcet pour

REDDING Jean-Laurent