Simple Custom Scrollbar - Page 3

On the previous page, you added the scroll track and scroll face. Let's finish up the interface on this page by adding our up and down buttons. I will also provide the code needed to get everything working.

Let's continue from the previous page:

11. Create another new layer and give it the label buttons.
12. Draw two squares with each square having a width and height of 20 pixels. The squares will represent the up and down buttons for the scrollbar.
13. Now, draw an up arrow on one square and a down arrow on another. I simply draw a small v and an upside down small v instead:

14. We need to convert each of these squares into button movie clips. Select one square (and its arrow) and press F8 (Modify | Convert to Symbol). From the Convert to Symbol Dialog window, select the option for Movie Clip and press OK.
15. Repeat the same process as Step xiv for your other, unconverted square. In the end, both of your squares should be movie clips.
16. Select the movie clip with the up arrow. In the Properties panel, enter the following values for X and Y:

1. X: 280
2. Y: 0

Now, select your movie clip with the down arrow. Enter the following X and Y values for it in the Properties panel:

1. X: 280
2. Y: 180

Your interface should look like the following image:

17. We aren't done with the interface quite yet. Select your up movie clip and give it the instance name: btnUp. Likewise, select your down movie clip and give it the instance name: btnDown.
18. Now, we are done with our interface! Let's add some code. Create a new layer and label it actions. Right click on the first (and only) frame on that layer and select Actions. Copy and paste the following code into your Actions panel:

19. Test your movie by either previewing it in the browser by pressing F12 or preview the file in Flash by pressing Ctrl + Enter. You now have a fully functioning scrollbar.

Phew. That was fun. Now, let's learn how to use our scrollbar in a real movie with other content, layers, and data.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9