Design Center Tutorial

Customizing component instances

While using off-the-shelf components is convenient, it's not as creatively satisfying as designing your own symbols. Adobe® Flash® CS3 addresses this issue by providing several ways to modify the appearance of ActionScript 3.0 components.

In this tutorial, you'll learn how to create custom component instances.

Requirements

To complete this tutorial you will need to install the following software:

Adobe Flash CS3

• Try
• Buy

Creating component instances

To customize component instances:

• Use the Property inspector. As with standard movie clips, you can use the buttons on the right side of the Property inspector to change the color or blending mode of a component instance. The drawback is that there’s no live preview: The only way to see what your changes look like is to test or publish the movie. To get around this, go to the Instance Behavior menu (Figure 1) and change the symbol type from Movie Clip to Button. (The instance may temporarily look different, but that's OK.) Make whatever changes you want to the color and blending modes, then change the symbol type back to Movie Clip.

  

  Figure 1: To allow a live preview of your color and blending-mode changes, choose Button on the Instance Behavior menu. Be sure to set the instance back to Movie Clip when you're finished.

• Use the Free Transform tool. You can transform instances of components, but not necessarily with the results you’d expect. Depending on the component, scaling an instance may change one dimension, both, or neither, and it doesn't affect text size at all. Skewing or rotating an instance works fine on the graphic part of the component, but it makes all text—labels and data—disappear. You can avoid this problem by embedding a font.

• Edit the component. Double-click an instance on the Stage to enter symbol editing mode, but with a difference: All the states of the component are shown (Figure 2). Double-click one of the states to edit it as you would a standard symbol. (If you want a particular change to affect multiple states, you have to edit each one individually.) You can change the graphic portion (Figure 3), but you can’t change the appearance of the text—that can be done only through ActionScript. When you edit one instance of a component, the changes you make affect all instances of that component in your movie.

  Tip: To change an edited component back to its original appearance, drag another copy of the component from the Components panel to the Library, then choose "Replace existing items."

  

  Figure 2: When you edit a component (in this case, the Radio Button), Flash shows you all of its possible states. To apply a change to mutliple states, you must edit each individually.

• Use ActionScript. Although you can’t use ActionScript to make radi¬cal changes in a component’s appearance, you can change attributes such as its size and visibility. You can also make changes in the font, size, and style of the component’s text.

  

  Figure 3: The Radio Button component has been edited to look like an eye when selected or an oval when not selected. Think twice before you make significant alterations to user-interface elements; users may fail to recognize that these are interface elements.

About the authors