Flex SDK est d'abord, comme son nom l'indique,
un kit de développement. Il comprend, pour le plus gros, le
framework de composants Flex et un
compilateur MXML et AS3 gratuit. Flex SDK est inclus dans Flex Builder 2 ou 3 d'Adobe, qui est une solution payante de développement basée sur Eclipse.
Autrement dit, voilà
tout ce qu'il faut pour coder gratuitement des applications déstinées au
Flash Player 9 et sa nouvelle machine virtuelle : l'AVM2
Installation :
Il est
nécessaire d'avoir installé le
runtime Java (JRE) au préalable. A télécharger depuis :
http://www.java.com/fr/download/manual.jsp
Télécharger gratuitement Flex SDK 2 depuis :
http://www.adobe.com/products/flex/downloads/
OU
Télécharger gratuitement Flex SDK 3 (beta) depuis :
http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html
Le dézipper dans un dossier. Il n'y a aucune installation particulière.
Le compilateur AS3 et MXML se trouve dans le dossier
bin, le framework de composants Flex est dans le dossier
frameworks sous forme compilée (dans un SWC) et/ou les sources.
Utilisation :
Le compilateur AS3 et MXML est appelé depuis l'exécutable mxmlc.exe (dans le dossier
bin). Il prend
en entrée une
classe AS3 ou un
fichier MXML (fichier XML de description d'une application Flex) et
délivre un SWF9 complet (avec des objets bibliothèque enrobés s'il ya besoin)
%chemin vers mxmlc%\mxmlc.exe MaClasse.as
ou
%chemin vers mxmlc%\mxmlc.exe MaDescription.mxml
Exemples :
Le but est d'obtenir un
SWF9 contenant un
bouton personnalisé (états survolé, appuyé..).
Etant donné les diverses utilisations du compilateur de Flex, il ya 3 exemples:
- Flex + AS3
- Flex + MXML
- Flex + SWFMill + AS3
Exemple 1 : Flex + AS3
Flex comprend un
mécanisme d'intégration des objets de bibliothèque à la compilation grâce à une balise
Embed (disponible en mode AS3 et MXML), c'est une sorte de directive de compilation. On peut, donc, construire avec cet outil, un
SWF9 complet, comprenant des objets de bibliothèque et du code.
Main.as
<![CDATA[
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
function Main()
{
var myButton : MyButton = new MyButton();
addChild( myButton );
}
}
}
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.Bitmap;
class MyButton extends Sprite
{
[Embed(source="../library/assets/up.png")]
public var UpState : Class;
[Embed(source="../library/assets/over.png")]
public var OverState : Class;
[Embed(source="../library/assets/down.png")]
public var DownState : Class;
function MyButton()
{
super();
var mcUpState : Bitmap = new UpState();
addChild( mcUpState );
addEventListener( MouseEvent.ROLL_OVER, over );
addEventListener( MouseEvent.ROLL_OUT, out );
addEventListener( MouseEvent.MOUSE_DOWN, down );
addEventListener( MouseEvent.MOUSE_UP, over );
}
private function over ( e : MouseEvent ) : void
{
removeChildAt( 0 );
var mcOverState : Bitmap = new OverState();
addChild( mcOverState );
}
private function out ( e : MouseEvent ) : void
{
removeChildAt( 0 );
var mcUpState : Bitmap = new UpState();
addChild( mcUpState );
}
private function down ( e : MouseEvent ) : void
{
removeChildAt( 0 );
var mcDownState : Bitmap = new DownState();
addChild( mcDownState );
}
}
]]>
La compilation en ligne de commande :
mxmlc src/Main.as -o Main.swf -default-size 100 50
src/Main.as est le point d'entrée du programme (appel du constructeur)
Main.swf est le nom du SWF9 final
100 50 sont la largeur et la hauteur du SWF de sortie
Cet exemple insiste sur l'enrobage des objets de bibliothèque (
Assets), ce n'est pas un code optimisé. Les lignes intéressantes sont :
[Embed(source="../library/assets/up.png")]
public var UpState : Class;
{...}
var mcUpState : Bitmap = new UpState();
addChild( mcUpState );
D'une manière générale, on peut voir que l'objet (ici une image PNG) est
associé à une classe. C'est cette classe qu'on instancie, et que l'on ajoutera (
addChild) à la
display list. Dans la plupart des cas, Flex accordera l'objet à la bonne classe (une image est un Bitmap). Des difficultés peuvent apparaître
entre des
Sprites et
MovieClips (un movieclip à une frame est un Sprite...).
Télécharger l'exemple
Exemple 2 : Flex + MXML
L'exemple ci-dessous, n'a pas grande utilité si ce n'est une petite démonstration de l'utilisation du framework Flex et du language déclaratif de Flex, le MXML.
Le composant
Button est redessiné avec les images passées en paramètre dans la balise
embed.
La finalité est la même : obtenir un SWF9 complet et gratuitement:
Main.mxml
<![CDATA[
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
horizontalAlign="left"
verticalAlign="top">
<mx:Button upSkin="@Embed(source='../library/assets/up.png')"
overSkin="@Embed(source='../library/assets/over.png')"
downSkin="@Embed(source='../library/assets/down.png')"
width="64"
height="16"/>
</mx:Application>
]]>
La compilation en ligne de commande :
mxmlc src/Main.mxml -o Main.swf -default-size 100 50
src/Main.mxml est le MXML d'entrée
Main.swf est le nom du SWF9 final
100 50 sont la largeur et la hauteur du SWF de sortie
On peut voir une petite différence de syntaxe entre le MXML et l'AS3 pour le meta EMBED : @. Le mécanisme d'enrobage reste inchangé.
Télécharger l'exemple
Exemple 3 : Flex + SWFMill + AS3
L'utilisation de SWFMill avec Flex se révèle obsolète. L'exemple ci-dessous est néamoins intéressant car il décèle des problèmes (à la compilation et à l'exécution) liés à l'utilisation de bibliothèques externes (souvent des bibliothèques anciennes). Le SWF utilisé en tant que bibliothèque d'objets est obtenu avec SWFMill (cf
Tuto : Ma première bibliothèque SWF gratos avec SWFMill)
Dans la bibliothèque d'objets il ya un movieclip contenant 3 frames. Sur chacune d'elles, un movieclip placé sur la scène.
Main.as
<![CDATA[
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
function Main()
{
var myButton : MyButton = new MyButton();
addChild( myButton );
}
}
}
]]>
MyButton.as
<![CDATA[
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
[Embed(source="../library/library.swf", symbol="ButtonId")]
public class MyButton extends MovieClip
{
public var mcUpState : Sprite;
public var mcOverState : Sprite;
public var mcDownState : Sprite;
function MyButton()
{
super();
gotoAndStop( "up" );
addEventListener( MouseEvent.ROLL_OVER, over );
addEventListener( MouseEvent.ROLL_OUT, out );
addEventListener( MouseEvent.MOUSE_DOWN, down );
addEventListener( MouseEvent.MOUSE_UP, over );
}
private function over ( e : MouseEvent ) : void
{
gotoAndStop( "over" );
}
private function out ( e : MouseEvent ) : void
{
gotoAndStop( "up" );
}
private function down ( e : MouseEvent ) : void
{
gotoAndStop( "down" );
}
}
}
]]>
La compilation en ligne de commande :
mxmlc src/Main.as -o Main.swf -default-size 100 50
src/Main.as est le point d'entrée du programme (appel du constructeur)
Main.swf est le nom du SWF9 final
100 50 sont la largeur et la hauteur du SWF de sortie
Dans cet exemple on peut voir que la balise
Embed, est directement associé à la classe MyButton. Cette dernière doit
impérativement être
publique, d'où la séparation des 2 classes. (En AS3, une bibliothèque d'asset doit être
publique, impossible, a priori, de la mettre en
internal dans un même fichier).
Pour éviter une erreur à l'exécution, il faut déclarer les moviclips placés sur la scène, sur les 3 frames, en tant que
variables, movieclips, de la classe associée à l'objet (ici le nom de liaison
ButtonId)
Télécharger l'exemple
