Creating scrollbars is simple, right? Well, building one from scratch requires some head scratching and a feeling of deja vu. The best advise is to do it once and never again. However, in a recent project, the graphics for the scrollbar were quite unique and didn’t easily fit into any prebuilt component. The thumb track was a fixed size and the gutter was a little bit…well… bendy.

The key thing in a scrollbar is to work out the ratio that is needed to move the target movieclip (which typically would sit underneath a mask with the same bounds of the scrollbox). This needs to account for the size of the scrollbox. When the thumb track is at the top of the box, we want the position to be relative to the top of the movieclip. However, when the thumb track is at the bottom of the scrollbox, we want it to be relative to the foot of the movieclip. So some maths is involved which I will run through tomorrow.

Well shame on me. Tomorrow never comes. So now it’s time to catch up on the maths for a scrollbar. There are probably many ways of doing this, but this is my favourite because it’s easy, and this example uses a scroll track that is of no significant height. i.e. just a blob or something. Three bits of information are needed. Firstly, the height of the overhang from the movieclip that is being scrolled. So:

overhangHeight = movieclip._height – scrollbar._height;

The next piece of information is how far the scrollbar has been dragged. This is a percentage of the height of the scrollbar.

percentScrolled = (100/scrollbar._height) * distanceScrolledSoFar;

The final piece of information depends on the previous two and tells us the distance the main movieclip has to move to match the position of the scrollbar. I called it offset.

offset = (overhangHeight / 100) * percentScrolled;

So now we have the number we need to move the main movieclip. mc._y = (0 – offset);

Very simple but useful to have it written down, lest I ever have to try and remind myself again.