<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

Sujets sur : skin

Cours ActionScript 3 ‘skin’

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 :

Button.as   
static public const BUTTON_UP_SKIN:String = "BUTTON_UP_SKIN";
static public const BUTTON_DOWN_SKIN:String = "BUTTON_DOWN_SKIN";
static public const BUTTON_OVER_SKIN:String = "BUTTON_OVER_SKIN";

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

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

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

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

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

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

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

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.

package com.as3facileexemple.skin.classic
{
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;
	import com.actionscriptfacile.ui.scroll.components.ScrollDownButton;
	import com.actionscriptfacile.ui.scroll.components.ScrollUpButton;
	import com.actionscriptfacile.ui.scroll.components.ScrollerButton;
	import com.actionscriptfacile.skin.Skin;
 
	// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
	// Provient de ui.swc (créé avec la compilation de UI.fla)
	import com.as3facile.skin.scroll.ScrollBarBackgroundSkin;
	import com.as3facile.skin.scroll.ScrollBottomButtonSkin;
	import com.as3facile.skin.scroll.ScrollUpButtonSkin;
	import com.as3facile.skin.scroll.ScrollerButtonSkin;
 
	import com.as3facile.skin.scroll.ScrollerButtonDownSkin;
	import com.as3facile.skin.scroll.ScrollerButtonOverSkin;
 
	import com.as3facile.skin.scroll.ScrollUpButtonDownSkin;
	import com.as3facile.skin.scroll.ScrollUpButtonOverSkin;
 
	import com.as3facile.skin.scroll.ScrollBottomButtonDownSkin;
	import com.as3facile.skin.scroll.ScrollBottomButtonOverSkin;
 
	/**
	 * Définition du skin utilisé pour un composant VerticalScrollBar
	 *
	 * @author Matthieu
	 */
	public class DefaultVerticalScrollBarSkin extends Skin
	{
 
		public function DefaultVerticalScrollBarSkin()
		{
			// background
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );
 
			//scroller
			setSkin( ScrollerButton.SCROLLER_VERTICAL_DOWN_SKIN, ScrollerButtonDownSkin );
			setSkin( ScrollerButton.SCROLLER_VERTICAL_OVER_SKIN, ScrollerButtonOverSkin );
			setSkin( ScrollerButton.SCROLLER_VERTICAL_UP_SKIN, ScrollerButtonSkin );
 
			// scroll up
			setSkin( ScrollUpButton.SCROLLUP_VERTICAL_DOWN_SKIN, ScrollUpButtonDownSkin );
			setSkin( ScrollUpButton.SCROLLUP_VERTICAL_OVER_SKIN, ScrollUpButtonOverSkin );
			setSkin( ScrollUpButton.SCROLLUP_VERTICAL_UP_SKIN, ScrollUpButtonSkin );
 
			// scroll down
 
			setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_DOWN_SKIN, ScrollBottomButtonDownSkin );
			setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_OVER_SKIN, ScrollBottomButtonOverSkin );
			setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_UP_SKIN, ScrollBottomButtonSkin );
		}
 
	}
 
}

Ensuite, il vous reste à créer le fla avec les classes correspondantes.
Par exemple, pour créer le Skin du composant Button, il est nécessaire de créer 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 :

Button.as   
var button:Button = new Button();

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.

List.as   
// création un objet de type Button
var button:Button = new Button();
 
// définition du texte
button.label = 'Button Component';
 
// création d'une liste
var list:List = new List();
 
// définition de la taille de la List
list.resize( 230, 150 );
 
// ajout de plusieurs éléments dans la liste
for ( var i:int = 0; i < 35; i++ )
{
	list.addElement( getListElement(i+1) );
}

La 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…

// ajout à la displaylsit
addChild( button );
 
// définition de sa taille en 150 * 30 pixels
button.resize( 150, 30 );
 
// définition de la position du button sur la scène
button.x = 60;
button.y = 60;
button.labelField.alignCenter(); // centre le texte
button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
 
// détermination de la position de la List
list.x = 30;
list.y = 30;
 
// affichage - ajout à la displaylist
addChild( list );
 
// ajout des marges au contenu de la liste
list.margins = new UIMargins( 5, 5, 5, 5 )

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

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

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

É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é 434 fois – 87 KB

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 🙂

Comment créer une infos bulle ou ToolTip en AS3 ?

4 questions

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

Dans ce tutoriel, nous allons découvrir la création ActionScript du  Composant AS3 : ToolTip.

Un ToolTip est une bulle d’information, elle apparait généralement au dessus d’un bouton, d’un formulaire…

I – Cahier Des Charges Fonctionnel du ToolTip

Un ToolTip est un UIComponent composé :

  • d’un background ( arrière-plan )
  • d’un champ texte de type UITextField.

Comme nous l’avons appris dans les tutoriels précédents, il suffit de passer en paramètre une instance de la classe ToolTip au setter tooltip de la classe de base UIComponent.

La méthode show() (du composant) sera appelée lorsque l’UIComponent en question sera survolé par l’utilisateur.

Le composant ToolTip possède les fonctionnalités suivantes :

  • Personnalisation du texte ainsi que de son formatage.
  • Personnalisation de l’arrière-plan de l’infobulle.
  • Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

II – Cahier Des Charges Techniques du ToolTip

Le Cahier Des Charges Technique du composant ToolTip est relativement simple.

  • Personnalisation du texte ainsi que de son formatage.

Pour cela, nous coderons un getter qui renverra une référence au champ texte de type UITextField.

  • Personnalisation de l’arrière-plan de l’infobulle.

Comme d’habitude, nous allons overrider la méthode de base applySkin de la classe UIComponent.

  • Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

Nous allons overrider la méthode de base show de la classe UIComponent. Et ensuite, nous lancerons la méthode parente après le délai défini dans un setTimeOut.

Nous laisserons également la possibilité à l’utilisateur de modifier ce délai à tout moment à l’aide d’un getter / setter.

Conclusion

Ce Tutoriel conclut la série vous expliquant la création du Framework de Composants AS3 Facile.

Ci-dessous, le Composant AS3 ToolTip en action.

http://www.actionscript-facile.com/wp-content/uploads/2010/09/tooltip_exemple.swf

Évolutions des fonctionnalités

Je vous propose de laisser vagabonder votre imagination et de créer des Skins pour le composant ToolTip. Étonnez les Développeurs d’ActionScript-Facile.

Vous pouvez également ajouter un effet Tween pour gérer l’apparition du ToolTip, un effet alpha, lui ajouter une ombre

Sources commentées

  • ToolTipExample.as
  • com.actionscriptfacile.ui.tooltip.ToolTip.as
  • com.as3facileexemple.skin.classic.DefaultToolTipSkin.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 ToolTip Framework AS3 Facile” component_tooltip_framework_actionscript-facile.zip – Téléchargé 605 fois – 76 KB

Quels sont les prochains tutoriels que vous souhaitez sur ActionScript-Facile ?

Voulez-vous des exemples d’utilisation des Composants AS3 Facile ? Des fonctionnalités supplémentaires, des nouveaux Composants ?

Dites moi cela tout simplement dans les commentaires juste en dessous.

package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;
	import com.as3facileexemple.skin.classic.DefaultToolTipSkin;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;
 
	/**
	 *
	 * On reprend le même exemple que pour l'UITextField en ajoutant simplement
	 * un ToolTip à la combobox
	 *
	 * @author Matthieu
	 */
	public class ToolTipExample extends Sprite
	{
 
		protected var m_comboFonts:ComboBox;
		protected var m_textField:UITextField;
 
		public function ToolTipExample()
		{
			/**
			 * 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
 
			/**
			 * On construit son tooltip
			 */
			m_comboFonts.tooltip = new Tooltip();
			m_comboFonts.tooltip.applySkin( new DefaultToolTipSkin() );
 
			m_comboFonts.tooltip.label = 'Choisissez une Police de Caractère';
			m_comboFonts.tooltip.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte
			m_comboFonts.tooltip.labelField.changeFormat("size", 12);// changement de la taille de la police du texte
			m_comboFonts.tooltip.labelField.changeFormat("font", "Arial");// changement de la police du texte
			m_comboFonts.tooltip.resize( 210, 30 );
 
			// 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
			}
 
			/**
			 * 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 construit un UITextField
			 */
			m_textField = new UITextField();
			m_textField.text = 'Enjoy Your Life :)';
 
			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 300;
			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;
 
			m_comboFonts.tooltip.y = m_comboFonts.y - 55;
			m_comboFonts.tooltip.x = m_comboFonts.x + 200;
 
			addChild( m_textField );
			addChild( m_comboFonts );
		}
 
		/**
		 * 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 Event.CHANGE
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
		}
	}
 
}
package  com.actionscriptfacile.ui.tooltip
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.UIComponent;
 
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.utils.clearTimeout;
	import flash.utils.setTimeout;
 
	/**
	 * La classe Tooltip est une infobulle comme on peut en voir dans n'importe quel logiciel graphique.
	 * Elle sert à donner une information à l'utilisateur sur la fonction d'un objet graphique.
	 *
	 * @author Matthieu
	 */
	public class Tooltip extends UIComponent
	{
 
		// constante de skin ( arrière-plan )
		static public const TOOLTIP_BACKGROUND_SKIN:String = 'TOOLTIP_BACKGROUND_SKIN';
 
		private var m_background:DisplayObject; // l'arrière plan de l'infobulle
		private var m_texte:UITextField; // le champ texte de l'infobulle
		private var m_appearTimeout:Number; // le nombre qui va nous servir à réceptionner le setTimeOut
		private var m_appearTime:Number; // le temps ( en ms ) que va mettre l'infobulle à apparaître
 
		public function Tooltip()
		{
			/*
			 * 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 les différents éléments du composant
		 *
		 */
		private function init():void
		{
			/**
			 * On définit le temps d'apparition à 1 seconde , on crée l'arrière-plan ( vide par défaut )
			 * ainsi que le champ texte puis on les ajoute à la displayList du composant.
			 */
			m_appearTime = m_appearTimeout = 300;
			mouseChildren = false;// désactive les évènements souris des enfants
 
			m_background = new Sprite();
			m_texte = new UITextField();
			m_texte.alignCenter();
 
			addChild( m_background );
			addChild( m_texte );
 
			// on place le champ texte à 5 pixels histoire de laisser une marge
			m_texte.x = m_texte.y = 5;
		}
 
		/**
		 * Définit / récupère le texte de l'infobulle
		 */
		public function set label( p_text:String ):void
		{
			// on définit le texte puis on resize avec une marge de 10 pixels en hauteur + 10 pixels en largeur
			m_texte.text = p_text;
			resize( m_texte.textWidth + 10, m_texte.textHeight + 10 );
		}
		public function get label():String { return m_texte.text; }
 
		// récupère la référence UITextField du champ text de l'infobulle
		public function get labelField():UITextField { return m_texte; }
 
		/**
		 * Récupère / définit le temps d'apparition de l'infobulle
		 */
		public function get appearTime():Number { return m_appearTime; }
		public function set appearTime(value:Number):void { m_appearTime = (value < 0 ) ? 0 : value; }
 
		/**
		 * Applique une skin à un composant de type ToolTip
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{
 
			var definition:Class;
 
			definition = p_skin.getSkin( TOOLTIP_BACKGROUND_SKIN ) as Class;
 
			// si on a réussi à récupérer une définition pour l'arrière-plan alors ...
			if ( definition != null )
				m_background = new definition(); // on l'applique
 
			// on rajoute le texte et l'arrière-plan à la displayList
			addChild( m_background );
			addChild( m_texte );
		}
 
		/**
		 * Redimensionne intelligemment un composant de type ToolTip
		 *
		 * @param	p_width		nouvelle largeur du composant
		 * @param	p_height	nouvelle hauteur du composant
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
			// la hauteur maximale du ToolTip est la hauteur - 5 pixels
			m_texte.maxHeight = p_height - 5;
 
			// même chose pour la largeur, de cette manière on préserve la marge de 5 pixels que l'on s'est laissé.
			m_texte.maxWidth = p_width - 5;
 
			// la hauteur et la largeur du background sont égales aux dimensions passées en paramètre.
			m_background.width = m_texte.width = p_width;
			m_background.height = m_texte.height = p_height;
		}
 
		/**
		 * Ajoute le composant à la display list de son lastParent après que le temps d'apparition
		 * soit écoulé
		 */
		override public function show():void
		{
			// on se charge d'appeller le fonction show() parente au bout de m_appearTime ms.
			m_appearTimeout = setTimeout( super.show, m_appearTime );
		}
 
		/**
		 * Enlève le composant de la displayList de son lastParent
		 */
		override public function hide():void
		{
			// on tue le setTimeOut
			clearTimeout( m_appearTimeout );
 
			// et on appelle la fonction hide() parente
			super.hide();
		}
 
		/**
		 * Détruit proprement un composant de type ToolTip
		 */
		override public function destroy():void
		{
			// on tue proprement le timeout
			clearTimeout( m_appearTimeout );
 
			// on détruit proprement le texte
			m_texte.destroy();
 
			// on enlève l'arrière-plan de la displayList
			removeChild( m_background );
 
			// on passe les références à null.
			m_texte = null;
			m_background = null;
 
			// et on appelle la fonction destroy() parente
			super.destroy();
		}
	}
 
}
package com.as3facileexemple.skin.classic
{
	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
 
	// 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.tooltip.TooltipBackgroundSkin;
 
	/**
	 * Définition du skin utilisé pour un composant ToolTip
	 *
	 * @author Matthieu
	 */
	public class DefaultToolTipSkin extends Skin
	{
 
		public function DefaultToolTipSkin()
		{
			setSkin( Tooltip.TOOLTIP_BACKGROUND_SKIN, TooltipBackgroundSkin );
		}
 
	}
 
}

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.

http://www.actionscript-facile.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é 663 fois – 69 KB

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.

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 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
{
	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();
		}
	}
}
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 );
		}
 
	}
 
}
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 );
 
		}
 
	}
 
}

Comment créer et personnaliser une Liste en AS3 ?

2 questions

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

Dans ce tutoriel, nous allons créer et personnaliser le Composant AS3 List.

Vous verrez comment définir les méthodes de la classe List. Et comment la personnaliser avec l’utilisation des Skins graphiques.

I – Cahier Des Charges Fonctionnel de la List

Un composant de type List peut se comparer visuellement à une maison.

Dans une maison (en général), l’espace habitable ne se limite pas à ce que l’on peut distinguer par la fenêtre. Depuis l’extérieur, nous n’en voyons donc qu’une partie.

Le composant List est à la fois : la maison et la fenêtre.

Il peut contenir autant d’objets graphiques que l’on souhaite ( comme une maison peut contenir un certain nombre de meubles ). Toutefois, il ne pourra en afficher qu’une partie ( la fenêtre ).

Le Composant List innove par rapport à la maison. Effectivement, il est possible de faire défiler tous les objets graphiques qu’il contient par le biais d’une scrollBar ( verticale ou horizontale ). Ainsi, l’ensemble de son contenu pourra être visualisé.

C’est un peu comme si vous aviez une scrollBar sur la fenêtre de votre maison, qui déplacerait vos meubles, de sorte qu’ils arrivent automatiquement devant la fenêtre.

Maintenant que nous avons défini ce qu’est un composant List, nous allons pouvoir nous attaquer à sa conception.

Comme pour le Composant ScrollBar, le sujet augmente en difficulté, au fur et à mesure de la création des Composants AS3 Facile.

Nous allons ainsi nous simplifier la vie en implémentant un Composant List :

  • qui gère uniquement le scroll vertical.
  • qui va éditer pour nous les positions de l’ensemble des objets graphiques qu’il recevra. Dans le but que ceux-ci apparaissent à la “queue leu leu”.

Un Composant List est constitué de 4 entités :

  • Un clip conteneur ( la maison ), qui va se charger de réceptionner des objets graphiques. La taille du conteneur augmente et diminue en fonction du nombre d’objets graphiques qu’il contient.

 

  • Un clip masque ( la fenêtre ), qui nous servira à cacher une partie des objets graphiques.
  • Un clip background ( le papier peint ) qui servira juste de fond à notre composant, ceci est purement esthétique et vous n’êtes en aucun cas obligé de l’implémenter.

 

  • Une scrollBar verticale qui s’affichera uniquement lorsque la taille du conteneur dépassera les dimensions de la fenêtre.

Pour compléter notre CDCF, la taille du masque peut être éditée. De plus, le fond et la scrollBar sont personnalisables graphiquement.

Avec toutes ces informations dans notre CDCF (Cahier Des Charges Fonctionnel), nous pouvons passer à la rédaction du CDCT (Cahier Des Charges Technique).

II – Cahier Des Charges Techniques de la List

Nous allons donc traduire, en termes techniques, les spécifications fonctionnelles de notre composant List.

La Classe List

  • Un clip conteneur ( la maison ) va se charger de réceptionner des objets graphiques. La taille du conteneur augmente et diminue en fonction du nombre d’objets graphiques qu’il contient.

En lieu et place d’un clip, nous allons utiliser un objet Sprite.

  • Un clip masque ( la fenêtre ), qui nous servira à cacher une partie des objets graphiques.

Ici, un simple objet de type Shape suffira largement.

  • Un clip background ( le papier peint ) qui servira juste de fond à notre composant. Celui-ci est purement esthétique et vous n’êtes en aucun cas obligé de l’implémenter.

Un objet de type Sprite qui contiendra le fond du composant List.

  • Une scrollBar verticale qui ne s’affichera que lorsque la taille du conteneur dépassera les dimensions de la fenêtre.

Un objet de type com.actionscriptfacile.ui.scroll.components.VerticalScrollBar ( veuillez lire le Tutoriel 5 sur la Création du Composant Vertical ScrollBar ).

  • La taille du masque peut être éditée.

Pour cela, nous allons overrider la méthode de base resize de la classe parente UIComponent.

  • Le fond personnalisable graphiquement ainsi que la scrollBar.

Pour cette fonctionnalité, nous allons effectuer un override de la méthode de base applySkin de la classe parente UIComponent.

La classe UIMargins

Et comme toujours, nous allons ajouter une petite difficulté en intégrant une fonctionnalité supplémentaire à notre composant. J’ai nommé : les marges!

Le conteneur doit pouvoir appliquer des marges au contenu dans les 4 directions suivantes :

  • Haut
  • Bas
  • Gauche
  • Droite

La solution technique reste simple :

  • Pour respecter la marge gauche nous décalerons le masque et le conteneur vers la droite.
  • Pour respecter la marge haute nous décalerons le masque et le conteneur vers le bas.
  • Pour respecter la marge droite nous réduirons la largeur du masque.
  • Pour respecter la marge basse nous réduirons la hauteur du masque.

Pour définir nos marges, nous allons créer une classe nommée UIMargins. Elle se trouvera dans le package com.actionscriptfacile.ui.utils.

Conclusion

Et voila, notre composant List est terminé. Regardez le résultat ci-dessous.

http://www.actionscript-facile.com/wp-content/uploads/2010/09/list_exemple.swf

Dans le prochain tutoriel AS3, nous attaquerons notre dernier composant : la ComboBox! ( ou liste déroulante ).

Évolutions des fonctionnalités

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

Allez, maintenant, c’est à vous de jouer !

List avec une ScrollBar Horizontale

Ajoutez au composant List la gestion d’une ScrollBar Horizontale.

Dans le tutoriel précédent (Création d’un Composant AS3 Vertical Scrollbar), un des exercices consistait à concevoir une ScrollBar Horizontale. Il suffit de réutiliser cette classe et de l’instancier / afficher (si besoin) par le composant List.

List avec des composants Button

Vous pouvez également remplacer les différents éléments de la List par des objets de type Button (lisez le Tutoriel 4 : Création du Composant AS3 Button).

Puis vous écoutez les évènements des objets Button. Et vous avez la possibilité de créer une action spécifique, en fonction du Button sélectionné par l’utilisateur.

Sources commentées

  • com.actionscriptfacile.ui.list.List.as
  • com.actionscriptfacile.ui.utils.UIMargins.as
  • ListExample.as
  • com.as3facileexemple.skin.classic.DefaultListSkin.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 List du Framework AS3 Facile” component_list_framework_actionscript-facile.zip – Téléchargé 517 fois – 69 KB

Et vous, quels graphismes avez-vous créé pour votre List ?

Je suis curieux de visualiser les différentes utilisations que vous avez utilisé pour le Composant AS3 List.

Ajoutez vos réalisations dans les commentaires juste en dessous.

package  com.actionscriptfacile.ui.list
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;
	import com.actionscriptfacile.ui.UIComponent;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import flash.display.DisplayObject;
	import flash.display.Shape;
	import flash.display.Sprite;
 
	/**
	 * Un composant List est un objet graphique qui peut stocker d'autres objets graphiques au sein d'un clip conteneur qui
	 * lui-même, est masqué.
	 *
	 * A chaque fois qu'un objet est ajouté au composant, celui-ci se charge d'éditer la position ".y" du dit objet afin de
	 * le placer à la suite des autres.
	 *
	 *
	 * @author Matthieu
	 */
	public class List extends UIComponent
	{
 
		static public const LIST_BACKGROUND_SKIN:String = 'LIST_BACKGROUND_SKIN'; // constantes pour le skin
 
		private var m_scrollBar:VerticalScrollBar; // objet de type VerticalScrollBar
		private var m_containerMask:Shape; // masque du clip conteneur
		private var m_container:Sprite; // conteneur
		private var m_background:Sprite; // background ou "fond" du composant.
		private var m_margins:UIMargins; // objet servant à définir les marges à appliquer au contenu.
 
		public function List()
		{
			init();
		}
 
		private function init():void
		{
 
			m_margins = new UIMargins(); // Marges = 0 dans toutes les directions
 
			m_scrollBar = new VerticalScrollBar(); // on crée une scrollBar
			m_containerMask = new Shape(); // on crée le mask
			m_container =  new Sprite(); // on crée le conteneur
			m_background = new Sprite(); // on crée le fond
 
			/**
			 * On dessiner le masque
			 */
			m_containerMask.graphics.beginFill( 0XFF0000, .5 );
			m_containerMask.graphics.drawRect( 0, 0, 100, 100 );
			m_containerMask.graphics.endFill();
 
			/**
			 * On dessine un fond par défaut
			 */
			m_background.graphics.beginFill( 0X999999, .1  );
			m_background.graphics.drawRect( 0, 0, 100, 100 );
			m_background.graphics.endFill();
 
			/**
			 * Puis nous ajoutons tout les éléments de notre composant que nous avons crée au préalable à sa displayList
			 */
			addChild( m_scrollBar );
			addChild( m_background );
			addChild( m_container );
			addChild( m_containerMask );
 
			// on applique le masque au conteneur
			m_container.mask = m_containerMask;
 
			// on cache la scrollBar
			m_scrollBar.hide();
 
		}
 
		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet de type List
		 *
		 * @param	p_skin Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{ 
 
			// on applique la skin à la scrollBar
			m_scrollBar.applySkin( p_skin );
 
			// nous récuperons la définition de classe pour le background de l'objet List
			var definition:Class = p_skin.getSkin( LIST_BACKGROUND_SKIN ) as Class;
 
			// si la définition a été trouvée
			if ( definition )
			{
				// nous vidons proprement l'objet background
				var child:DisplayObject;
				while ( m_background.numChildren > 0 )
				{
					child = m_background.removeChildAt( 0 );
					child = null;
				}
				// puis nous ajoutons une instance de cette définition au conteneur background
				m_background = addChildAt( new definition(), 0 ) as Sprite;
			}
		}
 
		/**
		 *
		 * Fonction permettant d'ajouter un clip graphique au conteneur.
		 *
		 * @param	p_element	Un objet de type flash.display.DisplayObject
		 * @return	Retourne une référence vers le DisplayObject ajouté.
		 */
		public function addElement( p_element:DisplayObject ):DisplayObject
		{
			// On place p_element dans la displayList du conteneur
			m_container.addChild( p_element );
 
			// puis on effectue un redraw.
			redraw();
 
			// enfin, nous retournons l'élément envoyé en paramètre
			return p_element;
		}
 
		/**
		 *
		 * Fonction permettant d'enlever un clip graphique au conteneur.
		 *
		 * @param	p_element	Un objet de type flash.display.DisplayObject
		 * @return	Retourne une référence vers le DisplayObject supprimé de la displayList du conteneur.
		 */
		public function removeElement( p_element:DisplayObject ):DisplayObject
		{
			// on enlève p_element de la displayList du conteneur
			m_container.removeChild( p_element );
 
			// on effectue un redraw
			redraw();
 
			// puis on retourne l'élément envoyé en paramètre
			return p_element;
		}
 
		/**
		 *
		 * Fonction interne permettant d'actualiser l'état graphique des différents
		 * éléments d'un composant de type List
		 *
		 * @param	p_width	Nouvelle taille en largeur du composant
		 * @param	p_height Nouvelle taille en hauteur du composant
		 */
		private function redraw( p_width:Number = -1, p_height:Number = - 1 ):void
		{
 
			// on effectue des contrôles sur les paramètres envoyés
			if ( p_width < 0 ) p_width = m_background.width;
			if ( p_height < 0 ) p_height = m_background.height;
 
			var curY:Number = 0; // y maximum courant, au départ il est égal à 0
			var max:int = m_container.numChildren; // nombre d'enfants du clip conteneur
			var i:int = 0;
			var child:DisplayObject;
 
			for ( ; i < max; i++ )
			{
				// nous récupérons l'enfant du conteneur à l'index i
				child = m_container.getChildAt( i );
 
				// nous actualisons sa position en y ( verticale )
				child.y = curY;
 
				// puis on ajoute la hauteur de l'enfant à la variable curY
				// ainsi le prochain enfant sera placé juste après de façon verticale.
				curY += child.height;
			}
 
			// On actualise la largeur et la hauteur du background
			m_background.width = p_width;
			m_background.height = p_height;
 
			// la largeur du masque est égale à la largeur passée en paramètre - la marge de gauche + celle de droite
			m_containerMask.width = p_width - m_margins.marginLeft - m_margins.marginRight;
 
			// la hauteur du masque est égale à la hauteur passée en paramètre - la marge du haut + celle du bas
			m_containerMask.height = p_height - m_margins.marginTop - m_margins.marginBottom;
 
			// si la taille du conteneur ( la maison ) ne dépasse pas les dimensions du masque ( la fenêtre ) alors
			if ( m_container.height < m_containerMask.height )
			{
				// on cache la scrollBar
				m_scrollBar.hide();
			}
			else // sinon
			{
				// on affiche la scrollBar
				m_scrollBar.show();
 
				// la largeur du masque diminue encore pour laisser de la place afin de laisse de la place à la scrollBar
				m_containerMask.width -= m_scrollBar.width;
 
				// on positionne la scrollBar juste à droite du masque
				m_scrollBar.x = m_background.width - m_scrollBar.width - m_margins.marginRight;
 
				// enfin on actualise la hauteur de la scrollBar
				m_scrollBar.resize( m_scrollBar.width, m_containerMask.height );
			}
 
			// on positionne le masque et le conteneur de façon à respecter la marge de gauche
			m_containerMask.x = m_container.x = m_margins.marginLeft;
 
			// Même chose pour la marge du haut avec la scrollBar en plus
			m_scrollBar.y = m_containerMask.y = m_container.y = m_margins.marginTop;
 
			// on dit bien à la scrollBar que le contenu qu'elle doit scroller est le conteneur...
			m_scrollBar.content = m_container;
 
			// et que la zone de scroll correspond aux dimensions du masque ( la fenêtre ).
			m_scrollBar.scrollArea = m_containerMask.getRect(this);
 
		}
 
		/**
		 *
		 * Fonction permettant de gérer intelligemment le redimensionnement
		 * d'un objet de type List
		 *
		 * @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
		{
			// on effectue un redraw
			redraw( p_width, p_height );
		}
 
		/**
		 * Retourne une référence de l'objet VerticalScrollBa utilisé au sein du composant
		 */
		public function get scrollBar():VerticalScrollBar { return m_scrollBar; }
 
		/**
		 * Retourne une référence de l'objet UIMargins utilisé pour définir les marges des contenus
		 */
		public function get margins():UIMargins { return m_margins; }
 
		/**
		 * Définit les marges à appliquer aux contenus
		 */
		public function set margins( p_margins:UIMargins ):void
		{
			// on change les margins actuelles puis on effectue un redraw
			m_margins = p_margins;
			redraw( m_background.width, m_background.height );
		}
 
		/**
		 * Détruit proprement un objet de type List
		 */
		override public function destroy():void
		{
			// on tue proprement l'objet UIMargins
			m_margins = null;
 
			// on tue proprement la scrollBar
			m_scrollBar.destroy();
 
			/**
			 * Nous tuons tous les enfants du conteneur
			 */
			var child:DisplayObject;
 
			while ( m_container.numChildren > 0 )
			{
				child = m_container.removeChildAt( 0 );
 
				if ( child is UIComponent )
				{
					UIComponent( child ).destroy();
				}
 
				child = null;
			}
 
			// Enfin, on supprime le conteneur, son masque et le fond
			removeChild( m_container );
			removeChild( m_containerMask );
			removeChild( m_background );
 
			m_container = null;
			m_containerMask = null;
			m_background = null;
			m_scrollBar = null;
 
			// on appelle la fonction de destruction parente par précaution
			super.destroy();
 
		}
	}
 
}
package  com.actionscriptfacile.ui.utils
{
	/**
	 * Permet de définir des marges à tout type d'élément
	 *
	 * @author Matthieu
	 */
	public class UIMargins
	{
 
		private var m_marginLeft:Number;
		private var m_marginRight:Number;
		private var m_marginBottom:Number;
		private var m_marginTop:Number;
 
		public function UIMargins( p_margTop:Number = 0, p_margRight:Number = 0, p_margBottom:Number = 0, p_margLeft:Number = 0 )
		{
			m_marginTop = p_margTop;
			m_marginLeft = p_margLeft;
			m_marginBottom = p_margBottom;
			m_marginRight = p_margRight;
		}
 
		public function get marginLeft():Number { return m_marginLeft; }
		public function set marginLeft(value:Number):void { m_marginLeft = value; }
 
		public function get marginRight():Number { return m_marginRight; }
		public function set marginRight(value:Number):void { m_marginRight = value; }
 
		public function get marginBottom():Number { return m_marginBottom; }
		public function set marginBottom(value:Number):void { m_marginBottom = value; }
 
		public function get marginTop():Number { return m_marginTop; }
		public function set marginTop(value:Number):void { m_marginTop = value; }
 
	}
 
}
package
{
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.as3facileexemple.skin.classic.DefaultListSkin;// import du skin de la VerticalScrollBar
	import flash.display.Shape;
	import flash.display.Sprite;
 
	/**
	 * Exemple d'utilisation du composant List.
	 * @author Matthieu
	 */
	public class ListExample extends Sprite
	{
 
		public function ListExample()
		{
			// création d'une liste
			var list: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 ]
			list.applySkin( new DefaultListSkin() );
 
			// 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) );
			}
 
			// 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 );
		}
 
		/**
		 * 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.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.text = "Élément "+id;
			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;
		}
 
	}
 
}
package com.as3facileexemple.skin.classic
{
 
	import com.actionscriptfacile.skin.Skin;
	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.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;
 
	/**
	 * Définition du skin utilisé pour un composant List
	 *
	 * @author Matthieu
	 */
	public class DefaultListSkin extends Skin
	{
 
		public function DefaultListSkin()
		{
			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 );
		}
 
	}
 
}

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.

http://www.actionscript-facile.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é 1155 fois – 71 KB

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

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

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;
		}
	}
 
}
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.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 );
		}
 
	}
 
}
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 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 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
{
	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 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 );
		}
 
	}
 
}

Comment créer un Composant Bouton en AS3 ?

18 questions

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

Enfin nous allons attaquer les choses sérieuses avec la conception du 1er composant de notre « Bibliothèque AS3 de Composants Graphiques« .

Dans ce tutoriel, nous allons concevoir un composant de type Button. Et avec la possibilité de le personnaliser graphiquement!

I – Cahier Des Charges Fonctionnel d’un Bouton

Nous allons commencer par un bref descriptif des fonctionnalités de base d’un bouton avec le fameux Cahier Des Charges Fonctionnel.

Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d’une apparence personnalisable pour chacun de ses états.

Comme vous pouvez le constater, il est facile de définir un composant bouton.
Le composant en lui-même reste simple à réaliser. Les prochains seront plus compliqués!

Commençons donc par lister tous les états que nous désirons obtenir sur notre bouton :

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

Nous possédons à présent un CDCF (Cahier Des Charges Fonctionnel) court et précis.

Le CDCF nous donne la marche à suivre pour la mise en place du CDCT (Cahier Des Charges Technique).

II – Cahier Des Charges Techniques d’un Bouton

Pour rédiger le Cahier Des Charges Technique, nous procédons comme pour la classe de base UIComponent (lisez le Chapitre 3 : Les fonctionnalités de base d’une Bibliothèque de Composants AS3 ).

C’est à dire  que nous reprenons le CDCF et nous nous chargeons de le “traduire” en langage technique. Nous apportons également plusieurs précisions utiles.

Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d’une apparence personnalisable pour chacun de ses états.

Voici la liste des états d’un bouton (déterminé dans le CDFC) : Normal, Survol, Cliqué.

Contraintes techniques

A partir des différents états d’un bouton, nous définissons les contraintes techniques suivantes :

Écouter les évènements de type :

  • MouseEvent.MOUSE_DOWN : état Cliqué.
  • MouseEvent.MOUSE_UP : état Survol.
  • MouseEvent.ROLL_OVER : état Survol.
  • MouseEvent.ROLL_OUT : état Normal.

 

  • Actualiser l’état graphique du bouton en fonction des évènements reçus.
  • Overrider la fonction (c’est à dire redéfinir son comportement) du composant de base UIComponent afin de mettre à jour chacun des états graphiques du Button.

 

Nous ajoutons également la contrainte technique suivante :

Ajout d’un champ texte qui se nommera “label” au sein du bouton et donner la possibilité d’y accéder depuis l’extérieur.

Pour cela, nous coderons deux getters et un setter :

  • Un getter labelField qui retournera directement le champ texte
  • Un getter label qui retournera le texte du champ texte.
  • Un setter label qui permettra de définir le texte du champ texte.

Notre champ texte sera de type UITextfield, cette classe est définie dans le package com.actionscriptfacile.ui.text. Nous reviendrons sur son implémentation lors du chapitre dédié au composant UITextfield.

Conclusion

Nous disposons maintenant d’un bel objet de type Button. Celui-ci nous sera utile pour les développements de nos futurs composants.

Le composant Button peut être cliqué, survolé et un état graphique nous permet de visualiser une réelle interaction.

http://www.actionscript-facile.com/wp-content/uploads/2010/09/button_exemple.swf

Évolutions des fonctionnalités

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

N’hésitez pas à poster vos exemples dans les commentaires.

A vous de jouer !

Lock Button

Vous pouvez créer une classe permettant de gérer un groupe de plusieurs boutons. En fonction du bouton cliqué, des actions différentes sont lancées. Le bouton cliqué ne peut pas être de nouveau activé. Un peu comme la gestion d’un menu de « Lock Button ».

Skin

Implémentez la possibilité de mettre à jour en direct l’apparence de vos boutons. Par exemple en cliquant sur l’un de vos « Lock Button », l’apparence du bouton est modifiée.

Sources commentées

  • com.actionscriptfacile.button.Button.as
  • ButtonExample.as
  • com.as3facileexemple.skin.classic.DefaultButtonSkin.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 Button du Framework AS3 Facile” component_button_framework_actionscript-facile.zip – Téléchargé 754 fois –

Et vous : Comment concevez vous vos Boutons en Actionscript 3 ?

Proposez vos exemples de codes AS3 dans les commentaires juste en dessous.

package  com.actionscriptfacile.ui.button
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.UIComponent;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import com.actionscriptfacile.ui.text.UITextField;
 
	/**
	 * Un objet de type Button est un objet
	 * @author Matthieu
	 */
	public class Button extends UIComponent
	{
 
		/**
		 * Constantes qui vont nous servir à définir des styles dans les objets de skin par défaut @see com.as3facileexemple.skin.classic.DefaultButtonSkin
		 */
		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";
 
		/**
		 * Constantes qui vont nous servir à changer l'état  du bouton par le biais d'un appel à la méthode setState
		 */
		static protected const UP_STATE:String = "UP_STATE";
		static protected const DOWN_STATE:String = "DOWN_STATE";
		static protected const OVER_STATE:String = "OVER_STATE";
 
		protected var m_overStyle:DisplayObject;	// objet graphique représentant l'état OVER
		protected var m_upStyle:DisplayObject;		// objet graphique représentant l'état UP
		protected var m_downStyle:DisplayObject;	// objet graphique représentant l'état DOWN
		protected var m_label:UITextField;			// objet de type UITextField qui est en fait un champ texte un peu amélioré
 
		public function Button()
		{
			/*
			 * ajout d'une méthode init pour gagner des ressources, en effet en AS3 tout ce qui se trouve dans le constructeur n'est
			 * pas optimisé à la compilation, on met donc toutes nos instructions dans une méthode privée init
			 * */
 
			init();
		}
 
		/**
		 * Détruit proprement un objet de type Button
		 */
 
		override public function destroy():void
		{
 
			/**
			 * On s'extrait de la display list de notre parent, on détruit notre composant m_label de type UITextField ainsi
			 * que nos objets graphiques qui représentent les différents états et on appelle la méthode
			 * destroy() parente @see com.actionscriptfacile.ui.UIComponent
			 */
 
			if ( parent && parent.contains( this ) )
				parent.removeChild( this );
 
			m_label.destroy();
			m_label = null;
			m_upStyle = m_downStyle = m_overStyle = null;
 
			super.destroy();
		}
 
		/**
		 * Initialise proprement les différents éléments du composant
		 */
		private function init():void
		{
 
			/**
			 * Création d'un objet de type UITextField que l'on assigne à la variable membre m_label.
			 * On aligne son texte par défaut en justifié et on indente le texte de 2 pixels.
			 * Ensuite nous mettons des valeurs totalement arbitraires pour les propriétés width, maxwidth, height
			 * et maxheight que l'on pourra changer par la suite.
			 */
 
			m_label = addChild( new UITextField() ) as UITextField;
			m_label.alignJustify();
			m_label.changeFormat( 'indent', 2 );
			m_label.maxHeight = m_label.height = 30;
			m_label.maxWidth = m_label.width = 80;
 
			/**
			 * nos objets graphiques de style sont des sprites vides par défaut
			 */
			m_overStyle = addChild( new Sprite() );
			m_upStyle = addChild( new Sprite() );
			m_downStyle = addChild( new Sprite() );
 
			setState( UP_STATE );
 
			mouseChildren = false;
		}
 
		/**
		 * Quand on sort de la display list du stage on tue tout les events listeners ce qui économise des ressources
		 */
 
		override public function onRemovedFromStage():void
		{
			removeEventListener( MouseEvent.MOUSE_UP, overHandler, false );
			removeEventListener( MouseEvent.ROLL_OUT, upStateHandler, false );
			removeEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false );
			removeEventListener( MouseEvent.ROLL_OVER, overHandler, false );
		}
 
		/**
		 * On initialise les events listeners uniquement lorsque le composant est ajouté à la displaylist du stage.
		 * En procédant de la sorte, on utilise les ressources uniquement lorsque cela s'avère nécessaire.
		 */
		override public function onAddedToStage():void
		{
			addEventListener( MouseEvent.MOUSE_UP, overHandler, false );
			addEventListener( MouseEvent.ROLL_OUT, upStateHandler, false );
			addEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false );
			addEventListener( MouseEvent.ROLL_OVER, overHandler, false );
		}
 
		/**
		 * @see com.actionscriptfacile.ui.UIComponent
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
 
			/*
			 * on redéfinit les maxWidth et maxHeight de notre m_label et on les définit à la taille de notre composant button.
			 * Ensuite on rédéfinit la taille de nos composants m_overStyle, m_downStyle, m_upStyle.
			 * */
 
			m_label.maxWidth = p_width;
			m_label.maxHeight = p_height;
 
			m_overStyle.width = m_label.width = m_downStyle.width = m_upStyle.width = p_width;
			m_overStyle.height = m_label.height = m_downStyle.height = m_upStyle.height = p_height;
		}
 
		/**
		 * Au survol on affiche l'état OVER par le biais de la méthode setState
		 * @param	e Evenement de type MouseEvent
		 */
		private function overHandler(e:MouseEvent):void { setState( OVER_STATE ); }
 
		/**
		 * Au survol on affiche l'état DOWN par le biais de la méthode setState
		 * @param	e Evenement de type MouseEvent
		 */
		private function downStateHandler(e:MouseEvent):void { setState ( DOWN_STATE ); }
 
		/**
		 * Au survol on affiche l'état UP par le biais de la méthode setState
		 * @param	e Evenement de type MouseEvent
		 */
		private function upStateHandler(e:MouseEvent):void { setState( UP_STATE ); }
 
		/**
		 *	Définit le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
		 */
		public function set label( p_label:String ):void { m_label.text = p_label; }
 
		/**
		 *	Retourne le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
		 */
		public function get label():String { return m_label.text; }
 
		/**
		 *	Retourne le composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
		 */
		public function get labelField():UITextField { return m_label; }
 
		/**
		 *
		 * Cette méthode applique la skin définit en paramètre au composant.
		 *
		 * @param	p_skin Objet implémentant l'interface ISkin
		 */
 
		override public function applySkin(p_skin:ISkin):void
		{
 
			// on définit une variable de type Class qui servira à réceptionner toutes les définitions de notre objet skin
			var definition:Class;
 
			// on cherche la définition au sein de la skin qui répond au nom : BUTTON_OVER_SKIN
			definition = p_skin.getSkin( BUTTON_OVER_SKIN ) as Class;
 
			// si cette définition existe alors on en crées une nouvelle instance et on l'assigne à l'élément m_overStyle
			if ( definition != null )
				m_overStyle = new definition();
 
			/*
			 * On applique le même procédé pour tous les autres éléments du bouton
			 * */
 
			definition = p_skin.getSkin( BUTTON_DOWN_SKIN ) as Class;
 
			if ( definition != null )
				m_downStyle = new definition();
 
			definition = p_skin.getSkin( BUTTON_UP_SKIN ) as Class;
 
			if ( definition != null )
				m_upStyle = new definition();
 
			// on ajoute nos styles à la display list
			addChild( m_upStyle );
			addChild( m_downStyle );
			addChild( m_overStyle );
 
			// on affiche l'état par défaut.
			setState ( UP_STATE );
 
			// Et on redimensionne proprement nos nouveaux objets graphiques / états
			resize( width, height );
		}
 
		/**
		 *
		 * Change l'état graphique du bouton en fonction du paramètre p_state qui répresente l'id de l'état à afficher.
		 * Si l'état n'est pas valide l'état par défaut est l'état UP_STATE.
		 *
		 * @param	id de l'état à afficher
		 */
		protected function setState( p_state:String ):void
		{
 
			// on enlève tout les enfants de la display list
			while ( numChildren > 0 )
				removeChildAt( 0 );
 
			// puis on ajoute celui qui représente notre état.
 
			switch ( p_state )
			{
				case OVER_STATE:
					addChild( m_overStyle );
					break;
 
				case DOWN_STATE:
					addChild( m_downStyle );
					break;
 
				default:
					addChild( m_upStyle );
					break;
			}
 
			addChild( m_label );
		}
 
	}
 
}
package
{
	import com.actionscriptfacile.ui.button.Button;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;// import du skin du boutton
 
	import flash.display.Sprite;
 
	/**
	 * Exemple d'utilisation du composant Button.
	 * @author Matthieu
	 */
	public class ButtonExample extends Sprite
	{
 
		public function ButtonExample():void
		{
			// création un objet de type Button
			var button:Button = new Button();
 
			// définission du texte
			button.label = 'Button Component';
 
			// 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 ]
			button.applySkin( new DefaultButtonSkin() );
 
			// 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;
 
			// acccès au composant de type UITextField (labelField)
			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
			button.labelField.changeFormat("font", "Arial");// changement de la police du texte
		}
	}
}
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 );
		}
 
	}
 
}

consectetur et, massa libero Praesent mattis nunc facilisis felis dictum