User Guide

ManualsBrandsMacromedia ManualsOtherFLEX

Table Of Contents

Skinning custom controls 69

invalidate() Indicates that just the visuals for the object have changed, but size and position of

subobjects have not changed. This method calls the

draw() method.

invalidateProperties() Indicates that you have changed properties. This method calls the

commitProperties() method.

You should call the

invalidateSize() method infrequently because it measures and redraws

everything on the screen, and this can be an expensive action. Sometimes you need to call more

than one of these methods to force a layout, even though the computed sizes did not change.

You must call an invalidation method at least once during the instantiation of your component.

The most common place for you to do this is in the

createChildren() or layoutChildren()

method.

Skinning custom controls

A user-interface control is composed entirely of attached MovieClip objects or symbols that are

stored inside a SWF file. All assets for a user-interface control can be external to the user-interface

control, so they can also be used by other components. For example, if your component needs

button functionality, you can reuse the existing Button component assets.

The Button control uses a separate symbol to represent each of its states (FalseDown, FalseUp,

Disabled, Selected, and so on). However, you can associate your custom symbols—called skins—

with these states. At runtime, the old and new symbols are exported in the SWF file. The old

states become invisible to give way to the new symbols. This ability to change skins during

author-time as well as runtime is called skinning.

To use skinning in components, create a variable for every skin element or linkage used in the

component in your ActionScript class file. 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 symbol to display the

FalseUpSkin.

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 = "";