Making a Scroll Bar in Flash 8

Other day I was making a rate system for a site and then I faced with a BIG trouble: The scroll bars.

it took me 3 hours before figuring out how to do one and with help of a video tutorial!

So, as many of you who are reading this may be needing some help, I decided to make this small tutorial to teach you how to make a small Scroll bar with dynamic resizing ;)


Ok, so let's start with a 300x1000 MovieClip with a bunch of stuff in it (that forms a 300x1000 MC), rename it 'Content'.
Now, to start making the scrollbar, you need first mask the scrolling MC with a 300x300 shape.


Here I made this and I applied a drag system so you can see what I'm talking about:




You can see that the MC is being masked, but where's the scroll bar?
So we'll start by the slider:

create a MC with the same height of the mask and place it a little bit to the right of the scrolling MC. Just like this:



Convert it to a MovieClip and rename it 'slider'.
To make the thumb, just duplicate it and make it darker:


You can't really se the slider becouse the thumb is covering it, but even if the content is smaller than the masking area (therefore, the thumb is no needed) it (thumb) will be hidden.

Anyway, now whe REALLY need start scripting. Let's start by resizing the thumb:

resizeFactor = 100; // Resizing factor, the less this is, the smaller the thumnb will be.
thumb._yscale = (300/Content._height)*resizeFactor; // 300 of the masking shape's heigth
if(Content._heigth < 300) // Hide the thumb if the content is smaller than the visible area
thumb._visible = false;

Now, calculate tha max y position of the thumb for dragging intentions:

yMax = (slider._height-thumb._height);

The dragging, for me, is the hardest part. We'll have to figure out how to move the content MC the right amount as the thumb goes down.
And the best way to do this is using percentage calcules! :D
The idea is this:

thumb._y/yMax = percentage of scrolling.

So, if we do a little math...

Content._y = -(Content._heigth - maskHeigth)*(percentage of scrolling);

this will result in a nice, smooth scrolling system :D

but before!

The boooring dragging system:

drag = false;

// the resizing code goes here.

thumb.onPress = function(){
yOff = thumb._y - _ymouse;
drag = true;
}

thumb.onRelease = function(){
drag = false;
}

thumb.onReleaseOutside = function(){
drag = false;
}

thumb.onMouseMove = function(){
if(drag){
thumb._y = _ymouse+yOff;
}
//APPLY SCROLLING CODE HERE!
}


In the place of the APPLY SCROLLING CODE HERE! comment we'll put the scrolling code (duh!).

I'll save you're time an provide a ready-to-past code:

Content._y = (Content._height-300)*(thumb._y/yMax);

But wait! I forgot to script the bondaries code xD
This code goes right after the if(drag) code:

thumb._y = Math.max(thumb._y,0);
thumb._y = Math.min(thumb._y,yMax);

Putting togheter all this mess, converting it to a MC, applying a final 'touch', this is what we get:


http://www.swfme.com/view/1103912


And why not download the source!

Thanks for reading! Bye :)