TWSCROLLBAR, UNE CLASSE DE SCROLLBAR SIMPLE ET PRATIQUE À UTILISER

/**		
 * 
 *	TwScrollBar v1.00 
 *  21/01/2010
 * 
 *	© FREDERIC CHAPLIN | TwFlash
 *	http://www.twflash.fr
 * 
 *  La license de cette classe et de type Creative Commons Attribution 3.0 License:  
 *  http://creativecommons.org/licenses/by/3.0/
 * 
 *  You are free to utilise this class in any manner you see fit, but it is
 *  provided ‘as is’ without expressed or implied warranty. The author should
 *  be acknowledged and credited appropriately wherever this work is used.
 * 
 **/


package tw.controls
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.*;
	import flash.geom.Point;
	import flash.filters.BlurFilter;
	import aze.motion.*;
	import aze.motion.easing.*;
		/**
		* La TwScrollBar a été créée pour disposer d'une barre de défilement pratique et simple à instancier. 
		* <p>L'un de ses principaux avantages est de pouvoir affecter aussi bien du texte qu'un MovieClip.
		* Il peut être complètement personnalisé graphiquement, et dispose d'un effet de flou qui peut lui aussi être personnalisé. 
		* Cette effet peut n'être porté que sur un enfant du MovieClip ciblé.</p>
		* <p> La TwScrollBar utilise la bibliothèque eaze, créée par Philippe Elsass pour ses effets de tween. (http://code.google.com/p/eaze-tween/)
		* <p>La TwScrollBar prend en compte les actions de la souris en clic, cliqué-glissé sur l'ascenseur, et molette.</p>
		* <p>Voici un exemple d'instanciation de la TwScrollBar, où <code>myTarget</code> est un objet de type DisplayObject ou en héritant</p>
		* <p><code> var sb:TwScrollBar = new TwScrollBar(myTarget,null, null, 0.9, true,250);<br>
		* sb.decal= 5;<br>
		* addChild(sb);<code>
		*/
	public class TwScrollBar extends Sprite
	{
		private static const VERTICAL	:String		= "vertical";
		private static const HORIZONTAL	:String 	= "horizontal";
		
		private var target			:DisplayObject;
		
		private var trackHeight		:Number;
		private var scrollDirection	:String = VERTICAL;
		private var scrollMask		:Sprite;
		private var track			:MovieClip;
		private var thumb			:MovieClip;
		
		/**
		* @private
		*/
		private var _scrollSpeed	:Number;
		private var _isBlur			:Boolean;
		private var _blurTarget		:DisplayObject;
		private var _blurFilter		:BlurFilter;
		private var _decal			:Number = 5;
		private var _wheelStrenght	:Number = 3
		
		private var trackShape		:Shape;
		private var thumbShape		:Shape;
		private var maskShape		:Shape;
		private var no_blurFilter	:BlurFilter;
		private var filterArray		:Array;
		private var wheelDelta		:Number;
		private var newPosTarget	:Number;
		private var posPercent		:Number;
				
		/**
		* @param pTarget Le DisplayObject qui sera lié à la barre de défilement. La barre ira se créer uatomatiquement à coté de cet objet.
		* @param pTrack Il est possible de définir comme rail un MovieClip défini dans la bibliothèque ou dans le code actionscript. Si aucun parametre n'est spécifié, le rail par défaut, généré par la classe, est utilisé.
		* @param pThumb Il est possible de définir comme ascenseur un MovieClip défini dans la bibliothèque ou dans le code actionscript. Si aucun parametre n'est spécifié, l'ascenseur par défaut, généré par la classe, est utilisé.
		* @param pScrollSpeed permet de spécifier la vitesse de défilement de l'objet <code>target</code>
		* @param pisBlur Permet de spécifier si un effet de flou est appliqué à l'objet <code>target</code> pendant son déplacement
		* @param pTrackHeight Permet de spécifier la hauteur du rail et donc la taille de la partie visible de l'objet <code>target</code>. Si un rail a été spécifié par la propriété <code>pTrack</code>, cette propriété prend la valeur de la taille du rail personnalisé. 
		* @param pScrollDirection Permet de spécifier le sens du défilement. la valeur <code>"vertical"</code> permet de definir un défilement de haut en bas, avec la barre à droite de l'objet cible. la valeur <code>"horizontal"<code> permet de definir un défilement de gauche à droite, avec la barre sous l'objet cible.
		* */
		public function TwScrollBar(pTarget:DisplayObject, 
									pTrack:MovieClip = null,
									pThumb:MovieClip = null,
									pScrollSpeed:Number = 0.6,
									pIsBlur:Boolean = true,
									pTrackHeight:Number = 100,
									pScrollDirection:String = VERTICAL)
		{
			addEventListener(Event.ADDED_TO_STAGE,activate);
			target = pTarget;
			_blurTarget = target;
			track = pTrack;
			thumb = pThumb;
			_scrollSpeed = pScrollSpeed;
			_isBlur = pIsBlur;
			trackHeight = pTrackHeight;
			scrollDirection = pScrollDirection;
		}
		
		private function activate(evt:Event=null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,activate);
			addEventListener(Event.REMOVED_FROM_STAGE,destruct);
			
			no_blurFilter = new BlurFilter(0,0,1);
			_scrollSpeed = 1-_scrollSpeed;
			target.cacheAsBitmap = true;
						
			if (scrollDirection == VERTICAL)
			{
				this.x = target.x+target.width+_decal;
				this.y = target.y;
				_blurFilter = new BlurFilter(1,7,3);
			}
			else if (scrollDirection == HORIZONTAL)
			{
				this.x = target.x;
				this.y = target.y+target.height+_decal;
				_blurFilter = new BlurFilter(7,1,3);
			}
			
			//if there's no custom track and no custom thumb, let's construct it
			if (track == null)
			{
				track = new MovieClip();
				this.addChild(track);
				trackShape = new Shape();
				trackShape.graphics.beginFill(0x777777);
				trackShape.graphics.lineStyle(1,0x333333);
				if (scrollDirection == VERTICAL)
				{
					trackShape.graphics.drawRect(0,0,10,trackHeight);
				}
				else if (scrollDirection == HORIZONTAL)
				{
					trackShape.graphics.drawRect(0,0,trackHeight,10);
				}
				track.addChild(trackShape);
			}
			else
			{
				this.addChild(track);
				if (scrollDirection == VERTICAL)
				{
					track.x = -track.width*0.5+_decal;
					track.y = 0;
					trackHeight = track.height;
				}
				else if (scrollDirection == HORIZONTAL)
				{
					track.x = 0;
					track.y = -track.width*0.5+_decal;
					trackHeight = track.height;
					track.rotation = 270;
				}
			}
			
			if (thumb == null)
			{
				thumb = new MovieClip();
				this.addChild(thumb);
				thumbShape = new Shape();
				thumbShape.graphics.beginFill(0x333333);
				if (scrollDirection == VERTICAL)
				{
					thumbShape.graphics.drawRect(0,0,10,20);
				}
				else if (scrollDirection == HORIZONTAL)
				{
					thumbShape.graphics.drawRect(0,0,20,10);
				}
				thumb.addChild(thumbShape);
			}
			else
			{
				this.addChild(thumb);
				if (scrollDirection == VERTICAL)
				{
					thumb.x = -thumb.width*0.5;
					thumb.y =0;
				}
				else if (scrollDirection == HORIZONTAL)
				{
					thumb.x = 0;
					thumb.y = track.y+track.height*0.5;
					thumb.rotation = 270;
				}
			}
			
			var pt:Point = new Point(target.x,target.y);
			var targetpos:Point = globalToLocal(pt);
			
			scrollMask = new Sprite();
			this.addChild(scrollMask);
			maskShape = new Shape();
			maskShape.graphics.beginFill(0x000000);
			
			if (scrollDirection == VERTICAL)
			{
				maskShape.graphics.drawRect(targetpos.x,targetpos.y, target.width, trackHeight);
			}
			else if (scrollDirection == HORIZONTAL)
			{
				maskShape.graphics.drawRect(targetpos.x,targetpos.y, trackHeight, target.height);
			}
			
			scrollMask.addChild(maskShape);
			target.mask = scrollMask;
			
			thumb.addEventListener(MouseEvent.MOUSE_DOWN, startDragThumb);
			track.addEventListener(MouseEvent.CLICK, track_clickHandler);
			this.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
			target.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
		}
		
		private function mouseWheelHandler(evt:MouseEvent):void
		{
			var thumbWheelPos:Number;
			if (scrollDirection == VERTICAL)
			{
				thumbWheelPos = thumb.y-evt.delta*_wheelStrenght;
			}
			else if (scrollDirection == HORIZONTAL)
			{
				thumbWheelPos = thumb.x-evt.delta*_wheelStrenght;
			}
			moveThumb(thumbWheelPos);
		}
		
		private function track_clickHandler(evt:MouseEvent):void
		{
			var trackClicPos:Number;
			if (scrollDirection == VERTICAL)
			{
				trackClicPos = evt.stageY-this.y;
			}
			else if (scrollDirection == HORIZONTAL)
			{
				trackClicPos = evt.stageX-this.x;
			}
			moveThumb(trackClicPos);
		}
		
		private function startDragThumb(evt:MouseEvent):void
		{
			thumb.removeEventListener(MouseEvent.MOUSE_DOWN, startDragThumb);
			stage.addEventListener(MouseEvent.MOUSE_UP, stopDragThumb);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}
		
		private function mouseMoveHandler(evt:MouseEvent):void
		{
			var thumbNewPos:Number;
			if (scrollDirection == VERTICAL)
			{
				thumbNewPos = evt.stageY-this.y;
			}
			else if (scrollDirection == HORIZONTAL)
			{
				thumbNewPos = evt.stageX-this.x;
			}
			moveThumb(thumbNewPos);
		}
		
		private function moveThumb(pThumbNewPos:Number):void
		{
			if (scrollDirection == VERTICAL)
			{
				
				if (pThumbNewPos<0)
				{
					thumb.y = 0;
				}
				else if (pThumbNewPos >trackHeight-thumb.height)
				{
					thumb.y = trackHeight-thumb.height;
				}
				else
				{
					thumb.y = pThumbNewPos;
					if (_isBlur == true)
					{
						_blurTarget.filters=[_blurFilter];
					}
				}
				moveTargetVerticaly(thumb.y);
			}
			else if (scrollDirection == HORIZONTAL)
			{
				if (pThumbNewPos<0)
				{
					thumb.x = 0;
				}
				else if (pThumbNewPos >trackHeight-thumb.width)
				{
					thumb.x = trackHeight-thumb.width;
				}
				else
				{
					thumb.x = pThumbNewPos;
					if (_isBlur == true)
					{
						_blurTarget.filters=[_blurFilter];
					}
				}
				moveTargetHorizontaly(thumb.x);
			}
		}
				
		private function moveTargetHorizontaly(thumbX:Number):void
		{
			posPercent = (100*thumbX)/(trackHeight-thumb.width-1);
			newPosTarget = (target.width-trackHeight)*posPercent*0.01;
			eaze(target).to(_scrollSpeed, { x:(this.x-newPosTarget) })
						.onComplete(noBlur);
		}
		
		private function moveTargetVerticaly(thumbY:Number):void
		{
			posPercent = (100*thumbY)/(trackHeight-thumb.height-1);
			newPosTarget = (target.height-trackHeight)*posPercent*0.01;
			eaze(target).to(_scrollSpeed, { y:(this.y-newPosTarget) })
						.onComplete(noBlur);
		}
		
		private function noBlur():void
		{
			if (_isBlur == true)
			{
				_blurTarget.filters=[no_blurFilter];
			}
		}
		
		private function stopDragThumb(evt:MouseEvent):void
		{
			thumb.addEventListener(MouseEvent.MOUSE_DOWN, startDragThumb);
			stage.removeEventListener(MouseEvent.MOUSE_UP, stopDragThumb);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}
		/**
		*	Permet de regler ou de récupérer la valeur d'offset sur x ou sur y selon l'orientation de la TwScrollBar.
		*
		* @default 5
		 */
		public function get decal():Number
		{
			return _decal;
		}
		/**
		* @private
		*/
		public function set decal(val:Number):void
		{
			_decal = val;
		}
		
		/**
		* Cette propriété permet de spécifier quelle est la cible de l'effet de flou de mouvement. 
		* 
		* <p>Par exemple, si la propriété target de la TwScrollBar est un MovieClip <code>myClip</code> composé d'un texte <code>myText</code> et d'un fond <code>myBg</code>, la valeur <code>blurTarget</code> pointe par défaut sur <code>myClip</code>.
		* Le fond du clip est flouté avec le texte, et cela peut ne pas être le résultat désiré.</p>
		* 
		* <p>En passant la valeur <code>myClip.myText</code> à la propriété blurTarget, seul le texte bénéficiera de l'effet. Le fond ne sera pas affecté.</p>
		*
		* @default target
		*/
		public function get blurTarget():DisplayObject
		{
			return _blurTarget;
		}
		/**
		* @private
		*/
		public function set blurTarget(val:DisplayObject):void
		{
			_blurTarget = val;
		}
		
		/**
		* Cette propriété permet de passer un objet <code>BlurFilter</code> à la scrollBar, qui remplace l'objet <code>BlurFilter</code> intégré. 
		*/
		public function get blurFilter():BlurFilter
		{
			return _blurFilter;
		}
		/**
		* @private
		*/
		public function set blurFilter(val:BlurFilter):void
		{
			_blurFilter = val;
		}	
		
		/**
		* Cette propriété permet de definir si l'effet de flou est activé par le mouvement. 
		*
		* @default true
		*/
		public function get isBlur():Boolean
		{
			return _isBlur;
		}
		/**
		* @private
		*/
		public function set isBlur(val:Boolean):void
		{
			_isBlur = val;
		}
		
		/**
		* Cette propriété permet de definir la vitesse de défilement de la cible. La valeur doit être comprise entre 0 et 1.
		* <p>"1" est la valeur qui deplace la cible le plus vite. A cette valeur, le déplacement est instantané.
		* "0" pour un déplacement tres lent.</p>
		*
		* @default 0.3
		*/
		public function get scrollSpeed():Number
		{
			return _scrollSpeed;
		}
		/**
		* @private
		*/
		public function set scrollSpeed(val:Number):void
		{
			if (val <=1 && val >=0)
			{
				_scrollSpeed = val;
			}
			else 
			{
				trace ("ERREUR : la valeur de scrollSpeed doit être comprise entre 0 et 1.");
			}
		}
		/**
		* Cette propriété permet de regler la force de l'effet de la molette de la souris sur le déplacement. La valeur doit être comprise entre 1 et 10.
		* La valeur agit comme un multiplicateur. 
		* 
		* @default 3
		*/
		public function set wheelStrenght(val:uint):void
		{
			if (val<=10)
			{
				_wheelStrenght = val;
			}
			else
			{
				trace ("ERREUR : la valeur de wheelStrenght doit être un entier positif et ne pas dépasser 10");
			}
		}
		/**
		* @private
		*/
		public function get wheelStrenght():uint
		{
			return _wheelStrenght;
		}
		/**
		* Cette propriété en lecture seule, renvoie le pourcentage correspondant à la position de l'ascenseur par rapport à la hauteur du rail. 
		* 
		*/
		public function get thumbPercent ():int
		{
			var pt:Point = new Point(thumb.x+thumb.width*0.5, thumb.y+thumb.height*0.5);
			var localPt : Point = globalToLocal(pt);
			var _thumbPercent:int;
			if (scrollDirection == VERTICAL)
			{
				_thumbPercent = localPt.y/(trackHeight-thumb.height)*100;
			}
			else if (scrollDirection == HORIZONTAL)
			{
				_thumbPercent = localPt.x/(trackHeight-thumb.width)*100;
			}
			return _thumbPercent;
		}
		
		private function destruct(evt:Event):void
		{
			thumb.removeEventListener(MouseEvent.MOUSE_DOWN, startDragThumb);
			stage.removeEventListener(MouseEvent.MOUSE_UP, stopDragThumb);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
			this.removeEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
			target.removeEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
			removeEventListener(Event.ADDED_TO_STAGE,activate);
			removeEventListener(Event.REMOVED_FROM_STAGE,destruct);
		}
	}
}