Each component has several “skins” to describe the look of that component in different situations. As an example, a
upSkin for it’s default appearance,
overSkin for how it appears with the mouse pointer over it,
downSkin for when it’s pressed and
disabledSkin for when it’s disabled (it also has a corresponding set of 4 for when it’s selected). The available skins for a component are enumerated in the Adobe documentation.
There are three types of skins:
- Graphical Skins – these are image files that define the appearance of the skin (jpeg, gif or png)
- Programmable Skins – ActionScript or MXML classes that define a skin using the Flash Drawing API. A single class can define multiple skins.
- Stateful Skins – programmatic skins that use view states where each state corresponds to a skin of the component.
These can be applied inline:
overSkin: Embed ("../assets/buttonOver.gif");
and within ActionScript:
public var buttonDwnSkin:Class;
myButton.setStyle("downSkin" , buttonDwnSkin);
You can create programmatic skins either in MXML or ActionScript and define a class per skin or a single class for multiple skins. Using the Flash Player drawing API allows you more flexibility in your design.
The first step is to choose the base class you want to extend for you skin. The main choices are:
ProgrammaticSkin– this implements the
IStyleableinterfaces. It’s the the most lightweight super class for a skin.
Border– this extends
ProgrammaticSkinand adds support for the
borderMetricsproperty. This would be used to implement a skin with a border that does not require a background image.
RectangularBorder– this extends
Borderand adds support for the
The majority of the work for the class is in overriding the
updateDisplayList() method. If you choose one of the border classes, you will also need to override the getter method for the
borderMetrics property to return your values.
The name property will provide the current skin name to be rendered. Use
graphics.clear() to remove any prior elements, a fill method (
beginShaderFill() ) to specify the fill that subsequent graphics calls will use, one or more of the draw methods followed by
endFill() to see the graphics displayed.
To use a programmatic skin, you need to provide the created class name. To apply it inline:
and within ActionScript:
Flex components such as
Slider etc can use stateful skins. They have a style property that is defined for several skin states (for Button it’s
thumbSkin). By defining a custom skin class based on
UIComponent, you can define view states corresponding to some or all of the possible skins and specify graphics for them. This gives you the ability to use transitions to animate the state changes.
You use a stateful skin in the same way as a programmatic skin – by assigning the class name to the relevant style property (
You can make your own custom style properties by making a call to
updateDisplayList() and supplying the name of your style. You should wrap this call with
isValidStyleValue() to check if the property exists before you try to use it and declare a default value in the class constructor.