Skinning Custom Components - MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES Manual

Developing flex components and themes in flash authoring
Table of Contents

Advertisement

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

Advertisement

Table of Contents
loading
Need help?

Need help?

Do you have a question about the FLEX - DEVELOPING COMPONENTS AND THEMES and is the answer not in the manual?

Subscribe to Our Youtube Channel

This manual is also suitable for:

Flex

Table of Contents