Twscrollbar, une classe de scrollbar simple et pratique à utiliser

Soyez le premier à donner votre avis sur cette source.

Vue 9 063 fois - Téléchargée 1 040 fois

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.

    Codes Sources

    A voir également

    Ajouter un commentaire

    Commentaires

    top30
    Messages postés
    1158
    Date d'inscription
    vendredi 21 février 2003
    Statut
    Membre
    Dernière intervention
    6 août 2010

    Bon ben comme j ai pas envie de partir dans de long discours qui apparement ne te feront pas changer d avis. Je t ai fait un "cadeau" dans la source suivante je t ai creer un objet "ProxyHV" et une demo...

    Bref il est tard je suis fatigue, profite et a plus...

    Desole pour les fautes, mais y a mon "clavier" qui a encore saute et me re fait n importe quoi....
    Twinspirit
    Messages postés
    58
    Date d'inscription
    mercredi 21 mai 2008
    Statut
    Membre
    Dernière intervention
    7 mai 2012

    Certes, il parait plus logique d'utiliser le système évènementiel.

    Mais je pense qu'en gérant le déplacement de l'objet à l'extérieur de la classe, on complique le code pour pas grand chose. Il est extrêmement rare qu'une scrollbar gère plusieurs objets en même temps. Ainsi on obligerait les gens à compliquer la mise en place de la scrollbar pour rien dans la plupart des cas.

    De plus, avec scrollRect, on ne touchera plus à l'objet lui même, mais à ce fameux rectangle. Donc, on restera conforme.

    Le but de cette classe, c'est une instanciation en deux lignes dans le code principal et basta, on ne s'en occupe plus, c'est fait, et ca se gère tout seul. Gagner du temps et de la clarté !

    Par contre, rajouter un évènement onChange est possible facilement (il y a déjà la propriété thumbPercent ici). Ainsi, si le cas se présente, on pourra gérer plusieurs objets dans le code de la classe conteneur.
    Je le note dans la TODO list !
    top30
    Messages postés
    1158
    Date d'inscription
    vendredi 21 février 2003
    Statut
    Membre
    Dernière intervention
    6 août 2010

    avec toutes mes excuses.
    L'exemple plus ou moins correcte est le suivant:

    var rect :Rectangle= new Rectangle(0,0,200,100) ;
    var offset :Number= rect.height-monObject.height ;
    monObject.scrollRect= rect ;
    trace( monObject.height ) ;// 200 ;

    function onChange ( $e:ScrollEvent ):void{
    rect= monObject.scrollRect ;
    rect.y= $e.scrollPosition.y*offset ;
    monObject.scrollRect= rect :
    }
    myScrollbar.addEventListener("change",onChange );
    top30
    Messages postés
    1158
    Date d'inscription
    vendredi 21 février 2003
    Statut
    Membre
    Dernière intervention
    6 août 2010

    Salut à tous...

    Je n'avais pas prété attention a la propriété "scrollRect" du DisplayObject. Je mis suis donc mis pour voir ce que cela donnait. Oui en fait c'est interessant, car par exemple au contraire de la propriété "mask", une fois un rectangle appliqué, la taille de l'objet DEVIENT celle du rectangle. Pratique pour l'alignement par exemple.

    Par contre, pour scroller c'est ausi simple. Tout se passe sur le rectangle et non sur la cible. Pour scroller il suffit de déplacer les axes du rectangle (x ou y), par contre, il faudra redefinir le rectangle si le contenu de la cible change.

    NON LES SCROLLBAR NE DOIVENT RIEN SAVOIR DE L'OBJET QU'ELLES SCROLL !!!

    Elles émettent un event "change" si elle bouge, avec en proriété de l'event une valeur "scrollPosition" étant un point dont le "x" et le "y" étant définit de 0 à 1.
    0 étant la scrollbar à son point départ et 1 à point son arrivée.

    Pour les plus pointilleux, le scrollbar peux avoir une fonction "resize(scale)". Ou scale est une valeur entre 0 et 1.
    0 redefinisant la taille du "track" à 0 (mais c'est théorique, un minimun non null étant conseillé) et 1 étant la scrollbar remplissant tout le "rail" et donc inutile (se masque seule).

    Ainsi votre scrollbar pourra scroller "X" objet.

    var rect :Rectangle= new Rectangle(0,0,200,100) ;
    var objectHeight :Number= monObject.height ;
    monObject.scrollRect= rect );
    trace( monObject.height ) ;// 200 ;

    function onChange ( $e:ScrollEvent ):void{
    rect= monObject.scrollRect ;
    rect.y= $e.scrollPosition.y*objectHeight
    monObject.scrollRect= rect ,
    }
    myScrollbar.addEventListener("change",onChange );

    C'est pas du code fonctionel, c'est écrit comme ca pour vous indiquer le chemin à suivre. Si ca vous chante bien sur... Mais faites-moi confiance, c/est comme ca. Car avec ce que je vous ai décrit même si plusieurs object écoute la même scrollbar et que un suel en définit la taille du "track" réllement proportionnel, les autres object continues de scroller normalement.

    Si j'ai le temps un jour je vous ferais une démo...
    Twinspirit
    Messages postés
    58
    Date d'inscription
    mercredi 21 mai 2008
    Statut
    Membre
    Dernière intervention
    7 mai 2012

    Ouah, c'est clair pour le destruct ! Merci, j'arrange ca de suite.
    Apres, pour le blurEffect, ben... Je laisse : tu peux mettre ton propre blur avec la propriété blurFilter de la classe.
    Je me suis penché sur scrollRect : ben j'étais passé à côté depuis tout ce temps, et je pense que je ne vais plus m'en passer. Remplacement d'ici une grosse semaine maxi.

    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)