Votre lecteur Flash n'est pas à jour. Installer la dernière version
Home » Tutoriaux » Flex / ActionScript 3 » Faire une scrollbar en AS3

Scrollbar en ActionScript 3

Dans ce tutoriel, nous allons voir comment créer une classe réutilisable pour faire une scrollbar horizontale. Elle permettra de déplacer un contenu dynamique (texte, image, ...).
Sommaire
  1. Aspect visuel : la classe graphics
  2. Ajouter les écouteurs
  3. Mise en place d'une scrollbar

1. Aspect visuel : la classe graphics

Comme nous souhaitons avoir une classe entièrement réutilisable, il nous faut pouvoir ajouter des éléments graphiques indépendamment du projet en cours. Pour cela, nous allons utiliser la classe graphics qui va nous permettre de dessiner les composants.

Pour cela, nous avons besoin de plusieurs paramètres : la largeur et la hauteur de notre scrollbar. Ces deux valeurs seront des attributs de notre classe. Voici notre fonction qui s'occupe de dessiner :

private function draw():void {
    var bg : Shape = new Shape();
    bg.graphics.beginFill(_bgColor);
    bg.graphics.lineStyle(0x000000);
    bg.graphics.drawRect(0, 0, _largeur, _hauteur);
    bg.graphics.endFill();
    addChild(bg);
}

Et maintenant celle qui dessine le scroller (élément qui nous permet de déplacer le contenu :
 
private function drawScroller():void {
    // petite vérification, pour ne pas dessiner de scroller s'il n'y en a pas besoin               
    if (_scrollContent.height > _hauteur) {
        var coeff : Number = _scrollContent.height / _hauteur;
        var tmp_scroll_height : Number = _hauteur / coeff; // pour verif que le scroller n'est pas trop petit
        if (tmp_scroll_height < 20) tmp_scroll_height = 20;
               
        _scroller = new Sprite();
        _scroller.graphics.beginFill(0x000000);
        // on dessine notre rectangle avec un petit décalage
        _scroller.graphics.drawRect(2, 2, _largeur - 4, tmp_scroll_height);
        _scroller.graphics.endFill();
               
        _scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
        _scrollContent.parent.stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);
               
        addChild(_scroller);
        _scroller.buttonMode = true;
               
        // rectangle qui correspond à la trajectoire du scroller
        rect_scroller = new Rectangle(0, 0, 0, _hauteur - _scroller.height - 4);
    }
}

2. Ajouter les écouteurs

Dans le code précédent, nous avons ajouté deux écouteurs sur la scrollbar. Un sur l'évènement MOUSE_DOWN qui permet de commencer à déplacer le scroller, et l'autre sur l'évènement MOUSE_UP qui le stopper. Ce dernier écoute sur l'élément stage, pour qu'on puisse relâcher le bouton de la souris n'importe où sur la scène de notre application. Nous ne sommes ainsi pas limités à notre scrollbar.

Voici ces deux fonctions :
 
private function dragOn(evt:MouseEvent):void {
    onDrag = true;
    _scroller.startDrag(false, this.rect_scroller);
    stage.addEventListener(Event.ENTER_FRAME, checkingProgress);
}

private function dragOff(evt:MouseEvent):void {
    if (onDrag) {
        onDrag = false;
        _scroller.stopDrag();
        stage.removeEventListener(Event.ENTER_FRAME, checkingProgress);
    }
}
 
Notre première fonction crée un écouteur sur chaque frame qui permet de rafraichir le déplacement de notre objet d'affichage. Nous utilisons également une variable booléenne pour éviter des conflits sur les écouteurs. Voici donc la méthode de rafraichissement :
 
private function checkingProgress(evt:Event):void {
    var coeff : Number = ( _scrollContent.height - _hauteur) / ( rect_scroller.height );
    _scrollContent.y = ( ( _scroller.y ) * coeff * -1 );
}

3. Mise en place d'une scrollbar

Après avoir vu les principales méthodes de la classe, voici comment l'utiliser :

var maScrollbar : SimpleScrollbar = new SimpleScrollbar(500, 15, 0xFF0000, monObjet, 0, 0);
addChild(maScrollbar);

Avec :
  • La hauteur de notre scrollbar,
  • la largeur,
  • la couleur du scroller,
  • l'élément à déplacer,
  • et enfin la position x et y.

Pour terminer, voici le code complet de notre classe :
 
package com.adrien.as3.ui {
    import flash.display.DisplayObject;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
   
    public class SimpleScrollbar extends Sprite {
       
        private var _hauteur : Number; // hauteur de la scrollbar
        private var _largeur : Number; // largeur
        private var _bgColor : uint; // couleur de fond
        private var _parent : DisplayObject; // objet d'affichage sur lequel on va positionner la scrollbar
        private var _scrollContent : DisplayObject; // l'objet d'affichage à déplacer
       
        private var _scroller : Sprite;
        private var rect_scroller : Rectangle;
       
        private var onDrag : Boolean;
       
        public function SimpleScrollbar(hauteur:Number, largeur:Number, bgcolor:uint, scrollcontent:DisplayObject, posx:Number, posy:Number):void {
            super();
            _hauteur = hauteur;
            _largeur = largeur;
            _bgColor = bgcolor;
            _parent = parent;
            _scrollContent = scrollcontent;
            x = posx;
            y = posy;
            onDrag = false;
            draw();
            drawScroller();
        }
       
        private function draw():void {
            var bg : Shape = new Shape();
            bg.graphics.beginFill(_bgColor);
            bg.graphics.lineStyle(0x000000);
            bg.graphics.drawRect(0, 0, _largeur, _hauteur);
            bg.graphics.endFill();
            addChild(bg);
        }
       
        private function drawScroller():void {
            if (_scrollContent.height > _hauteur) {
                var coeff : Number = _scrollContent.height / _hauteur;
                var tmp_scroll_height : Number = _hauteur / coeff; // pour verif que le scroller n'est pas trop petit
                if (tmp_scroll_height < 20) tmp_scroll_height = 20;
               
                _scroller = new Sprite();
                _scroller.graphics.beginFill(0x000000);
                _scroller.graphics.drawRect(2, 2, _largeur - 4, tmp_scroll_height);
                _scroller.graphics.endFill();
                // les ecouteurs sur l'appui du bouton de la souris
                _scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
                _scrollContent.parent.stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);
               
                addChild(_scroller);
                _scroller.buttonMode = true;
               
                // rectangle qui correspond à la trajectoire du scroller
                rect_scroller = new Rectangle(0, 0, 0, _hauteur - _scroller.height - 4);
            }
        }
       
        private function dragOn(evt:MouseEvent):void {
            onDrag = true;
            _scroller.startDrag(false, this.rect_scroller);
            stage.addEventListener(Event.ENTER_FRAME, checkingProgress);
        }
       
        private function dragOff(evt:MouseEvent):void {
            if (onDrag) {
                onDrag = false;
                _scroller.stopDrag();
                stage.removeEventListener(Event.ENTER_FRAME, checkingProgress);
            }
        }
       
        private function checkingProgress(evt:Event):void {
            var coeff : Number = ( _scrollContent.height - _hauteur) / ( rect_scroller.height );
            _scrollContent.y = ( ( _scroller.y ) * coeff * -1 );
        }
       
    }
}