Archive for September, 2008

09 09 2008

Tween Scroll movement

Posted by: Romuald in experiments, tags: , ,

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.

Plain Text
Actionscript:
  1. package {
  2.  
  3.     import flash.display.Sprite;
  4.     import fl.events.ScrollEvent;
  5.     import fl.containers.ScrollPane;
  6.     import fl.controls.ScrollBarDirection;
  7.     import gs.TweenMax;
  8.    
  9.     import com.soundstep.ui.layouts.*; 
  10.     import com.soundstep.ui.*; 
  11.  
  12.     /**
  13.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
  14.      * <b>Actionscript version:</b> 3.0<br />
  15.      */
  16.     
  17.     public class Main extends Sprite {
  18.  
  19.         //------------------------------------
  20.         // private properties
  21.         //------------------------------------
  22.        
  23.         private var _canvas:CanvasUI;
  24.        
  25.         //------------------------------------
  26.         // public properties
  27.         //------------------------------------
  28.        
  29.        
  30.  
  31.         //------------------------------------
  32.         // constructor
  33.         //------------------------------------
  34.        
  35.         public function Main() {
  36.             _canvas = new CanvasUI();
  37.             addChild(_canvas);
  38.             _canvas.canvasAlpha = .2;
  39.             _canvas.horizontalCenter = 0;
  40.             _canvas.verticalCenter = 0;
  41.             _canvas.width = 300;
  42.             _canvas.height = 300;
  43.             _canvas.addChildUI(new ContentText());
  44.             _canvas.refresh();
  45.             _canvas.scrollPane.addEventListener(ScrollEvent.SCROLL, scrollHandler, true);
  46.         }
  47.        
  48.         //
  49.         // PRIVATE, PROTECTED, INTERNAL
  50.         //________________________________________________________________________________________________
  51.        
  52.         private function scrollHandler(e:ScrollEvent):void {
  53.             e.stopImmediatePropagation();
  54.             switch (e.direction) {
  55.                 case ScrollBarDirection.HORIZONTAL:
  56.                     TweenMax.to(_canvas.scrollPane.content, .5, {x:e.position*-1});
  57.                     break;
  58.                 case ScrollBarDirection.VERTICAL:
  59.                     TweenMax.to(_canvas.scrollPane.content, .5, {y:e.position*-1});
  60.                     break;
  61.             }
  62.         }
  63.        
  64.         // PUBLIC
  65.         //________________________________________________________________________________________________
  66.        
  67.        
  68.        
  69.     }
  70. }

Vote in HexoSearch

Comments 2 Comments »