User Guide

96 Customizing Components
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” on page 108.)
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.