Skinning a Scrollbar

by kirupa   | filed under Flash and ActionScript

If, like me, you've put some nice scrolling text on you websites, or you want to, then you have probably noticed the default scroll bar in Flash isn't that visually simulating, not to mention the fact the it looks a bit clumsy on the page.

Note

This tutorial is designed for Flash MX. If you use Flash MX 2004 or Flash 8, you will not be able to use the Library to edit Flash Components.

I have decided to write a tutorial this as there must be other people thinking the same as me! This is what we are going to create:

Creating the Text Scroller:

1. First, open a new flash file by going to File | New. The size is up to you.
2. Click the Text Tool icon from the left. The Properties panel should appear. Select Dynamic text from the drop-down menu at the bottom left:

[ make your text-field dynamic text ]

3. Make sure you have selected Multiline for the line type. This puts the text onto separate lines instead of one very long line.
4. Next draw your text box making it large enough to hold a few lines of text:

[ draw a large-enough text box ]

5. Now to add the scrollbar, make sure the Components panel is visible, drag and drop the Scrollbar Component on top of the text box we just created. It will resize to fit onto you box automatically:

[ drag and drop the Scrollbar Component ]

6. Next add some text, anything will do for this purpose, but ensure it is enough to cover the entire box and some. If there is not enough text then Flash will know it doesn't need to scroll it.

[ add some text to cover up the empty area ]

7. Now we come to the skinning of the component itself. Open the library panel by going to window | library (or F11) and you'll notice a folder called Flash UI Components.