Recipe 15.12. Using Different Artwork Themes

Problem

You want to use a different artwork theme for your components.

Solution

Open the .fla file containing the theme artwork symbols, and drag them into your .fla file.

Discussion

The UI components that ship with Flash 8 use the Halo theme by default. However, you can change the theme that the components use by copying a set of symbols from a theme .fla file to your .fla file. A theme is simply the set of movie clip and graphic symbols that the components use. The Halo theme is compiled into the components as the default theme. However, if you create the appropriate movie clip and graphic symbols in your .fla file, they will override the default versions.

The simplest way to apply a theme is to use one of the themes that ships with Flash. There are two built-in themes: Halo (the default) and Sample. You don't need to explicitly apply the Halo theme, because it is compiled into the components by default. However, to apply the Sample theme, do the following:

1. Open the .fla file for which you want to apply the theme.

2. Choose File Import Open External Library.

3. Make sure you have the library for your .fla file open. You should be able to see both the library for your .fla file and the library for SampleTheme.fla. By default, Flash 8 displays only one Library panel. However, you can click the "New library panel" button on the upper right of the library to open a new panel. You can then select a different library from the drop-down menu in each panel.

4. Drag the Flash UI Components 2 folder from the SampleTheme.fla library to the library of your .fla file.

Even though you won't see the live preview update on the stage during authoring time, you'll see the new theme applied once you export the .swf file.

You can create your own themes as well. To do so, start with either the HaloTheme.fla or SampleTheme.fla file, and save it as a new .fla file. Then, modify the artwork in the symbols. Keep in mind that the Halo and Sample themes use slightly different sets of style properties. Therefore, choose the starting .fla file accordingly. For example, if you want your custom theme to support the symbolColor style property, you should use SampleTheme.fla as your starting document. When you've created your custom theme files, you can follow the same steps as you used to apply the Sample theme in order to apply your custom themes.