Summary:Tutorial to skin a button in flex using flash CS. Skinning of a button can be done in two ways either we can use images as button states or we can use a single swf file to store all button states. Storing in a swf file has many benifits over images, reduced size due to use of vector, no quality loss or distortion on scalling, manage all skins in a single file
Requirements: Flex installed, Flash CS.
Project Source files :Tutorial to skin button in flex.zip

Step1. Create four button states in flash file :

• Draw the button shape .i.e Button up state( Do not use any movieclip or groups else 9- slice scalling wont work. Use Stroke Hinting)
• Select the button shape and Press F8. Convert to Symbol window appears .
• Select type as MovieClip
• Enable 9- slice scaling option.
• In the linkage section, select Export for ActionScript option and Export in first Frame option.
• In class field provide a unique name which will be used in css to load this clip into flex. In button up state we are using MyButton_Up.
• Create all three remaining states similarly and compile flas to swf file.
• Copy the swf file to flex project src directory.

Step2. Create a css file in flex project and paste the following code :

Button.MyButton {
  upSkin: Embed(source="ButtonSkin.swf",symbol="MyButton_Up");
  downSkin: Embed(source="ButtonSkin.swf",symbol="MyButton_Down");
  overSkin: Embed(source="ButtonSkin.swf",symbol="MyButton_Over");
  disabledSkin: Embed(source="ButtonSkin.swf",symbol="MyButton_Disabled");
}
Step3. In the MXML file apply the css on the button like this

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="ButtonSkin.css" />
<mx:Button x="41" y="42" label="Button with Skin Applied" styleName="MyButton" width="280" height="37" enabled="{chk.selected}"/>
<mx:CheckBox x="42" y="144" label="Enable Button" id="chk" selected="true"/>
</mx:Application>