Skinning components

Skins are symbols a component uses to display its appearance. Skins can either be graphic symbols or movie clip symbols. Most skins contain shapes that represent the component's appearance. Some skins contain only ActionScript code that draws the component in the document.

Macromedia v2 components are compiled clips—you cannot see their assets in the library. However, FLA files are installed with Flash that contain all the component skins. These FLA files are called themes. Each theme has a different appearance and behavior, but contains skins with the same symbol names and linkage identifiers. This allows you to drag a theme onto the Stage in a document to change its appearance. For more information about themes, see About themes. You also use the theme FLA files to edit component skins. The skins are located in the Themes folder in the Library panel of each theme FLA.

Each component is composed of many skins. For example, the down arrow of the ScrollBar component is made up of three skins: ScrollDownArrowDisabled, ScrollDownArrowUp, and ScrollDownArrowDown. Some components share skins. Components that use scroll bars—including ComboBox, List, ScrollBar, and ScrollPane—share the skins in the ScrollBar Skins folder. You can edit existing skins and create new skins to change the appearance of a component.

The .as file that defines each component class contains code that loads specific skins for the component. Each component skin has a skin property that is assigned to a skin symbol's Linkage Identifier. For example, the pressed (down) state of the down arrow of the ScrollBar has the skin property name downArrowDownName. The default value of the downArrowDownName property is "ScrollDownArrowDown", which is the Linkage Identifier of the skin symbol. You can edit skins and apply them to a component by using these skin properties. You do not need to edit the component's .as file to change its skin properties, you can pass skin property values to the component's constructor function when the component is created in your document.

Choose one of the following ways to skin a component based on what you want to do:

• To replace all the skins in a document with a new set (with each kind of component sharing the same appearance), apply a theme (see About themes).

  Note: This method of skinning is recommended for beginners because it doesn't require any scripting.

• To use different skins for multiple instances of the same component, edit the existing skins and set skin properties (see Editing component skins, and Applying an edited skin to a component).
• To change skins in a subcomponent (such as a scroll bar in a List component), subclass the component (see Applying an edited skin to a subcomponent).
• To change skins of a subcomponent that aren't directly accessible from the main component (such as a List component in a ComboBox component), replace skin properties in the prototype (see Changing skin properties in the prototype).

Note: The above methods are listed from top to bottom according to ease of use.