Benefits of the V2 Skinning Architecture

The Flash MX 2004 and Flash 8 components are based on the Version 2.0 component framework, the latest framework provided by Macromedia. One of the many changes the new framework required was a rethinking of how components support skinning. Previous versions of Flash didn’t have much of a formal system behind skinning. Component developers just made sure they had movie clips in the library for when a component needed to display something. In that way, users could easily edit a library symbol if they wanted to change the look of a component. This was very simple for users but also very limited.

As you might guess, a simple approach has many drawbacks. The biggest drawback was the ability to skin different instances of a component separately and have control over skinning through code. Because all instances shared the same library symbol, instance-level skinning wasn’t possible—at least not without much extra work. Furthermore, skinning required you to work with the library; it didn’t provide you with other options.

The new component framework gives users much more flexibility over how they can skin components. With this added flexibility, however, comes greater complexity, which requires a solid understanding of the many options to take best advantage of the skinning architecture.

Understanding the Skinning Architecture

You need to understand the way components use skins if you want to get a handle on the available options. It would be ideal if components supported only one method of skinning and if that method was exactly the one you wanted all the time. However, that is pretty tough to achieve without leaving out some users. I usually use the initObject method through code to skin components, as well as the subclassing method. However, that may not always work for your needs.

To begin, you must understand the basics of what ties everything together. In Flash, every component skin is a movie clip and is identified by a linkage identifier in the library that the component code uses to attach a skin at runtime. That linkage identifier is a unique identifier that a component will use to identify a skin—which usually translates to a specific state that the component is in.

For example, you have many states in a Button component. Each state can have its own skin, which the component uses. States can be any visual state the component has to represent—like Rollover, Press, and RollOut. Knowing the available skin properties for each component is important. You can find this information in the documentation as well as by looking through the component code (in the code, they are declared as private member variables).

In the component language reference section of the documentation, you will find for each component a section titled, “Customizing the [component name].” In that documentation entry you will find two main sections. One section is titled, “Using skins with the [component name].” That section lists the different skin (or component) properties and provides a brief description of each one.