Turtlebite's Blog

This post is all about scrolling. I’m not talking about scrolling text, but scrolling movieclips. Or more precise: scrolling a whole flash website. If you want to do this you have a few choices. If you have read the title of this post you know which is my favoured method…

Use the browser scrollbar
This seems to be the obvious choice. I do this sometimes, and if I do I use SWFFIT. This is a really good solution, but there is a drawback when you use this method: you can only scroll the flash movie as a whole. This is a problem if you want to keep a background image in your flash movie in place and only scroll part of your site.

Use a scrollpane
Because I prefer to have more control, I used to do the scrolling by using  a scrollpane: I just put the whole flash site into a scrollpane. This works fine, I did this in many sites: dlog.ch, marviva.net etc. But it also has drawbacks: I cannot click on anything which is behind the scollpane, and, more annoying: I cannot take control over the scroll amount (at least until today I have not found out how to do it). If the content loaded into the scrollpane contains for example movieclips placed at the far bottom (masks, movieclips placed “off stage” as starting positions of animations etc.), this will make the movieclip too big (height). And you are limited to the frame of the scrollpane: The content is always “inside” (and therefor masked by) the scrollpane which is not always desired.

Use a third party scrollbar
Every now and then I like to use the Advanced Scrollbar from flashtuning.net or the Ultimate Scroller Pro from flashloaded.com, but only to scroll “small things”.

Take full control with the UIScrollbar!
I always thought that the UIScrollbar was for scrolling text only. How wrong I was! Today I do all my scrolling with the UIScrollbar, because you can not only scroll textfields, but movieclips as well. And the best thing is: I can precisly control the scroll amounts. Have a look at the SWF below. Click here to test the mousewheel.

The simple trick is to not assign a scroll target to the scrollbar, but a scroll amount only. Then just listen to the scroll events and scroll whatever you like:

// setScrollProperties(pageSize:Number, minScrollPosition:Number, maxScrollPosition:Number, pageScrollSize:Number = 0):void
var scrollbar_height:uint = 200;
var extra_height:uint = 10;
sb_vertical.setScrollProperties(200, 0, scroll_target.height - scrollbar_height + extra_height, scrollbar_height);
sb_vertical.addEventListener(ScrollEvent.SCROLL, onVerticalScrollHandler);
//
function onVerticalScrollHandler(event:ScrollEvent):void{
scroll_target.y = -event.position + sb_vertical.y + 5;
}

Download the source files here. I have also included the files needed to enable mouse wheel scrolling on the mac.

Update 2009/12/01: Here is a real example of a website using the UI Scrollbar for full site scrolling.

Happy scrolling!
Christian