The Flash Connection Make mine Actionscript 3.0!

Source File: 

vertical_scrollbar_5_content.fla

Next, returning to our fla file again, let's delete the myText dynamic textbox and the circle MovieClip, as they've served their purpose in demonstrating the Slider functionality. Now we'll get beyond that and make our scrollbar scroll some content!

We are now going to introduce two new objects: a content movie clip and a window movie clip. The window movie clip is just a rectangle that's been converted to a MovieClip symbol. I made one that's 300 pixels wide and 250 pixels tall. Its creation should require no further explanation, as we've been creating track and thumb movie clips in the same manner (select and press F8).

And, giving you explicit instructions on creating the content MovieClip seems kind of pointless. I'd rather just explain that this clip can be composed of whatever you want to put into it: images, text, other movie clips, interactive buttons, etc, etc. Your imagination is your only limit! Make it the same width as the window (or approximately so), and make it taller, of course. Or just download the fla file provided above and use mine.

The main idea is that the content is too tall for the window in which we would like to display it. I've created my content MovieClip by grabbing some text from a recent news article about the Rockefeller Center Christmas tree, and also grabbing an image from a different source (Hopefully I got the same tree from the same year, but I only put it together to serve as an example, anyway).

The window clip will act as a mask for the content clip. Whenever a movie clip instance acts as a mask for another movie clip instance, it becomes the "window" or "viewport" through which the masked movie clip shows, and blocking out everything that's not currently in the window. The masking doesn't make any difference to our formula, though, it just makes the viewing of it more pleasant. If you run it without the masking (which I recommend doing at least once), you can see what's really going on behind the scenes.

The window and the content are analogous to the thumb and the track. Earlier, we created a variable to define the thumbRange as the distance that the thumb is allowed to travel. Similarly, we can define another variable that defines how far the content is allowed to travel. This contentRange variable can be found by subtracting the window's height from the content's height.

The above drawing shows what I mean. Bear in mind that the window and content portion (the right hand side) has been shrunk down in order to fit the drawing, and so it's not in proportion to the thumb and track portion (the left hand side). Also, the thumb is shown alongside the track, and the window is shown alongside the content. This is, again, just for illustrative purposes, and of course in the real application they will be positioned where they really belong. Also, the content is shown as it would appear if it were scrolled all the way down to the bottom, but this is just to illustrate the way we find out the contentRange. It does not reflect the position of the thumb in the drawing on the left. 

The next drawing, though, does correlate the two halves. As before, we'll consider a "for example" case, where the thumb has been dragged 60% of the distance that it can drag. In both sides of the drawing, the first and third dashed lines from the top represent the distance that either the thumb or the content can travel:

The formula for finding the scrollPercent is once again repeated on the left. On the right, we see how this scrollPercent can be used to calculate the new y position of the content, and it should be clear from the drawing just how we come up with the formula on the right:

content.y = window.y - (contentRange * scrollPercent);

Since the scrollPercent was found out by dividing a certain y value by the thumbRange, when we take that same number (scrollPercent) and multiply it by the contentRange, we can find out another y value that's in the same proportion but applied to a separate thing. The only other thing is to adjust for the y position of the window (similar to what we did on an earlier page when adjusting for the track's y location). Consider this next drawing, which illustrates the same scenario (thumb dragged to 60%):

In this illustration, I've shrunk down the track and thumb section so that the two sides of the drawing are in much better proportion to each other. That is, conventionally, the scrollbar is usually the same height as the window it serves, so I made it that height. I've also put the thumb on the track and the content behind the window. Here you can get a better idea of the size difference between the thumbRange and the contentRange. Even though they are completely different, our formula calculates the percentage of the thumb's progress related to its range, then it applies that same percentage to the relationship between the content and its range.

Consequently, the scrollbar's track and the thumb can be any size, and the window and the content can likewise be any size, and the formula will still work. The magic ingredient here is the scrollPercent number, which provides a fantastic degree of accuracy. It's calculated from two objects, then applied to two other objects as a ratio. And I'm not denying that we're reinventing the wheel here, this has definitely all been figured out before, but maybe sometimes reinventing the wheel is good exercise, keeping us off the street and out of trouble .

Here's the new code. The code that formerly affected the textbox and the circle has been removed. Our new formula that makes the content scroll has been added. I also added the line that sets the window as a mask for the content (line 11):

import flash.events.MouseEvent;

var yOffset:Number;
var topLimit:Number = track.y;
var thumbRange:Number = track.height - thumb.height;
var bottomLimit:Number = track.y + thumbRange;
//new variable: scrollPercent!
var scrollPercent:Number = 0;
var contentRange:Number = content.height - window.height;

content.mask = window;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
function thumb_onMouseDown(event:MouseEvent):void {
	yOffset = mouseY - thumb.y;
	stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
	stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}

function stage_onMouseMove(event:MouseEvent):void {
	thumb.y = mouseY - yOffset;
	//restrict the movement of the thumb:
	if(thumb.y < topLimit) {
		thumb.y = topLimit;
	}
	if(thumb.y > bottomLimit) {
		thumb.y = bottomLimit;
	}
	//calculate scrollPercent and make it do stuff:
	scrollPercent = (thumb.y - track.y) / thumbRange;
	content.y = window.y - (scrollPercent * contentRange);
	event.updateAfterEvent();
}

function stage_onMouseUp(event:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
	stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}

Here is how the swf file behaves with this new code:

Cool! Now our scrollbar really works! We're almost finished with our fla file based prototype. On the next page, we'll see how to add some up and down buttons.