Skinning Without Code

Visually skinning components usually involves modifying library symbols to represent what you want a component to look like. Many longtime Flash users were surprised that they couldn't readily find component symbols in the library when they included a component in their projects.

The introduction of the SWC file format (a compiled form of a component that is used to package all component assets into one convenient file) in Flash MX 2004 enables you to package and distribute components easily, which is a great benefit. At the same time, however, the skins, which are required for each component, are also included in the SWC. Because you cannot edit the contents of an SWC file, you must add the library symbols to redefine those symbols.

By adding symbols to your library with the same linkage identifiers to which the skin property is set (usually the default value of the component), a component would use that symbol over the symbol included within the SWC file for its skin. You might be thinking this is a pretty tedious task—manually tracking down the linkage identifiers, creating each symbol, and making sure you don't make mistakes along the way. Thankfully Macromedia has given us a starting point to help ease the process.

The StandardComponents.fla file is included with every installation of Flash. It is located here:

• (Windows) C:\Program Files\Macromedia\Flash 8\<language>\Configuration\ComponentFLA
• (Macintosh) Hard Drive/Users/<username>/Library/Application Support/Macromedia/Flash 8/<language>/Configuration/ComponentFLA

A Few Notes About Themes

Themes are a collection of skins and styles that enable you to develop an overall look for a set of components. I will not go into how styles are implemented in themes because my main focus here is skinning. Themes work by having a symbol in the library with the same linkage identifier as existing symbols within the component's SWC. To make use of themes, Macromedia distributes the collection of library symbols in an FLA file as a starting point from which to work.

The following steps explain how to include a theme:

1. Create a new FLA file.

2. Open the file HaloTheme.fla. You can find it here:

   • (Windows) C:\Program Files\Macromedia\Flash 8\<language>\Configuration\ComponentFLA
   • (Macintosh) Hard Drive/Users/<username</Library/Application Support/Macromedia/Flash 8/<language>/Configuration/ComponentFLA
3. Locate the main HaloTheme symbol in the library and drag it to the blank FLA file created in Step 1.

4. Select Themes > MMDefault > Window Assets to open the Window Assets symbol. Customize the different graphical items in the symbol to your liking (see Figure 1).

   

   Figure 1. My customized Window Assets symbol

5. Drag a Window component onto the main Stage.
6. Select Control > Test Movie to view the results.

Typically you would customize all the different symbols in a theme and have the complete theme available so you can easily reskin an application. Note also that, at this time, theme files are not only made up of graphical assets in the library but can also be drawn through code, including default component style values, as I will show shortly.

To briefly see styles in themes, you can check the HaloTheme library. You will notice a symbol called Defaults when you select Flash UI Components 2 > Themes > MMDefault in the library. If you check the linkage properties of the symbol, you will find that the symbol is associated with a class. You can find that class file in the included Classes folder.

Open the Default.as file located here:

• (Windows) C:\Program Files\Macromedia\Flash 8\<language>/\First Run\Classes\mx\skins\halo
• (Macintosh) Hard Drive/Applications/Flash 8/First Run/Classes/mx/skins/halo

You should know that the setThemeDefaults() method is responsible for setting these defaults. If you want to build a complete theme, you might find it beneficial to specify the default styles of components as well. You can do so easily by customizing the Default.as file. If you plan to do so, ensure you create a local copy for your application. The files located in the global classes folder should never be modified.

Finally, if you want to skin only one component rather than have a whole theme, you could delete all library item files not related to the component you are interested in skinning and then edit just the symbol you want instead.

A Few Notes About Skinning Without Code

Skinning components without any code can be very limiting. You can do several things to avoid writing code every time you want to skin a component. For example, explore the file SampleTheme.fla, which you can find here:

• (Windows) C:\Program Files\Macromedia\Flash 8\<language>\Configuration\ComponentFLA
• (Macintosh) Hard Drive/Users/<username>/Library/Application Support/Macromedia/Flash 8/<language>/Configuration/ComponentFLA

This theme can be easier to skin because it uses less code to draw the skins as apposed to the HaloTheme.

Some components use the same values for multiple skin properties (component states) because they draw that skin using code. For those components, you won't find a method of customizing the different states independently without having to write some code. The Button component is a good example of this.

Page 3 of 4

Previous Page

Next Page