The Flash Connection Make mine Actionscript 3.0!

Source File: 

vertical_scrollbar_3_track_limits.fla

Next, we'll create and add a "track" movie clip. Then, we'll see how we can further restrict the up and down movement of the thumb, and limit it to this track. So in the fla file, add a new layer to the timeline and name it track. On this layer, draw another rectangle. I made mine narrower than the thumb (12 pixels wide), 250 pixels high, used a different color (green), and placed it at the same y location as the thumb. Then I moved the thumb to a location a short distance to the right of the track, for illustrative purposes.

Then I selected the rectangle and converted it to a MovieClip symbol, and named it Track, and once again chose an upper left registration point. In the properties panel, I gave it an instance name of track. Eventually, of course, the thumb will be in front of the track, so you can go ahead and drag the track's layer to the bottom of the layer stack (I did).

Now that we have a track and it has that instance name, we can use that name in our programming. We can also use its properties to limit the dragging of the thumb.

We'll create two new variables, both Numbers, called topLimit and bottomLimit. These will represent the top and bottom y locations that the thumb is going to be restricted to. The thumb's top limit will be the track's y location, naturally. The bottom limit will be the track's y location plus the track's height minus the thumb's height. However, the track's height minus the thumb's height is an important number also, as it represents the distance (in pixels) that the thumb is allowed to travel. Therefore, we will save this number into a variable of its own and call it thumbRange. After that, we can just say that the thumb's bottom limit is the track's y location plus the thumbRange. Here's a helpful illustration of that:

Illustrations like this are extremely helpful to guide you in writing your code, and I recommend making little doodles like this to plan your work. They make it clear just exactly what is going on. Turning again to the code, we will give values to these variables, then in our MOUSE_MOVE handler function, we can use the topLimit and bottomLimit variables to restrict the movement of the thumb. If the thumb's y value is less than topLimit, make it equal topLimit. If the thumb's y value is greater than bottomLimit, then make it equal bottomLimit. Remember, y values start out at 0 at the top of the screen, and increase as you go further down. Anyway, here's the new code:

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;

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;
	}
	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 now behaves:

You can drag the thumb up and down, but now you are restricted to the track's limits, just like in the illustration! And hopefully I haven't lost anyone so far. The thumb and track, and the way they behave so far, is everything we need to make what's known as a Slider. On the next page, we'll fix its appearance by placing the thumb over the track where it belongs, and also make it do some cool stuff by extracting a certain very important number from it in our code!