About skinning components

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

Version 2 components are compiled clips--you cannot see their assets in the library. However, the Flash installation includes FLA files 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 lets you drag a theme onto the Stage in a document to change its appearance. 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 file. (For more information about themes, see About themes.)

Each component comprises many skins. For example, the down arrow of the ScrollBar subcomponent consists of four skins: ScrollDownArrowDisabled, ScrollDownArrowDown, ScrollDownArrowOver, and ScrollDownArrowUp. The entire ScrollBar uses 13 different skin symbols.

Some components share skins; for example, components that use scroll bars--such as ComboBox, List, and ScrollPane--share the skins in the ScrollBar Skins folder. You can edit existing skins and create new skins to change the appearance of components.

The AS file that defines each component class contains code that loads specific skins for the component. Each component skin corresponds to 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 component has the skin property name downArrowDownName. The default value of the downArrowDownName property is "ScrollDownArrowDown", which is the linkage identifier of the skin symbol in the theme FLA file. You can edit existing skins and apply them to all components that use the skin by editing the skin symbol and leaving the existing linkage identifier. You can create new skins and apply them to specific component instances by setting the skin properties for a component instance. 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.

The skin properties for each component are listed in each component's entry in the Components Dictionary. For example, the skin properties for the Button component are located here: Components Language Reference > Button component > Customizing the Button component > Using skins with the Button component.

Choose one of the following ways to skin a component according to what you want to do. These approaches are listed from easiest to most difficult.

To change the skins associated with all instances of a particular component in a single document, copy and modify individual skin elements. (See Editing component skins in a document).
This method of skinning is recommended for beginners, because it doesn't require any scripting.
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.)
This method of skinning is recommended for applying a consistent look and feel across all components and across several documents.
To link the color of a skin element to a style property, add ActionScript code to the skin to register it as a colored skin element. (See Linking skin color to styles).
To use different skins for multiple instances of the same component, create new skins and set skin properties. (See Creating new component skins and Applying new skins to a component.)
To change skins in a subcomponent (such as a scroll bar in a List component), subclass the component. (See Applying new skins 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 a subcomponent.)

This section contains the following topics:

Version 8

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/8/main/00003003.html