I. Introduction

Ça y est, l'heure est venue, 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 !

C'est donc le 2ème composant de notre « Bibliothèque de Composants Graphiques ».

Préparez-vous, le sujet est un peu plus compliqué que les articles précédents. Nous étudierons uniquement la scrollbar verticale. Rassurez-vous, le raisonnement est exactement le même dans le sens horizontal.

Dans ce chapitre, vous verrez comment établir un cahier des charges pour un composant de type VerticalScrollBar. Vous aurez bien évidemment accès aux sources commentées afin de mettre en pratique tout ce que vous aurez appris.

II. CDCF d'un composant VerticalScrollBar

Pour continuer avec les bonnes habitudes, passons à la rédaction de l'indispensable CDCF (Cahier Des Charges Fonctionnel).

Nous allons commencer par un bref descriptif des fonctionnalités d'une VerticalScrollBar.

Une VerticalScrollBar 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 VerticalScrollBar 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 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 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'appellerons le background.

Comme pour le composant 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.

III. CDCT d'un composant VerticalScrollBar

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 à part qui se nommera ScrollManager. Cette classe se chargera de gérer le scrolling du content.

Le composant graphique (VerticalScrollBar), quant à 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 lorsque 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'appellerons 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 la fonction "applySkin" de base afin de mettre à jour le style de chacun des UIComponent composant 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.

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



Évolutions des fonctionnalités

Maintenant c'est à vous de jouer !

Dans les paragraphes suivants, vous trouverez des exemples de fonctionnalités à implémenter dans le « framework ActionScript Facile ». N'hésitez pas à poster vos exemples sur le Forum AS3 DeveloppezForum AS3 Developpez.

HorizontalScrollBar
Essayez donc de créer une scrollbar horizontale, la tâche vous est simplifiée. Effectivement, notre ScrollManager (définit dans com.actionscriptfacile.ui.scroll.manager) laisse la possibilité de scroller un objet à l'horizontale.

Tween ScrollBar
Vous pouvez également essayer de d'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.

Le fichier zip contient 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 : Component VerticalScrollBar Framework actionscript-facile

N'hésitez pas à poser vos questions sur le Forum AS3 DeveloppezForum AS3 Developpez.

com.actionscriptfacile.ui.scroll.manager.ScrollManager.as
Sélectionnez
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; // référence 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 n'a pas besoin d'actualiser quoi que ce soit
			{
				return;
			}
 
			var diff:Number; 
 
			if ( m_horizontal ) // si on scrolle à 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 scrolle à 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;
		}
	}
 
}
com.actionscriptfacile.ui.scroll.manager.IScrollManager.as
Sélectionnez
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;
 
	}
 
}
com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as
Sélectionnez
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; // référence 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 scroller à 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é 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 évènements 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 );
		}
 
	}
 
}
com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as
Sélectionnez
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 );
		}
	}
 
}
com.actionscriptfacile.ui.scroll.components.ScrollerButton.as
Sélectionnez
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 );
		}
	}
 
}
com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as
Sélectionnez
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 );
		}
	}
 
}
VerticalScrollBarExample.as
Sélectionnez
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 );
		}
 
	}
 
}
com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as
Sélectionnez
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 );
		}
 
	}
 
}

V. Remerciements / Téléchargements

Je tiens ici à remercier La Rédactrice Kalyparker pour la mise au gabarit de l'article original au format Developpez.com.

Merci beaucoup à l'équipe Developpez.com de contribuer à la diffusion du Framework ActionScript-Facile.

TéléchargezTéléchargez le Framework AS3 Facile l'ensemble des classes commentées du Framework AS3 FacileTéléchargez le Framework AS3 Facile (avec le code source et les exemples de tous les Composants AS3).