User Guide

Skinning custom components 39
setStyle("color", 0x6666CC);
// Set the background and border to blue when mouse hovers over control.
setStyle("themeColor", 0x6666CC);
super.init();
invalidate();
}
}
The following MXML file instantiates the BlueButton control without overriding the default
styles set in the component’s class file:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*" >
<BlueButton label="Blue Button" />
</mx:Application>
In addition to setting the color property, you can set the font face, font size, and other style
properties. For more information on the available style properties, see Developing Flex
Applications.
Skinning custom components
When you extend an existing visual control, you can include additional graphics inside the SWC
file and instruct the new control to use these graphical assets to represent its appearance. The
process of changing the appearance of a control is called skinning. Skins can be any kind of
graphic that Flash supports, from a simple line drawing to a multipart SWF file.
To skin a component, you start with a FLA file, just as you would when creating any new
component. However, you add a new symbol to the FLA file that defines the skin in addition to
the component’s symbol itself.
The following table describes the general structure of a FLA file that includes new skins for
the component:
Name Frame Description
Main Layer 1
Frame 1
The top level of the FLA file, which contains a single blank
frame.
Symbol: custom
component
Layer 1
Frame 1
First layer, named main, with an ActionScript
stop()
statement.
Layer 2
Frame 1
Empty.
Layer 2
Frame 2
Second layer, named assets, which contains the skin symbol
plus any additional graphical assets used by this component.
Symbol: skin graphics Layer 1
Frame 1-x
The new symbol, which contains as many frames as are
necessary to represent the new skin. For a simple, static
graphic, you can draw the new skin on a single frame.