SpecialRelativity

I have written a simple scrollbar to work with our examples. The only thing to note about the scrollbar is that it has a percent property which is a number from 0 - 1, and also that it broadcasts ScrollbarEvent.SCROLL events. You can see an example of it below, slide the marker back and forth and you’ll see the percentage displayed just above it.

[kml_flashembed movie=”http://specialrelativity.org/blogAssets/ScrollbarDemo.swf” height=”40″ width=”110″ /]

What we will spend most of our time talking about is how to find the position of the content you are scrolling with the scrollbar. We are going to use a very simple equation to solve this problem, and it looks like this:

content.position = content.iposition - ( scrolling.percent * content.scrollable )

Like I said a second ago this is really simple. We are going to briefly go over the different elements within it, and then take a look at some code.

• content.position is the position of the content based on the scrolling, and is obviously what we are looking for.
• content.iposition is the position the content would be at if no scrolling were applied to it.
• scrolling.percent is the percentage of the content’s scrollable area which will be visible. This is usually provided by the scrollbar.

and finally

• content.scrollable is how much of the content can be scrolled.

Now most of those are pretty simple, but I think the content.scrollable could use a little more definition. Scrollbars usually allow content that overflows some viewing area to be scrolled and seen. The area of the content that is actually viewable we’ll refer to as content.viewable. How much of the content can be scrolled can now be defined as:

content.scrollable = content.size - content.viewable

So that is enough of that, we want to see it in code. I’m going to build off of some of the more common techniques within flash. For our demo we will have content, which is 300×300 and contains 3 rectangular graphics stacked on top of one another. The viewable area of this content is going to be a 300×100 mask. The initial position of the content is going to be right at the top of the mask. And again we will be using the scrollbar I put together. You can see it at the top of this post. This will all exist in our ScrollbarContentDemo class.

There is a full listing of the class here: ScrollbarContentDemo.as. We are only going to go over the important part right now.

So essentially we create three different elements. The scrollbar, the content, and the content mask. Then we wait and listen for the user to scroll the scrollbar. When the scrollbar is scrolled is where we implement our equation from earlier. I’ll list these two lines.

var scrollable:Number = content.height - content_mask.height;
content.y = content_mask.y - ( scrollbar.percent * scrollable );

These lines should be familiar since we just talked about them a second ago. First we find how much of the content is scrollable, and then we apply the equation to the content. Here is the swf file so you can see the output.

[kml_flashembed movie=”http://specialrelativity.org/blogAssets/ScrollbarContentDemo.swf” height=”100″ width=”310″ /]

Here is the source code for both demos, the scrollbar itself will be listed first since it is used in both.

ScrollBar.as
ScrollbarEvent.as

ScrollbarDemo.as

ScrollbarContentDemo.as

This entry was posted on Monday, August 6th, 2007 at 9:30 pm and is filed under Actionscript. 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.