The Flash Connection Make mine Actionscript 3.0!

Source File: 

vertical_scrollbar_4_scroll_percent.fla

I don't know how your math skills are, but if they are a little rusty, you may still remember learning about something called "percentages." You may have thought it was only useful for statistics and boring stuff. In fact, I'll bet roughly 63% of you still think so! Well, if you're in that group, I hope I can help change that notion for you, because our scrollPercent variable is going to be really cool, and useful!

Anyway, I am so-so at math myself. I mean, I really have to struggle sometimes to think things through. I draw little pictures to help me work out certain formulas. It always takes me longer to work things out than I thought it should! But I do know that math can help you do some fantastic stuff with your programming, so I keep an open mind and keep plugging away at it. Fortunately, the math involved here isn't too deep.

When you take a number, any number, and divide it by another number that's greater, your result is always a decimal number that's less than 1, and yet still greater than 0. This decimal number is also a percentage. Why is that important? Well, because it turns out we can take that calculated result and apply it to something else. We'll do that with our scrollbar. Consider the following illustration:

In the above drawing, I've plugged in some real numbers just so you can get a better idea of how this works. So just suppose that the thumb is dragged to the position shown in the drawing, which is a little more than half way down the track. The thumbRange is a number not dependent on where anything is positioned on the screen. Remember, it's just the track's height minus the thumb's height. It's just a "traveling" distance for the thumb. But the thumb's y needs to have the track's y subtracted from it so that it can become a number that we can compare to the thumbRange. By making this adjustment, we don't limit ourselves to our "parts" always being located at 0, 0 on the screen. We get a formula that works no matter where the track and thumb are located. That is, as long as they start off at the same y location as each other, which I think is reasonable to expect from a scrollbar.

So the above formula should be pretty clear: The scroll percent can be found by dividing the distance the thumb has traveled by the distance that it can travel. The numbers in the drawing above yield a neat 0.6, or 60%. You won't always get numbers that divide that evenly. But we don't have to divide any numbers ourselves, anyway, that's the computer's job, remember? So all we have to do is figure out the formula, write it into our code, and let the computer find the answer for us.

Let's do that. Make a new layer, and using the Text tool, create a dynamic textbox. Just choose Arial font, 20 point, black. Make it 150 pixels wide and 28 pixels high. Click the "show border" button, so the textbox will have an outline. Click the Embed button and just embed Numerals and Punctuation. Choose "Anti-alias for readability." Give the textbox an instance name of myText.

Next, make yet another new layer. Name the layer circle. Use the Oval tool (hold down the Rectangle tool's button for about a second and it will reveal the Oval tool as one of the other choices). Draw a red circle on the stage. Hold down shift while you draw and you will get a perfect circle. Then, double click the shape you just drew (to select it), and press F8 to convert it to a MovieClip symbol. Name the symbol Circle. In the properties panel, give it an instance name of circle.

Oh, yeah, one other thing: Let's move the thumb so that it's on top of the track and in front of it. Make sure its y location is 75. Now it looks like a real scrollbar (well, kind of, anyway), and we're all set to return to the actions panel!

We want to make a new variable called scrollPercent. It will be of the Number type. We'll declare the variable in the top level code (outside of functions), and initialize it to 0. The calculation will take place in the MOUSE_MOVE handler function. Here's the calculation:

scrollPercent = (thumb.y - track.y) / thumbRange;

The first part must be placed in parentheses, because, as you may know, computers always do division and multiplication first, so if we want the subtraction part done first (and we do), we have to enclose it in parentheses. Now that we have this number being calculated, we'll convert it to a string and output it to the textbox:

myText.text = String(scrollPercent);

Finally, just to show off what else our freshly calculated scrollPercent can do, let's use the same number to affect the circle instance's alpha property:

circle.alpha = scrollPercent;

Here's the complete code with all those new changes in place:

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;
myText.text = "0";
circle.alpha = 0;

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;
	myText.text = String(scrollPercent);
	circle.alpha = scrollPercent;
	
	event.updateAfterEvent();
}

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

And here's how the swf behaves:

When you drag the thumb along the track, you get a range of numbers in the textbox that's between 0 (at the top) and 1 (at the bottom) and all sorts of decimal numbers in between. And this just happens to be the kind of number that properties like alpha expect, so our scrollbar is now being used to "fine-tune" adjust the circle's alpha property! Possibilities should now be occurring to you! Volume slider, anyone?

Next, we'll start seeing how to make this scrollPercent number scroll some content for us!