Preinvent Blog

Overview
Flex 3 brings to us powerful skinning abilities. In this post I'll show you how to create a simple skin for a Flex button. There are a few key components to skinning:

• Skin graphics
• CSS stylesheet
• Applying the skin to a button

This demonstrations shows you how to create a button skin and use it in Flex. The source project can be downloaded at the bottom of this post.

Skin graphics
I almost always store skin graphics in FLA files. Whilst we can use PNGs, JPGs etc as well, i find it easier to manager large numbers of skins by categorising them into different FLAs, for example Buttons.fla, Panels.fla etc. It also makes it easier to implement 9-slice scaling. This is a feature that allows you to specify edge and corner areas that do not get stretched when we size our button in Flex.

This example contains four assets that comprise of the up, down, over and disabled states of our custom button. In Flash we create the four states, give them unique IDs and also assign Linkage IDs. It is these linkage IDs that we use to hook up to the skin states in Flex.

When you're creating your skins in Flash, there are a few things to be aware of, especially if you're planning to use 9-slice scaling:

• Always use stroke hinting on lines
• 9-slice guides only work on shapes, they do not work on groups or movieclips

9-slice guides and stroke hinting:

CSS stylesheet
Once we have our FLA, all we need to do is publish to create a single SWF. In Flex, I use a stylesheet to create a button style using the skins from the published SWF file:

Button.MyButton {
	upSkin: Embed(source="Skin.swf",symbol="MyButton_Up");
	downSkin: Embed(source="Skin.swf",symbol="MyButton_Down");
	overSkin: Embed(source="Skin.swf",symbol="MyButton_Over");
	disabledSkin: Embed(source="Skin.swf",symbol="MyButton_Disabled");
 
	font-family: arial, verdana;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
}

As you can see, I'm assigning a symbol from Skin.swf to each of the four button states. I'm also setting some basic text CSS styles that will appear on the button when it's used in our Flex application.

Applying the skin to a button
To use this new style on a button, we just load in the stylesheet and tell the button which styleName to use. The entire demo application is listed below. I've also included a checkbox that enables/disables the button to show the disabled skin.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style source="Button.css" />
	<mx:Button x="50" y="56" label="This is my button" styleName="MyButton" width="178" height="37" enabled="{chk.selected}"/>
	<mx:CheckBox x="50" y="120" label="Enable Button" id="chk" selected="true"/>
</mx:Application>

The finished product