a Scrollbar - Page 2
       by Phil Baker | 13 December 2005

In the previous page, you created the text area and were about to edit the individual components of your scrollbar using the library.

Let's continue from where we left off:

  1. If you open this you will be faced with a huge list of folders and movie clips. We want Component Skins | FScrollBar skins. This contains the various movie clips that make up the scroller:

[ edit your scrollbar from the library ]

  1. As a personal preference, I don't like the arrow buttons on the scrollbar, but this is of course up to you.

    If we open on of the button state clips and delete its contents (the clip itself still needs to exist) leaving us with an empty movie clip.

  2. If you are not going to skin the buttons, then repeat this for all the button states.

  3. Next we take the fsb_ScrollTrack into edit mode. This is the runner along with the scroll bar sits. You will notice that it is a movie clip made of a block of colour.
    Change the colour to something that suits you. I'm going with black:

[ change scroll-tracker color ] ]

  1. Come back into the main section of the movie clip (fsb_ScrollTrack). In the properties bar, change the size from 16 px to 10 px.

[ change the width to 10 px ]

  1. If you now go back to scene 1, you will notice the scroll bar on you window hasn't change. You will only see your handy work once you test the movie. Now, moving on to the scrollbar.
  2. As we did with the states of the buttons, make fsb_thumb_bottom and fsb_thumb_top empty movie clips. As we are just having a solid colour for our scrollbar we don't need them. If you were to have some kind of shading on the scroller, like the default one, the you need to skin these to as flash places them at the end of the main bar. This is because the main bar is stretched depending on the size of your window.
  3. Lastly to make the scrollbar. Open the movie clip fsb_thumb_middle. You will probably need to zoom in to about 2000% to actually see anything, but you will notice there are tiny movie clips inside this one:

[ scroll in and find the tiny movie clips ]

  1. As we don't have any shading, we only need to keep the left hand one, so delete the others from the clip:

[ leave the above shape in-tact; delete the rest ]

  1. Now, as with the scroll track, colour this your desired colour (I'm going with red) and then make the clip 10px. And we are done, now just test your movie and your changes are there for all to see!

Have a play around and see what you can come up with. I'd love to see your results so post them on the forum!

Phil Baker



page 2 of 2




SUPPORTERS:'s fast and reliable hosting provided by Media Temple.