ActionScript FacileChapitre 10Cr&#233;ation du Graphisme des Composants AS3 Facile

Matthieu

Article original : ActionScript-Facile.com - Création du Graphisme des Composants AS3 Facile

Commentez cet article : Commentez

- Titre : ActionScript FacileChapitre 10Cr&#233;ation du Graphisme des Composants AS3 Facile

- Auteur : Matthieu

- Parution : 8 décembre 2010

- Licence : Copyright ® 2010 Matthieu - www.actionscript-facile.com. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Conception du graphisme d'un composant AS3

- II-A. Création des classes skins

- II-B. Création des graphismes

- III. Utilisation des composants

- IV. Conclusion

- IV-A. Évolutions des fonctionnalités

- IV-B. Sources commentées

- IV-C. Quels graphismes avez-vous créé pour les composants AS3 Facile ?

- V. Remerciements / Téléchargements

I - Introduction

Dans ce nouveau chapitre, nous allons aborder de nouvelles fonctionnalités du framework de composants AS3 facile :

- la création des graphismes des composants.

- le changement de graphisme pendant l'exécution de l'application Flash.

II - Conception du graphisme d'un composant AS3

Le Chapitre 3 - Les fonctionnalités d'une bibliothèque de composants AS3, montre une fonctionnalité particulièrement intéressante des composants AS3 Facile : chaque composant est personnalisable graphiquement.

Pour personnaliser graphiquement un composant, deux étapes suffisent :

- créer la classe de Skin pour le composant.

- créer les graphismes dans un fichier fla (MoviesClip, images, dessin vectoriel...).

II-A - Création des classes skins

La première étape consiste à créer la classe de skin pour le composant choisi.

Cette classe de "graphisme" étend la classe Skin du framework AS3 facile et contient la configuration des graphismes du fla qui seront utilisés. Appelons cette classe DefaultComponentSkin.as.

Pour chaque élément du composant, nous affectons une classe graphique (un movieclip ou un sprite par exemple). C'est-à-dire que chacun des graphismes du fla correspond à un élément du composant.

Le graphisme de l'élément est ensuite associé à une constante de la classe du composant.

Tous les composants possèdent des constantes de skin.

Ci-dessous, un exemple illustrant mes explications.

Pour le composant Button, dans le code source de cette classe, il y a trois constantes :

Button.as

static public const BUTTON_UP_SKIN:String = "BUTTON_UP_SKIN";
static public const BUTTON_DOWN_SKIN:String = "BUTTON_DOWN_SKIN";
static public const BUTTON_OVER_SKIN:String = "BUTTON_OVER_SKIN";

Le composant ComboBox possède des constantes supplémentaires, il est beaucoup plus complet.

ComboBox.as

/**
* On définit les constantes de skin
*/
public static const COMBOBOX_BUTTON_OVER_SKIN:String = 'COMBOBOX_BUTTON_OVER_SKIN';
public static const COMBOBOX_BUTTON_UP_SKIN:String = 'COMBOBOX_BUTTON_UP_SKIN';
public static const COMBOBOX_BUTTON_DOWN_SKIN:String = 'COMBOBOX_BUTTON_DOWN_SKIN';

public static const COMBOBOX_ELEMENT_OVER_SKIN:String = 'COMBOBOX_ELEMENT_OVER_SKIN';
public static const COMBOBOX_ELEMENT_UP_SKIN:String = 'COMBOBOX_ELEMENT_UP_SKIN';
public static const COMBOBOX_ELEMENT_DOWN_SKIN:String = 'COMBOBOX_ELEMENT_DOWN_SKIN';

Puis, dans la classe DefaultComponentSkin.as, il suffit d'affecter chaque constante du composant à l'élément graphique du fla.

Voici deux exemples de Skin différents pour le composant Button :

com.as3facileexemple.skin.classic.DefaultButtonSkin.as

package com.as3facileexemple.skin.classic
{
// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
// Provient de ui.swc (créé avec la compilation de UI.fla)
import com.as3facile.skin.button.ButtonDownSkin;
import com.as3facile.skin.button.ButtonOverSkin;
import com.as3facile.skin.button.ButtonUpSkin;

import com.actionscriptfacile.skin.Skin;
import com.actionscriptfacile.ui.button.Button;

/**
* Définition du skin utilisé pour un composant Button
*
* @author Matthieu
*/
public class DefaultButtonSkin extends Skin
{

public function DefaultButtonSkin()
{
// Affectation de chaque élément du bouton à un skin
setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin );// élément du bouton, classe graphique (movieclip) associée
setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin );
setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin );
}

}

}

com.as3facileexemple.skin.classic.DefaultButtonSkin2.as

package com.as3facileexemple.skin.classic
{
// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
// Provient de ui.swc (créé avec la compilation de UI.fla)
import com.as3facile.skin.button.ButtonDownSkin2;
import com.as3facile.skin.button.ButtonOverSkin2;
import com.as3facile.skin.button.ButtonUpSkin2;

import com.actionscriptfacile.skin.Skin;
import com.actionscriptfacile.ui.button.Button;

/**
* Définition du skin utilisé pour un composant Button
*
* @author Matthieu
*/
public class DefaultButtonSkin2 extends Skin
{

public function DefaultButtonSkin2()
{
// Affectation de chaque élément du bouton à un skin
setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin2 );// élément du bouton, classe graphique (movieclip) associée
setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin2 );
setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin2 );
}

}

}

II-B - Création des graphismes

En fonction du composant (Button, List, ComboBox), vous devez créer un fichier fla avec un ou plusieurs éléments graphiques (sprite, MovieClip, images et / ou animation).

Pour connaitre le nom des classes (MovieClip) à créer pour le composant sélectionné, il suffit de regarder la classe DefaultComponentSkin.as que vous venez juste de créer. Elle contient les noms des classes MovieClip du fla.

Par exemple, la création des éléments graphiques du fla du composant VerticalScrollBar implique d'utiliser les noms suivants:

- ScrollBarBackgroundSkin ;

- ScrollerButtonDownSkin ;

- ScrollerButtonOverSkin ;

- ScrollerButtonSkin ;

- ScrollUpButtonDownSkin ;

- ScrollUpButtonOverSkin ;

- ScrollUpButtonSkin ;

- ScrollBottomButtonDownSkin ;

- ScrollBottomButtonOverSkin ;

- ScrollBottomButtonSkin.

Effectivement, la classe DefaultVerticalScrollbarSkin.as associe les noms ci-dessus aux constantes de la classe VerticalScrollBar.

com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as

package com.as3facileexemple.skin.classic
{
import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;
import com.actionscriptfacile.ui.scroll.components.ScrollDownButton;
import com.actionscriptfacile.ui.scroll.components.ScrollUpButton;
import com.actionscriptfacile.ui.scroll.components.ScrollerButton;
import com.actionscriptfacile.skin.Skin;

// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
// Provient de ui.swc (créé avec la compilation de UI.fla)
import com.as3facile.skin.scroll.ScrollBarBackgroundSkin;
import com.as3facile.skin.scroll.ScrollBottomButtonSkin;
import com.as3facile.skin.scroll.ScrollUpButtonSkin;
import com.as3facile.skin.scroll.ScrollerButtonSkin;

import com.as3facile.skin.scroll.ScrollerButtonDownSkin;
import com.as3facile.skin.scroll.ScrollerButtonOverSkin;

import com.as3facile.skin.scroll.ScrollUpButtonDownSkin;
import com.as3facile.skin.scroll.ScrollUpButtonOverSkin;

import com.as3facile.skin.scroll.ScrollBottomButtonDownSkin;
import com.as3facile.skin.scroll.ScrollBottomButtonOverSkin;

/**
* Définition du skin utilisé pour un composant VerticalScrollBar
*
* @author Matthieu
*/
public class DefaultVerticalScrollBarSkin extends Skin
{

public function DefaultVerticalScrollBarSkin()
{
// background
setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );

//scroller
setSkin( ScrollerButton.SCROLLER_VERTICAL_DOWN_SKIN, ScrollerButtonDownSkin );
setSkin( ScrollerButton.SCROLLER_VERTICAL_OVER_SKIN, ScrollerButtonOverSkin );
setSkin( ScrollerButton.SCROLLER_VERTICAL_UP_SKIN, ScrollerButtonSkin );

// scroll up
setSkin( ScrollUpButton.SCROLLUP_VERTICAL_DOWN_SKIN, ScrollUpButtonDownSkin );
setSkin( ScrollUpButton.SCROLLUP_VERTICAL_OVER_SKIN, ScrollUpButtonOverSkin );
setSkin( ScrollUpButton.SCROLLUP_VERTICAL_UP_SKIN, ScrollUpButtonSkin );

// scroll down

setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_DOWN_SKIN, ScrollBottomButtonDownSkin );
setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_OVER_SKIN, ScrollBottomButtonOverSkin );
setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_UP_SKIN, ScrollBottomButtonSkin );
}

}

}

Ensuite, il vous reste à créer le fla avec les classes correspondantes.

Par exemple, pour créer le skin du composant Button, il est nécessaire de créer trois MovieClip (ou sprite) différents. Un MovieClip par état du bouton (survolé, appuyé, normal).

Pensez-bien à paramétrer les propriétés de chacun des MovieClip :

- Cochez la case Export For ActionScript

- Cochez la case Export in frame 1

- La Class : permet d'utiliser le graphisme du composant dans votre code AS3. C'est le nom de votre classe (associée à la constante du composante) utilisée dans la classe qui étend Skin.as, dans cet article : DefaultComponentSkin.as.

- La Base Class : permet de définir les propriétés de votre graphisme / composant disponible pour votre code AS3. Cela peut être Sprite ou MovieClip par exemple.

Une copie d'écran pour illustrer mes explications :

Propriétés des Sprite dans Adobe Flash

Les graphismes définis dans le fla sont très basiques. Libre à vous d'insérer des images, des animations, des dessins vestoriels plus créatifs et recherchés.

Il y a énormément de possibilités pour personnaliser les composants du Framework Actionscript-Facile. Vous pouvez utiliser des images png, jpg, des animations, des dessins vectoriels...

Le principe de création des skins est identique pour chacun des composants. Il y a plus ou moins de MovieClip à créer suivant les états graphiques possibles du composant.

Ensuite, une fois le fla créé, vous pouvez l'exporter soit au format swc ou au format swf. C'est en fonction de la manière dont vous souhaitez utiliser les MovieClip avec votre code AS3.

Pour cet exemple, nous allons exporter le fla au format swc pour intégrer directement les classes graphiques avec l'éditeur AS3 de notre choix.

Pour développer simplement en ActionScript, je vous conseille l'éditeur FDT PowerFlasher : l'essayer, c'est l'adopter.

III - Utilisation des composants

Tous les composants du framework ActionScript-Facile s'utilisent de la même façon.

Ils possèdent tous des fonctionnalités communes :

- personnalisation des graphiques,

- possibilité de l'afficher ou non dans la DisplayList,

- intéractions possibles avec l'utilisateur.

La première étape est de créer une nouvelle instance de notre composant. Par exemple, pour un Button, il suffit d'écrire le code suivant :

Button.as

var button:Button = new Button();

Deuxième étape : en fonction du composant utilisé, vous définissez ses paramètres. Ci dessous, la création d'un composant Button et d'une liste.

List.as

// création un objet de type Button
var button:Button = new Button();

// définition du texte
button.label = 'Button Component';

// création d'une liste
var list:List = new List();

// définition de la taille de la List
list.resize( 230, 150 );

// ajout de plusieurs éléments dans la liste
for ( var i:int = 0; i < 35; i++ )
{
list.addElement( getListElement(i+1) );
}

La troisième étape consiste à affecter à notre composant le skin que nous lui avons conçu.
Un simple button.applySkin( new DefaultButtonSkin() ); met à jour le graphisme de notre composant.
Ou list.applySkin( new DefaultListSkin() ); pour le composant List.

En route pour la quatrième étape !
Il nous reste à positionner notre composant sur la scène et à l'afficher. Bien évidemment, il est possible de paramétrer les options de notre composant : modifier sa taille, le style de son texte...

Exemple.as

// ajout à la displaylsit
addChild( button );

// définition de sa taille en 150 * 30 pixels
button.resize( 150, 30 );

// définition de la position du button sur la scène
button.x = 60;
button.y = 60;
button.labelField.alignCenter(); // centre le texte
button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

// détermination de la position de la List
list.x = 30;
list.y = 30;

// affichage - ajout à la displaylist
addChild( list );

// ajout des marges au contenu de la liste
list.margins = new UIMargins( 5, 5, 5, 5 )

La cinquième et dernière étape est plus ou moins compliquée en fonction de l'application flash que vous crééez.
Vous avez la possibilité d'écouter les actions de l'utilisateur.

En fonction des interactions de l'utilisateur, l'application flash peut :

- afficher / masquer telle ou telle partie de l'interface,

- modifier le titre d'un élément,

- inviter l'utilisateur à effectuer une action dans votre application,

- etc.

Ci-dessous le code source complet d'utilisation des composants que nous avons créés.

DeveloppezExample.as

package
{
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.text.Font;

import com.as3facileexemple.skin.classic.DefaultListSkin;
import com.as3facileexemple.skin.classic.DefaultButtonSkin;
import com.as3facileexemple.skin.classic.DefaultButtonSkin2;
import com.as3facileexemple.skin.classic.DefaultListSkin2;
import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;

import com.actionscriptfacile.ui.button.Button;
import com.actionscriptfacile.ui.list.List;
import com.actionscriptfacile.ui.utils.UIMargins;
import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
import com.actionscriptfacile.ui.combo.ComboBox;
import com.actionscriptfacile.ui.text.UITextField;

/**
* Exemple d'utilisation du Framework de composants AS3 ActionScript-Facile
*
* @author Matthieu
*/
public class DeveloppezExample extends Sprite
{

protected var m_comboFonts:ComboBox;
protected var m_list:List;
protected var m_textField:UITextField;

public function DeveloppezExample()
{
/**
* On construit les boutons
*/
var buttonHide:Button = new Button();

// définition du texte
buttonHide.label = 'Arc en Ciel Liste';

// Application du skin par défaut
// [ Attention ! Ce skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
buttonHide.applySkin( new DefaultButtonSkin() );

// on écoute les changements qui interviennent sur le bouton
buttonHide.addEventListener(MouseEvent.CLICK, changeSkinList );

// ajout à la displaylist
addChild( buttonHide );

// définition de sa taille en 150 * 30 pixels
buttonHide.resize( 150, 30 );

// définition de la position du button sur la scène
buttonHide.x = 10;
buttonHide.y = 220;

// acccès au composant de type UITextField (labelField)
buttonHide.labelField.alignCenter(); // centre le texte
buttonHide.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
buttonHide.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
buttonHide.labelField.changeFormat("font", "Arial");// changement de la police du texte

var buttonShow:Button = new Button();

// définition du texte
buttonShow.label = 'Classique Liste';

// Application du skin par défaut
// [ Attention ! Ce skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
buttonShow.applySkin( new DefaultButtonSkin2() );

// on écoute les changements qui interviennent sur le bouton
buttonShow.addEventListener(MouseEvent.CLICK, changeSkinList2 );

// ajout à la displaylist
addChild( buttonShow );

// définition de sa taille en 150 * 30 pixels
buttonShow.resize( 150, 30 );

// définition de la position du button sur la scène
buttonShow.x = buttonHide.x;
buttonShow.y = buttonHide.y + buttonShow.height + 10;

// acccès au composant de type UITextField (labelField)
buttonShow.labelField.alignCenter(); // centre le texte
buttonShow.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte
buttonShow.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
buttonShow.labelField.changeFormat("font", "Arial");// changement de la police du texte

/**
* On construit la liste
*/
m_list = new List();

// Application du skin par défaut
// [ Attention ! Ce skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
m_list.applySkin( new DefaultListSkin2() );

// définition de la taille de la List
m_list.resize( 230, 150 );

// ajout de plusieurs éléments dans la liste
for ( var i:int = 0; i < 35; i++ )
{
m_list.addElement( getListElement(i+1) );
}

// détermination de la position de la List
m_list.x = 200;
m_list.y = buttonHide.y;

// ajout des marges au contenu de la liste
m_list.margins = new UIMargins( 5, 10, 5, 5 );

// affichage - ajout à la displaylist
addChild( m_list );

/**
* On construit la combobox
*/
m_comboFonts = new ComboBox();
m_comboFonts.applySkin( new DefaultComboBoxSkin() );

// on écoute les changements qui interviennent dans la combobox
m_comboFonts.addEventListener(Event.CHANGE, changeHandler );
m_comboFonts.resize( 300, 70 );
m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox
m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste

/**
* Définition du format du titre de la ComboBox.
*
* Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre titre
*/
m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true);
m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true);
m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true);
m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true);
m_comboFonts.currentElement.labelField.alignCenter();

// on ajoute tous les noms de polices autorisées comme élément de la combobox
var fonts:Array = Font.enumerateFonts( true );

var boxElement:ComboBoxElement;

for each ( var font:Font in fonts )
{
boxElement = m_comboFonts.addElement( font.fontName, font.fontName );
boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte
boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
}

/**
* On construit un UITextField
*/
m_textField = new UITextField();
m_textField.text = 'Développez avec fun  ';

m_textField.x = m_textField.y = 5;
m_textField.width = m_textField.maxWidth = 390;
m_textField.height  = m_textField.maxHeight = 30;
m_textField.changeFormat("size", 20);// changement de la taille de la police du texte
m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur

m_comboFonts.y = m_textField.y + m_textField.height;
m_comboFonts.x = 20;

addChild( m_comboFonts );
addChild( m_textField );
}

/**
* Fonction servant à écouter le changement de police au sein de la combobox.
* On applique la police à l'UITextField que l'on a crée et placé sur la
* scène.
*
* @param    e    Evènement de type MouseEvent.CLICK
*/
private function changeHandler(e:Event):void
{
m_textField.font = m_comboFonts.currentLabel;
m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
}

/**
* Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
* On modifie le skin de la List.
*
* @param    e    Evènement de type MouseEvent.CLICK
*/
private function changeSkinList(e:MouseEvent) : void
{
m_list.applySkin(new DefaultListSkin() );
}

/**
* Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
* On modifie le skin de la List.
*
* @param    e    Evènement de type MouseEvent.CLICK
*/
private function changeSkinList2(e:MouseEvent) : void
{
m_list.applySkin(new DefaultListSkin2() );
}

/**
* Création des éléments du composant List
*/
private function getListElement(id:Number):Sprite
{
// création de l'élément
var oElement:Sprite = new Sprite();

// ajout d'un fond avec une couleur aléatoire
var shp:Shape = new Shape();
var color:int = Math.random() * 0X00FFFFFF;

shp.graphics.beginFill( color );
shp.graphics.drawRect( 0, 0, 200, 30 );
shp.graphics.endFill();

// ajout d'un texte
var oTxt:UITextField = new UITextField();

// définition de la taille du texte
oTxt.height = oTxt.maxHeight = 25;
oTxt.width = oTxt.maxWidth = 195;

oTxt.text = "Élément "+id;
oTxt.selectable = false;
oTxt.changeFormat("color", 0xffffff);// changement de la couleur du texte
oTxt.changeFormat("size", 14);// changement de la taille de la police du texte
oTxt.changeFormat("font", "Arial");// changement de la police du texte

oTxt.alignCenter();

oTxt.background = false;
oTxt.backgroundColor = 0xff33ff;

// ajout à la displaylist (le fond et le texte) de l'élément
oElement.addChild(shp);
oElement.addChild(oTxt);

return oElement;
}
}

}

IV - Conclusion

Nous venons donc de découvrir la création de Skin / graphismes pour les composants ActionScript-Facile.

L'application Flash ci-dessous est une démonstration du changement de graphisme en live.

Animation en format "flash" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
http://www.actionscript-facile.com/wp-content/uploads/2010/10/developpez_exemple.swf

IV-A - Évolutions des fonctionnalités

A vous de créer des applications totalement réutilisables pour vos différents sites.

Par exemple, vous développez un livre d'or avec des graphismes s'accordant à la charte du site de votre client.

Vous pouvez réutiliser la même application, juste en modifiant totalement les graphismes pour votre nouveau client.

C'est génial, le temps que vous pouvez gagner pour vous concentrer sur le visuel, les besoins en terme d'image pour vos clients.

IV-B - Sources commentées

- DeveloppezExample.as

- com.actionscriptfacile.ui.button.Button.as

- com.actionscriptfacile.ui.list.List.as

- com.actionscriptfacile.ui.utils.UIMargins.as

- com.actionscriptfacile.ui.combo.element.ComboBoxElement.as

- com.actionscriptfacile.ui.combo.ComboBox.as

- com.actionscriptfacile.ui.text.UITextField.as

Vous trouverez ci-dessous l'ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.
Vous pouvez télécharger le fichier zip : Changement de Skin en live

IV-C - Quels graphismes avez-vous créé pour les composants AS3 Facile ?

Postez-vos exemples de skins dans les commentaires : Commentez

V - Remerciements / Téléchargements

Je remercie La Rédactrice Kalyparker pour sa disponibilité et l'ensemble de son travail de mise au gabarit des chapitres du framework AS3 Facile au format Developpez.com.

Merci beaucoup à l'équipe Developpez.com de contribuer à la diffusion des tutoriels de création d'un framework de composants ActionScript 3.

Téléchargez l'ensemble des classes commentées du framework AS3 Facile (avec le code source et les exemples de tous les composants AS3).