Sujets sur : components framework

Cours ActionScript 3 ‘components framework’

Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Commentaires fermés sur Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Ecrit le 14 avril par Matthieu
Publié dans le(s) sujet(s) Adobe Flash |Framework AS3 Facile

Dans ce cours vidéo, nous allons apprendre à utiliser les fichiers SWC avec Adobe Flash CS5.

Puis la façon d’utiliser les composants du Framework AS3 Facile dans vos applications flash. Et également, comment utiliser Adobe Flash CS5 comme éditeur ActionScript.

Téléchargez le code source complet de l’exemple

Télécharger “Fichier SWC Adobe Flash CS5” ex-fichier-swc-fla-AS3Facile.zip – Téléchargé 1024 fois – 97,52 Ko

Utilisez-vous toujours Adobe Flash pour développer des applications flash ?

Ou peut être un éditeur ActionScript spécifique comme FDT PowerFlasher ?

Postez votre logiciel ActionScript préféré dans les commentaires ci-dessous.

Comment accélérer votre programmation ActionScript Flash ?

6 questions

Ecrit le 3 mars par Matthieu
Publié dans le(s) sujet(s) Framework AS2 |Framework AS3

Dans cet article, nous allons découvrir quelques unes des stratégies utilisées pour accélérer votre développement d’applications flash.

Découverte des Frameworks ActionScript

Tout d’abord, quel est l‘utilité d’un Framework ActionScript ?

Que contient-il ? A quoi sert-il ?

Un Framework ActionScript simplifie la vie du développeur, dans le sens, où il contient des fonctionnalités prêtes à l’emploi.

C’est à dire qu’un ensemble de classes s’occupent de telle ou telle fonctionnalité. Ainsi, vous n’avez pas besoin de la recoder à chaque fois. En instanciant les classes, avec les paramètres adéquats, vous implémentez la fonctionnalité dans votre code ActionScript.

Par exemple, Google Analytics For Flash permet très simplement d’ajouter le tracking de vos visiteurs dans une application flash.

D’autres Frameworks ActionScript, beaucoup plus complets, accélère grandement le développement d’une application flash complexe.

En effet plusieurs Framework ActionScript intègrent un ou plusieurs modèles de conception afin de faciliter l’utilisation de ceux-ci dans vos projets flash.

Notamment, le Framework PureMVC qui possèdent plusieurs modèles de conception, facilement utilisable pour construire une application.

Les Frameworks ActionScript à connaitre

Plusieurs Développeurs ActionScript talentueux partagent avec la Communauté Adobe Flash leurs Frameworks. Ils utilisent quotidiennement ces Frameworks pour leurs projets flash.

Les Frameworks que je vous présentent possèdent un support très réactif et sont régulièrement mis à jour, pour :

intégrer des nouvelles fonctionnalités.
l’amélioration des performances.
intégrer les « features » des nouvelles versions du Player Flash.
implémenter les demandes des utilisateurs.

Ci-dessous, la liste des Frameworks que j’utilise en fonction des projets flash sur lesquels je suis amené à travailler.

Pixlib 3.0 Flash Plateform Framework

C’est mon framework préféré. En ce moment, j’apprends à l’utiliser pour en comprendre le fonctionnement et les subtilités.

S’il n’y avait qu’un seul framework AS3 à choisir, ce serait celui ci !

Il est très complet et développé par une équipe d’experts Adobe Flash très talentueux.

Les prochains tutoriel vidéo seront accès sur la découverte et l’utilisation des fonctionnalités de Pixlib 3.0.

Lisez l’article consacré à la présentation de Pixlib 3.0 pour en savoir plus.

PureMVC

Un framework très accessible pour les débutants. PureMVC est une implémentation du pattern Modèle Vue Contrôleur.

L’objectif du Framework PureMVC est de vous aider à séparer votre application en trois parties bien distinctess :

le modèle.
la vue.
le contrôleur.

Cette séparation, ainsi que le degré et le sens de couplage employé pour les faire collaborer est indispensable pour construire et maintenir des applications évolutives.

Lisez la présentation du Framework PureMVC, accompagné d’un exemple ActionScript pour découvrir son utilisation.

Vegas AS2 / AS3

Un framework que j’ai découvert en même temps que l’AS3.

Vegas est un Framework très complet, il contient tout un panel de classes permettant de développer des applications flash très complexes. Avec ces extensions LunAS, PEGAS, KronOS, ASGard et CalistA, l’auteur Ekameleon a réalisé un travail formidable pour faciliter le développement Flash.

Le framework Vegas est compatible AS3 et AS2 !

Voici un tutoriel pour installer la dernière version de Vegas. Voici le lien direct vers le répertoire SVN de Google Code.

Ekameleon a rédigé plusieurs tutoriels pour apprendre à utiliser Vegas.

Le support en français est assuré sur le Google Group Vegas.

Voici la liste, non exhaustive, des fonctionnalités implémentées dans Vegas :

ADT (Abstract Data Type) libraries (queue, map, collections, stack, bag, iterator, etc.)
Gestion avancée du modèle évènementiel basé sur Dom2/3 avec l’implémentation du design pattern FrontController.
Implémentation du pattern IoC (Inversion Of Control).
Gestion de la localisation et des interfaces multi-langues.
Implémentation des design pattern MVC, Visitor, Command, Observer, etc.
Gestion avancée du debug ‘logging’.
Des outils de dessins, couleurs, géométrie.
Gestion avancée avec un moteur de tâches, processus, séquences, batch etc.
Ajout d’un moteur complet de Transition (tweens, etc.)
Des outils pour les interfaces utilisateurs.
Gestion avancée du réseau et des outils remoting.

La documentation en ligne est très pratique pour utiliser les fonctionnalités de Vegas.

Le framework Vegas est complété de plusieurs extensions. Celles-ci peuvent s’avèrer très utiles en fonction de vos projets flash.

LunAS

L’extension LunAS est un framework intégre des composants pour construire des interfaces graphiques :

La gestion des textes : label, input, textarea.
Tous les types de boutons.
Plusieurs types de container.
Des scrollbars.
etc…

Pour avoir une meilleurs idée des possiblités de LunAS , je vous conseille d’installer les sources LunAS via SVN. Il ya plusieurs exemples pratiques pour apprendre à utiliser cette extension.

CalistA

Cette extension contient plusieurs classes de cryptage Action Script. Attention, certaines classes sont en cours de développement dans la version AS3 (cryptage TEA).

Possiblités de cryptage offertes par CalistA :

MD5.
SHA1.
TEA (en cours de portage AS3).
Base64.
Base8.
LZW : compression / décompression des chaines de caractères.

Il y a également les extensions AST’r et NinjAS à découvrir.

Pixlib AS2

Pour l’AS2, Pixlib est le premier framework actionscript que j’ai découvert. Ma programmation AS2 a fait un bond en avant gigantesque grâce à l’utilisation de Pixlib.

Le framework Pixlib est conçu pour apporter à votre programmation AS2 :

gestion des évènements poussés.
gestion du logging.
chargements des données de tout type.
gestion des objets vidéos et sons.
possibilité d’effectuer des transitions.
gestion de la structure des données. Analyse simplifiée et rapide des fichiers XML.
implémentation de plusieurs Design Pattern (Model View Controler, Singleton, Observer…).

La mailing-list contient une mine d’informations pour apprendre à utiliser ce framework.

Vous pouvez télécharger la dernière version de Pixlib AS2 sur le répertoire SVN. Note : le répertoire SVN étant hors service, j’ai rajouté en téléchargement Pixlib version AS2 ci-dessous.

Télécharger “Pixlib version AS2” Pixlib-AS2.zip – Téléchargé 829 fois – 480,57 Ko

La documentation de l’ensemble des classes est disponible sur le site Geturl.

Le site Geturl contient également plusieurs tutoriels très utiles pour appréhender les subtilités de Pixlib. Et un autre tutoriel qui permet de comprendre les bases du framework Pixlib.

PixIoC AS2

Vous serez surement intéressés par PixIoC qui est une extension de Pixlib AS2.

Cette extension est basée sur le design pattern Inversion Of Control. Elle permet de construire votre application à partir d’un fichier xml. Ce fichier xml contient les classes à instancier, les méthodes à utiliser… tout pour créer votre application flash.

Vous pouvez télécharger la dernière version de PixIoC.

Conclusion

Je vous encourage vivement à prendre le temps d’apprendre à utiliser ces Frameworks ActionScript. Votre programmation flash s’en ressentira. Et vous serez plus à même de concevoir des projets flash de plus en plus robustes et évolutifs.

Pour vous aider, je vais publier des tutoriels en vidéos accompagnés d’exemples d’implémentation pour chacun de ces frameworks.

Et vous, quel est le framework que vous utilisez le plus en souvent en AS3, AS2 ?

En AS2, j’utilise Pixlib et en AS3 Vegas et depuis peu Pixlib 3.0.

Sur quel framework souhaitez-vous des tutoriels en priorité ?

Dites moi cela via les commentaires ci-dessous. Merci.

Comment Personnaliser les Graphismes des Composants AS3 Facile ?

1 question

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é 1168 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 🙂

Création d’un Mini Flex avec les Composants AS3 Facile

1 question

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

Et voici un article Bonus qui montre une autre facette du Framework AS3 Facile!

La création d’une Application avec les Composants AS3 Facile. Cet exemple Flash utilise un fichier xml pour la construction des Composants ActionScript.

I – CDCF et CDCT

Pour une fois, nous allons déroger à la règle.

En effet, cette fois-ci il n’y aura aucun cahier des charges techniques ni de cahier des charges fonctionnels.

Pourquoi me direz-vous ?

Eh bien tout simplement parce que nous n’allons pas développer une application flash destinée à être utilisé telle quelle en production.

Le contexte d’apprentissage de cet article est plus du domaine de la Recherche & Développement.

La fameuse R&D!

II – Mini Flex

Place à la pratique, au code !

Nous allons concevoir un mini Flex.

C’est à dire que nous allons coder une classe de document. Cette classe va nous permettre de créer des interfaces, à l’aide d’un fichier XML chargé dynamiquement.

Cela consiste à développer un parseur qui :

Va analyser notre XML de configuration.
En déduire ce qu’il doit créer et comment.

Le code en lui-même reste simple, je vous laisse donc le découvrir.

Sachez cependant qu’il est loin d’être terminé.

En effet, seul le composant Button est implémenté.

Je vous encourage vivement à continuer, en implémentant tous les composants que nous avons développés précédemment.

Debug dans Flash avec Firefox / Google Chrome

Vous remarquerez sans doute que j’ai ajouté dans la classe MiniFlexExample.as un système de debug d’application.

Cet ensemble de classes fonctionne avec Firefox pour effectuer un affichage – debug (ou trace) de votre application en ligne.

Cette fonctionnalité est indispensable pour les RIA Flash 🙂

Il vous suffit de :

installer l’extension Firebug sous Firefox ou GoogleChrome.
de télécharger Flash Thunderbolt : Logging ActionScript projects using Firebug within Firefox!

Ensuite dans votre code ActionScript, vous n’avez plus qu’à utiliser la syntaxe suivante pour afficher le message, les variables que vous souhaitez.

[codesyntax lang= »actionscript3″ title= »ThunderBolt’s Logger.as » bookmarkname= »ThunderBolt’s Logger.as »]

import org.osflash.thunderbolt.Logger;

var myNumber: int = 5;
var myString: String = "Lorem ipsum";
Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString);

// some log objects
var myNumber: int = 5;
var myString: String = "Lorem ipsum";

// INFO log level
Logger.info ("Just an info message");

// DEBUG log level
Logger.debug ("A debug log ", myString);

// WARN log level
Logger.warn ("A warn message", myNumber);

// ERROR log level
Logger.error ("An error log ", myString);

import org.osflash.thunderbolt.Logger;

var myNumber: int = 5;

var myString: String = "Lorem ipsum";

Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString);

// some log objects

var myNumber: int = 5;

var myString: String = "Lorem ipsum";

// INFO log level

Logger.info ("Just an info message");

// DEBUG log level

Logger.debug ("A debug log ", myString);

// WARN log level

Logger.warn ("A warn message", myNumber);

// ERROR log level

Logger.error ("An error log ", myString);

[/codesyntax]

Conclusion

Voilà, cette fois-ci tout est fini !

Notre mini application Flex en action :

https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/miniflex_exemple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/miniflex_exemple.swf

Évolutions des fonctionnalités

Je vous propose de continuer à développer ce mini-flex pour :

intégrer les autres composants d’ActionScript-Facile.
ajouter des fonctionnalités propres à vos besoins.
l’utiliser comme modèle pour créer vos applications. Évidemment, il est nécessaire, voir indispensable, de concevoir une analyse beaucoup plus complète et structurée.

Le début de la programmation AS3 Facile

Ne perdez pas de vue que ce n’est que le début.

En effet, notre librairie est loin d’être complète, je vous encourage vivement à l’enrichir et à l’améliorer.

J’ai pris beaucoup de plaisir à être votre guide tout au long de ces 10 articles et j’espère que leur lecture vous aura aidé.

Sources commentées

MiniFlexExample.as
bin/interface.xml

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 “Mini Flex Framework AS3 Facile” miniflex_framework_actionscript-facile.zip – Téléchargé 947 fois – 91,16 Ko

Comment utilisez-vous les Composants AS3 Facile ?

Je serais ravi de consulter les Applications Flash que vous avez développés avec le Framework AS3 Facile.

Postez-les dans les commentaires juste en dessous, je les rajouterais prochainement dans un article!

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

package
{
	import flash.events.MouseEvent;

	import com.actionscriptfacile.skin.ISkin;

	import flash.utils.getDefinitionByName;

	import org.osflash.thunderbolt.Logger;

	import com.as3facileexemple.skin.classic.DefaultButtonSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin2;

	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.UIComponent;

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.utils.Dictionary;

	/**
	 * Exemple de Mini Flex avec les composants graphiques ActionScript-Facile.
	 *
	 * @author Matthieu
	 */
	 public class MiniFlexExample extends Sprite
	{
		private var m_correspTable:Dictionary;// création d'une table de correspondance.

		/*
		 * Permet de forcer l'inclusion des classes de Skin Button dans le swf
		 */
        public static var linkages:Array = [DefaultButtonSkin, DefaultButtonSkin2, MouseEvent.CLICK];

		public function MiniFlexExample()
		{
			Logger.debug ("info a="+Math.random()*28); // debug de l'application avec l'extension firefox Firebug

			// chargement le fichier XML
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, completeHandler );
			loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler );

			var file:URLRequest =  new URLRequest('interface.xml?a='+Math.random()*28);
			loader.load(file );
		}

		private function errorHandler(e:IOErrorEvent):void
		{
			// gestion des erreurs
			var loader:URLLoader = e.target as URLLoader;
			loader.removeEventListener(Event.COMPLETE, completeHandler );
			loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

			var text:TextField = addChild( new TextField() ) as TextField;
			text.width = stage.stageWidth;
			text.autoSize = 'center';
			text.text = "Erreur : "+e.text;
		}

		private function completeHandler(e:Event):void
		{
			// récupération des données puis transmission de celles-ci à la méthode parseInterface
			var loader:URLLoader = e.target as URLLoader;
			loader.removeEventListener(Event.COMPLETE, completeHandler );
			loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

			parseInterface( new XML( loader.data ) );
		}

		/**
		 * Analyse du fichier xml et construction de l'interface.
		 *
		 */
		private function parseInterface( p_interface:XML ):void
		{
			// on référence le composant button dans la table de correspondance
			m_correspTable = new Dictionary();
			m_correspTable['button'] = buildButton;// appel automatique de la méthode de construction d'un Button

			var component:UIComponent;
			var func:Function;

			XML.ignoreComments = true;
			XML.ignoreWhitespace = true;
			XML.ignoreProcessingInstructions = true;

			for each ( var xml:XML in p_interface.children() )
			{
				// on cherche la fonction de parsing du composant
				func = m_correspTable[ xml.name() ] as Function;

				// si on ne la trouve pas on continue
				if ( func == null )
					continue;

				// sinon on  l'éxécute
				component = func( xml ) as UIComponent;// création du composant

				// on écoute les changements qui interviennent sur le composant
				component.addEventListener(MouseEvent.CLICK, updateLabel );

				// et on ajoute le composant à la scène
				addChild ( component );
			}
		}

		/**
		 * Modifie la label du Button
		 *
		 */
		private function updateLabel(e:MouseEvent): void
		{
			var oButton:Button = e.target as Button;
			oButton.label = "N° " + Math.ceil(Math.random()*28);

			Logger.debug ("updateLabel : "+oButton.label);
		}

		/**
		 * fonction permettant de construire un composant button
		 *
		 */
		private function buildButton( p_xml:XML ):Button
		{

			var prop:XML;
			var l_labelField:XML;
			var l_labelsList:XMLList = p_xml.child('labelField');

			var l_component:Button = new Button();
			var parameters:Array = new Array();
			var parameter:XML;
			var method:Function;

			// on regarde si l'objet labelField est défini dans le XML
			if ( l_labelsList.length() &gt; 0 )
			{
				// si oui on le récupère
				l_labelField = l_labelsList[0];
			}

			// récupère le skin du fichier xml et l'applique au composant
			var definition:Class = getDefinitionByName(p_xml.attribute('skin') ) as Class;
			l_component.applySkin( new definition() as ISkin);

			Logger.debug ("p_xml : "+p_xml.attribute('skin'));

			l_component.resize( Number ( p_xml.attribute('width') ), Number ( p_xml.attribute('height') ) );

			for each( prop in p_xml.attributes() )
			{
				// on a déjà défini le width et le height
				if ( prop.name() == "width" || prop.name() == "height" )
					continue;

				// on vérifie que la propriété existe avant de lui appliquer la valeur définit dans le XML
				if ( l_component.hasOwnProperty( new String( prop.name() ) ) )
				{
					l_component[ new String( prop.name() ) ] = prop.valueOf();
				}
			}

			// si le labelField est défini
			if ( l_labelField != null )
			{
				// on boucle sur ses propriétés
				for each( prop in l_labelField.attributes() )
				{
					// on regarde si la propriété existe et le cas échéant on lui applique la valeur
					if ( l_component.labelField.hasOwnProperty( new String( prop.name() ) ) )
					{
						l_component.labelField[new String( prop.name() )] = prop.valueOf();
					}
				}

				for each( prop in l_labelField.children() )
				{

					// on regarde si le noeud est un appel de méthode
					if ( prop.name() == "callMethod" )
					{
						if ( l_component.labelField.hasOwnProperty( prop.attribute('name').toString() ) )
						{

							// on récupère les paramètres
							parameters = new Array();
							for each( parameter in prop.children() )
							{
								parameters.push( parameter.valueOf() );
							}

							method = l_component.labelField[prop.attribute('name').toString()] as Function;

							if ( method != null )
							{
								// et on appelle la méthode
								method.apply( this, parameters );
							}

						}
					}
				}
			}
			return l_component;// renvoie une référence vers le composant créé
		}

	}
}

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

package

{

import flash.events.MouseEvent;

import com.actionscriptfacile.skin.ISkin;

import flash.utils.getDefinitionByName;

import org.osflash.thunderbolt.Logger;

import com.as3facileexemple.skin.classic.DefaultButtonSkin;

import com.as3facileexemple.skin.classic.DefaultButtonSkin2;

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.ui.UIComponent;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.IOErrorEvent;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.text.TextField;

import flash.utils.Dictionary;

/**

* Exemple de Mini Flex avec les composants graphiques ActionScript-Facile.

* @author Matthieu

public class MiniFlexExample extends Sprite

{

private var m_correspTable:Dictionary;// création d'une table de correspondance.

* Permet de forcer l'inclusion des classes de Skin Button dans le swf

public static var linkages:Array = [DefaultButtonSkin, DefaultButtonSkin2, MouseEvent.CLICK];

public function MiniFlexExample()

{

Logger.debug ("info a="+Math.random()*28); // debug de l'application avec l'extension firefox Firebug

// chargement le fichier XML

var loader:URLLoader = new URLLoader();

loader.addEventListener(Event.COMPLETE, completeHandler );

loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler );

var file:URLRequest = new URLRequest('interface.xml?a='+Math.random()*28);

loader.load(file );

}

private function errorHandler(e:IOErrorEvent):void

{

// gestion des erreurs

var loader:URLLoader = e.target as URLLoader;

loader.removeEventListener(Event.COMPLETE, completeHandler );

loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

var text:TextField = addChild( new TextField() ) as TextField;

text.width = stage.stageWidth;

text.autoSize = 'center';

text.text = "Erreur : "+e.text;

}

private function completeHandler(e:Event):void

{

// récupération des données puis transmission de celles-ci à la méthode parseInterface

var loader:URLLoader = e.target as URLLoader;

loader.removeEventListener(Event.COMPLETE, completeHandler );

loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

parseInterface( new XML( loader.data ) );

}

/**

* Analyse du fichier xml et construction de l'interface.

private function parseInterface( p_interface:XML ):void

{

// on référence le composant button dans la table de correspondance

m_correspTable = new Dictionary();

m_correspTable['button'] = buildButton;// appel automatique de la méthode de construction d'un Button

var component:UIComponent;

var func:Function;

XML.ignoreComments = true;

XML.ignoreWhitespace = true;

XML.ignoreProcessingInstructions = true;

for each ( var xml:XML in p_interface.children() )

{

// on cherche la fonction de parsing du composant

func = m_correspTable[ xml.name() ] as Function;

// si on ne la trouve pas on continue

if ( func == null )

continue;

// sinon on l'éxécute

component = func( xml ) as UIComponent;// création du composant

// on écoute les changements qui interviennent sur le composant

component.addEventListener(MouseEvent.CLICK, updateLabel );

// et on ajoute le composant à la scène

addChild ( component );

}

/**

* Modifie la label du Button

private function updateLabel(e:MouseEvent): void

{

var oButton:Button = e.target as Button;

oButton.label = "N° " + Math.ceil(Math.random()*28);

Logger.debug ("updateLabel : "+oButton.label);

}

/**

* fonction permettant de construire un composant button

private function buildButton( p_xml:XML ):Button

{

var prop:XML;

var l_labelField:XML;

var l_labelsList:XMLList = p_xml.child('labelField');

var l_component:Button = new Button();

var parameters:Array = new Array();

var parameter:XML;

var method:Function;

// on regarde si l'objet labelField est défini dans le XML

if ( l_labelsList.length() > 0 )

{

// si oui on le récupère

l_labelField = l_labelsList[0];

}

// récupère le skin du fichier xml et l'applique au composant

var definition:Class = getDefinitionByName(p_xml.attribute('skin') ) as Class;

l_component.applySkin( new definition() as ISkin);

Logger.debug ("p_xml : "+p_xml.attribute('skin'));

l_component.resize( Number ( p_xml.attribute('width') ), Number ( p_xml.attribute('height') ) );

for each( prop in p_xml.attributes() )

{

// on a déjà défini le width et le height

if ( prop.name() == "width" || prop.name() == "height" )

continue;

// on vérifie que la propriété existe avant de lui appliquer la valeur définit dans le XML

if ( l_component.hasOwnProperty( new String( prop.name() ) ) )

{

l_component[ new String( prop.name() ) ] = prop.valueOf();

}

// si le labelField est défini

if ( l_labelField != null )

{

// on boucle sur ses propriétés

for each( prop in l_labelField.attributes() )

{

// on regarde si la propriété existe et le cas échéant on lui applique la valeur

if ( l_component.labelField.hasOwnProperty( new String( prop.name() ) ) )

{

l_component.labelField[new String( prop.name() )] = prop.valueOf();

}

for each( prop in l_labelField.children() )

{

// on regarde si le noeud est un appel de méthode

if ( prop.name() == "callMethod" )

{

if ( l_component.labelField.hasOwnProperty( prop.attribute('name').toString() ) )

{

// on récupère les paramètres

parameters = new Array();

for each( parameter in prop.children() )

{

parameters.push( parameter.valueOf() );

}

method = l_component.labelField[prop.attribute('name').toString()] as Function;

if ( method != null )

{

// et on appelle la méthode

method.apply( this, parameters );

}

return l_component;// renvoie une référence vers le composant créé

}

[/codesyntax]

[codesyntax lang= »xml » title= »interface.xml » bookmarkname= »interface.xml »]

&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;data&gt;

	&lt;button x = "20" y = "100" width = "100" height = "20" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"&gt;

		&lt;labelField
			text = "Un Bouton"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeFormat"&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;16&lt;/parameter&gt;
				&lt;/callMethod&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

	&lt;button x = "20" y = "20" width = "50" height = "30" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"&gt;

		&lt;labelField
			text = "N 3"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeFormat"&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;16&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="alignCenter" /&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

	&lt;button x = "100" y = "50" width = "150" height = "40" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin2"&gt;

		&lt;labelField
			text = "Mon long bouton"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeLetterFormat"&gt;
					&lt;parameter&gt;0&lt;/parameter&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;30&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="changeLetterFormat"&gt;
					&lt;parameter&gt;2&lt;/parameter&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;30&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="alignLeft" /&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

&lt;/data&gt;

<?xml version="1.0" encoding="utf-8" ?>

<data>

<labelField

text = "Un Bouton"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</labelField>

</button>

<labelField

text = "N 3"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</labelField>

</button>

<labelField

text = "Mon long bouton"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</callMethod>

</labelField>

</button>

</data>

[/codesyntax]

Comment créer une ComboBox en AS3 ?

1 question

Ecrit le 19 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

En route pour la création de notre 4ème Composant ActionScript : la fameuse ComboBox ou Liste Déroulante.

Dans ce tutoriel, nous verrons comment définir les fonctionnalités du Composants AS3 ComboBox. Ainsi que les méthodes simplifiant son utilisation dans Flash.

I – Cahier Des Charges Fonctionnel d’une ComboBox

Un composant de type ComboBox est en fait une liste déroulante. Il y a en sur la majorité des sites internet. Elle se compose d’un bouton et d’un composant de type List. La valeur du bouton change suivant l’élément qui est sélectionné dans la Liste.

Une fois n’est pas coutume, nous allons illustrer notre description :

Ici nous pouvons reconnaître deux composants que nous avons déjà développé :

le Button ( la partie qui contient le texte “Times New Roman” )
la List ( le rectangle qui contient une liste de polices de caractères et qui peut être scrollée ).

La rédaction du CDCF (Cahier Des Charges Fonctionnel) est donc quasiment terminé.

Nous allons juste ajouter une petite contrainte :

Tous les éléments du composant List ont tous la même hauteur et le même style. Nous conservons ce comportement graphique cohérent.

II – Cahier Des Charges Techniques d’une ComboBox

Traduisons en terme technique le CDCF (les spécifications fonctionnelles) du composant ComboBox. C’est parti pour la rédaction du CDCT (Cahier Des Charges Techniques).

Un composant de type ComboBox est une liste déroulante comme vous pouvez en voir sur n’importe quel site internet. Elle se compose d’un bouton et d’un composant de type List.

La classe ComboBoxButton

Le bouton représente le titre de la ComboBox. Pour cela nous développons une classe ComboBoxButton.

Aucun problème pour le bouton, nous avons déjà développé auparavant les composants graphiques nécessaires.

La valeur du bouton change suivant l’élément qui est sélectionné dans la List.

Nous écouterons donc l’évènement MOUSE_CLICK de type flash.events.MouseEvent sur le composant List.

La classe ComboBoxButton reprend les fonctionnalités de la classe Button en ajoutant les suivantes :

un getter / setter permettant de récupérer la valeur (un objet) d’un ComboBoxButton.
la gestion du skin graphique propre à ComboBoxButton.

La classe ComboBoxElement

Tous les éléments du composant List possèdent une hauteur et un style identique, nous devons conserver ce comportement graphique cohérent.

Pour cela, nous créons une classe ComboBoxElement qui reprend les fonctionnalités de la classe Button.

Par extension, elle héritera également des fonctionnalités de la classe de base UIComponent.

Ainsi, tous les éléments qui seront ajoutés dans notre List seront du même type et possèderont tous une apparence identique.

Les éléments de la List de la ComboBox sont bien évidemment personnalisables graphiquement avec 3 états différents :

Normal : L’élément est « au repos », il n’est ni survolé, ni cliqué.
Survol : L’utilisateur passe et laisse sa souris au dessus de l’élément sans toutefois cliquer dessus.
Cliqué ou clic maintenu : L’utilisateur réalise un clic gauche et laisse le bouton de sa souris maintenu sur l’élément.

Conclusion

Voilà, c’est terminé, toutes mes félicitations pour avoir suivi et appliqué l’ensemble des Tutoriels AS3. Vous venez de créer une Bibliothèque AS3 de Composants Graphiques ou plus communément appelé un Framework de Composants AS3.

La ComboBox est le dernier composant graphique que nous avions à développer et qui nécessitait tant d’efforts.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/combobox_exemple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/combobox_exemple.swf

Les prochains tutoriels seront des bonus.

C’est ma façon de vous remercier et de vous encourager à développer vos propres composants graphiques. Soit en apportant des améliorations au Framework AS3 Facile ou en développant votre propre Framework de Composants.

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 ComboBox, voici quelques exemples de fonctionnalités supplémentaires à implémenter.

Allez, maintenant, c’est à vous de coder 🙂

Méthode resizeListOnly

Je vous propose d’ajouter la méthode resizeListOnly() à notre composant ComboBox.

resizeListOnly ajoute la fonctionnalité suivante :

permet de déterminer les dimensions de la List indépendamment du Titre ( ComboBoxButton ). En quelque sorte, la liste déroulante qui apparait sous la ComboBox peut être plus large que son titre. Pensez également à redimensionner les éléments de la List!

Création d’un menu en Flash

Avec le composant ComboBox et la méthode resizeListOnly, vous pouvez créer un menu de navigation tout simple. Une des solutions (il y a en plusieurs) consiste à utiliser plusieurs ComboBox, positionnées les unes à côté des autres et interagissant entre elles.

Si vous concevez souvent des menus pour vos applications Flash, je vous conseille de créer un composant Menu.

Sources commentées

com.actionscriptfacile.ui.combo.element.ComboBoxElement
com.actionscriptfacile.ui.combo.element.ComboBoxButton
com.actionscriptfacile.ui.combo.ComboBox
ComboExample.as
com.as3facileexemple.skin.classic.DefaultComboBoxSkin.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 “Composant ComboBox du Framework AS3 Facile” component_combobox_framework_actionscript-facile.zip – Téléchargé 1486 fois – 68,76 Ko

Et vous, comment avez-vous utilisé ce Composant AS3 ComboBox ?

Postez vos exemples de ComboBox (des liens vers vos réalisations) dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.element.ComboBoxElement.as » bookmarkname= »com.actionscriptfacile.ui.combo.element.ComboBoxElement.as »]

package com.actionscriptfacile.ui.combo.element
{
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.skin.ISkin;

	/**
	 * Définition d'un élément ajouté dans la liste de la ComboBox.
	 * Chaque élément est de type Button.
	 *
	 * @author Matthieu
	 */
	public class ComboBoxElement extends Button
	{

		/**
		 * On définit de nouvelles constantes pour le skin afin de ne pas les confondre
		 * avec celle d'un composant Button classique, sémantiquement parlant, c'est plus propre
		 * d'agir de la sorte.
		 */
		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';

		protected var m_value:Object; // la valeur courante

		public function ComboBoxElement( p_value:Object, p_label:String )
		{
			super();
			m_value = p_value;
			label = p_label;
		}

		/**
		 * Getter / Setter
		 *
		 * Permet de récupérer / définir la propriété value d'un objet de type ComboBoxElement.
		 */
		public function get value():Object { return m_value; }
		public function set value(value:Object):void { m_value = value; }

		/**
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{

			/**
			 * On procède exactement de la même façon qu'avec le composant Button à la différence près
			 * que l'on n'utilise pas les mêmes constantes.
			 */
			var definition:Class;

			definition = p_skin.getSkin( COMBOBOX_ELEMENT_OVER_SKIN ) as Class;

			if ( definition != null )
				m_overStyle = new definition();

			definition = p_skin.getSkin( COMBOBOX_ELEMENT_DOWN_SKIN ) as Class;

			if ( definition != null )
				m_downStyle = new definition();

			definition = p_skin.getSkin( COMBOBOX_ELEMENT_UP_SKIN ) as Class;

			if ( definition != null )
				m_upStyle = new definition();

			addChild( m_upStyle );
			addChild( m_downStyle );
			addChild( m_overStyle );

			setState ( UP_STATE );
		}

		/**
		 * Tue proprement Un objet de type ComboBoxElement
		 */
		override public function destroy():void
		{
			m_value = null;
			super.destroy();
		}

	}

}

package com.actionscriptfacile.ui.combo.element

{

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.skin.ISkin;

/**

* Définition d'un élément ajouté dans la liste de la ComboBox.

* Chaque élément est de type Button.

* @author Matthieu

public class ComboBoxElement extends Button

{

/**

* On définit de nouvelles constantes pour le skin afin de ne pas les confondre

* avec celle d'un composant Button classique, sémantiquement parlant, c'est plus propre

* d'agir de la sorte.

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

protected var m_value:Object; // la valeur courante

public function ComboBoxElement( p_value:Object, p_label:String )

{

super();

m_value = p_value;

label = p_label;

}

/**

* Getter / Setter

* Permet de récupérer / définir la propriété value d'un objet de type ComboBoxElement.

public function get value():Object { return m_value; }

public function set value(value:Object):void { m_value = value; }

/**

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin(p_skin:ISkin):void

{

/**

* On procède exactement de la même façon qu'avec le composant Button à la différence près

* que l'on n'utilise pas les mêmes constantes.

var definition:Class;

definition = p_skin.getSkin( COMBOBOX_ELEMENT_OVER_SKIN ) as Class;

if ( definition != null )

m_overStyle = new definition();

definition = p_skin.getSkin( COMBOBOX_ELEMENT_DOWN_SKIN ) as Class;

if ( definition != null )

m_downStyle = new definition();

definition = p_skin.getSkin( COMBOBOX_ELEMENT_UP_SKIN ) as Class;

if ( definition != null )

m_upStyle = new definition();

addChild( m_upStyle );

addChild( m_downStyle );

addChild( m_overStyle );

setState ( UP_STATE );

}

/**

* Tue proprement Un objet de type ComboBoxElement

override public function destroy():void

{

m_value = null;

super.destroy();

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.element.ComboBoxButton.as » bookmarkname= »com.actionscriptfacile.ui.combo.element.ComboBoxButton.as »]

package com.actionscriptfacile.ui.combo.element
{
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.skin.ISkin;

	/**
	 * Définition de l'élément courant sélectionné dans la liste déroulante.
	 * Le titre de la ComboBox.
	 * Cet élément est de type Button.
	 *
	 * @author Matthieu
	 */
	public class ComboBoxButton extends Button
	{

		/**
		 * On définit les constantes pour le 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';

		// variable qui va nous servir à stocker la valeur de l'objet ComboBoxButton
		protected var m_value:Object;

		public function ComboBoxButton( p_value:Object, p_label:String )
		{
			super();

			m_value = p_value;
			label = p_label;
		}

		/**
		 * Définit / récupère définit la valeur de l'objet comboboxbutton
		 */
		public function get value():Object { return m_value; }
		public function set value(value:Object):void { m_value = value; }

		/**
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{

			/**
			 * Même procédé que pour les autres composants
			 */
			var definition:Class;

			// over skin
			definition = p_skin.getSkin( COMBOBOX_BUTTON_OVER_SKIN ) as Class;

			if ( definition != null )
				m_overStyle = new definition();

			// down skin
			definition = p_skin.getSkin( COMBOBOX_BUTTON_DOWN_SKIN ) as Class;

			if ( definition != null )
				m_downStyle = new definition();

			// up skin
			definition = p_skin.getSkin( COMBOBOX_BUTTON_UP_SKIN ) as Class;

			if ( definition != null )
				m_upStyle = new definition();

			// on ajoute les styles à la display list
			addChild( m_upStyle );
			addChild( m_downStyle );
			addChild( m_overStyle );

			setState ( UP_STATE );
		}

		/**
		 * Fonction servant à détruire proprement un objet de type ComboBoxButton
		 */
		override public function destroy():void
		{
			m_value = null;
			super.destroy();
		}

	}

}

package com.actionscriptfacile.ui.combo.element

{

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.skin.ISkin;

/**

* Définition de l'élément courant sélectionné dans la liste déroulante.

* Le titre de la ComboBox.

* Cet élément est de type Button.

* @author Matthieu

public class ComboBoxButton extends Button

{

/**

* On définit les constantes pour le 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';

// variable qui va nous servir à stocker la valeur de l'objet ComboBoxButton

protected var m_value:Object;

public function ComboBoxButton( p_value:Object, p_label:String )

{

super();

m_value = p_value;

label = p_label;

}

/**

* Définit / récupère définit la valeur de l'objet comboboxbutton

public function get value():Object { return m_value; }

public function set value(value:Object):void { m_value = value; }

/**

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin(p_skin:ISkin):void

{

/**

* Même procédé que pour les autres composants

var definition:Class;

// over skin

definition = p_skin.getSkin( COMBOBOX_BUTTON_OVER_SKIN ) as Class;

if ( definition != null )

m_overStyle = new definition();

// down skin

definition = p_skin.getSkin( COMBOBOX_BUTTON_DOWN_SKIN ) as Class;

if ( definition != null )

m_downStyle = new definition();

// up skin

definition = p_skin.getSkin( COMBOBOX_BUTTON_UP_SKIN ) as Class;

if ( definition != null )

m_upStyle = new definition();

// on ajoute les styles à la display list

addChild( m_upStyle );

addChild( m_downStyle );

addChild( m_overStyle );

setState ( UP_STATE );

}

/**

* Fonction servant à détruire proprement un objet de type ComboBoxButton

override public function destroy():void

{

m_value = null;

super.destroy();

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.ComboBox.as » bookmarkname= »com.actionscriptfacile.ui.combo.ComboBox.as »]

package com.actionscriptfacile.ui.combo
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.combo.element.ComboBoxButton;
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.UIComponent;
	import com.actionscriptfacile.ui.utils.UIMargins;

	import flash.events.MouseEvent;

	/**
	 * Composant ComboBox
	 * @author Matthieu
	 */
	public class ComboBox extends UIComponent
	{
		private var m_skin : ISkin; // objet implémentant l'interface ISkin

		/**
		 * 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';
		// le currentElement est celui qui apparaîtra même lorsque le composant List sera caché
		private var m_currentElement : ComboBoxButton;
		//composant List
		private var m_list : List;
		// tableau des éléments
		private var m_elements : Array;
		// hauteur des éléments
		protected var m_componentsHeight : Number;

		public function ComboBox()
		{
			init();
		}

		/**
		 * Fonction interne servant à initialiser un composant de type ComboBox
		 */
		private function init() : void
		{
			// on définit une taille d'élément par défaut
			m_componentsHeight = 30;

			// l'objet skin est null
			m_skin = null;

			// le currentElement est crée
			m_currentElement = new ComboBoxButton(null, '');

			// le composant List aussi
			m_list = new List();

			// le tableau d'éléments est crée
			m_elements = new Array();

			// on ajoute à la displayList l'élément courant et le composant List
			addChild(m_currentElement);
			addChild(m_list);

			// on positionne la liste juste en dessous de l'élément courant
			m_list.y = m_currentElement.height;

			// et on passe son visible à false
			m_list.visible = false;

			// on écoute les click sur la liste, comme ça on sait quel élément est cliqué
			m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);

			// on écoute les rollOut comme ça dès que l'on quitte les limites de notre composant, on peut cacher la List
			addEventListener(MouseEvent.ROLL_OUT, toggleListAppearHandler, false);

			// si on clique sur l'élément courant on fait apparaître la List
			m_currentElement.addEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);
		}

		/**
		 * Fonction interne gérant l'apparition / disparition du composant List
		 * @param	e	Evenement de type MouseEvent
		 */
		private function toggleListAppearHandler(e : MouseEvent) : void
		{
			// si on a cliqué sur l'élément courant alors on affiche la List sinon on ne l'affiche pas
			m_list.visible = ( e.type == MouseEvent.CLICK );
		}

		/**
		 *
		 * Fonction interne gérant le choix d'un élément dans la List
		 * @param	e	Evenement de type MouseEvent
		 */
		private function chooseHandler(e : MouseEvent) : void
		{
			// si l'origine du click ne provient pas d'un élement de la liste on ne fait rien
			if ( !( e.target is ComboBoxElement ) )
				return;

			// sinon on récupère cet élément
			var element : ComboBoxElement = e.target as ComboBoxElement;

			// et on affecte les valeurs de cet élément à l'élément courant
			m_currentElement.value = element.value;
			m_currentElement.label = element.label;

			// et cache la List
			m_list.visible = false;
		}

		/**
		 *
		 * Ajoute un élément à la liste déroulante et renvoit l'élément de la liste ainsi crée.
		 *
		 * @param	p_label	Le label ( texte ) qui sera affiché à l'utilisateur pour l'élément crée
		 * @param	p_value La valeur de l'élément crée
		 * @return	L'élément de la liste nouvellement crée de type ComboBoxElement
		 */
		public function addElement( p_label : String, p_value : Object ) : ComboBoxElement
		{
			// on ajoute un nouvel élément à la liste auquel on attribue les valeurs passées en paramètre
			var element : ComboBoxElement = m_list.addElement(new ComboBoxElement(p_value, p_label)) as ComboBoxElement;

			// Si la skin courante est définie on l'applique à l'élément
			if ( m_skin != null )
				element.applySkin(m_skin);

			// on redimensionne l'élément puis on l'ajoute au tableau d'éléments
			element.resize(m_currentElement.width, m_componentsHeight);
			m_elements.push(element);

			// la valeur de l'élément courant est null ou vide on prend les valeurs du premier élément de la liste
			if ( m_currentElement.value == null &amp;&amp; m_currentElement.label == '' )
			{
				m_currentElement.value = ComboBoxElement(m_elements[ 0 ]).value;
				m_currentElement.label = ComboBoxElement(m_elements[ 0 ]).label;
			}

			// on retourne l'élément ainsi crée
			return element;
		}

		/**
		 *
		 * Enlève un élément de la liste déroulante et le retourne
		 *
		 * @param	p_element	Objet de type ComboBoxElement
		 * @return	l'élément supprimé de la List
		 */
		public function removeElement( p_element : ComboBoxElement ) : ComboBoxElement
		{
			var element : ComboBoxElement = m_list.removeElement(p_element) as ComboBoxElement;
			m_elements.splice(element);
			return element;
		}

		/**
		 *
		 * Retourne un objet de type ComboBoxElement dont la propriété p_prop a pour valeur p_value
		 *
		 * @param	p_prop	Nom de la propriété
		 * @param	p_value	Valeur de la propriété
		 * @return	Un objet de type ComboBoxElement
		 */
		public function getElementByProperty( p_prop : String, p_value : Object ) : ComboBoxElement
		{
			var max : int = m_elements.length;
			var i : int = 0;

			for ( ;i &lt; max;i++)
			{
				if ( ComboBoxElement(m_elements[ i ]).hasOwnProperty(p_prop) &amp;&amp; ComboBoxElement(m_elements[ i ])[ p_prop ] == p_value )
				{
					return m_elements[ i ] as ComboBoxElement;
				}
			}

			return null;
		}

		/**
		 * Définit / récupère la valeur courante
		 */
		public function set currentValue( p_value : Object ) : void
		{
			m_currentElement.value = p_value;
		}

		public function get currentValue() : Object
		{
			return m_currentElement.value;
		}

		/**
		 * Définit / récupère le label courant
		 */
		public function set currentLabel( p_label : String ) : void
		{
			m_currentElement.label = p_label;
		}

		public function get currentLabel() : String
		{
			return m_currentElement.label;
		}

		/**
		 * Définit / récupère les marges de la liste déroulante
		 */
		public function set margins( p_margins : UIMargins ) : void
		{
			m_list.margins = p_margins;
		}

		public function get margins() : UIMargins
		{
			return m_list.margins;
		}

		/**
		 * Retourne le tableau d'éléments
		 */
		public function get elements() : Array
		{
			return m_elements;
		}

		/**
		 * Définit / récupère la hauteur des éléments de la liste déroulante
		 */
		public function get componentsHeight() : Number
		{
			return m_componentsHeight;
		}

		public function set componentsHeight(value : Number) : void
		{
			m_componentsHeight = value;
			resize(width, height);
		}

		/**
		 *
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet de type ComboBox
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin : ISkin ) : void
		{

			/**
			 * On applique la skin au ComboBoxButton ( l'élément courant ), à la scrollBar, à la List, et à tout les éléments
			 * de la List
			 */
			m_skin = p_skin;

			m_currentElement.applySkin(p_skin);
			m_list.applySkin(p_skin);
			m_list.scrollBar.applySkin(p_skin);

			var i : int = 0;
			var max : int = m_elements.length;

			for ( ;i &lt; max;i++ )
			{
				ComboBoxElement(m_elements[i]).applySkin(p_skin);
			}

			// puis on redimensionne
			resize(m_currentElement.width, 100);
		}

		/**
		 *
		 * Fonction permettant de gérer intelligemment le redimensionnement
		 * d'un objet de type ComboBox
		 *
		 * @param	p_width		la nouvelle largeur ( en pixels ) du composant
		 * @param	p_height	la nouvelle hauteur ( en pixels ) du composant
		 */
		override public function resize( p_width : Number, p_height : Number ) : void
		{

			var i : int = 0;
			var max : int = m_elements.length;

			// on redimensionne la List
			m_list.resize(p_width, p_height);

			// on redimensionne l'élémen courant
			m_currentElement.resize(p_width, m_componentsHeight);

			// ... ainsi que tous les éléments de la liste
			for ( ;i &lt; max;i++ )
			{
				ComboBoxElement(m_elements[ i]).resize(p_width, m_componentsHeight);
			}

			// on repositionne la liste
			m_list.y = m_currentElement.height;
		}

		/**
		 * Tue proprement un objet de type ComboBox
		 */
		override public function destroy() : void
		{
			/**
			 * On tue tous les event listeners
			 */
			m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);
			removeEventListener(MouseEvent.MOUSE_OUT, toggleListAppearHandler, false);
			m_currentElement.removeEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);

			// puis on détruit l'élément courant, la List et le tableau d'éléments
			m_currentElement.destroy();
			m_list.destroy();
			m_elements = null;

			// on appelle la fonction destructrice parente
			super.destroy();
		}
	}
}

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

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

package com.actionscriptfacile.ui.combo

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.combo.element.ComboBoxButton;

import com.actionscriptfacile.ui.combo.element.ComboBoxElement;

import com.actionscriptfacile.ui.list.List;

import com.actionscriptfacile.ui.UIComponent;

import com.actionscriptfacile.ui.utils.UIMargins;

import flash.events.MouseEvent;

/**

* Composant ComboBox

* @author Matthieu

public class ComboBox extends UIComponent

{

private var m_skin : ISkin; // objet implémentant l'interface ISkin

/**

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

// le currentElement est celui qui apparaîtra même lorsque le composant List sera caché

private var m_currentElement : ComboBoxButton;

//composant List

private var m_list : List;

// tableau des éléments

private var m_elements : Array;

// hauteur des éléments

protected var m_componentsHeight : Number;

public function ComboBox()

{

init();

}

/**

* Fonction interne servant à initialiser un composant de type ComboBox

private function init() : void

{

// on définit une taille d'élément par défaut

m_componentsHeight = 30;

// l'objet skin est null

m_skin = null;

// le currentElement est crée

m_currentElement = new ComboBoxButton(null, '');

// le composant List aussi

m_list = new List();

// le tableau d'éléments est crée

m_elements = new Array();

// on ajoute à la displayList l'élément courant et le composant List

addChild(m_currentElement);

addChild(m_list);

// on positionne la liste juste en dessous de l'élément courant

m_list.y = m_currentElement.height;

// et on passe son visible à false

m_list.visible = false;

// on écoute les click sur la liste, comme ça on sait quel élément est cliqué

m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);

// on écoute les rollOut comme ça dès que l'on quitte les limites de notre composant, on peut cacher la List

addEventListener(MouseEvent.ROLL_OUT, toggleListAppearHandler, false);

// si on clique sur l'élément courant on fait apparaître la List

m_currentElement.addEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);

}

/**

* Fonction interne gérant l'apparition / disparition du composant List

* @param e Evenement de type MouseEvent

private function toggleListAppearHandler(e : MouseEvent) : void

{

// si on a cliqué sur l'élément courant alors on affiche la List sinon on ne l'affiche pas

m_list.visible = ( e.type == MouseEvent.CLICK );

}

/**

* Fonction interne gérant le choix d'un élément dans la List

* @param e Evenement de type MouseEvent

private function chooseHandler(e : MouseEvent) : void

{

// si l'origine du click ne provient pas d'un élement de la liste on ne fait rien

if ( !( e.target is ComboBoxElement ) )

return;

// sinon on récupère cet élément

var element : ComboBoxElement = e.target as ComboBoxElement;

// et on affecte les valeurs de cet élément à l'élément courant

m_currentElement.value = element.value;

m_currentElement.label = element.label;

// et cache la List

m_list.visible = false;

}

/**

* Ajoute un élément à la liste déroulante et renvoit l'élément de la liste ainsi crée.

* @param p_label Le label ( texte ) qui sera affiché à l'utilisateur pour l'élément crée

* @param p_value La valeur de l'élément crée

* @return L'élément de la liste nouvellement crée de type ComboBoxElement

public function addElement( p_label : String, p_value : Object ) : ComboBoxElement

{

// on ajoute un nouvel élément à la liste auquel on attribue les valeurs passées en paramètre

var element : ComboBoxElement = m_list.addElement(new ComboBoxElement(p_value, p_label)) as ComboBoxElement;

// Si la skin courante est définie on l'applique à l'élément

if ( m_skin != null )

element.applySkin(m_skin);

// on redimensionne l'élément puis on l'ajoute au tableau d'éléments

element.resize(m_currentElement.width, m_componentsHeight);

m_elements.push(element);

// la valeur de l'élément courant est null ou vide on prend les valeurs du premier élément de la liste

if ( m_currentElement.value == null && m_currentElement.label == '' )

{

m_currentElement.value = ComboBoxElement(m_elements[ 0 ]).value;

m_currentElement.label = ComboBoxElement(m_elements[ 0 ]).label;

}

// on retourne l'élément ainsi crée

return element;

}

/**

* Enlève un élément de la liste déroulante et le retourne

* @param p_element Objet de type ComboBoxElement

* @return l'élément supprimé de la List

public function removeElement( p_element : ComboBoxElement ) : ComboBoxElement

{

var element : ComboBoxElement = m_list.removeElement(p_element) as ComboBoxElement;

m_elements.splice(element);

return element;

}

/**

* Retourne un objet de type ComboBoxElement dont la propriété p_prop a pour valeur p_value

* @param p_prop Nom de la propriété

* @param p_value Valeur de la propriété

* @return Un objet de type ComboBoxElement

public function getElementByProperty( p_prop : String, p_value : Object ) : ComboBoxElement

{

var max : int = m_elements.length;

var i : int = 0;

for ( ;i < max;i++)

{

if ( ComboBoxElement(m_elements[ i ]).hasOwnProperty(p_prop) && ComboBoxElement(m_elements[ i ])[ p_prop ] == p_value )

{

return m_elements[ i ] as ComboBoxElement;

}

return null;

}

/**

* Définit / récupère la valeur courante

public function set currentValue( p_value : Object ) : void

{

m_currentElement.value = p_value;

}

public function get currentValue() : Object

{

return m_currentElement.value;

}

/**

* Définit / récupère le label courant

public function set currentLabel( p_label : String ) : void

{

m_currentElement.label = p_label;

}

public function get currentLabel() : String

{

return m_currentElement.label;

}

/**

* Définit / récupère les marges de la liste déroulante

public function set margins( p_margins : UIMargins ) : void

{

m_list.margins = p_margins;

}

public function get margins() : UIMargins

{

return m_list.margins;

}

/**

* Retourne le tableau d'éléments

public function get elements() : Array

{

return m_elements;

}

/**

* Définit / récupère la hauteur des éléments de la liste déroulante

public function get componentsHeight() : Number

{

return m_componentsHeight;

}

public function set componentsHeight(value : Number) : void

{

m_componentsHeight = value;

resize(width, height);

}

/**

* Fonction permettant de gérer la customisation des différents éléments

* graphiques d'un objet de type ComboBox

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin( p_skin : ISkin ) : void

{

/**

* On applique la skin au ComboBoxButton ( l'élément courant ), à la scrollBar, à la List, et à tout les éléments

* de la List

m_skin = p_skin;

m_currentElement.applySkin(p_skin);

m_list.applySkin(p_skin);

m_list.scrollBar.applySkin(p_skin);

var i : int = 0;

var max : int = m_elements.length;

for ( ;i < max;i++ )

{

ComboBoxElement(m_elements[i]).applySkin(p_skin);

}

// puis on redimensionne

resize(m_currentElement.width, 100);

}

/**

* Fonction permettant de gérer intelligemment le redimensionnement

* d'un objet de type ComboBox

* @param p_width la nouvelle largeur ( en pixels ) du composant

* @param p_height la nouvelle hauteur ( en pixels ) du composant

override public function resize( p_width : Number, p_height : Number ) : void

{

var i : int = 0;

var max : int = m_elements.length;

// on redimensionne la List

m_list.resize(p_width, p_height);

// on redimensionne l'élémen courant

m_currentElement.resize(p_width, m_componentsHeight);

// ... ainsi que tous les éléments de la liste

for ( ;i < max;i++ )

{

ComboBoxElement(m_elements[ i]).resize(p_width, m_componentsHeight);

}

// on repositionne la liste

m_list.y = m_currentElement.height;

}

/**

* Tue proprement un objet de type ComboBox

override public function destroy() : void

{

/**

* On tue tous les event listeners

m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);

removeEventListener(MouseEvent.MOUSE_OUT, toggleListAppearHandler, false);

m_currentElement.removeEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);

// puis on détruit l'élément courant, la List et le tableau d'éléments

m_currentElement.destroy();

m_list.destroy();

m_elements = null;

// on appelle la fonction destructrice parente

super.destroy();

}

[/codesyntax]

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

package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;

	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;// import du skin de la ComboBox
	import com.actionscriptfacile.ui.combo.ComboBox;
	import flash.display.Sprite;

	/**
	 * Exemple d'utilisation du composant ComboBox.
	 * @author Matthieu
	 */
	public class ComboExample extends Sprite
	{
		public function ComboExample()
		{
			// création d'une combobox
			var box:ComboBox = new ComboBox();

			// on lui applique la skin par défaut
			box.applySkin( new DefaultComboBoxSkin() );

			var boxElement:ComboBoxElement;
			// ajout des éléments
			for ( var i:int = 0; i &lt; 35; i++ )
			{
				boxElement = box.addElement( "Élément "+ new String( i ), i );
				// acccès au composant de type UITextField (labelField)
				boxElement.labelField.alignCenter(); // centre le texte
				boxElement.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
				boxElement.labelField.changeFormat("font", "Arial");// changement de la police du texte
			}

			// définition de la taille de la combobox
			box.resize( 230, 120 );

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

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

			// affichage - ajout à la displaylist
			addChild( box );
		}

	}

}

package

{

import com.actionscriptfacile.ui.combo.element.ComboBoxElement;

import com.actionscriptfacile.ui.utils.UIMargins;

import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;// import du skin de la ComboBox

import com.actionscriptfacile.ui.combo.ComboBox;

import flash.display.Sprite;

/**

* Exemple d'utilisation du composant ComboBox.

* @author Matthieu

public class ComboExample extends Sprite

{

public function ComboExample()

{

// création d'une combobox

var box:ComboBox = new ComboBox();

// on lui applique la skin par défaut

box.applySkin( new DefaultComboBoxSkin() );

var boxElement:ComboBoxElement;

// ajout des éléments

for ( var i:int = 0; i < 35; i++ )

{

boxElement = box.addElement( "Élément "+ new String( i ), i );

// acccès au composant de type UITextField (labelField)

boxElement.labelField.alignCenter(); // centre le texte

boxElement.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte

boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

boxElement.labelField.changeFormat("font", "Arial");// changement de la police du texte

}

// définition de la taille de la combobox

box.resize( 230, 120 );

// détermination de la position de la List

box.x = 30;

box.y = 30;

// ajout des marges au contenu de la liste

box.margins = new UIMargins( 5, 5, 5, 5 );

// affichage - ajout à la displaylist

addChild( box );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultComboBoxSkin.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.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.ScrollerButtonSkin;
	import com.as3facile.skin.scroll.ScrollUpButtonSkin;

	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;

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

			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );

		}

	}

}

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.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.ScrollerButtonSkin;

import com.as3facile.skin.scroll.ScrollUpButtonSkin;

import com.actionscriptfacile.skin.Skin;

import com.actionscriptfacile.ui.combo.ComboBox;

import com.actionscriptfacile.ui.list.List;

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

/**

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

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );

}

[/codesyntax]

Comment créer une ScrollBar en AS3 ?

11 questions

Ecrit le 12 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Nous sommes enfin prêt à attaquer le composant classique que tout développeur a développé au moins une fois dans sa vie. J’ai nommé la Scrollbar !

Nous étudierons dans un premier temps la scrollbar verticale. Rassurez-vous, le raisonnement est exactement le même dans le sens horizontal.

I – Cahier Des Charges Fonctionnel d’une ScrollBar

Nous allons commencer par un bref descriptif des fonctionnalités d’une ScrollBar Vertical.

Une ScrollBar Vertical est un composant graphique qui permet à l’utilisateur de faire défiler ( il s’agit de scroll, ou scrolling ) verticalement un objet graphique (autrement appelé le content) au sein d’une zone définie au préalable (la scrollArea).

Une ScrollBar Vertical est constituée de 4 entités :

Un objet graphique, qui, lors d’un click, permet de scroller le content vers le haut.
Un objet graphique, qui, lors d’un click, permet scroller le content vers le bas.
Un objet graphique pouvant être glissé au sein d’une zone, le dit glissement ayant une répercussion directe sur le scroll du content. Nous l’appèlerons le scroller.

Un objet graphique représentant la zone dans laquelle le scroller peut être déplacé. Lors d’un click sur cette zone, le scroller est déplacé à l’endroit du click entraînant ainsi le scrolling du content. Nous l’appelerons le background.

Comme pour le Composant AS3 Button, chacune des entités du composant VerticalScrollBar devra être personnalisable graphiquement.

De plus, le content doit pouvoir être redéfini à tout moment, ainsi que la scrollArea.

II – Cahier Des Charges Techniques d’une ScrollBar

Comme pour les composants précédents, nous traduisons le CDCF (Cahier Des Charges Fonctionnel) en termes techniques. Pour cela, nous rédigeons le CDCT (Cahier Des Charges Technique).

“Une VerticalScrollBar est un composant graphique qui permet à l’utilisateur de faire défiler ( on parle de scroll, ou scrolling ) verticalement un objet graphique ( autrement appelé le content ) au sein d’une zone définie au préalable ( la scrollArea ).”

La classe ScrollManager

Pour ce type de fonctionnement, nous allons créer une classe nommée ScrollManager. Cette classe se chargera de gérer le scrolling du content.

Le composant graphique VerticalScrollBar, quand à lui, se chargera :

d’instancier la ScrollManager.
d’envoyer les paramètres nécessaires à la ScrollManager.
de mettre à jour la ScrollManager.

La classe VerticalScrollBar

“Une VerticalScrollBar est constituée de 4 entités.”

Nous allons donc créer une classe nommée VerticalScrollBar qui étendra la classe de base UIComponent. La classe VerticalScrollBar hérite ainsi de toutes les fonctionnalités de base d’un composant utilisateur telles que définies dans sa classe parente.

“Un objet graphique, qui, lors d’un click, permet de scroller le content vers le haut.”

Un simple Button, qui, lors d’un click, demandera au scrollManager de scroller le content vers le haut.

“Un objet graphique, qui, lors d’un click, permet scroller le content vers le bas.”

Un simple Button, qui, lors d’un click, demandera au scrollManager de scroller le content vers le bas.

“Un objet graphique pouvant être glissé au sein d’une zone, le dit glissement ayant une répercussion directe sur le scroll du content. Nous l’appellerons le scroller.”

Un Button sur lequel nous appliquerons un startDrag() lors d’un clic maintenu, que nous désactiverons dès que l’utilisateur relâchera sa souris.

“Un objet graphique représentant la zone dans laquelle le scroller peut être déplacé. Lors d’un click sur cette zone, le scroller est déplacé à l’endroit du click entraînant ainsi le scrolling du content. Nous l’appelerons le background.”

Un UIComponent sur lequel on écoutera les évènements de type MouseEvent.CLICK. Il se chargera de déplacer le scroller au niveau du point de click ce qui entraînera des modifications au niveau du ScrollManager.

“Chacune des entités du composant devra être personnalisable graphiquement.”

Override de la fonction “applySkin” de base afin de mettre à jour le style de chacun des éléments composants la scrollBar.

“Le content doit pouvoir être redéfini à tout moment, ainsi que la scrollArea.”

Nous créerons ainsi deux getters / setters au sein de la classe ScrollManager que nous laisserons accessibles depuis l’extérieur de la VerticalScrollBar.

Conclusion

Et voila, nous avons terminé de créer notre ScrollBar verticale.

Le composant VerticalScrollBar vous permet de scroller verticalement un objet graphique au sein d’une zone définie.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/verticalscrollbar_exemple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/verticalscrollbar_exemple.swf

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 ScrollBar, voici quelques exemples de fonctionnalités supplémentaires à implémenter. Postez vos exemples dans les commentaires.

Maintenant c’est à vous de jouer !

HorizontalScrollBar

Développez une scrollbar horizontale, la tâche vous est simplifiée. Effectivement, notre ScrollManager (définit dans com.actionscriptfacile.ui.scroll.manager) offre la possibilité de scroller un objet à l’horizontale.

Tween ScrollBar

Vous pouvez également ajouter un effet Tween (Elastic, Bounce…) lors du déplacement d’un contenu par les boutons de la ScrollBar. Lorsque l’utilisateur appuie sur le bouton ScrollUp par exemple, le contenu se déplace avec un léger effet Elastic.

Vous pouvez utiliser le framework TweenMax : un ensemble de classes pour utiliser des tween plus facilement.

Sources commentées

com.actionscriptfacile.ui.scroll.manager.ScrollManager.as
com.actionscriptfacile.ui.scroll.manager.IScrollManager.as
com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as
com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as
com.actionscriptfacile.ui.scroll.components.ScrollerButton.as
com.actionscriptfacile.ui.scroll.components. ScrollDownButton.as
VerticalScrollBarExample.as
com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.

Vous pouvez télécharger le fichier zip : Télécharger “Composant Vertical ScrollBar Framework AS3 Facile” component_verticalscrollbar_framework_actionscript-facile.zip – Téléchargé 1871 fois – 70,62 Ko

Allez, montrez moi votre code d’une ScrollBar horizontale…

Utilisez les commentaires ci-dessous, j’apporterais des corrections sur votre code si nécessaire.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.manager.ScrollManager.as » bookmarkname= »com.actionscriptfacile.ui.scroll.manager.ScrollManager.as »]

package  com.actionscriptfacile.ui.scroll.manager
{
	import flash.geom.Rectangle;
	import flash.display.DisplayObject;
	import com.actionscriptfacile.ui.scroll.manager.IScrollManager;

	/**
	 * Un ScrollManager permet de scroller n'importe quel DisplayObject définit par sa variable content verticalement
	 * et horizontalement au sein d'une zone définie par sa propriété scrollArea.
	 *
	 * @author Matthieu
	 */

	public class ScrollManager implements IScrollManager
	{

		private var m_content:DisplayObject; // reference vers le contenu à scroller
		private var m_scrollV:Number; // pourcentage de scroll Vertical
		private var m_scrollH:Number; // pourcentage de scroll Horizontal
		private var m_scrollArea:Rectangle; // zone de scroll
		private var m_vertical:Boolean; // indique si le manager doit scroller l'objet à la verticale ou non
		private var m_horizontal:Boolean; // indique si le manager doit scroller l'objet à l'horizontale ou non

		public function ScrollManager()
		{
			m_scrollArea = new Rectangle();
			m_scrollV = m_scrollH = 0;
			m_content = null;
			m_vertical = m_horizontal = false;
		}

		/**
		 * Détruit proprement le ScrollManager
		 */
		public function destroy():void
		{

			m_content = null;
			m_scrollArea = null;

			delete this;
		}

		/**
		 * Fonction qui actualise l'état graphique du composant et de tous ses éléments.
		 */
		private function replace():void
		{

			if ( m_content == null ) // Si le contenu n'est pas défini, on a pas besoin d'actualiser quoi que ce soit
			{
				return;
			}

			var diff:Number; 

			if ( m_horizontal ) // si on scroll à l'horizontale
			{
				// la variable diff vaut la largeur du contenu - la largeur de la zone de scroll
				diff = m_content.width - m_scrollArea.width;

				if ( diff &lt; 0 )
					diff = 0;

				// on rédéfinit la position horizontale du contenu
				m_content.x = m_scrollArea.x - ( diff * m_scrollH );
			}

			if ( m_vertical )// si on scroll à la verticale
			{
				// la variable diff vaut la hauteur du contenu - la hauteur de la zone de scroll
				diff = m_content.height - m_scrollArea.height;

				if ( diff &lt; 0 )
					diff = 0;

				// on rédéfinit la position verticale du contenu
				m_content.y = m_scrollArea.y - ( diff * m_scrollV );
			}

		}

		/**
		 * Permet de signaler au manager si le contenu doit être scrollé à la verticale ou pas
		 */
		public function get vertical():Boolean { return m_vertical; }
		public function set vertical(p_vertical:Boolean):void { m_vertical = p_vertical; }

		/**
		 * Permet de signaler au manager si le contenu doit être scrollé à l'horizontale ou pas
		 */
		public function get horizontal():Boolean { return m_horizontal; }
		public function set horizontal(p_horizontal:Boolean):void { m_horizontal = p_horizontal; }

		/**
		 * Permet de signaler au manager quel est le contenu à scroller
		 */
		public function set content(p_content:DisplayObject):void { m_content = p_content; replace(); }
		public function get content():DisplayObject{ return m_content; }

		/**
		 * Récupère / définit le pourcentage de scrolling vertical du contenu
		 */
		public function set scrollV(p_scrollV:Number):void
		{
			m_scrollV = ( p_scrollV &gt; 1 ) ? 1 : ( p_scrollV &lt; 0 ) ? 0 : p_scrollV ;
			replace();
		}
		public function get scrollV():Number { return m_scrollV; }

		/**
		 * Récupère / définit le pourcentage de scrolling horizontal du contenu
		 */
		public function set scrollH(p_scrollH:Number):void
		{
			m_scrollH = ( p_scrollH &gt; 1 ) ? 1 : ( p_scrollH &lt; 0 ) ? 0 : p_scrollH ;
			replace();
		}
		public function get scrollH():Number { return m_scrollH; }

		/**
		 * Récupère / définit la zone de scroll du contenu
		 */
		public function set scrollArea(p_scrollArea : Rectangle) : void
		{
			m_scrollArea = p_scrollArea;
			replace();
		}

		public function get scrollArea() : Rectangle
		{
			return m_scrollArea;
		}
	}

}

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

package com.actionscriptfacile.ui.scroll.manager

{

import flash.geom.Rectangle;

import flash.display.DisplayObject;

import com.actionscriptfacile.ui.scroll.manager.IScrollManager;

/**

* Un ScrollManager permet de scroller n'importe quel DisplayObject définit par sa variable content verticalement

* et horizontalement au sein d'une zone définie par sa propriété scrollArea.

* @author Matthieu

public class ScrollManager implements IScrollManager

{

private var m_content:DisplayObject; // reference vers le contenu à scroller

private var m_scrollV:Number; // pourcentage de scroll Vertical

private var m_scrollH:Number; // pourcentage de scroll Horizontal

private var m_scrollArea:Rectangle; // zone de scroll

private var m_vertical:Boolean; // indique si le manager doit scroller l'objet à la verticale ou non

private var m_horizontal:Boolean; // indique si le manager doit scroller l'objet à l'horizontale ou non

public function ScrollManager()

{

m_scrollArea = new Rectangle();

m_scrollV = m_scrollH = 0;

m_content = null;

m_vertical = m_horizontal = false;

}

/**

* Détruit proprement le ScrollManager

public function destroy():void

{

m_content = null;

m_scrollArea = null;

delete this;

}

/**

* Fonction qui actualise l'état graphique du composant et de tous ses éléments.

private function replace():void

{

if ( m_content == null ) // Si le contenu n'est pas défini, on a pas besoin d'actualiser quoi que ce soit

{

return;

}

var diff:Number;

if ( m_horizontal ) // si on scroll à l'horizontale

{

// la variable diff vaut la largeur du contenu - la largeur de la zone de scroll

diff = m_content.width - m_scrollArea.width;

if ( diff < 0 )

diff = 0;

// on rédéfinit la position horizontale du contenu

m_content.x = m_scrollArea.x - ( diff * m_scrollH );

}

if ( m_vertical )// si on scroll à la verticale

{

// la variable diff vaut la hauteur du contenu - la hauteur de la zone de scroll

diff = m_content.height - m_scrollArea.height;

if ( diff < 0 )

diff = 0;

// on rédéfinit la position verticale du contenu

m_content.y = m_scrollArea.y - ( diff * m_scrollV );

}

/**

* Permet de signaler au manager si le contenu doit être scrollé à la verticale ou pas

public function get vertical():Boolean { return m_vertical; }

public function set vertical(p_vertical:Boolean):void { m_vertical = p_vertical; }

/**

* Permet de signaler au manager si le contenu doit être scrollé à l'horizontale ou pas

public function get horizontal():Boolean { return m_horizontal; }

public function set horizontal(p_horizontal:Boolean):void { m_horizontal = p_horizontal; }

/**

* Permet de signaler au manager quel est le contenu à scroller

public function set content(p_content:DisplayObject):void { m_content = p_content; replace(); }

public function get content():DisplayObject{ return m_content; }

/**

* Récupère / définit le pourcentage de scrolling vertical du contenu

public function set scrollV(p_scrollV:Number):void

{

m_scrollV = ( p_scrollV > 1 ) ? 1 : ( p_scrollV < 0 ) ? 0 : p_scrollV ;

replace();

}

public function get scrollV():Number { return m_scrollV; }

/**

* Récupère / définit le pourcentage de scrolling horizontal du contenu

public function set scrollH(p_scrollH:Number):void

{

m_scrollH = ( p_scrollH > 1 ) ? 1 : ( p_scrollH < 0 ) ? 0 : p_scrollH ;

replace();

}

public function get scrollH():Number { return m_scrollH; }

/**

* Récupère / définit la zone de scroll du contenu

public function set scrollArea(p_scrollArea : Rectangle) : void

{

m_scrollArea = p_scrollArea;

replace();

}

public function get scrollArea() : Rectangle

{

return m_scrollArea;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.manager.IScrollManager.as » bookmarkname= »com.actionscriptfacile.ui.scroll.manager.IScrollManager.as »]

package  com.actionscriptfacile.ui.scroll.manager
{
	import flash.display.DisplayObject;
	import flash.geom.Rectangle;

	/**
	 * ...
	 * @author Matthieu
	 */
	public interface IScrollManager
	{

		function destroy():void;

		function set content( p_content:DisplayObject ):void;
		function get content():DisplayObject;

		function set scrollV( p_scrollV:Number ):void;
		function get scrollV():Number;

		function set scrollH( p_scrollH:Number ):void;
		function get scrollH():Number;

		function get vertical():Boolean;
		function set vertical( p_vertical:Boolean ):void;

		function get horizontal():Boolean;
		function set horizontal( p_horizontal:Boolean ):void;

		function set scrollArea( p_scrollArea:Rectangle ):void;
		function get scrollArea():Rectangle;

	}

}

package com.actionscriptfacile.ui.scroll.manager

{

import flash.display.DisplayObject;

import flash.geom.Rectangle;

/**

* ...

* @author Matthieu

public interface IScrollManager

{

function destroy():void;

function set content( p_content:DisplayObject ):void;

function get content():DisplayObject;

function set scrollV( p_scrollV:Number ):void;

function get scrollV():Number;

function set scrollH( p_scrollH:Number ):void;

function get scrollH():Number;

function get vertical():Boolean;

function set vertical( p_vertical:Boolean ):void;

function get horizontal():Boolean;

function set horizontal( p_horizontal:Boolean ):void;

function set scrollArea( p_scrollArea:Rectangle ):void;

function get scrollArea():Rectangle;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as »]

package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.scroll.manager.ScrollManager;
	import com.actionscriptfacile.ui.UIComponent;

	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;

	/**
	 * Une VerticalScrollBar est un composant graphique qui permet à l'utilisateur de faire défiler
	 * verticalement un objet graphique au sein d'une zone définie au préalable.
	 *
	 * @author Matthieu
	 */
	public class VerticalScrollBar extends UIComponent
	{

		private var m_manager:ScrollManager; // reference vers le scrollManager
		private var m_scroller:ScrollerButton; // Le bouton scroller
		private var m_background:Sprite; // Le background de la barre de scroll
		private var m_upButton:ScrollUpButton; // L'UIComponent "scroll up"
		private var m_bottomButton:ScrollDownButton; // L'UIComponent "scroll down"
		private var m_scrollV:Number;

		/**
		 * Constantes de skin
		 */
		static public const SCROLL_VERTICAL_BACKGROUND_SKIN	:String = 'SCROLL_VERTICAL_BACKGROUND_SKIN';

		public function VerticalScrollBar()
		{
			/*
			 * on crée une méthode init pour gagner des ressources,
			 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
			 * pas optimisé à la compilation,
			 * on met donc toutes nos instructions dans une méthode privée init
			 *
			 */
			init();
		}

		/**
		 * Initialise proprement un objet de type VerticalScrollBar
		 */
		private function init():void
		{

			m_manager = new ScrollManager(); // on crée un nouveau ScrollManager
			m_manager.content = null; // on définit son content à null
			m_manager.vertical = true; // on lui précise que l'on souhaite scrolle à la verticale
			m_manager.scrollV = 0; // on initiliase le pourcentage de scrolling vertical à 0.

			// Nous créeons ici les différents éléments de la VerticalScrollBar
			m_scroller = new ScrollerButton();
			m_background = new Sprite();
			m_upButton = new ScrollUpButton();
			m_bottomButton = new ScrollDownButton();
		}

		/**
		 * Récupère / définit le contenu à "scroller"
		 */
		public function set content( p_content:DisplayObject ):void { m_manager.content = p_content; }
		public function get content():DisplayObject { return m_manager.content; }

		/**
		 * Récupère définit la scrollArea (la zone de scroll)
		 */
		public function set scrollArea( p_scrollArea:Rectangle):void { m_manager.scrollArea = p_scrollArea; }
		public function get scrollArea():Rectangle { return m_manager.scrollArea; }

		/**
		 * Récupère / définit le pourcentage de scrolling vertical du "content"
		 */
		public function get scrollV():Number { return m_scrollV; }
		public function set scrollV( p_scrollV:Number):void
		{
			// si le paramètre est supérieur à 1 ou inférieur à 0 alors on recadre les valeurs
			m_scrollV = ( p_scrollV &gt; 1 ) ? 1 : ( p_scrollV &lt; 0 ) ? 0 : p_scrollV ; 

			// calcule la position (y) maximum que peut prendre le scroller
			// puis on le repositionne en fonction de cette valeur et du pourcentage de scroll
			var maxV:Number = m_background.height - m_scroller.height;
			m_scroller.y = m_background.y + ( maxV * m_scrollV );
		}

		/**
		 * Fonction interne utilisée pour réinitialiser les états des éléments graphiques
		 */
		private function reset():void
		{

			/**
			 * On ajoute à la display list nos éléments background, scroller, scrollUp, scrollDown
			 */
			addChild( m_background );
			addChild( m_upButton );
			addChild ( m_bottomButton );
			addChild( m_scroller );

			/**
			 * On réinitialise leurs coordonnées
			 */
			m_scroller.y = m_background.y = m_upButton.height;
			m_bottomButton.y = m_background.y + m_background.height;
		}

		/**
		 * Fonction qui récupère le click sur les éléments, background, scrollUp et scrollDown.
		 *
		 * @param	e Objet de type MouseEvent
		 */
		private function clickHandler(e:MouseEvent):void
		{
			switch( e.currentTarget ) // Si la cible est ...
			{
				// le scrollUp alors décrémente le pourcentage de scrolling vertical
				case m_upButton:
					scrollV -= .15;
					break;

				// le scrollDown alors incrémente le pourcentage de scrolling vertical
				case m_bottomButton:
					scrollV += .15;
					break;

				// le background alors calcule le pourcentage de scrolling vertical en fonction
				// de la position en y du click sur le background
				case m_background:
					scrollV = ( ( e.localY * m_background.scaleY ) / m_background.height );
					break;
			}
		}

		/**
		 * Fonction qui gère l'utilisation de la molette de la souris
		 *
		 * @param	e	paramètre de type MouseEvent
		 */
		private function wheelHandler(e:MouseEvent):void
		{
			/* on récupère la propriété delta que l'on divise par dix, puis on soustrait le résultat
			 * */
			scrollV -= e.delta * .1;
		}

		/**
		 * Fonction servant à mettre à jour en temps réel le pourcentage de scrolling vertical
		 * du composant, à le corriger si cela s'avère nécéssaire puis à répercuter ces modifications
		 * sur le scrolling vertical du ScrollManager
		 *
		 * @param	e	paramètre de type Event
		 */
		private function enterFrameHandler(e:Event):void
		{
			// on calcule le pourcentage de scrolling vertical en fonction de la position en y du scroller
			m_scrollV = ( m_scroller.y - m_background.y ) / ( m_background.height - m_scroller.height);

			// on arrondit la valeur si nécéssaire
			if ( m_scrollV &gt; 0.99 )
				m_scrollV = 1;

			// on attribue la même valeur au ScrollManager
			m_manager.scrollV = m_scrollV;
		}

		/**
		 * Fonction interne servant à gérer le glisser / déposer ( on parle de drag ) du scroller.
		 *
		 * @param	e	paramètre de type Event
		 */
		private function toggleDragHandler(e:Event):void
		{

			// si l'utilisateur appuie sur le bouton clic gauche de sa souris alors ...
			if ( e.type == MouseEvent.MOUSE_DOWN )
			{

				/* on définit la zone de drag du bouton scroller
				 * puis on fait appel à startDrag
				 */
				var rectangle:Rectangle = m_background.getRect( this );
				rectangle.height -= m_scroller.height;
				rectangle.width = 0;

				m_scroller.startDrag( false, rectangle );
			}
			else // sinon ...
			{
				// on stop le "drag" du composant scroller
				m_scroller.stopDrag();
			}

		}

		/**
		 * Lorsqu'on est retirés de la display List du stage on tue tous les eventListeners
		 */
		override public function onRemovedFromStage():void
		{

			if ( m_manager.content )
				m_manager.content.removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

			m_scroller.removeEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false );
			m_scroller.removeEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false );
			m_scroller.removeEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false );
			removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );
			m_background.removeEventListener( MouseEvent.CLICK, clickHandler, false );
			m_upButton.removeEventListener( MouseEvent.CLICK, clickHandler, false );
			m_bottomButton.removeEventListener( MouseEvent.CLICK, clickHandler, false );
			removeEventListener( Event.ENTER_FRAME , enterFrameHandler, false );
		}

		/**
		 * Losqu'on est ajouté à la displayList du stage, on initialise les eventListeners
		 */
		override public function onAddedToStage():void
		{
			// si le contenu n'est pas nul alors on gère les événements de type "molette" qui émanent de lui.
			if( m_manager.content )
				m_manager.content.addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

			/*
			 * on écoute les évenements de type :
			 *
			 * RELEASE OUTSIDE ( que l'on a recodé dans le chapitre 3, lire la classe UIComponent )
			 * MOUSE_DOWN et MOUSE_UP sur le composant scroller
			 * */
			m_scroller.addEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false );
			m_scroller.addEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false );
			m_scroller.addEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false );

			/*
			 * On écoute les click souris sur les background, scrollUp et scrollDown
			 */
			m_background.addEventListener( MouseEvent.CLICK, clickHandler, false );
			m_upButton.addEventListener( MouseEvent.CLICK, clickHandler, false );
			m_bottomButton.addEventListener( MouseEvent.CLICK, clickHandler, false );

			/*
			 * On écoute enfin les événements de type molette sur le composant
			 * VerticalScrollBar entier
			 */
			addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

			/**
			 * On écoute les enterFrame, la fonction écouteur permet d'actualiser l'état
			 * graphique des différents éléments du composant
			 */
			addEventListener( Event.ENTER_FRAME , enterFrameHandler, false );
		}

		/**
		 * Tue proprement un objet de type VerticalScrollBar
		 */
		override public function destroy():void
		{

			/**
			 * On enlève de la displayList les différents éléments du composant
			 * puis on enlève ce dernier de la displayList de son parent
			 */
			removeChild( m_upButton );
			removeChild( m_bottomButton );
			removeChild( m_scroller );
			removeChild( m_background );

			if ( parent &amp;&amp; parent.contains( this ) )
				parent.removeChild( this );

			// on détruit le ScrollManager, puis le passe à null ainsi que tous les éléments graphiques
			m_manager.destroy();
			m_manager = null;
			m_upButton = null;
			m_background = null;
			m_scroller = null;
			m_bottomButton = null;

			// Enfin nous appelons la fonction destroy() parente ( UIComponent )
			super.destroy();
		}

		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet de type VerticalScrollBar
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{

			/**
			 * on applique la skin aux boutons
			 */
			m_scroller.applySkin( p_skin );
			m_upButton.applySkin( p_skin );
			m_bottomButton.applySkin( p_skin );

			var definition:Class = p_skin.getSkin( SCROLL_VERTICAL_BACKGROUND_SKIN );

			// si on a la définiton pour le background
			if ( definition != null )
			{
				// on le détruit
				if( contains( m_background ) )
					removeChild( m_background );

				m_background = null;
				// on le réinstancie
				m_background = new definition();
			}

			// ensuite on repositionne tous les éléments
			reset();
		}

		/**
		 * Fonction permettant de gérer intelligemment le redimensionnement
		 * d'un objet de type VerticalScrollBar
		 *
		 * @param	p_width		la nouvelle largeur ( en pixels ) du composant
		 * @param	p_height	la nouvelle hauteur ( en pixels ) du composant
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
			m_background.width = m_bottomButton.width = m_scroller.width = m_upButton.width = p_width;

			m_scroller.height = ( p_height - m_bottomButton.height - m_upButton.height ) * 0.3;
			m_background.height = p_height - m_bottomButton.height - m_upButton.height;

			m_upButton.y = 0;
			m_background.y = m_upButton.height;
			m_bottomButton.y = m_background.y + m_background.height;

			// on appelle la méthode parente
			super.resize( p_width, p_height );
		}

	}

}

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

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.scroll.manager.ScrollManager;

import com.actionscriptfacile.ui.UIComponent;

import flash.display.DisplayObject;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.geom.Rectangle;

/**

* Une VerticalScrollBar est un composant graphique qui permet à l'utilisateur de faire défiler

* verticalement un objet graphique au sein d'une zone définie au préalable.

* @author Matthieu

public class VerticalScrollBar extends UIComponent

{

private var m_manager:ScrollManager; // reference vers le scrollManager

private var m_scroller:ScrollerButton; // Le bouton scroller

private var m_background:Sprite; // Le background de la barre de scroll

private var m_upButton:ScrollUpButton; // L'UIComponent "scroll up"

private var m_bottomButton:ScrollDownButton; // L'UIComponent "scroll down"

private var m_scrollV:Number;

/**

* Constantes de skin

static public const SCROLL_VERTICAL_BACKGROUND_SKIN :String = 'SCROLL_VERTICAL_BACKGROUND_SKIN';

public function VerticalScrollBar()

{

* on crée une méthode init pour gagner des ressources,

* en effet en AS3 tout ce qui se trouvre dans le constructeur n'est

* pas optimisé à la compilation,

* on met donc toutes nos instructions dans une méthode privée init

init();

}

/**

* Initialise proprement un objet de type VerticalScrollBar

private function init():void

{

m_manager = new ScrollManager(); // on crée un nouveau ScrollManager

m_manager.content = null; // on définit son content à null

m_manager.vertical = true; // on lui précise que l'on souhaite scrolle à la verticale

m_manager.scrollV = 0; // on initiliase le pourcentage de scrolling vertical à 0.

// Nous créeons ici les différents éléments de la VerticalScrollBar

m_scroller = new ScrollerButton();

m_background = new Sprite();

m_upButton = new ScrollUpButton();

m_bottomButton = new ScrollDownButton();

}

/**

* Récupère / définit le contenu à "scroller"

public function set content( p_content:DisplayObject ):void { m_manager.content = p_content; }

public function get content():DisplayObject { return m_manager.content; }

/**

* Récupère définit la scrollArea (la zone de scroll)

public function set scrollArea( p_scrollArea:Rectangle):void { m_manager.scrollArea = p_scrollArea; }

public function get scrollArea():Rectangle { return m_manager.scrollArea; }

/**

* Récupère / définit le pourcentage de scrolling vertical du "content"

public function get scrollV():Number { return m_scrollV; }

public function set scrollV( p_scrollV:Number):void

{

// si le paramètre est supérieur à 1 ou inférieur à 0 alors on recadre les valeurs

m_scrollV = ( p_scrollV > 1 ) ? 1 : ( p_scrollV < 0 ) ? 0 : p_scrollV ;

// calcule la position (y) maximum que peut prendre le scroller

// puis on le repositionne en fonction de cette valeur et du pourcentage de scroll

var maxV:Number = m_background.height - m_scroller.height;

m_scroller.y = m_background.y + ( maxV * m_scrollV );

}

/**

* Fonction interne utilisée pour réinitialiser les états des éléments graphiques

private function reset():void

{

/**

* On ajoute à la display list nos éléments background, scroller, scrollUp, scrollDown

addChild( m_background );

addChild( m_upButton );

addChild ( m_bottomButton );

addChild( m_scroller );

/**

* On réinitialise leurs coordonnées

m_scroller.y = m_background.y = m_upButton.height;

m_bottomButton.y = m_background.y + m_background.height;

}

/**

* Fonction qui récupère le click sur les éléments, background, scrollUp et scrollDown.

* @param e Objet de type MouseEvent

private function clickHandler(e:MouseEvent):void

{

switch( e.currentTarget ) // Si la cible est ...

{

// le scrollUp alors décrémente le pourcentage de scrolling vertical

case m_upButton:

scrollV -= .15;

break;

// le scrollDown alors incrémente le pourcentage de scrolling vertical

case m_bottomButton:

scrollV += .15;

break;

// le background alors calcule le pourcentage de scrolling vertical en fonction

// de la position en y du click sur le background

case m_background:

scrollV = ( ( e.localY * m_background.scaleY ) / m_background.height );

break;

}

/**

* Fonction qui gère l'utilisation de la molette de la souris

* @param e paramètre de type MouseEvent

private function wheelHandler(e:MouseEvent):void

{

/* on récupère la propriété delta que l'on divise par dix, puis on soustrait le résultat

* */

scrollV -= e.delta * .1;

}

/**

* Fonction servant à mettre à jour en temps réel le pourcentage de scrolling vertical

* du composant, à le corriger si cela s'avère nécéssaire puis à répercuter ces modifications

* sur le scrolling vertical du ScrollManager

* @param e paramètre de type Event

private function enterFrameHandler(e:Event):void

{

// on calcule le pourcentage de scrolling vertical en fonction de la position en y du scroller

m_scrollV = ( m_scroller.y - m_background.y ) / ( m_background.height - m_scroller.height);

// on arrondit la valeur si nécéssaire

if ( m_scrollV > 0.99 )

m_scrollV = 1;

// on attribue la même valeur au ScrollManager

m_manager.scrollV = m_scrollV;

}

/**

* Fonction interne servant à gérer le glisser / déposer ( on parle de drag ) du scroller.

* @param e paramètre de type Event

private function toggleDragHandler(e:Event):void

{

// si l'utilisateur appuie sur le bouton clic gauche de sa souris alors ...

if ( e.type == MouseEvent.MOUSE_DOWN )

{

/* on définit la zone de drag du bouton scroller

* puis on fait appel à startDrag

var rectangle:Rectangle = m_background.getRect( this );

rectangle.height -= m_scroller.height;

rectangle.width = 0;

m_scroller.startDrag( false, rectangle );

}

else // sinon ...

{

// on stop le "drag" du composant scroller

m_scroller.stopDrag();

}

/**

* Lorsqu'on est retirés de la display List du stage on tue tous les eventListeners

override public function onRemovedFromStage():void

{

if ( m_manager.content )

m_manager.content.removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

m_scroller.removeEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false );

m_scroller.removeEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false );

m_scroller.removeEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false );

removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

m_background.removeEventListener( MouseEvent.CLICK, clickHandler, false );

m_upButton.removeEventListener( MouseEvent.CLICK, clickHandler, false );

m_bottomButton.removeEventListener( MouseEvent.CLICK, clickHandler, false );

removeEventListener( Event.ENTER_FRAME , enterFrameHandler, false );

}

/**

* Losqu'on est ajouté à la displayList du stage, on initialise les eventListeners

override public function onAddedToStage():void

{

// si le contenu n'est pas nul alors on gère les événements de type "molette" qui émanent de lui.

if( m_manager.content )

m_manager.content.addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

* on écoute les évenements de type :

* RELEASE OUTSIDE ( que l'on a recodé dans le chapitre 3, lire la classe UIComponent )

* MOUSE_DOWN et MOUSE_UP sur le composant scroller

* */

m_scroller.addEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false );

m_scroller.addEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false );

m_scroller.addEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false );

* On écoute les click souris sur les background, scrollUp et scrollDown

m_background.addEventListener( MouseEvent.CLICK, clickHandler, false );

m_upButton.addEventListener( MouseEvent.CLICK, clickHandler, false );

m_bottomButton.addEventListener( MouseEvent.CLICK, clickHandler, false );

* On écoute enfin les événements de type molette sur le composant

* VerticalScrollBar entier

addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

/**

* On écoute les enterFrame, la fonction écouteur permet d'actualiser l'état

* graphique des différents éléments du composant

addEventListener( Event.ENTER_FRAME , enterFrameHandler, false );

}

/**

* Tue proprement un objet de type VerticalScrollBar

override public function destroy():void

{

/**

* On enlève de la displayList les différents éléments du composant

* puis on enlève ce dernier de la displayList de son parent

removeChild( m_upButton );

removeChild( m_bottomButton );

removeChild( m_scroller );

removeChild( m_background );

if ( parent && parent.contains( this ) )

parent.removeChild( this );

// on détruit le ScrollManager, puis le passe à null ainsi que tous les éléments graphiques

m_manager.destroy();

m_manager = null;

m_upButton = null;

m_background = null;

m_scroller = null;

m_bottomButton = null;

// Enfin nous appelons la fonction destroy() parente ( UIComponent )

super.destroy();

}

/**

* Fonction permettant de gérer la customisation des différents éléments

* graphiques d'un objet de type VerticalScrollBar

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin(p_skin:ISkin):void

{

/**

* on applique la skin aux boutons

m_scroller.applySkin( p_skin );

m_upButton.applySkin( p_skin );

m_bottomButton.applySkin( p_skin );

var definition:Class = p_skin.getSkin( SCROLL_VERTICAL_BACKGROUND_SKIN );

// si on a la définiton pour le background

if ( definition != null )

{

// on le détruit

if( contains( m_background ) )

removeChild( m_background );

m_background = null;

// on le réinstancie

m_background = new definition();

}

// ensuite on repositionne tous les éléments

reset();

}

/**

* Fonction permettant de gérer intelligemment le redimensionnement

* d'un objet de type VerticalScrollBar

* @param p_width la nouvelle largeur ( en pixels ) du composant

* @param p_height la nouvelle hauteur ( en pixels ) du composant

override public function resize( p_width:Number, p_height:Number ):void

{

m_background.width = m_bottomButton.width = m_scroller.width = m_upButton.width = p_width;

m_scroller.height = ( p_height - m_bottomButton.height - m_upButton.height ) * 0.3;

m_background.height = p_height - m_bottomButton.height - m_upButton.height;

m_upButton.y = 0;

m_background.y = m_upButton.height;

m_bottomButton.y = m_background.y + m_background.height;

// on appelle la méthode parente

super.resize( p_width, p_height );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as »]

package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.button.Button;

	/**
	 * Gestion du bouton de Scroll vers le haut pour une ScrollBar
	 *
	 * @author Matthieu
	 */
	public class ScrollUpButton extends Button
	{

		public static const SCROLLUP_VERTICAL_OVER_SKIN:String = 'SCROLLUP_VERTICAL_SKIN';
		public static const SCROLLUP_VERTICAL_UP_SKIN:String = 'SCROLLUP_UP_SKIN';
		public static const SCROLLUP_VERTICAL_DOWN_SKIN:String = 'SCROLLUP_DOWN_SKIN';

		public function ScrollUpButton() { }

		/**
		 * on crée une méthode init pour gagner des ressources,
		 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
		 * pas optimisé à la compilation,
		 * on met donc toutes nos instructions dans une méthode privée init
		 *
		 * Méthode appelée directement par le parent Button
		 */
		override protected function init():void
		{
			super.init();
			removeChild( m_label );// supprime le texte du bouton
		}

		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{

			p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_OVER_SKIN ) );
			p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_UP_SKIN ) );
			p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_DOWN_SKIN ) );

			super.applySkin( p_skin );
		}
	}

}

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.button.Button;

/**

* Gestion du bouton de Scroll vers le haut pour une ScrollBar

* @author Matthieu

public class ScrollUpButton extends Button

{

public static const SCROLLUP_VERTICAL_OVER_SKIN:String = 'SCROLLUP_VERTICAL_SKIN';

public static const SCROLLUP_VERTICAL_UP_SKIN:String = 'SCROLLUP_UP_SKIN';

public static const SCROLLUP_VERTICAL_DOWN_SKIN:String = 'SCROLLUP_DOWN_SKIN';

public function ScrollUpButton() { }

/**

* on crée une méthode init pour gagner des ressources,

* en effet en AS3 tout ce qui se trouvre dans le constructeur n'est

* pas optimisé à la compilation,

* on met donc toutes nos instructions dans une méthode privée init

* Méthode appelée directement par le parent Button

override protected function init():void

{

super.init();

removeChild( m_label );// supprime le texte du bouton

}

/**

* Fonction permettant de gérer la customisation des différents éléments

* graphiques d'un objet

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin( p_skin:ISkin ):void

{

p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_OVER_SKIN ) );

p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_UP_SKIN ) );

p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_DOWN_SKIN ) );

super.applySkin( p_skin );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollerButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollerButton.as « ]

package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.button.Button;

	/**
	 * Gestion du bouton de Scroller (au milieu de la ScrollBar) pour déplacer le contenu vers le haut ou le bas
	 *
	 * @author Matthieu
	 */
	public class ScrollerButton extends Button
	{

		public static const SCROLLER_VERTICAL_OVER_SKIN:String = 'SCROLLER_VERTICAL_SKIN';
		public static const SCROLLER_VERTICAL_UP_SKIN:String = 'SCROLLER_UP_SKIN';
		public static const SCROLLER_VERTICAL_DOWN_SKIN:String = 'SCROLLER_DOWN_SKIN';

		public function ScrollerButton() { }

		/**
		 * on crée une méthode init pour gagner des ressources,
		 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
		 * pas optimisé à la compilation,
		 * on met donc toutes nos instructions dans une méthode privée init
		 *
		 * Méthode appelée directement par le parent Button
		 */
		override protected function init():void
		{
			super.init();
			removeChild( m_label );
		}

		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{

			p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_OVER_SKIN ) );
			p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_UP_SKIN ) );
			p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_DOWN_SKIN ) );

			super.applySkin( p_skin );
		}
	}

}

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.button.Button;

/**

* Gestion du bouton de Scroller (au milieu de la ScrollBar) pour déplacer le contenu vers le haut ou le bas

* @author Matthieu

public class ScrollerButton extends Button

{

public static const SCROLLER_VERTICAL_OVER_SKIN:String = 'SCROLLER_VERTICAL_SKIN';

public static const SCROLLER_VERTICAL_UP_SKIN:String = 'SCROLLER_UP_SKIN';

public static const SCROLLER_VERTICAL_DOWN_SKIN:String = 'SCROLLER_DOWN_SKIN';

public function ScrollerButton() { }

/**

* on crée une méthode init pour gagner des ressources,

* en effet en AS3 tout ce qui se trouvre dans le constructeur n'est

* pas optimisé à la compilation,

* on met donc toutes nos instructions dans une méthode privée init

* Méthode appelée directement par le parent Button

override protected function init():void

{

super.init();

removeChild( m_label );

}

/**

* Fonction permettant de gérer la customisation des différents éléments

* graphiques d'un objet

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin( p_skin:ISkin ):void

{

p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_OVER_SKIN ) );

p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_UP_SKIN ) );

p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_DOWN_SKIN ) );

super.applySkin( p_skin );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as »]

package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.button.Button;

	/**
	 * Gestion du bouton de Scroll vers le bas pour une ScrollBar
	 *
	 * @author Matthieu
	 */
	public class ScrollDownButton extends Button
	{

		public static const SCROLLDOWN_VERTICAL_OVER_SKIN:String = 'SCROLLDOWN_VERTICAL_SKIN';
		public static const SCROLLDOWN_VERTICAL_UP_SKIN:String = 'SCROLLDOWN_UP_SKIN';
		public static const SCROLLDOWN_VERTICAL_DOWN_SKIN:String = 'SCROLLDOWN_DOWN_SKIN';

		public function ScrollDownButton() { }

		/**
		 * on crée une méthode init pour gagner des ressources,
		 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
		 * pas optimisé à la compilation,
		 * on met donc toutes nos instructions dans une méthode privée init
		 *
		 * Méthode appelée directement par le parent Button
		 */
		override protected function init():void
		{
			super.init();
			removeChild( m_label );// supprime le texte du bouton
		}

		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{

			p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_OVER_SKIN ) );
			p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_UP_SKIN ) );
			p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_DOWN_SKIN ) );

			super.applySkin( p_skin );
		}
	}

}

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.button.Button;

/**

* Gestion du bouton de Scroll vers le bas pour une ScrollBar

* @author Matthieu

public class ScrollDownButton extends Button

{

public static const SCROLLDOWN_VERTICAL_OVER_SKIN:String = 'SCROLLDOWN_VERTICAL_SKIN';

public static const SCROLLDOWN_VERTICAL_UP_SKIN:String = 'SCROLLDOWN_UP_SKIN';

public static const SCROLLDOWN_VERTICAL_DOWN_SKIN:String = 'SCROLLDOWN_DOWN_SKIN';

public function ScrollDownButton() { }

/**

* on crée une méthode init pour gagner des ressources,

* en effet en AS3 tout ce qui se trouvre dans le constructeur n'est

* pas optimisé à la compilation,

* on met donc toutes nos instructions dans une méthode privée init

* Méthode appelée directement par le parent Button

override protected function init():void

{

super.init();

removeChild( m_label );// supprime le texte du bouton

}

/**

* Fonction permettant de gérer la customisation des différents éléments

* graphiques d'un objet

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin( p_skin:ISkin ):void

{

p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_OVER_SKIN ) );

p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_UP_SKIN ) );

p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_DOWN_SKIN ) );

super.applySkin( p_skin );

}

[/codesyntax]

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

package
{
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;
	import com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin;// import du skin de la VerticalScrollBar

	import flash.display.Sprite;
	import flash.geom.Rectangle;

	/**
	 * Exemple d'utilisation du composant VerticalScrollBar.
	 * @author Matthieu
	 */
	public class VerticalScrollBarExample extends Sprite
	{

		public function VerticalScrollBarExample()
		{
			// définition de la hauteur de la zone de scroll
			var nHeightScrollArea:Number = 150;

			// création d'un objet de type Sprite, il nous servira de content
			var content:Sprite = new Sprite();
			content.graphics.beginFill( 0XFF0000 );
			content.graphics.drawRect( 0, 0, 300, 300 );
			content.graphics.endFill();

			// création d'une scrollbar verticale
			var barre:VerticalScrollBar = new VerticalScrollBar();
			barre.content = content;// définition de son content et de sa scrollArea
			barre.scrollArea = new Rectangle( 0, 20, 100, nHeightScrollArea );
			// 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 ]
			barre.applySkin( new DefaultVerticalScrollBarSkin() );

			// ajout à la displaylist
			addChild( barre );
			addChild( content );

			// détermination de la position de la ScrollBar
			barre.x = 350;
			barre.y = 20;

			content.x = 50;

			// définition de la taille de la scrollbar pour lui donner la hauteur de la zone à scroller
			barre.resize( barre.width, nHeightScrollArea );
		}

	}

}

package

{

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

import com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin;// import du skin de la VerticalScrollBar

import flash.display.Sprite;

import flash.geom.Rectangle;

/**

* Exemple d'utilisation du composant VerticalScrollBar.

* @author Matthieu

public class VerticalScrollBarExample extends Sprite

{

public function VerticalScrollBarExample()

{

// définition de la hauteur de la zone de scroll

var nHeightScrollArea:Number = 150;

// création d'un objet de type Sprite, il nous servira de content

var content:Sprite = new Sprite();

content.graphics.beginFill( 0XFF0000 );

content.graphics.drawRect( 0, 0, 300, 300 );

content.graphics.endFill();

// création d'une scrollbar verticale

var barre:VerticalScrollBar = new VerticalScrollBar();

barre.content = content;// définition de son content et de sa scrollArea

barre.scrollArea = new Rectangle( 0, 20, 100, nHeightScrollArea );

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

barre.applySkin( new DefaultVerticalScrollBarSkin() );

// ajout à la displaylist

addChild( barre );

addChild( content );

// détermination de la position de la ScrollBar

barre.x = 350;

barre.y = 20;

content.x = 50;

// définition de la taille de la scrollbar pour lui donner la hauteur de la zone à scroller

barre.resize( barre.width, nHeightScrollArea );

}

[/codesyntax]

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.scroll.ScrollBarBackgroundSkin;
	import com.as3facile.skin.scroll.ScrollBottomButtonSkin;
	import com.as3facile.skin.scroll.ScrollUpButtonSkin;
	import com.as3facile.skin.scroll.ScrollerButtonSkin;

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

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

		public function DefaultVerticalScrollBarSkin()
		{
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );
		}

	}

}

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.scroll.ScrollBarBackgroundSkin;

import com.as3facile.skin.scroll.ScrollBottomButtonSkin;

import com.as3facile.skin.scroll.ScrollUpButtonSkin;

import com.as3facile.skin.scroll.ScrollerButtonSkin;

import com.actionscriptfacile.skin.Skin;

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

/**

* Définition du skin utilisé pour un composant VerticalScrollBar

* @author Matthieu

public class DefaultVerticalScrollBarSkin extends Skin

{

public function DefaultVerticalScrollBarSkin()

{

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );

}

[/codesyntax]

Quelles sont les Fonctionnalités d’une Bibliothèque de Composants ActionScript 3 ?

7 questions

Ecrit le 3 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Dans ce tutoriel, nous allons enfin aborder la pratique!

Nous allons développer les fonctionnalités de base de notre Bibliothèque de Composants AS3.

Comme nous l’avons précédemment (Chapitre 2 : Comment créer des Composants AS3 ?), nous commençons déjà par décrire ces fonctionnalités au sein d’un Cahier des Charges Fonctionnels (CDCF).

I – Cahier Des Charges Fonctionnel d’une Bibliothèque de Composants AS3

Nous avons déjà clairement défini dans le « Chapitre 1 : Pourquoi créer des Composants Graphiques en AS3 ?« , les Composants Graphiques.

Voici le résumé d’un Composant Graphiques en AS3 :

“Un composant est un élément qui apporte une interaction avec l’utilisateur, il est possible de le faire apparaître ou disparaître à volonté et il se doit d’être personnalisable au niveau de l’apparence.”

C’est une description courte, qui résume au niveau fonctionnel, ce que doit être composant graphique.

Les points importants d’un composant :

Le composant doit apporter une interaction avec l’utilisateur, il s’agira donc bien entendu d’un objet graphique.

Il est possible de le faire apparaître et disparaître à volonté : en effet, un composant doit pouvoir être supprimé et ajouté à la display list (la liste d’affichage) sans aucun effort.

Il doit être personnalisable au niveau de l’apparence : notre composant devra pouvoir changer de style graphique, et ce, de la manière la plus simple qui soit.

Notre CDCF (Cahier des Charges Fonctionnels) est certes un peu court, toutefois, nous n’avons pas besoin de plus de précisions, celles-ci seront données dans le CDCT (Cahier des Charges Techniques).

II – Cahier Des Charges Techniques d’une Bibliothèque de Composants AS3

C’est la partie la plus intéressante, la description technique des fonctionnalités communes à l’ensemble de nos composants. Commençons sans plus tarder en reprenant le CDCT (Cahier des Charges Techniques).

Le composant apporte une interaction avec l’utilisateur

Notre classe de base sera donc un objet graphique, nous choisissons d’étendre la classe graphique de base flash.display.Sprite.

Possibilité de le faire apparaître ou disparaître volonté

En as3, nous pouvons manipuler la liste d’affichage ( aussi appelée display list ) avec les méthodes classiques de chaque objet graphique. Cependant, nous allons ajouter quelques fonctionnalités supplémentaires.

Une méthode hide, qui nous permettra de “cacher” notre objet graphique en le supprimant de la display list, tout en sauvegardant son ancien objet parent dans une propriété “lastParent”.

Un getter lastParent qui nous permettra de récupérer le dernier parent du composant.
Une méthode show qui nous permettra de rajouter notre objet graphique à la display list de son lastParent.

Avec ces fonctionnalités communes à tous les composants, nous pouvons cacher / supprimer et montrer / ajouter un objet à la display list de manière extrêmement simplifiée, avec une seule méthode.

Personnalisable au niveau de l’apparence

Les composants doivent pouvoir être customisables, en anglais nous appelons cela le “skin” ( skin = peau ).

Ainsi, nous allons donc créer un objet “Skin” qui permet d’associer des valeurs de constantes à des noms de classes.

Nous enverrons ensuite cet objet “Skin” à une méthode nommée “applySkin”, définie dans une interface Iskinnable. Cette interface sera implémentée par tous nos composants.

Ajout de quelques fonctionnalités supplémentaires :

Une méthode destroy, qui permet de détruire proprement notre composant.
Une méthode resize, qui permet de redimensionner proprement notre composant.
Une méthode onAdded qui s’exécute lorsque le composant sera ajouté à la display list d’un objet graphique, pour le premier.

Une méthode onAddedToStage qui s’exécute lorsque le composant ou son parent sera ajouté à la displaylist du stage. Pour simplifier, cette méthode est appelée dès que la propriété stage du composant est disponible.

Une méthode onRemoved qui s’exécute lorsque le composant est enlevé de la display list de son parent.
Une méthode onRemovedFromStage qui s’exécute lorsque le composant est enlevé de la displaylist du stage.
Un getter / setter de type Tooltip, nous reviendrons sur ce point plus tard, lorsque nous aborderons le chapitre relatif au composant Tooltip.

Nous redévelopperons également le comportement d’un évènement bien pratique qui a disparu lors du passage à l’as3. L’évènement onReleaseOutside, qui s’éxécute lorsque l’utilisateur relâche le clic gauche de la souris en dehors de l’objet dans lequel a été capturé le mouseDown.

Conclusion

Nous disposons désormais des bases essentielles pour coder nos différents composants, ceux-ci hériteront tous de la classe UIComponent.

Dans le prochain chapitre, nous allons attaquer notre premier vrai composant : le bouton.

Sources commentées

com.actionscriptfacile.skin.ISkinnable
com.actionscriptfacile.skin.Skin
com.actionscriptfacile.skin.ISkin
com.actionscriptfacile.ui.IComponent
com.actionscriptfacile.ui.UIComponent

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.

Et vous, quelles sont les Fonctionnalités Communes à tous les Composants AS3 que vous souhaiteriez ?

Avez-vous d’autres idées ? Des fonctionnalités auxquelles je n’aurais pas pensé ?

Dites-moi cela dans les commentaires ci-dessous.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.ISkinnable » bookmarkname= »com.actionscriptfacile.skin.ISkinnable »]

package  com.actionscriptfacile.skin
{

	import com.actionscriptfacile.skin.ISkin;

	public interface ISkinnable
	{

		function applySkin( p_skin:ISkin ):void;

	}

}

package com.actionscriptfacile.skin

{

import com.actionscriptfacile.skin.ISkin;

public interface ISkinnable

{

function applySkin( p_skin:ISkin ):void;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.Skin » bookmarkname= »com.actionscriptfacile.skin.Skin »]

package  com.actionscriptfacile.skin
{

	import com.actionscriptfacile.skin.ISkin;
	import flash.utils.Dictionary;
	import flash.utils.getDefinitionByName;
	import flash.utils.getQualifiedClassName;

	public class Skin implements ISkin
	{
		private var m_data:Dictionary;

		public function Skin()
		{
			m_data = new Dictionary();
		}

		public function setSkin( p_skinName:String, p_skinDefinition:Class ):void
		{
			m_data[ p_skinName ] = p_skinDefinition;
		}

		public function getSkin(p_skinName:String) :Class
		{
			return m_data[ p_skinName ];
		}

		public function clone():ISkin
		{
			var definition:Class = getDefinitionByName( getQualifiedClassName( this ) ) as Class;
			var skin:ISkin = new definition() as ISkin;
			skin.setSkins( m_data );

			return skin;
		}

		public function setSkins(p_skins:Dictionary):void{ m_data = p_skins; }
		public function getSkins():Dictionary { return m_data; }

		public function destroy():void
		{
			m_data = null;
			delete this;
		}

	}

}

package com.actionscriptfacile.skin

{

import com.actionscriptfacile.skin.ISkin;

import flash.utils.Dictionary;

import flash.utils.getDefinitionByName;

import flash.utils.getQualifiedClassName;

public class Skin implements ISkin

{

private var m_data:Dictionary;

public function Skin()

{

m_data = new Dictionary();

}

public function setSkin( p_skinName:String, p_skinDefinition:Class ):void

{

m_data[ p_skinName ] = p_skinDefinition;

}

public function getSkin(p_skinName:String) :Class

{

return m_data[ p_skinName ];

}

public function clone():ISkin

{

var definition:Class = getDefinitionByName( getQualifiedClassName( this ) ) as Class;

var skin:ISkin = new definition() as ISkin;

skin.setSkins( m_data );

return skin;

}

public function setSkins(p_skins:Dictionary):void{ m_data = p_skins; }

public function getSkins():Dictionary { return m_data; }

public function destroy():void

{

m_data = null;

delete this;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.ISkin » bookmarkname= »com.actionscriptfacile.skin.ISkin »]

package  com.actionscriptfacile.skin
{
	import flash.utils.Dictionary;

	public interface ISkin
	{
		function setSkin( p_skinName:String, p_skinDefinition:Class ):void;
		function getSkin( p_skinName:String ):Class;
		function setSkins( p_skins:Dictionary ):void;
		function getSkins():Dictionary;

		function clone():ISkin;

		function destroy():void;
	}

}

package com.actionscriptfacile.skin

{

import flash.utils.Dictionary;

public interface ISkin

{

function setSkin( p_skinName:String, p_skinDefinition:Class ):void;

function getSkin( p_skinName:String ):Class;

function setSkins( p_skins:Dictionary ):void;

function getSkins():Dictionary;

function clone():ISkin;

function destroy():void;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.IComponent » bookmarkname= »com.actionscriptfacile.ui.IComponent »]

package  com.actionscriptfacile.ui
{
	import com.actionscriptfacile.skin.ISkinnable;
	import flash.display.DisplayObjectContainer;
	import com.actionscriptfacile.ui.tooltip.Tooltip;

	public interface IComponent extends ISkinnable
	{

		function destroy():void;
		function hide():void;
		function show():void;

		function onAdded():void;
		function onRemoved():void;

		function onAddedToStage():void;
		function onRemovedFromStage():void;

		function resize( p_width:Number , p_height:Number ):void;

		function set tooltip( p_toolTip:Tooltip ):void;
		function get tooltip():Tooltip;

		function get lastParent():DisplayObjectContainer;

	}

}

package com.actionscriptfacile.ui

{

import com.actionscriptfacile.skin.ISkinnable;

import flash.display.DisplayObjectContainer;

import com.actionscriptfacile.ui.tooltip.Tooltip;

public interface IComponent extends ISkinnable

{

function destroy():void;

function hide():void;

function show():void;

function onAdded():void;

function onRemoved():void;

function onAddedToStage():void;

function onRemovedFromStage():void;

function resize( p_width:Number , p_height:Number ):void;

function set tooltip( p_toolTip:Tooltip ):void;

function get tooltip():Tooltip;

function get lastParent():DisplayObjectContainer;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.UIComponent » bookmarkname= »com.actionscriptfacile.ui.UIComponent »]

package  com.actionscriptfacile.ui
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.events.Event;
	import com.actionscriptfacile.ui.IComponent;
	import flash.events.MouseEvent;

	/**
	 * Classe  de base de tous les composants
	 * @author Matthieu
	 */

	public class UIComponent extends Sprite implements IComponent
	{

		private var m_lastParent:DisplayObjectContainer; // Le dernier parent connu de l'objet
		private var m_tooltip:Tooltip; // Un objet de type Tooltip

		static public const RELEASE_OUTSIDE:String = 'RELEASE_OUTSIDE'; // Constante utilisée pour les addEventListener

		/**
		 * Constructeur
		 */

		public function UIComponent()
		{
			m_lastParent = null;
			m_tooltip = null;

			addEventListener( Event.ADDED, addedHandler );
			addEventListener( Event.ADDED_TO_STAGE, addedHandler );
			addEventListener( Event.REMOVED, removeHandler );
			addEventListener( Event.REMOVED_FROM_STAGE, removeHandler );
			addEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );
			addEventListener( MouseEvent.ROLL_OVER, overOutHandler );
			addEventListener( MouseEvent.ROLL_OUT, overOutHandler );

		}

		// events listeners

		/**
		 *
		 * Cette méthode est utilisée est utilisée pour afficher / cacher le tooltip si celui-ci est défini.
		 *
		 * @param	e Un objet de type MouseEvent
		 */
		private function overOutHandler(e:MouseEvent):void
		{
			if ( m_tooltip == null )
			{
				return;
			}

			if ( e.type == MouseEvent.ROLL_OUT )
			{
				m_tooltip.hide();
			}
			else
			{
				m_tooltip.show();
			}
		}

		/**
		 * @private utilisée pour détecter les RELEASE OUTSIDE
		 * @param	e
		 */
		private function downUpHandler(e:MouseEvent):void
		{

			if ( e.type == MouseEvent.MOUSE_DOWN )
			{

				/*
				 * Si on appuie sur le click de la souris alors on cherche à détecter le moment
				 * ou on la relachera que l'on soit sur l'objet ou non.
				 *
				 * */
				stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler );
				stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );
			}
			else
			{

				/*
				 * Si la souris est relâchée, nous n'avons plus besoin d'écouter les événements adéquats.
				 * Nous vérifions ensuite que la souris ne se trouvait pas sur le composant à ce moment là et on dispatch un évenement.
				 * */

				stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );
				stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

				if ( ! hitTestPoint( e.stageX, e.stageY , false ) )
				{
					dispatchEvent( new Event( RELEASE_OUTSIDE, true, true ) );
				}

			}
		}

		/**
		 *
		 * Détecte les évenements de type Event.ADDED et Event.ADDED_TO_STAGE et se charge d'appeller les méthodes onAdded ou onAddedToStage.
		 *
		 * @param	e évenement de type Event
		 */
		private function addedHandler( e:Event ):void
		{

			if ( parent != null )
			{
				m_lastParent = parent;
			}

			if ( e.type == Event.ADDED )
			{
				onAdded();
			}
			else
			{
				onAddedToStage();
			}
		}

		/**
		 *
		 * Détecte les évenements de type Event.REMOVED et Event.REMOVED_FROM_STAGE et se charge d'appeller les méthodes onRemoved ou onRemovedFromStage.
		 *
		 * @param	e évenement de type Event
		 */
		private function removeHandler( e:Event ):void
		{

			if ( parent != null )
			{
				m_lastParent = parent;
			}

			if ( e.type == Event.REMOVED )
			{
				onRemoved();
			}
			else
			{
				onRemovedFromStage();
			}

		}

		// fonctions publiques

		/**
		 * Détruit proprement le composant
		 */

		public function destroy():void
		{

			// on cherche à sortir de la display list du parent

			if ( parent != null &amp;&amp; parent.contains( this ) )
			{
				parent.removeChild( this );
			}

			// on supprime proprement tout les objets de note display list

			while ( numChildren &gt; 0 )
			{
				var child:DisplayObject = removeChildAt( 0 );
				child = null;
			}

			// on passe la propriété lastParent à null
			m_lastParent = null;

			// Enfin, on détruit tout les event listeners

			removeEventListener( Event.ADDED, addedHandler );
			removeEventListener( Event.ADDED_TO_STAGE, addedHandler );
			removeEventListener( Event.REMOVED, removeHandler );
			removeEventListener( Event.REMOVED_FROM_STAGE, removeHandler );
			removeEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );
			removeEventListener( MouseEvent.ROLL_OVER, overOutHandler );
			removeEventListener( MouseEvent.ROLL_OUT, overOutHandler );
			stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );
			stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

			delete this;

		}

		/**
		 * Supprime le composant de la display list de son lastParent
		 */
		public function hide():void
		{

			if ( parent != null &amp;&amp; parent.contains( this ) )
			{
				m_lastParent = parent;
				parent.removeChild( this );
			}
		}

		/**
		 * Ajoute le composant à la display list de son lastParent
		 */
		public function show():void
		{

			visible = true;

			if ( m_lastParent == null )
				return;

			m_lastParent.addChild( this );

		}

		// fonctions destinées à être overridées

		/**
		 * Est éxécutée lorsque le composant est ajouté à la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onAdded():void { }

		/**
		 * Est éxécutée lorsque le composant est supprimé de la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onRemoved():void { }

		/**
		 * Est éxécutée lorsque le composant est ajouté à la display list du stage, cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onAddedToStage():void { }

		/**
		 * Est éxécutée lorsque le composant est supprimé de la display list du stage, , cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onRemovedFromStage():void { }

		/**
		 * Fonction qui sert à sert à réceptionner et appliquer une skin au composant, cette méthode prend tout son sens dans le cas d'un override.
		 *
		 * @param	p_skin Objet qui implémente l'interface ISkin @see
		 */
		public function applySkin(p_skin:ISkin):void { }

		/**
		 * Fonction qui sert à sert à changer la taille d'un composant de manière propre, cette méthode prend tout son sens dans le cas d'un override.
		 *
		 * @param	p_width		nouvelle largeur du composant
		 * @param	p_height	nouvelle hauteur du composant
		 */
		public function resize(p_width:Number, p_height:Number):void
		{

		}

		// getters / setters

		/**
		 * Définit un objet de type Tooltip
		 */
		public function set tooltip(p_toolTip:Tooltip):void {  m_tooltip = addChild( p_toolTip ) as Tooltip; m_tooltip.hide(); }
		/**
		 * Retourne le tooltip du composant
		 */

		 public function get tooltip():Tooltip { return m_tooltip; }

		/**
		 * Renvoie le dernier parent du composant.
		 */
		public function get lastParent():DisplayObjectContainer{ return m_lastParent; }

	}

}

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

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

package com.actionscriptfacile.ui

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.tooltip.Tooltip;

import flash.display.DisplayObject;

import flash.display.DisplayObjectContainer;

import flash.display.Sprite;

import flash.events.Event;

import com.actionscriptfacile.ui.IComponent;

import flash.events.MouseEvent;

/**

* Classe de base de tous les composants

* @author Matthieu

public class UIComponent extends Sprite implements IComponent

{

private var m_lastParent:DisplayObjectContainer; // Le dernier parent connu de l'objet

private var m_tooltip:Tooltip; // Un objet de type Tooltip

static public const RELEASE_OUTSIDE:String = 'RELEASE_OUTSIDE'; // Constante utilisée pour les addEventListener

/**

* Constructeur

public function UIComponent()

{

m_lastParent = null;

m_tooltip = null;

addEventListener( Event.ADDED, addedHandler );

addEventListener( Event.ADDED_TO_STAGE, addedHandler );

addEventListener( Event.REMOVED, removeHandler );

addEventListener( Event.REMOVED_FROM_STAGE, removeHandler );

addEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );

addEventListener( MouseEvent.ROLL_OVER, overOutHandler );

addEventListener( MouseEvent.ROLL_OUT, overOutHandler );

}

// events listeners

/**

* Cette méthode est utilisée est utilisée pour afficher / cacher le tooltip si celui-ci est défini.

* @param e Un objet de type MouseEvent

private function overOutHandler(e:MouseEvent):void

{

if ( m_tooltip == null )

{

return;

}

if ( e.type == MouseEvent.ROLL_OUT )

{

m_tooltip.hide();

}

else

{

m_tooltip.show();

}

/**

* @private utilisée pour détecter les RELEASE OUTSIDE

* @param e

private function downUpHandler(e:MouseEvent):void

{

if ( e.type == MouseEvent.MOUSE_DOWN )

{

* Si on appuie sur le click de la souris alors on cherche à détecter le moment

* ou on la relachera que l'on soit sur l'objet ou non.

* */

stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler );

stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

}

else

{

* Si la souris est relâchée, nous n'avons plus besoin d'écouter les événements adéquats.

* Nous vérifions ensuite que la souris ne se trouvait pas sur le composant à ce moment là et on dispatch un évenement.

* */

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

if ( ! hitTestPoint( e.stageX, e.stageY , false ) )

{

dispatchEvent( new Event( RELEASE_OUTSIDE, true, true ) );

}

/**

* Détecte les évenements de type Event.ADDED et Event.ADDED_TO_STAGE et se charge d'appeller les méthodes onAdded ou onAddedToStage.

* @param e évenement de type Event

private function addedHandler( e:Event ):void

{

if ( parent != null )

{

m_lastParent = parent;

}

if ( e.type == Event.ADDED )

{

onAdded();

}

else

{

onAddedToStage();

}

/**

* Détecte les évenements de type Event.REMOVED et Event.REMOVED_FROM_STAGE et se charge d'appeller les méthodes onRemoved ou onRemovedFromStage.

* @param e évenement de type Event

private function removeHandler( e:Event ):void

{

if ( parent != null )

{

m_lastParent = parent;

}

if ( e.type == Event.REMOVED )

{

onRemoved();

}

else

{

onRemovedFromStage();

}

// fonctions publiques

/**

* Détruit proprement le composant

public function destroy():void

{

// on cherche à sortir de la display list du parent

if ( parent != null && parent.contains( this ) )

{

parent.removeChild( this );

}

// on supprime proprement tout les objets de note display list

while ( numChildren > 0 )

{

var child:DisplayObject = removeChildAt( 0 );

child = null;

}

// on passe la propriété lastParent à null

m_lastParent = null;

// Enfin, on détruit tout les event listeners

removeEventListener( Event.ADDED, addedHandler );

removeEventListener( Event.ADDED_TO_STAGE, addedHandler );

removeEventListener( Event.REMOVED, removeHandler );

removeEventListener( Event.REMOVED_FROM_STAGE, removeHandler );

removeEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );

removeEventListener( MouseEvent.ROLL_OVER, overOutHandler );

removeEventListener( MouseEvent.ROLL_OUT, overOutHandler );

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

delete this;

}

/**

* Supprime le composant de la display list de son lastParent

public function hide():void

{

if ( parent != null && parent.contains( this ) )

{

m_lastParent = parent;

parent.removeChild( this );

}

/**

* Ajoute le composant à la display list de son lastParent

public function show():void

{

visible = true;

if ( m_lastParent == null )

return;

m_lastParent.addChild( this );

}

// fonctions destinées à être overridées

/**

* Est éxécutée lorsque le composant est ajouté à la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.

public function onAdded():void { }

/**

* Est éxécutée lorsque le composant est supprimé de la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.

public function onRemoved():void { }

/**

* Est éxécutée lorsque le composant est ajouté à la display list du stage, cette méthode prend tout sens dans le cas d'un override.

public function onAddedToStage():void { }

/**

* Est éxécutée lorsque le composant est supprimé de la display list du stage, , cette méthode prend tout sens dans le cas d'un override.

public function onRemovedFromStage():void { }

/**

* Fonction qui sert à sert à réceptionner et appliquer une skin au composant, cette méthode prend tout son sens dans le cas d'un override.

* @param p_skin Objet qui implémente l'interface ISkin @see

public function applySkin(p_skin:ISkin):void { }

/**

* Fonction qui sert à sert à changer la taille d'un composant de manière propre, cette méthode prend tout son sens dans le cas d'un override.

* @param p_width nouvelle largeur du composant

* @param p_height nouvelle hauteur du composant

public function resize(p_width:Number, p_height:Number):void

{

}

// getters / setters

/**

* Définit un objet de type Tooltip

public function set tooltip(p_toolTip:Tooltip):void { m_tooltip = addChild( p_toolTip ) as Tooltip; m_tooltip.hide(); }

/**

* Retourne le tooltip du composant

public function get tooltip():Tooltip { return m_tooltip; }

/**

* Renvoie le dernier parent du composant.

public function get lastParent():DisplayObjectContainer{ return m_lastParent; }

}

[/codesyntax]

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : components framework

Cours ActionScript 3 ‘components framework’

Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Téléchargez le code source complet de l’exemple

Utilisez-vous toujours Adobe Flash pour développer des applications flash ?

Comment accélérer votre programmation ActionScript Flash ?

Découverte des Frameworks ActionScript

Les Frameworks ActionScript à connaitre

Pixlib 3.0 Flash Plateform Framework

PureMVC

Vegas AS2 / AS3

LunAS

CalistA

Pixlib AS2

PixIoC AS2

Conclusion

Et vous, quel est le framework que vous utilisez le plus en souvent en AS3, AS2 ?

Sur quel framework souhaitez-vous des tutoriels en priorité ?

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 ?

Création d’un Mini Flex avec les Composants AS3 Facile

I – CDCF et CDCT

II – Mini Flex

Debug dans Flash avec Firefox / Google Chrome

Conclusion

Évolutions des fonctionnalités

Le début de la programmation AS3 Facile

Sources commentées

Comment utilisez-vous les Composants AS3 Facile ?

Comment créer une ComboBox en AS3 ?

I – Cahier Des Charges Fonctionnel d’une ComboBox

II – Cahier Des Charges Techniques d’une ComboBox

La classe ComboBoxButton

La classe ComboBoxElement

Conclusion

Évolutions des fonctionnalités

Méthode resizeListOnly

Création d’un menu en Flash

Sources commentées

Et vous, comment avez-vous utilisé ce Composant AS3 ComboBox ?

Comment créer une ScrollBar en AS3 ?

<img decoding="async" class="aligncenter size-full wp-image-478" title="Scrollbar" src="https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/scrollbar.png?strip=all&lossy=1&resize=170%2C168" alt="" width="170" height="168" data-eio="l"/>I – Cahier Des Charges Fonctionnel d’une ScrollBar

II – Cahier Des Charges Techniques d’une ScrollBar

La classe ScrollManager

La classe VerticalScrollBar

Conclusion

Évolutions des fonctionnalités

HorizontalScrollBar

Tween ScrollBar

Sources commentées

Allez, montrez moi votre code d’une ScrollBar horizontale…

Quelles sont les Fonctionnalités d’une Bibliothèque de Composants ActionScript 3 ?

I – Cahier Des Charges Fonctionnel d’une Bibliothèque de Composants AS3

Les points importants d’un composant :

II – Cahier Des Charges Techniques d’une Bibliothèque de Composants AS3

Le composant apporte une interaction avec l’utilisateur

Possibilité de le faire apparaître ou disparaître volonté

Personnalisable au niveau de l’apparence

Ajout de quelques fonctionnalités supplémentaires :

Conclusion

Sources commentées

Et vous, quelles sont les Fonctionnalités Communes à tous les Composants AS3 que vous souhaiteriez ?

Cours Récents

Liens / Partenaires

I – Cahier Des Charges Fonctionnel d’une ScrollBar