Dynamic Scrollbars in Flash (an Introduction to Components)

A few weeks ago we learned how to load dynamic text in Flash. So what if your external text file has more characters than your text field, or the amount of text fluctuates? Lucky for us Macromedia introduced the scrollbar component in MX 2004, which makes this a breeze. What’s a component you say?

Remember SmartClips from Flash 5 way back when? Components are SmartClips all grown up. Basically a component isn’t much more than a pre-packaged MovieClip with most of the functionality you’ll need already built in. Open your components pane in Flash, Command + F7 for Mac users. You’ll see Flash already comes with many components for Menus, Video Control, and Data Manipulation.

Under User Interface is the UIScrollbar. If you drag this component onto your text field, you’ll see it snaps into place. (Your textfield must be Dynamic, with multiline selected, and an instance name set.) You can edit paramaters such as vertical or horizontal from the Components Inspector. Next create a layer called Actions, if you haven’t already. (I find it best practice to give Actions and Labels their own layers.) On the first frame place the following line of ActionScript:

scrollbarinstancename._visible = (textareainstancename.maxscroll >1);

You just told Flash to make that instance of your scrollbar visible in that text field when the maximum number of scrollable characters is greater than one. That’s it, you’re done. Unfortunately you just added 40k to your movie for every instance of the scrollbar, so if you’re strapped on size you may want to seek out some of the other component options available in the Flash community.

Here are a few resources to get you started:

• A light-weight scrollbar component
• Macromedia’s Flash Exchange
• FlashComponents.net
• flashloaded.com
• ActionScript.org’s component library
• The Flash DB Component Library
• Flashkit’s component repository
• And my favorite component, SlideShowPro, well worth the $20.

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.