Skinning custom components
41
5.
Add a second layer called
assets
, and add a second blank keyframe to this layer.
6.
Return to the main FLA file.
7.
Insert a new symbol by selecting Insert > New Symbol. The Create New Symbol dialog box
appears. This new symbol will be the new skin.
8.
In the Create New Symbol dialog box, do the following:
a
Select the MovieClip for Behavior option (the default).
b
Select the Export for ActionScript check box.
c
Enter a symbol Name.
Do not specify an AS 2.0 Class name or an Identifier for this symbol. For more information
on creating a new symbol, see
“Adding new symbols” on page 12
.
d
Clear the Export in First Frame check box.
9.
Draw the new skin on the second symbol’s Stage in Edit Symbols mode. The new skin can be
a simple graphic or a composite of MovieClips.
10.
Return to Edit Symbols mode and edit the component’s symbol (the first symbol you created).
11.
Drag the skin symbol you created onto the second frame of the component’s assets layer.
12.
Create a new ActionScript class file. In this file, extend the existing control, set the value of the
skin to the new skin name, and apply the skin as a clip parameter in the
constructObject2()
method.
The following example overrides the
falseUpSkin
skin with the symbol named redbox in a
new Button control called SkinnedButton:
class SkinnedButton extends mx.controls.Button {
// Set the value of the falseUpSkin state to the new skin.
var falseUpSkin:String = "redbox";
static var symbolName:String="SkinnedButton";
static var symbolOwner:Object = SkinnedButton;
var className:String = "SkinnedButton";
function SkinnedButton() {
}
function init() {
super.init();
invalidate();
}
static var clipParameters:Object = { redbox:1 };
function constructObject2(o:Object):Void {
super.constructObject2(o);
applyProperties(o, SkinnedButton.clipParameters);
}
}
