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

Comment créer une ScrollBar en AS3 ?

11 questions

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

Mots clés : , , , , , , , , ,

Le Kit du Développeur Flash

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://www.actionscript-facile.com/wp-content/uploads/2010/09/verticalscrollbar_exemple.swf

Évolutions des fonctionnalités

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

Maintenant c’est à vous de jouer !

HorizontalScrollBar

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

Tween ScrollBar

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

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

Sources commentées

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

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

Vous pouvez télécharger le fichier zip :

Télécharger “Composant Vertical ScrollBar Framework AS3 Facile” component_verticalscrollbar_framework_actionscript-facile.zip – Téléchargé 1132 fois – 71 KB

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

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

package  com.actionscriptfacile.ui.scroll.manager
{
	import flash.geom.Rectangle;
	import flash.display.DisplayObject;
	import com.actionscriptfacile.ui.scroll.manager.IScrollManager;
 
	/**
	 * Un ScrollManager permet de scroller n'importe quel DisplayObject définit par sa variable content verticalement
	 * et horizontalement au sein d'une zone définie par sa propriété scrollArea.
	 *
	 * @author Matthieu
	 */
 
	public class ScrollManager implements IScrollManager
	{
 
		private var m_content:DisplayObject; // reference vers le contenu à scroller
		private var m_scrollV:Number; // pourcentage de scroll Vertical
		private var m_scrollH:Number; // pourcentage de scroll Horizontal
		private var m_scrollArea:Rectangle; // zone de scroll
		private var m_vertical:Boolean; // indique si le manager doit scroller l'objet à la verticale ou non
		private var m_horizontal:Boolean; // indique si le manager doit scroller l'objet à l'horizontale ou non
 
		public function ScrollManager()
		{
			m_scrollArea = new Rectangle();
			m_scrollV = m_scrollH = 0;
			m_content = null;
			m_vertical = m_horizontal = false;
		}
 
		/**
		 * Détruit proprement le ScrollManager
		 */
		public function destroy():void
		{
 
			m_content = null;
			m_scrollArea = null;
 
			delete this;
		}
 
		/**
		 * Fonction qui actualise l'état graphique du composant et de tous ses éléments.
		 */
		private function replace():void
		{
 
			if ( m_content == null ) // Si le contenu n'est pas défini, on a pas besoin d'actualiser quoi que ce soit
			{
				return;
			}
 
			var diff:Number; 
 
			if ( m_horizontal ) // si on scroll à l'horizontale
			{
				// la variable diff vaut la largeur du contenu - la largeur de la zone de scroll
				diff = m_content.width - m_scrollArea.width;
 
				if ( diff < 0 )
					diff = 0;
 
				// on rédéfinit la position horizontale du contenu
				m_content.x = m_scrollArea.x - ( diff * m_scrollH );
			}
 
			if ( m_vertical )// si on scroll à la verticale
			{
				// la variable diff vaut la hauteur du contenu - la hauteur de la zone de scroll
				diff = m_content.height - m_scrollArea.height;
 
				if ( diff < 0 )
					diff = 0;
 
				// on rédéfinit la position verticale du contenu
				m_content.y = m_scrollArea.y - ( diff * m_scrollV );
			}
 
		}
 
		/**
		 * Permet de signaler au manager si le contenu doit être scrollé à la verticale ou pas
		 */
		public function get vertical():Boolean { return m_vertical; }
		public function set vertical(p_vertical:Boolean):void { m_vertical = p_vertical; }
 
		/**
		 * Permet de signaler au manager si le contenu doit être scrollé à l'horizontale ou pas
		 */
		public function get horizontal():Boolean { return m_horizontal; }
		public function set horizontal(p_horizontal:Boolean):void { m_horizontal = p_horizontal; }
 
		/**
		 * Permet de signaler au manager quel est le contenu à scroller
		 */
		public function set content(p_content:DisplayObject):void { m_content = p_content; replace(); }
		public function get content():DisplayObject{ return m_content; }
 
		/**
		 * Récupère / définit le pourcentage de scrolling vertical du contenu
		 */
		public function set scrollV(p_scrollV:Number):void
		{
			m_scrollV = ( p_scrollV > 1 ) ? 1 : ( p_scrollV < 0 ) ? 0 : p_scrollV ;
			replace();
		}
		public function get scrollV():Number { return m_scrollV; }
 
		/**
		 * Récupère / définit le pourcentage de scrolling horizontal du contenu
		 */
		public function set scrollH(p_scrollH:Number):void
		{
			m_scrollH = ( p_scrollH > 1 ) ? 1 : ( p_scrollH < 0 ) ? 0 : p_scrollH ;
			replace();
		}
		public function get scrollH():Number { return m_scrollH; }
 
		/**
		 * Récupère / définit la zone de scroll du contenu
		 */
		public function set scrollArea(p_scrollArea : Rectangle) : void
		{
			m_scrollArea = p_scrollArea;
			replace();
		}
 
		public function get scrollArea() : Rectangle
		{
			return m_scrollArea;
		}
	}
 
}
package  com.actionscriptfacile.ui.scroll.manager
{
	import flash.display.DisplayObject;
	import flash.geom.Rectangle;
 
	/**
	 * ...
	 * @author Matthieu
	 */
	public interface IScrollManager
	{
 
		function destroy():void;
 
		function set content( p_content:DisplayObject ):void;
		function get content():DisplayObject;
 
		function set scrollV( p_scrollV:Number ):void;
		function get scrollV():Number;
 
		function set scrollH( p_scrollH:Number ):void;
		function get scrollH():Number;
 
		function get vertical():Boolean;
		function set vertical( p_vertical:Boolean ):void;
 
		function get horizontal():Boolean;
		function set horizontal( p_horizontal:Boolean ):void;
 
		function set scrollArea( p_scrollArea:Rectangle ):void;
		function get scrollArea():Rectangle;
 
	}
 
}
package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.scroll.manager.ScrollManager;
	import com.actionscriptfacile.ui.UIComponent;
 
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
 
	/**
	 * Une VerticalScrollBar est un composant graphique qui permet à l'utilisateur de faire défiler
	 * verticalement un objet graphique au sein d'une zone définie au préalable.
	 *
	 * @author Matthieu
	 */
	public class VerticalScrollBar extends UIComponent
	{
 
		private var m_manager:ScrollManager; // reference vers le scrollManager
		private var m_scroller:ScrollerButton; // Le bouton scroller
		private var m_background:Sprite; // Le background de la barre de scroll
		private var m_upButton:ScrollUpButton; // L'UIComponent "scroll up"
		private var m_bottomButton:ScrollDownButton; // L'UIComponent "scroll down"
		private var m_scrollV:Number;
 
		/**
		 * Constantes de skin
		 */
		static public const SCROLL_VERTICAL_BACKGROUND_SKIN	:String = 'SCROLL_VERTICAL_BACKGROUND_SKIN';
 
		public function VerticalScrollBar()
		{
			/*
			 * on crée une méthode init pour gagner des ressources,
			 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
			 * pas optimisé à la compilation,
			 * on met donc toutes nos instructions dans une méthode privée init
			 *
			 */
			init();
		}
 
		/**
		 * Initialise proprement un objet de type VerticalScrollBar
		 */
		private function init():void
		{
 
			m_manager = new ScrollManager(); // on crée un nouveau ScrollManager
			m_manager.content = null; // on définit son content à null
			m_manager.vertical = true; // on lui précise que l'on souhaite scrolle à la verticale
			m_manager.scrollV = 0; // on initiliase le pourcentage de scrolling vertical à 0.
 
			// Nous créeons ici les différents éléments de la VerticalScrollBar
			m_scroller = new ScrollerButton();
			m_background = new Sprite();
			m_upButton = new ScrollUpButton();
			m_bottomButton = new ScrollDownButton();
		}
 
		/**
		 * Récupère / définit le contenu à "scroller"
		 */
		public function set content( p_content:DisplayObject ):void { m_manager.content = p_content; }
		public function get content():DisplayObject { return m_manager.content; }
 
		/**
		 * Récupère définit la scrollArea (la zone de scroll)
		 */
		public function set scrollArea( p_scrollArea:Rectangle):void { m_manager.scrollArea = p_scrollArea; }
		public function get scrollArea():Rectangle { return m_manager.scrollArea; }
 
		/**
		 * Récupère / définit le pourcentage de scrolling vertical du "content"
		 */
		public function get scrollV():Number { return m_scrollV; }
		public function set scrollV( p_scrollV:Number):void
		{
			// si le paramètre est supérieur à 1 ou inférieur à 0 alors on recadre les valeurs
			m_scrollV = ( p_scrollV > 1 ) ? 1 : ( p_scrollV < 0 ) ? 0 : p_scrollV ; 
 
			// calcule la position (y) maximum que peut prendre le scroller
			// puis on le repositionne en fonction de cette valeur et du pourcentage de scroll
			var maxV:Number = m_background.height - m_scroller.height;
			m_scroller.y = m_background.y + ( maxV * m_scrollV );
		}
 
		/**
		 * Fonction interne utilisée pour réinitialiser les états des éléments graphiques
		 */
		private function reset():void
		{
 
			/**
			 * On ajoute à la display list nos éléments background, scroller, scrollUp, scrollDown
			 */
			addChild( m_background );
			addChild( m_upButton );
			addChild ( m_bottomButton );
			addChild( m_scroller );
 
			/**
			 * On réinitialise leurs coordonnées
			 */
			m_scroller.y = m_background.y = m_upButton.height;
			m_bottomButton.y = m_background.y + m_background.height;
		}
 
		/**
		 * Fonction qui récupère le click sur les éléments, background, scrollUp et scrollDown.
		 *
		 * @param	e Objet de type MouseEvent
		 */
		private function clickHandler(e:MouseEvent):void
		{
			switch( e.currentTarget ) // Si la cible est ...
			{
				// le scrollUp alors décrémente le pourcentage de scrolling vertical
				case m_upButton:
					scrollV -= .15;
					break;
 
				// le scrollDown alors incrémente le pourcentage de scrolling vertical
				case m_bottomButton:
					scrollV += .15;
					break;
 
				// le background alors calcule le pourcentage de scrolling vertical en fonction
				// de la position en y du click sur le background
				case m_background:
					scrollV = ( ( e.localY * m_background.scaleY ) / m_background.height );
					break;
			}
		}
 
		/**
		 * Fonction qui gère l'utilisation de la molette de la souris
		 *
		 * @param	e	paramètre de type MouseEvent
		 */
		private function wheelHandler(e:MouseEvent):void
		{
			/* on récupère la propriété delta que l'on divise par dix, puis on soustrait le résultat
			 * */
			scrollV -= e.delta * .1;
		}
 
		/**
		 * Fonction servant à mettre à jour en temps réel le pourcentage de scrolling vertical
		 * du composant, à le corriger si cela s'avère nécéssaire puis à répercuter ces modifications
		 * sur le scrolling vertical du ScrollManager
		 *
		 * @param	e	paramètre de type Event
		 */
		private function enterFrameHandler(e:Event):void
		{
			// on calcule le pourcentage de scrolling vertical en fonction de la position en y du scroller
			m_scrollV = ( m_scroller.y - m_background.y ) / ( m_background.height - m_scroller.height);
 
			// on arrondit la valeur si nécéssaire
			if ( m_scrollV > 0.99 )
				m_scrollV = 1;
 
			// on attribue la même valeur au ScrollManager
			m_manager.scrollV = m_scrollV;
		}
 
		/**
		 * Fonction interne servant à gérer le glisser / déposer ( on parle de drag ) du scroller.
		 *
		 * @param	e	paramètre de type Event
		 */
		private function toggleDragHandler(e:Event):void
		{
 
			// si l'utilisateur appuie sur le bouton clic gauche de sa souris alors ...
			if ( e.type == MouseEvent.MOUSE_DOWN )
			{
 
				/* on définit la zone de drag du bouton scroller
				 * puis on fait appel à startDrag
				 */
				var rectangle:Rectangle = m_background.getRect( this );
				rectangle.height -= m_scroller.height;
				rectangle.width = 0;
 
				m_scroller.startDrag( false, rectangle );
			}
			else // sinon ...
			{
				// on stop le "drag" du composant scroller
				m_scroller.stopDrag();
			}
 
		}
 
		/**
		 * Lorsqu'on est retirés de la display List du stage on tue tous les eventListeners
		 */
		override public function onRemovedFromStage():void
		{
 
			if ( m_manager.content )
				m_manager.content.removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );
 
			m_scroller.removeEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false );
			m_scroller.removeEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false );
			m_scroller.removeEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false );
			removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );
			m_background.removeEventListener( MouseEvent.CLICK, clickHandler, false );
			m_upButton.removeEventListener( MouseEvent.CLICK, clickHandler, false );
			m_bottomButton.removeEventListener( MouseEvent.CLICK, clickHandler, false );
			removeEventListener( Event.ENTER_FRAME , enterFrameHandler, false );
		}
 
		/**
		 * Losqu'on est ajouté à la displayList du stage, on initialise les eventListeners
		 */
		override public function onAddedToStage():void
		{
			// si le contenu n'est pas nul alors on gère les événements de type "molette" qui émanent de lui.
			if( m_manager.content )
				m_manager.content.addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );
 
			/*
			 * on écoute les évenements de type :
			 *
			 * RELEASE OUTSIDE ( que l'on a recodé dans le chapitre 3, lire la classe UIComponent )
			 * MOUSE_DOWN et MOUSE_UP sur le composant scroller
			 * */
			m_scroller.addEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false );
			m_scroller.addEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false );
			m_scroller.addEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false );
 
			/*
			 * On écoute les click souris sur les background, scrollUp et scrollDown
			 */
			m_background.addEventListener( MouseEvent.CLICK, clickHandler, false );
			m_upButton.addEventListener( MouseEvent.CLICK, clickHandler, false );
			m_bottomButton.addEventListener( MouseEvent.CLICK, clickHandler, false );
 
			/*
			 * On écoute enfin les événements de type molette sur le composant
			 * VerticalScrollBar entier
			 */
			addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false );
 
			/**
			 * On écoute les enterFrame, la fonction écouteur permet d'actualiser l'état
			 * graphique des différents éléments du composant
			 */
			addEventListener( Event.ENTER_FRAME , enterFrameHandler, false );
		}
 
		/**
		 * Tue proprement un objet de type VerticalScrollBar
		 */
		override public function destroy():void
		{
 
			/**
			 * On enlève de la displayList les différents éléments du composant
			 * puis on enlève ce dernier de la displayList de son parent
			 */
			removeChild( m_upButton );
			removeChild( m_bottomButton );
			removeChild( m_scroller );
			removeChild( m_background );
 
			if ( parent && parent.contains( this ) )
				parent.removeChild( this );
 
			// on détruit le ScrollManager, puis le passe à null ainsi que tous les éléments graphiques
			m_manager.destroy();
			m_manager = null;
			m_upButton = null;
			m_background = null;
			m_scroller = null;
			m_bottomButton = null;
 
			// Enfin nous appelons la fonction destroy() parente ( UIComponent )
			super.destroy();
		}
 
		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet de type VerticalScrollBar
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{
 
			/**
			 * on applique la skin aux boutons
			 */
			m_scroller.applySkin( p_skin );
			m_upButton.applySkin( p_skin );
			m_bottomButton.applySkin( p_skin );
 
			var definition:Class = p_skin.getSkin( SCROLL_VERTICAL_BACKGROUND_SKIN );
 
			// si on a la définiton pour le background
			if ( definition != null )
			{
				// on le détruit
				if( contains( m_background ) )
					removeChild( m_background );
 
				m_background = null;
				// on le réinstancie
				m_background = new definition();
			}
 
			// ensuite on repositionne tous les éléments
			reset();
		}
 
		/**
		 * Fonction permettant de gérer intelligemment le redimensionnement
		 * d'un objet de type VerticalScrollBar
		 *
		 * @param	p_width		la nouvelle largeur ( en pixels ) du composant
		 * @param	p_height	la nouvelle hauteur ( en pixels ) du composant
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
			m_background.width = m_bottomButton.width = m_scroller.width = m_upButton.width = p_width;
 
			m_scroller.height = ( p_height - m_bottomButton.height - m_upButton.height ) * 0.3;
			m_background.height = p_height - m_bottomButton.height - m_upButton.height;
 
			m_upButton.y = 0;
			m_background.y = m_upButton.height;
			m_bottomButton.y = m_background.y + m_background.height;
 
			// on appelle la méthode parente
			super.resize( p_width, p_height );
		}
 
	}
 
}
package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.button.Button;
 
	/**
	 * Gestion du bouton de Scroll vers le haut pour une ScrollBar
	 *
	 * @author Matthieu
	 */
	public class ScrollUpButton extends Button
	{
 
		public static const SCROLLUP_VERTICAL_OVER_SKIN:String = 'SCROLLUP_VERTICAL_SKIN';
		public static const SCROLLUP_VERTICAL_UP_SKIN:String = 'SCROLLUP_UP_SKIN';
		public static const SCROLLUP_VERTICAL_DOWN_SKIN:String = 'SCROLLUP_DOWN_SKIN';
 
		public function ScrollUpButton() { }
 
		/**
		 * on crée une méthode init pour gagner des ressources,
		 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
		 * pas optimisé à la compilation,
		 * on met donc toutes nos instructions dans une méthode privée init
		 *
		 * Méthode appelée directement par le parent Button
		 */
		override protected function init():void
		{
			super.init();
			removeChild( m_label );// supprime le texte du bouton
		}
 
		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{
 
			p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_OVER_SKIN ) );
			p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_UP_SKIN ) );
			p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_DOWN_SKIN ) );
 
			super.applySkin( p_skin );
		}
	}
 
}
package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.button.Button;
 
	/**
	 * Gestion du bouton de Scroller (au milieu de la ScrollBar) pour déplacer le contenu vers le haut ou le bas
	 *
	 * @author Matthieu
	 */
	public class ScrollerButton extends Button
	{
 
		public static const SCROLLER_VERTICAL_OVER_SKIN:String = 'SCROLLER_VERTICAL_SKIN';
		public static const SCROLLER_VERTICAL_UP_SKIN:String = 'SCROLLER_UP_SKIN';
		public static const SCROLLER_VERTICAL_DOWN_SKIN:String = 'SCROLLER_DOWN_SKIN';
 
		public function ScrollerButton() { }
 
		/**
		 * on crée une méthode init pour gagner des ressources,
		 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
		 * pas optimisé à la compilation,
		 * on met donc toutes nos instructions dans une méthode privée init
		 *
		 * Méthode appelée directement par le parent Button
		 */
		override protected function init():void
		{
			super.init();
			removeChild( m_label );
		}
 
		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{
 
			p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_OVER_SKIN ) );
			p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_UP_SKIN ) );
			p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_DOWN_SKIN ) );
 
			super.applySkin( p_skin );
		}
	}
 
}
package com.actionscriptfacile.ui.scroll.components
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.button.Button;
 
	/**
	 * Gestion du bouton de Scroll vers le bas pour une ScrollBar
	 *
	 * @author Matthieu
	 */
	public class ScrollDownButton extends Button
	{
 
		public static const SCROLLDOWN_VERTICAL_OVER_SKIN:String = 'SCROLLDOWN_VERTICAL_SKIN';
		public static const SCROLLDOWN_VERTICAL_UP_SKIN:String = 'SCROLLDOWN_UP_SKIN';
		public static const SCROLLDOWN_VERTICAL_DOWN_SKIN:String = 'SCROLLDOWN_DOWN_SKIN';
 
		public function ScrollDownButton() { }
 
		/**
		 * on crée une méthode init pour gagner des ressources,
		 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
		 * pas optimisé à la compilation,
		 * on met donc toutes nos instructions dans une méthode privée init
		 *
		 * Méthode appelée directement par le parent Button
		 */
		override protected function init():void
		{
			super.init();
			removeChild( m_label );// supprime le texte du bouton
		}
 
		/**
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin:ISkin ):void
		{
 
			p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_OVER_SKIN ) );
			p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_UP_SKIN ) );
			p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_DOWN_SKIN ) );
 
			super.applySkin( p_skin );
		}
	}
 
}
package
{
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;
	import com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin;// import du skin de la VerticalScrollBar
 
	import flash.display.Sprite;
	import flash.geom.Rectangle;
 
	/**
	 * Exemple d'utilisation du composant VerticalScrollBar.
	 * @author Matthieu
	 */
	public class VerticalScrollBarExample extends Sprite
	{
 
		public function VerticalScrollBarExample()
		{
			// définition de la hauteur de la zone de scroll
			var nHeightScrollArea:Number = 150;
 
			// création d'un objet de type Sprite, il nous servira de content
			var content:Sprite = new Sprite();
			content.graphics.beginFill( 0XFF0000 );
			content.graphics.drawRect( 0, 0, 300, 300 );
			content.graphics.endFill();
 
			// création d'une scrollbar verticale
			var barre:VerticalScrollBar = new VerticalScrollBar();
			barre.content = content;// définition de son content et de sa scrollArea
			barre.scrollArea = new Rectangle( 0, 20, 100, nHeightScrollArea );
			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			barre.applySkin( new DefaultVerticalScrollBarSkin() );
 
			// ajout à la displaylist
			addChild( barre );
			addChild( content );
 
			// détermination de la position de la ScrollBar
			barre.x = 350;
			barre.y = 20;
 
			content.x = 50;
 
			// définition de la taille de la scrollbar pour lui donner la hauteur de la zone à scroller
			barre.resize( barre.width, nHeightScrollArea );
		}
 
	}
 
}
package com.as3facileexemple.skin.classic
{
	// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
	// Provient de ui.swc (créé avec la compilation de UI.fla)
	import com.as3facile.skin.scroll.ScrollBarBackgroundSkin;
	import com.as3facile.skin.scroll.ScrollBottomButtonSkin;
	import com.as3facile.skin.scroll.ScrollUpButtonSkin;
	import com.as3facile.skin.scroll.ScrollerButtonSkin;
 
	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;
 
	/**
	 * Définition du skin utilisé pour un composant VerticalScrollBar
	 *
	 * @author Matthieu
	 */
	public class DefaultVerticalScrollBarSkin extends Skin
	{
 
		public function DefaultVerticalScrollBarSkin()
		{
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );
		}
 
	}
 
}


Développez des Jeux et Applications Flash avec la Formation AS3 Facile !

Recevez Gratuitement Des Cours en Vidéos, des codes source et des livrets de formation.
Et en bonus gratuit : Le Framework AS3 Facile ! 


libero risus. in ipsum venenatis felis eleifend consequat. ut mattis sit libero