Mon premier SWF9 gratos avec Flex SDK

27.07.2007 17105 4

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 y a 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:

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

<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éanmoins 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 y a un movieclip contenant 3 frames. Sur chacune d'elles, un movieclip placé sur la scène.
Main.as:

package 
{
    import flash.display.Sprite;
    
    public class Main extends Sprite
    {
        function Main()
        {
            var myButton : MyButton = new MyButton();
            addChild( myButton );
        }
    }
}

MyButton.as
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

Commentaires

03.05.2008 à 13:24 ZenBien

Merci c'est pratique pour débuter

23.11.2009 à 13:15 Benzouye

Salut !
Je suis débutant sur flex SDK, et j'ai du mal à trouver des ressources documentaire à ce sujet ... Avez-vous des pistes à me donner ?
Sachant que je ne compte utiliser que Notepad++ et le flex SDK open source ...
dans ton exemple à quoi sert l'appel de la fonction super() ?

23.11.2009 à 13:50 Michal

Salut,
Bienvenue alors dans la scène Flash
Moi je dirais que si tu n'as pas des terroristes autour de toi, qui t'ont ligoté et qui te forcent à utiliser Flex, abandonne ce truc surtout si tu débutes !
Regarde plutôt du coté Haxe de la force
Tout est open source ici aussi !
De plus, je pourrais d'avantage t'aider.
Sinon, super() ça appelle le constructeur de la classe mère (extends...)
Bon courage

24.11.2009 à 11:53 Benzouye

Ok ! Merci pour ce conseil avisé
Au départ, mon besoin était de faire du flash sans acheter Flash CS4 (800€) pour de la conception web en dialogue avec MySQL (via AMFPHP).
De quoi est capable Haxe ? As-tu des exemples web de développement 100% Haxe ?
benzouye (at) hotmail (dot) com

Laisser un commentaire

http://
×