Skinning the Flash CS3 components

What would we do without components in Flash? Ever since the release of Flash 6, developers have taken advantage of the user interface components to create functionality and add navigation to Flash projects. Even in Flash 5 we were getting used to the concept of using drag-and-drop reusable widgets with the introduction of SmartClips.

The days of coding your own scrollbars, list controls, and combo boxes are long past. Ss each new version of Flash is released, the components become more powerful and extensible.

In Flash CS3 Professional, many of the feature requests and issues with the v2 components included in Flash MX 2004 (and left largely unchanged in Flash 8) have been addressed. As a result, the file size and performance of projects using components has improved. Even more significantly, you've gained the ability to style and skin components to update your graphics to fit your custom designs.

This article covers several different strategies for skinning components using Flash CS3 Professional. I discuss manually updating the graphic elements as well as updating them programmatically. After following along with this material and examining the provided sample files, you'll have everything you need to start customizing the look and feel of the built-in components for your next project.

Before you get started, it is important to know is that there is a big difference between styling components and skinning them. Styles allow you to change some properties of a component instance or update some properties of all the components in your project. When using styles, you can update a component's font properties, colors, and padding and make other, similar adjustments.

When you update the skins of a component, you are editing the actual graphic assets—the individual elements that are used to display the component.

If you've ever styled components in a previous version of Flash, you should note that the Flash CS3 components no longer support CSS-based styles. This change was implemented in order to streamline the process for updating the components and also to reduce the overall file size of projects using components.

I focus here on skinning components, but if you'd like to learn more about the styling features available in Flash CS3 components, as well as get an overview of the process of working with instance, class and global styles, see the section of the Flash LiveDocs on StyleManager.

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).

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

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).

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).

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.

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.

Programmatic skinning is the process of using ActionScript 3.0 to assign a movie clip's assets as a skin to a component instance, as opposed to manually editing the skin states for a particular component, as I reviewed in the previous section.

Manually generating a class

So roll up your sleeves and see how this works. Start by creating a new ActionScript 3.0 FLA file. After you save the file, drag two ComboBox component instances to the Stage. Name one instance style1_cb and name the other instance style2_cb by entering the names in the Instance Name field in the Property inspector.

Next, add a new layer to the Timeline and name the layer actionscript. Open the Actions panel (Window > Actions) and add the following lines of code in the Script window:

These two lines of code specify a class for the upSkin property of your two ComboBox instances. The ComboBox with the instance name style1_cb is assigned the CBUpSkin1 class, while the ComboBox named style2_cb is assigned the CBUpSkin2 class.

Don't worry. Just because you are specifying classes doesn't necessarily mean you have to write complex ActionScript 3.0 code. Flash CS3 actually does most of the heavy lifting for you behind the scenes.

Make an Up skin for your first ComboBox instance. Simply create a new movie clip (Insert > New Symbol) and choose the type Movie clip. Name the symbol UpSkin1. In the advanced section, select the option to Export for ActionScript and leave the option Export in First Frame checked (see Figure 6).

Finally, update the Class field with the name CBUpSkin1 as shown in Figure 6. Click OK.

It's interesting to note that although we've specified the class name CBUpSkin1, a class of that name doesn't actually exist yet. You'll get to that in a moment.

After you click OK, the message in Figure 7 will appear.

Essentially this message states that because Flash did not locate the specified class, it will create a new class of the same name for you, so that it will be available in the future and you can reference it. This is all happening behind the scenes in the Flash authoring interface.

By adding the reference to the CBUpSkin1 class, and then creating a new empty movie clip that references the same class, you've prompted Flash to use the movie clip you just created as the Up skin for the ComboBox instance named style1_cb. Now all that's left to do is edit the movie clip to change the look and feel of the skins as desired. Use the tools in the Tools panel to graphically change the movie clip so it matches your project's design.

After you've updated the movie clip, test the movie (Control > Test Movie). The first ComboBox instance will appear with the updated elements in all its skinned glory but the second instance will cause an error message to occur. It makes sense that the CBUpSkin2 class is not found, and that the Up skin is missing, because that class doesn't actually exist yet.

Dynamically generating a class

Rather than repeating the steps outlined above, take a different approach for creating the second instance's skin. This time, use ActionScript 3.0 to dynamically generate the class. This strategy is built on the concept that it is not necessary to design the component skins manually in Flash CS3. For example, you can use the graphics API or load an external bitmap or SWF assets to generate a skin.

To do this programmatically, you need to create your own ActionScript 3.0 class. Create a new ActionScript 3.0 class file named CBUpSkin2.as. Select File > New > ActionScript File. After you've created and saved the file, add the following code:

That's not too scary, is it? This code specifies your CBUpSkin2 class and then creates a Sprite instance inside the class and uses the graphics API to draw a red rectangle with a width of 100 pixels and a height of 20 pixels.

From here on, the steps to follow are identical to the steps outlined in the previous programmatic skinning example. Simply create a new movie clip and specify CBUpSkin2 as the movie clip's Class.

If you test the movie again (Control > Test Movie), you'll see two instances of the ComboBox instance, each with a different skin. The first ComboBox instance uses the movie clip prepared in Flash CS3 to prompt an auto generation of the class for its skin, while the second instance uses the code in the .as file to skin the component.

Obviously we are just scratching the surface here. You can use ActionScript 3.0 to implement much more complex skinning operations than merely drawing a simple rectangle, but for the sake of simplicity this example shows you all the basic steps for programmatically skinning components.

After you go through the process of creating wonderful custom skins for your components, you'll likely want a method for easily distributing and reusing them.

There are many options available to you, and the first one is pretty obvious—simply save the FLA file with your custom skinned component and then copy it over to another project whenever you want to use it.

While that strategy works, it isn't the best workflow. You could do better by exporting your skinned component as a SWC ("swick") file, which is a common way to distribute components in an archived format.

To export a skinned component as a SWC, simply right-click the component in the Library panel and choose the Export as SWC option from the context menu. This invokes a dialog box to appear that prompts you to specify where to save the file. After saving the SWC file, you can distribute it as desired. Quit Flash and then install the custom component included in the SWC file by copying it to the following location on your hard drive:

Windows:

C:\Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Components\

Mac OS:

|Applications|Adobe Flash CS3|Configuration|Components|

The next time you launch Flash CS3, you'll see the SWC you've created appear as a component in the Components panel (Window > Components). Now that it is installed, you can simply drag the custom component to the Stage just like any component included in Flash CS3.

You may find yourself in a situation where you've skinned a great number of components in a single FLA file. The process of exporting every single customized component to a SWC can get really tedious. But there's no need to worry about that because you can also just save the FLA file itself in the folder hierarchy shown above. Doing so will install all of the components contained in the file into the Components panel.

One advantage of using a FLA file as opposed to exporting the files in the SWC format is that FLAs remain fully editable and you can update the components as needed, whereas SWCs are not editable. Once you export a SWC file, it is a compiled clip that you cannot manually skin. Whether you use FLA or SWC files to install your custom components, always save the master FLA as a backup in case you need to make changes later.

It is also important to note that these installation options are all used for skins created manually in the Flash authoring environment, not for skins that are customized using ActionScript 3.0.

If you've ever programmatically skinned your components and you want to distribute them, your best bet is to create a subclass of the component you are customizing. Describing the process for creating a subclass of a component is outside the scope of this article, as it does require a bit of scripting. If you'd like to research further and learn more about how to create a subclass using ActionScript 3.0, check out the articles in the Flash Developer Center and also be sure to read the documentation in the online ActionScript 3.0 Language and Components Reference.

Where to go from here

As you can see from these examples, Flash CS3 Professional has made significant improvements in the workflow for customizing the look and feel of components. Hopefully these illustrations have given you some new ideas for your next Flash project. Download the sample files available at the beginning of this article and examine them to see working examples of the concepts I've discussed here.

Whether you customize your components manually by editing movie clip assets in the Flash authoring environment or by writing code, Flash CS3 makes the process of updating component skins quick and painless. You can easily archive, use, and share the custom designs you create. Take advantage of the built-in functionality available in Flash while controlling the way the components appear with your own unique designs.