Sujets sur : associé un sprite a une class as3

Cours ActionScript 3 ‘associé un sprite a une class as3’

Comment Personnaliser les Graphismes des Composants AS3 Facile ?

Ecrit le 16 octobre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Ce tutoriel vous explique 2 fonctionnalités intéressantes du Framework de Composants AS3 Facile :

La création des skins / graphismes des composants AS3 Facile.
Le changement de skin / graphisme « en live » pendant l’exécution de l’application Flash.

I – Conception du Graphisme d’un Composant AS3

Comme nous l’avons étudié dans le Chapitre 3 – Les fonctionnalités d’une Bibliothèque de Composants AS3, chaque composant est personnalisable graphiquement.

Pour personnaliser un composant, il y a 2 étapes :

Créer la classe de Skin pour le composant.
Créer les graphismes dans un fichier fla (MoviesClip, images, dessin vectoriel…).

Création des classes Skins

La 1ère étape est la création de la classe de Skin pour le composant choisi.

Cette classe de « graphisme » étend la classe Skin du Framework AS3 Facile. Elle contient également la configuration des graphismes du fla qui seront utilisés. Appelons là DefaultComponentSkin.as.

Pour chaque élément du composant, nous créons une classe graphique (1 movieclip ou 1 sprite par exemple). Chaque 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 3 constantes :

[codesyntax lang= »actionscript3″ title= »Button.as » bookmarkname= »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";

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";

[/codesyntax]

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

[codesyntax lang= »actionscript3″ title= »ComboBox.as » bookmarkname= »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';

/**

* 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';

[/codesyntax]

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

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

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as » bookmarkname= »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 );
		}

	}

}

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 );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin2.as » bookmarkname= »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 );
		}

	}

}

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 );

}

[/codesyntax]

En fonction de l’interface de votre application flash, il est tout à fait possible d’utiliser la même classe DefaultComponentSkin.as pour la création de plusieurs intances du composant Button sur la scène. Cela signifie que tous les Button de votre application Flash possèderont un graphisme identique.

Ou vous pouvez affecter une classe de Skin différente pour chaque instance de votre composant Button sur la scène. Dans ce cas, chaque Button de votre application flash aura un rendu graphique complètement différent.

La classe DefaultComponentSkin.as est plus ou moins importante suivant le composant utilisé.

Ci-dessous un exemple de Skin pour le composant ComboBox (composée d’une Scrollbar et d’une List).

[codesyntax lang= »actionscript3″ title= »DefaultComboBoxSkin.as » bookmarkname= »DefaultComboBoxSkin.as »]

package com.as3facileexemple.skin.classic
{
	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 com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;

	// 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.combo.ComboBoxButtonDownSkin;
	import com.as3facile.skin.combo.ComboBoxButtonOverSkin;
	import com.as3facile.skin.combo.ComboBoxButtonSkin;
	import com.as3facile.skin.combo.ComboBoxElementDownSkin;
	import com.as3facile.skin.combo.ComboBoxElementOverSkin;
	import com.as3facile.skin.combo.ComboBoxElementSkin;
	import com.as3facile.skin.list.ListBackgroundSkin;

	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 ComboBox
	 *
	 * @author Matthieu
	 */
	public class DefaultComboBoxSkin extends Skin
	{

		public function DefaultComboBoxSkin()
		{
			setSkin( ComboBox.COMBOBOX_BUTTON_DOWN_SKIN , ComboBoxButtonDownSkin );
			setSkin( ComboBox.COMBOBOX_BUTTON_OVER_SKIN, ComboBoxButtonOverSkin );
			setSkin( ComboBox.COMBOBOX_BUTTON_UP_SKIN , ComboBoxButtonSkin );

			setSkin( ComboBox.COMBOBOX_ELEMENT_DOWN_SKIN , ComboBoxElementDownSkin );
			setSkin( ComboBox.COMBOBOX_ELEMENT_OVER_SKIN, ComboBoxElementOverSkin );
			setSkin( ComboBox.COMBOBOX_ELEMENT_UP_SKIN , ComboBoxElementSkin );

			setSkin( List.LIST_BACKGROUND_SKIN, ListBackgroundSkin  );

			// 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 );
		}

	}

}

package com.as3facileexemple.skin.classic

{

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 com.actionscriptfacile.ui.combo.ComboBox;

import com.actionscriptfacile.ui.list.List;

import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;

// 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.combo.ComboBoxButtonDownSkin;

import com.as3facile.skin.combo.ComboBoxButtonOverSkin;

import com.as3facile.skin.combo.ComboBoxButtonSkin;

import com.as3facile.skin.combo.ComboBoxElementDownSkin;

import com.as3facile.skin.combo.ComboBoxElementOverSkin;

import com.as3facile.skin.combo.ComboBoxElementSkin;

import com.as3facile.skin.list.ListBackgroundSkin;

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 ComboBox

* @author Matthieu

public class DefaultComboBoxSkin extends Skin

{

public function DefaultComboBoxSkin()

{

setSkin( ComboBox.COMBOBOX_BUTTON_DOWN_SKIN , ComboBoxButtonDownSkin );

setSkin( ComboBox.COMBOBOX_BUTTON_OVER_SKIN, ComboBoxButtonOverSkin );

setSkin( ComboBox.COMBOBOX_BUTTON_UP_SKIN , ComboBoxButtonSkin );

setSkin( ComboBox.COMBOBOX_ELEMENT_DOWN_SKIN , ComboBoxElementDownSkin );

setSkin( ComboBox.COMBOBOX_ELEMENT_OVER_SKIN, ComboBoxElementOverSkin );

setSkin( ComboBox.COMBOBOX_ELEMENT_UP_SKIN , ComboBoxElementSkin );

setSkin( List.LIST_BACKGROUND_SKIN, ListBackgroundSkin );

// 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 );

}

[/codesyntax]

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 ScrollBar 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.

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as » bookmarkname= »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 );
		}

	}

}

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 );

}

[/codesyntax]

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 3 MovieClip (ou sprite) différents. 1 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 des créations 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ète 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.

II – 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 identiques :

personnalisation graphiques de chaque éléments du composant ActionScript.
possibilité de l’afficher ou non dans la DisplayList.
interaction possible du composant avec l’utilisateur.

La 1ère étape consiste à créer une nouvelle instance de notre composant. Par exemple pour un Button, il sufffit d’écrire le code suivant :

[codesyntax lang= »actionscript3″ title= »Button.as » bookmarkname= »Button.as »]

var button:Button = new Button();

1	var button:Button = new Button();

[/codesyntax]

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

[codesyntax lang= »actionscript3″ title= »List.as » bookmarkname= »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 &lt; 35; i++ )
{
	list.addElement( getListElement(i+1) );
}

// 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) );

}

[/codesyntax]

La 3è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 4è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…

[codesyntax lang= »actionscript3″ title= »Exemple.as » bookmarkname= »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 )

// 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 )

[/codesyntax]

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

En fonction des intéractions de l’utilisateur, votre 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 venons de créer.

[codesyntax lang= »actionscript3″ title= »DeveloppezExample.as » bookmarkname= »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 de la skin par défaut
			// [ Attention ! Cette 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 de la skin par défaut
			// [ Attention ! Cette 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 de la skin par défaut
			// [ Attention ! Cette 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 &lt; 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	Evenement 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	Evenement 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	Evenement 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;
		}
	}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

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 de la skin par défaut

// [ Attention ! Cette 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 de la skin par défaut

// [ Attention ! Cette 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 de la skin par défaut

// [ Attention ! Cette 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 Evenement 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 Evenement 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 Evenement 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;

}

[/codesyntax]

III – Conclusion

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

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

http://bonus.actionscript-facile.com/wp-content/uploads/2011/10/developpez_exemple.swf

1	http://bonus.actionscript-facile.com/wp-content/uploads/2011/10/developpez_exemple.swf

Évolutions des fonctionnalités

C’est à vous de créer des applications totalement réutilisables pour vos différents sites.

Par exemple, vous concevez 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 le graphisme des composants pour votre nouveau client. Le fichier application.swf reste identique.

Et avec le chargement des bibliothèques partagées (avec des graphismes stockés dans swf externes), vous n’avez même plus besoin de recompiler votre application Flash !

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.

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 : Télécharger “Changement de Skin en live” developpez_exemple.zip – Téléchargé 1172 fois – 87,01 Ko

Une question : quels Graphismes avez-vous créés pour les Composants AS3 Facile ?

Postez-vos exemples dans les commentaires ci-dessous.

Je mettrais en téléchargement (avec un lien vers votre site) les graphismes les plus sympathiques.

Je serais ravi de voir vos applications, postez les avec vos commentaires ci -dessous 🙂

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : associé un sprite a une class as3

Cours ActionScript 3 ‘associé un sprite a une class as3’

Comment Personnaliser les Graphismes des Composants AS3 Facile ?

I – Conception du Graphisme d’un Composant AS3

Création des classes Skins

Création des graphismes

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

II – Utilisation des Composants

III – Conclusion

Évolutions des fonctionnalités

Sources commentées

Une question : quels Graphismes avez-vous créés pour les Composants AS3 Facile ?

Cours Récents

Liens / Partenaires