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
Main
Symbol: custom
component
Symbol: skin graphics Layer 1
Frame
Description
Layer 1
The top level of the FLA file, which contains a single blank
frame.
Frame 1
Layer 1
First layer, named main, with an ActionScript
statement.
Frame 1
Layer 2
Empty.
Frame 1
Layer 2
Second layer, named assets, which contains the skin symbol
plus any additional graphical assets used by this component.
Frame 2
The new symbol, which contains as many frames as are
necessary to represent the new skin. For a simple, static
Frame 1-x
graphic, you can draw the new skin on a single frame.
stop()
Skinning custom components
39
Need help?
Do you have a question about the FLEX - DEVELOPING COMPONENTS AND THEMES and is the answer not in the manual?