Twscrollbar, une classe de scrollbar simple et pratique à utiliser

Télécharger le projet
Commenter

Description

Cette classe a été créée dans une optique de simplicité d'utilisation, de practicité. Je l'utilise désormais dans tous mes travaux.

Ses avantages :
- La TwScrollBar peut s'utiliser trés simplement, avec un minimum de paramètres. En fait, un seul suffit : la cible de la scrollbar. Tous les autres paramètres sont optionnels.
- La cible de la TwScrollBar peut être de type DisplayObject, et de tout objet en héritant : Bitmaps, MovieClip, Sprite, TextField, Loader...
- Il est possible de passer lors de l'instanciation vos propres MovieClips pour le rail et l'ascenseur de la barre. Vous obtenez alors très facilement une barre de défilement personnalisée. Si vous ne passez rien, une scrollbar par défaut est déssinée par la classe.
- La classe génère elle même le masque nécessaire à toutes les scrollbars. Si la barre est personnalisée, le masque prend la taille de la scrollbar.
- Le sens peut être vertical ou horizontal, passé en paramètre lors de l'instanciation (default : vertical).
- la TwScrollBar se place elle même au bon endroit selon la cible : a droite ou en bas (un offset est réglable).
- La classe génère un effet de flou par défaut, qui peut être enlevé ou personnalisé.
- Grace à la propriété blurTarget, l'effet de flou peut être dirigé uniquement vers un enfant de la cible. Par exemple, si la cible est un MovieClip avec un fond animé et un texte, il est possible de ne cibler que la texte pour le flou, tout en scrolant l'ensemble.
-Une documentation de type ASDoc est fournie, ainsi qu'un exemple dans un fla (code en image 1).

Source / Exemple : 


/**		


     
  •  

    •  
  • 	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
est un objet de type DisplayObject ou en héritant</p>
  • <p>
     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
    • @param pisBlur Permet de spécifier si un effet de flou est appliqué à l'objet 
      target
      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 
      target
      . Si un rail a été spécifié par la propriété 
      pTrack
      , 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 
      "vertical"
      permet de definir un défilement de haut en bas, avec la barre à droite de l'objet cible. la valeur 
      "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 composé d'un texte 
      myText
      et d'un fond 
      myBg
      , la valeur 
      blurTarget
      pointe par défaut sur 
      myClip
      .
    • 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 
      myClip.myText
      à 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 
      BlurFilter
      à la scrollBar, qui remplace l'objet 
      BlurFilter
      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);
    }
    }
    }
    </code>

    Conclusion :


    Tout le reste est dans le zip.

    La TwScrollBar utilise la bibliothèque eaze, créée par Philippe Elsass pour ses effets de tween. (http://code.google.com/p/eaze-tween/)

    J'espère que cette classe vous sera autant utile qu'à moi.
    Elle est sous licence Creative Commons, vous pouvez donc l'utiliser sans limitation (bon la revendez pas, hein ?), juste en me citant moi ou mon site www.twflash.fr, ou vous voulez.
    Télécharger le projet

    Codes Sources

    A voir également

    S'inscrire maintenant

    Vous n'êtes pas encore membre ?

    inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

    Les membres obtiennent plus de réponses que les utilisateurs anonymes.

    Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

    Le fait d'être membre vous permet d'avoir des options supplémentaires.

    Du même auteur (Twinspirit)