Popa Mihai

This short example will show how you can use Flash CS3 Professional to create a custom skin that you can then use to create a custom button for your Flex applications.

The steps that we will take:

1. Create the art work with Flash for the up, down, over and disabled states for the custom button
2. Convert the artwork to symbols and export them for ActionScript
3. Use the resulting SWF in a Flex application to create a custom Flex Button

1. Create the art work with Flash for the up, down, over and disabled states for the custom button

For this example the artwork that I use is not that impressive. I just used a gradient and a white line:

2. Convert the artwork to symbols and export them for ActionScript

After you created art work for your custom button in Flash CS3 you will have to convert them to symbols (by pressing F8). In the pop-up that appears enter a descriptive name for the four states of your custom button. I used: button_normal, button_disabled, button_down and button_hover for the four states.

After you converted the artwork to symbols, you must export the symbols for ActionScript. This is done from the Library panel:

Right Click on the first symbol in the Library and Choose “Linkage…”, then in the pop-up window that appears select “Export for ActionScript”. After you select “Export for ActionScript” the “Class” and the “Base Class” fields will become editable. The one that we are interested in is the “Class” field. If you named your symbols like I did (button_normal, button_disabled, button_down and button_hover) the “Class” filed will already be filled with “button_disabled” and this is how you should leave it.

Repeat this process for the rest of the symbols and the compile the application.

3. Use the resulting SWF in a Flex application to create a custom Flex Button

Now what we need to do is to copy embed the resulting swf in the flex application and to use the custom skin to create a custom Flex button.

The is the source code that does this:

<?xml version="1.0" encoding="utf-8"?>
<!--http://www.popamihai.com/2009/08/flex/creating-a-custom-flex-button-skin-using-flash-cs3/-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundColor="white" viewSourceURL="srcview/index.html">
	<mx:Style>
		.enhancedButton{
			upSkin: Embed(source="../assets/skin.swf", symbol="button_normal");
			disabledSkin: Embed(source="../assets/skin.swf", symbol="button_disabled");
			downSkin: Embed(source="../assets/skin.swf", symbol="button_down");
			overSkin: Embed(source="../assets/skin.swf", symbol="button_hover");
			color: #ffffff;
			textRollOverColor: #ffffff;
		}
	</mx:Style>
 
	<mx:Button label="Custom Button Skin" styleName="enhancedButton"/>
	<mx:Button label="Disabled Button Skin" styleName="enhancedButton" enabled="false"/>
 
</mx:Application>

And here is the swf for this application that results from the above code. I have tow buttons, one enabled and the second one est to enabled="false" so that you see all the four states of the custom Flex button:

View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.