Tween Scroll movement

The ScrollPane component is a nice tool to use if you need to scroll a content or a list with more than text.

If you like to have everything a bit "tweened" in the sites you developed, you will feel the scroll movement of the scrollpane a bit straightforward.

There is an easy way to get this done.

When the user is scrolling the content with the scrollbar of the ScrollPane, the component dispatch an event:

ScrollEvent.SCROLL

The idea is to stop the movement of the content when this event is dispatched using:

e.stopImmediatePropagation()

And then handle the scrolling using a tweener.

I made an simple example with the CanvasUI class I built as it is using a ScrollPane component for the content, but you can use this code for a normal ScrollPane instance.

Here is the demo and the source, code of the main class below for a quick look.

package {
 
    import flash.display.Sprite;
    import fl.events.ScrollEvent;
    import fl.containers.ScrollPane;
    import fl.controls.ScrollBarDirection;
    import gs.TweenMax;
     
    import com.soundstep.ui.layouts.*;  
    import com.soundstep.ui.*;  
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Actionscript version:</b> 3.0<br />
     */
      
    public class Main extends Sprite {
 
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _canvas:CanvasUI;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
         
 
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Main() {
            _canvas = new CanvasUI();
            addChild(_canvas);
            _canvas.canvasAlpha = .2;
            _canvas.horizontalCenter = 0;
            _canvas.verticalCenter = 0;
            _canvas.width = 300;
            _canvas.height = 300;
            _canvas.addChildUI(new ContentText());
            _canvas.refresh();
            _canvas.scrollPane.addEventListener(ScrollEvent.SCROLL, scrollHandler, true);
        }
         
        //
        // PRIVATE, PROTECTED, INTERNAL
        //________________________________________________________________________________________________
         
        private function scrollHandler(e:ScrollEvent):void {
            e.stopImmediatePropagation();
            switch (e.direction) {
                case ScrollBarDirection.HORIZONTAL:
                    TweenMax.to(_canvas.scrollPane.content, .5, {x:e.position*-1});
                    break;
                case ScrollBarDirection.VERTICAL:
                    TweenMax.to(_canvas.scrollPane.content, .5, {y:e.position*-1});
                    break;
            }
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
         
         
    }
}