Flash Article

Skinning the Flash CS3 components

Skinning features in Flash CS3

In earlier versions of Flash, skinning components used to be a bit challenging because the v2 component skins were hidden away in a separate FLA file. In order to edit them, you had to copy folders between different Library panels to relocate the assets to a centralized location. Gathering the component's elements to be updated was rather time-consuming.

Let's begin by making changes to a component in Flash CS3; you'll see that the process is now much easier.

Create a new ActionScript 3.0 FLA file in Flash. Then drag an instance of the ComboBox component to the Stage (see Figure 1).

Figure 1. Dragging an instance of the ComboBox component from the Components panel to the Stage

To access the Timeline for the ComboBox component, double-click the instance of the component on the Stage (see Figure 2).

Figure 2. Double-clicking the ComboBox instance to access its timeline and begin editing the component's skins

By clicking through the layers in the component's timeline, you can quickly identify the different skins used in this particular component. You can also evaluate the different assets used for the component's Up, Over, Down, and Disabled states, as well as any subcomponents it might use. (The TextInput and List components are examples of components that use subcomponents.) Try double-clicking any of these elements on the Stage to delve deeper into them and expose their skins for editing.

The process for editing any of these individual skins is as easy as double-clicking the desired element. You can also right-click (Control-click on Mac) the element and choose Edit from the context menu that appears. To illustrate how this works, let's edit the Up skin of your ComboBox component (see Figure 3).

Figure 3. Double-clicking the Up skin in the ComboBox to begin editing it using the tools in the Tools panel

Once you've changed the look and feel of the skin as desired, use the edit bar located above or below the Timeline to click the word ComboBox. The edit bar allows you to navigate back to the ComboBox movie clip and leave the Edit mode of the ComboBox's Up skin. When you return to the ComboBox movie clip, you'll notice that the changes you made to the Up skin element are not reflected on the Stage in real time.

However, when you test the movie (Control > Test Movie), you'll see your changes applied in the published SWF file.

How does this work? Open the Library panel (Window > Library) and take a look behind the scenes (see Figure 4).

Figure 4. Opening the Library panel (Window > Library) to review the skin assets

When you look in the Library panel, notice that all of the skin assets are located in a folder called Component Assets. The ComboBox skin elements are conveniently organized in a subfolder containing all of the graphic elements used by the ComboBox component.

In some cases, these skin assets are shared between components, which makes it even easier to create a consistent look and feel for your interface. However, sometimes you want to update only one component's skin and not change the others. It is important to point this out because you may be surprised if components you didn't expect to update suddenly appear differently. I discuss this situation in more detail later in this article.

Now that you've updated the assets in the ComboBox, try using multiple copies of it. Drag a second instance of the ComboBox component on Stage. After doing so, the Resolve Component Conflict dialog box appears (see Figure 5). This dialog box offers you the choice of using the modified skin assets from your project's Library or overwriting the asset files with the default skins for the component.

Figure 5. Resolve Component Conflict dialog box appearing when working with multiple instances of an edited component

If you select the Replace Existing Component option, the new instance that you've dragged to the Stage will use the component's default skins rather than the skins you've updated.

If you select the Use Existing Component option, the graphic changes that you made and the resulting modified skin assets will be applied to the new ComboBox instance you've dragged to the Stage, as well as the one that was already there when you edited the skins.

This may be exactly what you are hoping for because in many cases you'll want both ComboBox instances to look the same. But there are scenarios that are not covered by either option. For example, what if you want to use different skins for the same component? There are occasions when you need to control the look of the skins of each component instance rather than having the changes automatically reflected on all instances.

One strategy you can use to vary the skins used in multiple instances of the same component in your Flash project is to skin the components programmatically. Coincidentally, that's the topic I discuss next.

Page 2 of 4

Previous Page

Next Page