Skinning

A user interface (UI) control is composed entirely of attached movie clips. This means that all assets for a UI control can be external to the UI control movie clip, so they can be used by other components. For example, if your component needs button functionality, you can reuse the existing Button component assets.

The Button component uses a separate movie clip to represent each of its states (FalseDown, FalseUp, Disabled, Selected, and so on). However, you can associate your custom movie clips—called skins—with these states. At runtime, the old and new movie clips are exported in the SWF file. The old states simply become invisible to give way to the new movie clips. This ability to change skins during authoring as well as runtime is called skinning.

To use skinning in components, create a variable for every skin element/linkage used in the component. This lets someone set a different skin element just by changing a parameter in the component, as the following example shows:

var falseUpSkin = "mySkin";

The name "mySkin" is subsequently used as the linkage name of the MovieClip symbol to display the false up skin.

The following example shows the skin variables for the various states of the Button component:

var falseUpSkin:String  = "ButtonSkin";
var falseDownSkin:String  = "ButtonSkin";
var falseOverSkin:String = "ButtonSkin"
var falseDisabledSkin:String = "ButtonSkin";
var trueUpSkin:String = "ButtonSkin";
var trueDownSkin:String = "ButtonSkin";
var trueOverSkin:String = "ButtonSkin";
var trueDisabledSkin:String = "ButtonSkin";
var falseUpIcon:String = "";
var falseDownIcon:String = "";
var falseOverIcon:String = "";
var falseDisabledIcon:String = "";
var trueUpIcon:String = "";
var trueDownIcon:String = "";
var trueOverIcon:String = "";
var trueDisabledIcon:String = "";