« 
 »
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. }

  • Digg
  • del.icio.us
  • Facebook
  • email
  • Netvibes
  • RSS
  • Twitter
Vote in HexoSearch

This entry was posted on Tuesday, September 9th, 2008 at 9:00 pm and is filed under experiments. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Tween Scroll movement”
  1. david says:

    September 11th, 2009 at 3:47 am

    very useful - thanks

  2. Almog says:

    September 21st, 2009 at 9:12 pm

    Thanks so much very useful I just used this and it helped me out.

  3. Brian says:

    July 27th, 2010 at 11:45 am

    Thats great. I used this logic and ported it to Flex. Used Caurina tweener and it works class.

  4. Romuald says:

    July 27th, 2010 at 11:56 am

    Code's simple but there's a bug with the mousewheel though (text going too far), with the flash component at least.

    If you have any trouble, check and download the SomaUI source on this blog, you'll find the Soma Protest source with a Canvas page where I solve the problem.

    Romu

  5. Easing/tweened Flex Scrolling Canvas « Bishop On Development says:

    July 27th, 2010 at 5:34 pm

    [...] by a Flash solution from Soundstep, and a more complex (than my method) animated canvas by Vladimir [...]

Leave a Reply