Sujets sur : ScrollBar

Cours ActionScript 3 ‘ScrollBar’

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é 1870 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]

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : ScrollBar

Cours ActionScript 3 ‘ScrollBar’

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…

Cours Récents

Liens / Partenaires

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : ScrollBar

Cours ActionScript 3 ‘ScrollBar’

Comment créer une ScrollBar en AS3 ?

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

II – Cahier Des Charges Techniques d’une ScrollBar

La classe ScrollManager

La classe VerticalScrollBar

Conclusion

Évolutions des fonctionnalités

HorizontalScrollBar

Tween ScrollBar

Sources commentées

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

Cours Récents

Liens / Partenaires

I – Cahier Des Charges Fonctionnel d’une ScrollBar