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
		//________________________________________________________________________________________________
		
		
		
	}
}