Sujets sur : composants graphiques

Cours ActionScript 3 ‘composants graphiques’

Comment créer une ScrollBar en AS3 ?

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

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

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

I – Cahier Des Charges Fonctionnel d’une ScrollBar

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

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

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

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

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

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

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

II – Cahier Des Charges Techniques d’une ScrollBar

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

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

La classe ScrollManager

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

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

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

La classe VerticalScrollBar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Conclusion

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

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

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

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

Évolutions des fonctionnalités

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

Maintenant c’est à vous de jouer !

HorizontalScrollBar

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

Tween ScrollBar

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

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

Sources commentées

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

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

Vous pouvez télécharger le fichier zip :

Télécharger “Composant Vertical ScrollBar Framework AS3 Facile”

component_verticalscrollbar_framework_actionscript-facile.zip – Téléchargé 1685 fois – 70,62 Ko

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

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

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

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

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

	public class ScrollManager implements IScrollManager
	{

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

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

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

			m_content = null;
			m_scrollArea = null;

			delete this;
		}

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

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

			var diff:Number; 

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

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

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

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

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

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

		}

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

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

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

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

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

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

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

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

package com.actionscriptfacile.ui.scroll.manager

{

import flash.geom.Rectangle;

import flash.display.DisplayObject;

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

/**

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

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

* @author Matthieu

public class ScrollManager implements IScrollManager

{

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

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

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

private var m_scrollArea:Rectangle; // zone de scroll

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

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

public function ScrollManager()

{

m_scrollArea = new Rectangle();

m_scrollV = m_scrollH = 0;

m_content = null;

m_vertical = m_horizontal = false;

}

/**

* Détruit proprement le ScrollManager

public function destroy():void

{

m_content = null;

m_scrollArea = null;

delete this;

}

/**

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

private function replace():void

{

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

{

return;

}

var diff:Number;

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

{

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

diff = m_content.width - m_scrollArea.width;

if ( diff < 0 )

diff = 0;

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

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

}

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

{

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

diff = m_content.height - m_scrollArea.height;

if ( diff < 0 )

diff = 0;

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

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

}

/**

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

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

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

/**

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

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

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

/**

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

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

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

/**

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

public function set scrollV(p_scrollV:Number):void

{

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

replace();

}

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

/**

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

public function set scrollH(p_scrollH:Number):void

{

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

replace();

}

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

/**

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

public function set scrollArea(p_scrollArea : Rectangle) : void

{

m_scrollArea = p_scrollArea;

replace();

}

public function get scrollArea() : Rectangle

{

return m_scrollArea;

}

[/codesyntax]

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

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

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

		function destroy():void;

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

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

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

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

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

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

	}

}

package com.actionscriptfacile.ui.scroll.manager

{

import flash.display.DisplayObject;

import flash.geom.Rectangle;

/**

* ...

* @author Matthieu

public interface IScrollManager

{

function destroy():void;

function set content( p_content:DisplayObject ):void;

function get content():DisplayObject;

function set scrollV( p_scrollV:Number ):void;

function get scrollV():Number;

function set scrollH( p_scrollH:Number ):void;

function get scrollH():Number;

function get vertical():Boolean;

function set vertical( p_vertical:Boolean ):void;

function get horizontal():Boolean;

function set horizontal( p_horizontal:Boolean ):void;

function set scrollArea( p_scrollArea:Rectangle ):void;

function get scrollArea():Rectangle;

}

[/codesyntax]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

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

import com.actionscriptfacile.ui.UIComponent;

import flash.display.DisplayObject;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.geom.Rectangle;

/**

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

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

* @author Matthieu

public class VerticalScrollBar extends UIComponent

{

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

private var m_scroller:ScrollerButton; // Le bouton scroller

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

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

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

private var m_scrollV:Number;

/**

* Constantes de skin

static public const SCROLL_VERTICAL_BACKGROUND_SKIN :String = 'SCROLL_VERTICAL_BACKGROUND_SKIN';

public function VerticalScrollBar()

{

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

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

* pas optimisé à la compilation,

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

init();

}

/**

* Initialise proprement un objet de type VerticalScrollBar

private function init():void

{

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

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

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

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

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

m_scroller = new ScrollerButton();

m_background = new Sprite();

m_upButton = new ScrollUpButton();

m_bottomButton = new ScrollDownButton();

}

/**

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

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

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

/**

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

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

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

/**

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

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

public function set scrollV( p_scrollV:Number):void

{

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

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

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

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

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

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

}

/**

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

private function reset():void

{

/**

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

addChild( m_background );

addChild( m_upButton );

addChild ( m_bottomButton );

addChild( m_scroller );

/**

* On réinitialise leurs coordonnées

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

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

}

/**

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

* @param e Objet de type MouseEvent

private function clickHandler(e:MouseEvent):void

{

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

{

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

case m_upButton:

scrollV -= .15;

break;

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

case m_bottomButton:

scrollV += .15;

break;

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

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

case m_background:

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

break;

}

/**

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

* @param e paramètre de type MouseEvent

private function wheelHandler(e:MouseEvent):void

{

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

* */

scrollV -= e.delta * .1;

}

/**

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

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

* sur le scrolling vertical du ScrollManager

* @param e paramètre de type Event

private function enterFrameHandler(e:Event):void

{

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

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

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

if ( m_scrollV > 0.99 )

m_scrollV = 1;

// on attribue la même valeur au ScrollManager

m_manager.scrollV = m_scrollV;

}

/**

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

* @param e paramètre de type Event

private function toggleDragHandler(e:Event):void

{

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

if ( e.type == MouseEvent.MOUSE_DOWN )

{

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

* puis on fait appel à startDrag

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

rectangle.height -= m_scroller.height;

rectangle.width = 0;

m_scroller.startDrag( false, rectangle );

}

else // sinon ...

{

// on stop le "drag" du composant scroller

m_scroller.stopDrag();

}

/**

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

override public function onRemovedFromStage():void

{

if ( m_manager.content )

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

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

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

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

removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

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

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

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

removeEventListener( Event.ENTER_FRAME , enterFrameHandler, false );

}

/**

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

override public function onAddedToStage():void

{

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

if( m_manager.content )

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

* on écoute les évenements de type :

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

* MOUSE_DOWN et MOUSE_UP sur le composant scroller

* */

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

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

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

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

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

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

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

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

* VerticalScrollBar entier

addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );

/**

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

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

addEventListener( Event.ENTER_FRAME , enterFrameHandler, false );

}

/**

* Tue proprement un objet de type VerticalScrollBar

override public function destroy():void

{

/**

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

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

removeChild( m_upButton );

removeChild( m_bottomButton );

removeChild( m_scroller );

removeChild( m_background );

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

parent.removeChild( this );

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

m_manager.destroy();

m_manager = null;

m_upButton = null;

m_background = null;

m_scroller = null;

m_bottomButton = null;

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

super.destroy();

}

/**

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

* graphiques d'un objet de type VerticalScrollBar

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

override public function applySkin(p_skin:ISkin):void

{

/**

* on applique la skin aux boutons

m_scroller.applySkin( p_skin );

m_upButton.applySkin( p_skin );

m_bottomButton.applySkin( p_skin );

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

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

if ( definition != null )

{

// on le détruit

if( contains( m_background ) )

removeChild( m_background );

m_background = null;

// on le réinstancie

m_background = new definition();

}

// ensuite on repositionne tous les éléments

reset();

}

/**

* Fonction permettant de gérer intelligemment le redimensionnement

* d'un objet de type VerticalScrollBar

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

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

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

{

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

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

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

m_upButton.y = 0;

m_background.y = m_upButton.height;

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

// on appelle la méthode parente

super.resize( p_width, p_height );

}

[/codesyntax]

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

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

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

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

		public function ScrollUpButton() { }

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

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

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

			super.applySkin( p_skin );
		}
	}

}

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.button.Button;

/**

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

* @author Matthieu

public class ScrollUpButton extends Button

{

public static const SCROLLUP_VERTICAL_OVER_SKIN:String = 'SCROLLUP_VERTICAL_SKIN';

public static const SCROLLUP_VERTICAL_UP_SKIN:String = 'SCROLLUP_UP_SKIN';

public static const SCROLLUP_VERTICAL_DOWN_SKIN:String = 'SCROLLUP_DOWN_SKIN';

public function ScrollUpButton() { }

/**

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

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

* pas optimisé à la compilation,

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

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

override protected function init():void

{

super.init();

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

}

/**

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

* graphiques d'un objet

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

override public function applySkin( p_skin:ISkin ):void

{

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

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

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

super.applySkin( p_skin );

}

[/codesyntax]

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

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

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

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

		public function ScrollerButton() { }

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

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

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

			super.applySkin( p_skin );
		}
	}

}

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.button.Button;

/**

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

* @author Matthieu

public class ScrollerButton extends Button

{

public static const SCROLLER_VERTICAL_OVER_SKIN:String = 'SCROLLER_VERTICAL_SKIN';

public static const SCROLLER_VERTICAL_UP_SKIN:String = 'SCROLLER_UP_SKIN';

public static const SCROLLER_VERTICAL_DOWN_SKIN:String = 'SCROLLER_DOWN_SKIN';

public function ScrollerButton() { }

/**

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

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

* pas optimisé à la compilation,

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

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

override protected function init():void

{

super.init();

removeChild( m_label );

}

/**

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

* graphiques d'un objet

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

override public function applySkin( p_skin:ISkin ):void

{

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

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

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

super.applySkin( p_skin );

}

[/codesyntax]

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

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

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

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

		public function ScrollDownButton() { }

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

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

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

			super.applySkin( p_skin );
		}
	}

}

package com.actionscriptfacile.ui.scroll.components

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.button.Button;

/**

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

* @author Matthieu

public class ScrollDownButton extends Button

{

public static const SCROLLDOWN_VERTICAL_OVER_SKIN:String = 'SCROLLDOWN_VERTICAL_SKIN';

public static const SCROLLDOWN_VERTICAL_UP_SKIN:String = 'SCROLLDOWN_UP_SKIN';

public static const SCROLLDOWN_VERTICAL_DOWN_SKIN:String = 'SCROLLDOWN_DOWN_SKIN';

public function ScrollDownButton() { }

/**

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

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

* pas optimisé à la compilation,

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

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

override protected function init():void

{

super.init();

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

}

/**

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

* graphiques d'un objet

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

override public function applySkin( p_skin:ISkin ):void

{

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

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

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

super.applySkin( p_skin );

}

[/codesyntax]

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

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

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

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

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

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

			// création d'une scrollbar verticale
			var barre:VerticalScrollBar = new VerticalScrollBar();
			barre.content = content;// définition de son content et de sa scrollArea
			barre.scrollArea = new Rectangle( 0, 20, 100, nHeightScrollArea );
			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			barre.applySkin( new DefaultVerticalScrollBarSkin() );

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

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

			content.x = 50;

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

	}

}

package

{

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

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

import flash.display.Sprite;

import flash.geom.Rectangle;

/**

* Exemple d'utilisation du composant VerticalScrollBar.

* @author Matthieu

public class VerticalScrollBarExample extends Sprite

{

public function VerticalScrollBarExample()

{

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

var nHeightScrollArea:Number = 150;

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

var content:Sprite = new Sprite();

content.graphics.beginFill( 0XFF0000 );

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

content.graphics.endFill();

// création d'une scrollbar verticale

var barre:VerticalScrollBar = new VerticalScrollBar();

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

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

// Application de la skin par défaut

// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]

barre.applySkin( new DefaultVerticalScrollBarSkin() );

// ajout à la displaylist

addChild( barre );

addChild( content );

// détermination de la position de la ScrollBar

barre.x = 350;

barre.y = 20;

content.x = 50;

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

barre.resize( barre.width, nHeightScrollArea );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as »]

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

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

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

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

	}

}

package com.as3facileexemple.skin.classic

{

// Import des classes gérant la partie graphique du composant dans le fla (movieclip)

// Provient de ui.swc (créé avec la compilation de UI.fla)

import com.as3facile.skin.scroll.ScrollBarBackgroundSkin;

import com.as3facile.skin.scroll.ScrollBottomButtonSkin;

import com.as3facile.skin.scroll.ScrollUpButtonSkin;

import com.as3facile.skin.scroll.ScrollerButtonSkin;

import com.actionscriptfacile.skin.Skin;

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

/**

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

* @author Matthieu

public class DefaultVerticalScrollBarSkin extends Skin

{

public function DefaultVerticalScrollBarSkin()

{

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );

}

[/codesyntax]

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

7 questions

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

Dans ce tutoriel, nous allons enfin aborder la pratique!

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

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

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

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

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

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

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

Les points importants d’un composant :

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

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

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

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

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

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

Le composant apporte une interaction avec l’utilisateur

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

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

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

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

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

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

Personnalisable au niveau de l’apparence

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

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

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

Ajout de quelques fonctionnalités supplémentaires :

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

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

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

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

Conclusion

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

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

Sources commentées

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

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

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

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

Dites-moi cela dans les commentaires ci-dessous.

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

package  com.actionscriptfacile.skin
{

	import com.actionscriptfacile.skin.ISkin;

	public interface ISkinnable
	{

		function applySkin( p_skin:ISkin ):void;

	}

}

package com.actionscriptfacile.skin

{

import com.actionscriptfacile.skin.ISkin;

public interface ISkinnable

{

function applySkin( p_skin:ISkin ):void;

}

[/codesyntax]

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

package  com.actionscriptfacile.skin
{

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

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

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

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

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

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

			return skin;
		}

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

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

	}

}

package com.actionscriptfacile.skin

{

import com.actionscriptfacile.skin.ISkin;

import flash.utils.Dictionary;

import flash.utils.getDefinitionByName;

import flash.utils.getQualifiedClassName;

public class Skin implements ISkin

{

private var m_data:Dictionary;

public function Skin()

{

m_data = new Dictionary();

}

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

{

m_data[ p_skinName ] = p_skinDefinition;

}

public function getSkin(p_skinName:String) :Class

{

return m_data[ p_skinName ];

}

public function clone():ISkin

{

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

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

skin.setSkins( m_data );

return skin;

}

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

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

public function destroy():void

{

m_data = null;

delete this;

}

[/codesyntax]

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

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

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

		function clone():ISkin;

		function destroy():void;
	}

}

package com.actionscriptfacile.skin

{

import flash.utils.Dictionary;

public interface ISkin

{

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

function getSkin( p_skinName:String ):Class;

function setSkins( p_skins:Dictionary ):void;

function getSkins():Dictionary;

function clone():ISkin;

function destroy():void;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.IComponent » bookmarkname= »com.actionscriptfacile.ui.IComponent »]

package  com.actionscriptfacile.ui
{
	import com.actionscriptfacile.skin.ISkinnable;
	import flash.display.DisplayObjectContainer;
	import com.actionscriptfacile.ui.tooltip.Tooltip;

	public interface IComponent extends ISkinnable
	{

		function destroy():void;
		function hide():void;
		function show():void;

		function onAdded():void;
		function onRemoved():void;

		function onAddedToStage():void;
		function onRemovedFromStage():void;

		function resize( p_width:Number , p_height:Number ):void;

		function set tooltip( p_toolTip:Tooltip ):void;
		function get tooltip():Tooltip;

		function get lastParent():DisplayObjectContainer;

	}

}

package com.actionscriptfacile.ui

{

import com.actionscriptfacile.skin.ISkinnable;

import flash.display.DisplayObjectContainer;

import com.actionscriptfacile.ui.tooltip.Tooltip;

public interface IComponent extends ISkinnable

{

function destroy():void;

function hide():void;

function show():void;

function onAdded():void;

function onRemoved():void;

function onAddedToStage():void;

function onRemovedFromStage():void;

function resize( p_width:Number , p_height:Number ):void;

function set tooltip( p_toolTip:Tooltip ):void;

function get tooltip():Tooltip;

function get lastParent():DisplayObjectContainer;

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.UIComponent » bookmarkname= »com.actionscriptfacile.ui.UIComponent »]

package  com.actionscriptfacile.ui
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.events.Event;
	import com.actionscriptfacile.ui.IComponent;
	import flash.events.MouseEvent;

	/**
	 * Classe  de base de tous les composants
	 * @author Matthieu
	 */

	public class UIComponent extends Sprite implements IComponent
	{

		private var m_lastParent:DisplayObjectContainer; // Le dernier parent connu de l'objet
		private var m_tooltip:Tooltip; // Un objet de type Tooltip

		static public const RELEASE_OUTSIDE:String = 'RELEASE_OUTSIDE'; // Constante utilisée pour les addEventListener

		/**
		 * Constructeur
		 */

		public function UIComponent()
		{
			m_lastParent = null;
			m_tooltip = null;

			addEventListener( Event.ADDED, addedHandler );
			addEventListener( Event.ADDED_TO_STAGE, addedHandler );
			addEventListener( Event.REMOVED, removeHandler );
			addEventListener( Event.REMOVED_FROM_STAGE, removeHandler );
			addEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );
			addEventListener( MouseEvent.ROLL_OVER, overOutHandler );
			addEventListener( MouseEvent.ROLL_OUT, overOutHandler );

		}

		// events listeners

		/**
		 *
		 * Cette méthode est utilisée est utilisée pour afficher / cacher le tooltip si celui-ci est défini.
		 *
		 * @param	e Un objet de type MouseEvent
		 */
		private function overOutHandler(e:MouseEvent):void
		{
			if ( m_tooltip == null )
			{
				return;
			}

			if ( e.type == MouseEvent.ROLL_OUT )
			{
				m_tooltip.hide();
			}
			else
			{
				m_tooltip.show();
			}
		}

		/**
		 * @private utilisée pour détecter les RELEASE OUTSIDE
		 * @param	e
		 */
		private function downUpHandler(e:MouseEvent):void
		{

			if ( e.type == MouseEvent.MOUSE_DOWN )
			{

				/*
				 * Si on appuie sur le click de la souris alors on cherche à détecter le moment
				 * ou on la relachera que l'on soit sur l'objet ou non.
				 *
				 * */
				stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler );
				stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );
			}
			else
			{

				/*
				 * Si la souris est relâchée, nous n'avons plus besoin d'écouter les événements adéquats.
				 * Nous vérifions ensuite que la souris ne se trouvait pas sur le composant à ce moment là et on dispatch un évenement.
				 * */

				stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );
				stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

				if ( ! hitTestPoint( e.stageX, e.stageY , false ) )
				{
					dispatchEvent( new Event( RELEASE_OUTSIDE, true, true ) );
				}

			}
		}

		/**
		 *
		 * Détecte les évenements de type Event.ADDED et Event.ADDED_TO_STAGE et se charge d'appeller les méthodes onAdded ou onAddedToStage.
		 *
		 * @param	e évenement de type Event
		 */
		private function addedHandler( e:Event ):void
		{

			if ( parent != null )
			{
				m_lastParent = parent;
			}

			if ( e.type == Event.ADDED )
			{
				onAdded();
			}
			else
			{
				onAddedToStage();
			}
		}

		/**
		 *
		 * Détecte les évenements de type Event.REMOVED et Event.REMOVED_FROM_STAGE et se charge d'appeller les méthodes onRemoved ou onRemovedFromStage.
		 *
		 * @param	e évenement de type Event
		 */
		private function removeHandler( e:Event ):void
		{

			if ( parent != null )
			{
				m_lastParent = parent;
			}

			if ( e.type == Event.REMOVED )
			{
				onRemoved();
			}
			else
			{
				onRemovedFromStage();
			}

		}

		// fonctions publiques

		/**
		 * Détruit proprement le composant
		 */

		public function destroy():void
		{

			// on cherche à sortir de la display list du parent

			if ( parent != null &amp;&amp; parent.contains( this ) )
			{
				parent.removeChild( this );
			}

			// on supprime proprement tout les objets de note display list

			while ( numChildren &gt; 0 )
			{
				var child:DisplayObject = removeChildAt( 0 );
				child = null;
			}

			// on passe la propriété lastParent à null
			m_lastParent = null;

			// Enfin, on détruit tout les event listeners

			removeEventListener( Event.ADDED, addedHandler );
			removeEventListener( Event.ADDED_TO_STAGE, addedHandler );
			removeEventListener( Event.REMOVED, removeHandler );
			removeEventListener( Event.REMOVED_FROM_STAGE, removeHandler );
			removeEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );
			removeEventListener( MouseEvent.ROLL_OVER, overOutHandler );
			removeEventListener( MouseEvent.ROLL_OUT, overOutHandler );
			stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );
			stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

			delete this;

		}

		/**
		 * Supprime le composant de la display list de son lastParent
		 */
		public function hide():void
		{

			if ( parent != null &amp;&amp; parent.contains( this ) )
			{
				m_lastParent = parent;
				parent.removeChild( this );
			}
		}

		/**
		 * Ajoute le composant à la display list de son lastParent
		 */
		public function show():void
		{

			visible = true;

			if ( m_lastParent == null )
				return;

			m_lastParent.addChild( this );

		}

		// fonctions destinées à être overridées

		/**
		 * Est éxécutée lorsque le composant est ajouté à la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onAdded():void { }

		/**
		 * Est éxécutée lorsque le composant est supprimé de la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onRemoved():void { }

		/**
		 * Est éxécutée lorsque le composant est ajouté à la display list du stage, cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onAddedToStage():void { }

		/**
		 * Est éxécutée lorsque le composant est supprimé de la display list du stage, , cette méthode prend tout sens dans le cas d'un override.
		 */
		public function onRemovedFromStage():void { }

		/**
		 * Fonction qui sert à sert à réceptionner et appliquer une skin au composant, cette méthode prend tout son sens dans le cas d'un override.
		 *
		 * @param	p_skin Objet qui implémente l'interface ISkin @see
		 */
		public function applySkin(p_skin:ISkin):void { }

		/**
		 * Fonction qui sert à sert à changer la taille d'un composant de manière propre, cette méthode prend tout son sens dans le cas d'un override.
		 *
		 * @param	p_width		nouvelle largeur du composant
		 * @param	p_height	nouvelle hauteur du composant
		 */
		public function resize(p_width:Number, p_height:Number):void
		{

		}

		// getters / setters

		/**
		 * Définit un objet de type Tooltip
		 */
		public function set tooltip(p_toolTip:Tooltip):void {  m_tooltip = addChild( p_toolTip ) as Tooltip; m_tooltip.hide(); }
		/**
		 * Retourne le tooltip du composant
		 */

		 public function get tooltip():Tooltip { return m_tooltip; }

		/**
		 * Renvoie le dernier parent du composant.
		 */
		public function get lastParent():DisplayObjectContainer{ return m_lastParent; }

	}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

package com.actionscriptfacile.ui

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.tooltip.Tooltip;

import flash.display.DisplayObject;

import flash.display.DisplayObjectContainer;

import flash.display.Sprite;

import flash.events.Event;

import com.actionscriptfacile.ui.IComponent;

import flash.events.MouseEvent;

/**

* Classe de base de tous les composants

* @author Matthieu

public class UIComponent extends Sprite implements IComponent

{

private var m_lastParent:DisplayObjectContainer; // Le dernier parent connu de l'objet

private var m_tooltip:Tooltip; // Un objet de type Tooltip

static public const RELEASE_OUTSIDE:String = 'RELEASE_OUTSIDE'; // Constante utilisée pour les addEventListener

/**

* Constructeur

public function UIComponent()

{

m_lastParent = null;

m_tooltip = null;

addEventListener( Event.ADDED, addedHandler );

addEventListener( Event.ADDED_TO_STAGE, addedHandler );

addEventListener( Event.REMOVED, removeHandler );

addEventListener( Event.REMOVED_FROM_STAGE, removeHandler );

addEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );

addEventListener( MouseEvent.ROLL_OVER, overOutHandler );

addEventListener( MouseEvent.ROLL_OUT, overOutHandler );

}

// events listeners

/**

* Cette méthode est utilisée est utilisée pour afficher / cacher le tooltip si celui-ci est défini.

* @param e Un objet de type MouseEvent

private function overOutHandler(e:MouseEvent):void

{

if ( m_tooltip == null )

{

return;

}

if ( e.type == MouseEvent.ROLL_OUT )

{

m_tooltip.hide();

}

else

{

m_tooltip.show();

}

/**

* @private utilisée pour détecter les RELEASE OUTSIDE

* @param e

private function downUpHandler(e:MouseEvent):void

{

if ( e.type == MouseEvent.MOUSE_DOWN )

{

* Si on appuie sur le click de la souris alors on cherche à détecter le moment

* ou on la relachera que l'on soit sur l'objet ou non.

* */

stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler );

stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

}

else

{

* Si la souris est relâchée, nous n'avons plus besoin d'écouter les événements adéquats.

* Nous vérifions ensuite que la souris ne se trouvait pas sur le composant à ce moment là et on dispatch un évenement.

* */

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

if ( ! hitTestPoint( e.stageX, e.stageY , false ) )

{

dispatchEvent( new Event( RELEASE_OUTSIDE, true, true ) );

}

/**

* Détecte les évenements de type Event.ADDED et Event.ADDED_TO_STAGE et se charge d'appeller les méthodes onAdded ou onAddedToStage.

* @param e évenement de type Event

private function addedHandler( e:Event ):void

{

if ( parent != null )

{

m_lastParent = parent;

}

if ( e.type == Event.ADDED )

{

onAdded();

}

else

{

onAddedToStage();

}

/**

* Détecte les évenements de type Event.REMOVED et Event.REMOVED_FROM_STAGE et se charge d'appeller les méthodes onRemoved ou onRemovedFromStage.

* @param e évenement de type Event

private function removeHandler( e:Event ):void

{

if ( parent != null )

{

m_lastParent = parent;

}

if ( e.type == Event.REMOVED )

{

onRemoved();

}

else

{

onRemovedFromStage();

}

// fonctions publiques

/**

* Détruit proprement le composant

public function destroy():void

{

// on cherche à sortir de la display list du parent

if ( parent != null && parent.contains( this ) )

{

parent.removeChild( this );

}

// on supprime proprement tout les objets de note display list

while ( numChildren > 0 )

{

var child:DisplayObject = removeChildAt( 0 );

child = null;

}

// on passe la propriété lastParent à null

m_lastParent = null;

// Enfin, on détruit tout les event listeners

removeEventListener( Event.ADDED, addedHandler );

removeEventListener( Event.ADDED_TO_STAGE, addedHandler );

removeEventListener( Event.REMOVED, removeHandler );

removeEventListener( Event.REMOVED_FROM_STAGE, removeHandler );

removeEventListener( MouseEvent.MOUSE_DOWN, downUpHandler );

removeEventListener( MouseEvent.ROLL_OVER, overOutHandler );

removeEventListener( MouseEvent.ROLL_OUT, overOutHandler );

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler );

stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true );

delete this;

}

/**

* Supprime le composant de la display list de son lastParent

public function hide():void

{

if ( parent != null && parent.contains( this ) )

{

m_lastParent = parent;

parent.removeChild( this );

}

/**

* Ajoute le composant à la display list de son lastParent

public function show():void

{

visible = true;

if ( m_lastParent == null )

return;

m_lastParent.addChild( this );

}

// fonctions destinées à être overridées

/**

* Est éxécutée lorsque le composant est ajouté à la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.

public function onAdded():void { }

/**

* Est éxécutée lorsque le composant est supprimé de la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override.

public function onRemoved():void { }

/**

* Est éxécutée lorsque le composant est ajouté à la display list du stage, cette méthode prend tout sens dans le cas d'un override.

public function onAddedToStage():void { }

/**

* Est éxécutée lorsque le composant est supprimé de la display list du stage, , cette méthode prend tout sens dans le cas d'un override.

public function onRemovedFromStage():void { }

/**

* Fonction qui sert à sert à réceptionner et appliquer une skin au composant, cette méthode prend tout son sens dans le cas d'un override.

* @param p_skin Objet qui implémente l'interface ISkin @see

public function applySkin(p_skin:ISkin):void { }

/**

* Fonction qui sert à sert à changer la taille d'un composant de manière propre, cette méthode prend tout son sens dans le cas d'un override.

* @param p_width nouvelle largeur du composant

* @param p_height nouvelle hauteur du composant

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

{

}

// getters / setters

/**

* Définit un objet de type Tooltip

public function set tooltip(p_toolTip:Tooltip):void { m_tooltip = addChild( p_toolTip ) as Tooltip; m_tooltip.hide(); }

/**

* Retourne le tooltip du composant

public function get tooltip():Tooltip { return m_tooltip; }

/**

* Renvoie le dernier parent du composant.

public function get lastParent():DisplayObjectContainer{ return m_lastParent; }

}

[/codesyntax]

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : composants graphiques

Cours ActionScript 3 ‘composants graphiques’

Comment créer une ScrollBar en AS3 ?

I – Cahier Des Charges Fonctionnel d’une ScrollBar

II – Cahier Des Charges Techniques d’une ScrollBar

La classe ScrollManager

La classe VerticalScrollBar

Conclusion

Évolutions des fonctionnalités

HorizontalScrollBar

Tween ScrollBar

Sources commentées

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

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

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

Les points importants d’un composant :

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

Le composant apporte une interaction avec l’utilisateur

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

Personnalisable au niveau de l’apparence

Ajout de quelques fonctionnalités supplémentaires :

Conclusion

Sources commentées

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

Cours Récents

Liens / Partenaires

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : composants graphiques

Cours ActionScript 3 ‘composants graphiques’

Comment créer une ScrollBar en AS3 ?

<img decoding="async" class="aligncenter size-full wp-image-478" title="Scrollbar" src="https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/scrollbar.png?strip=all&lossy=1&resize=170%2C168" alt="" width="170" height="168" />I – Cahier Des Charges Fonctionnel d’une ScrollBar

II – Cahier Des Charges Techniques d’une ScrollBar

La classe ScrollManager

La classe VerticalScrollBar

Conclusion

Évolutions des fonctionnalités

HorizontalScrollBar

Tween ScrollBar

Sources commentées

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

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

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

Les points importants d’un composant :

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

Le composant apporte une interaction avec l’utilisateur

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

Personnalisable au niveau de l’apparence

Ajout de quelques fonctionnalités supplémentaires :

Conclusion

Sources commentées

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

Cours Récents

Liens / Partenaires

I – Cahier Des Charges Fonctionnel d’une ScrollBar