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 //________________________________________________________________________________________________ } }
Comments
very useful – thanks
Thanks so much very useful I just used this and it helped me out.
Thats great. I used this logic and ported it to Flex. Used Caurina tweener and it works class.
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
Pingback: Easing/tweened Flex Scrolling Canvas « Bishop On Development
I have another approch but it also suffers from bad mousewheel support:
http://www.wensauer.info/flex/SmoothScroller/SmoothScroller.html
Any idea how to solve this better ? please
If your using Flex 4.5.1, you can include the mobilecomponents.swc (i think its called) and use the scrolling that you would see on an iPhone or Android phone….
I have a demo here: http://bbishop.org/blog/?p=502
may provide some inspiration
Click the phone image to launch, and click the submit button, it tween scrolls just like on a phone