Christopher Huyler’s Flex Blog

If you have designers sending you Flash SWFs for buttons and other objects in your Flex application you probably have come across Adobe’s tutorial which may not answer all your questions. The simple question my designer had was “How do I export a symbol?”. Read on to find out how…

ActionScript 2.0 vs ActionScript 3.0

For some reason, I wasn’t able to export symbols using AS3 so the first thing I did was switch the publish mode for my designer’s Flash project from AS3 to AS2.

1. Select File->Publish Settings…
2. Select the Flash Tab
3. Change ActionScript version from 3.0 to 2.0

Linkage Options

In order to access the object, it must be exported.

1. Right-click the object in your library and choose Properties…
2. Make sure Type is set to Movie clip (it should be by default)
3. Click Advanced to get more options.
4. Under Linkage select “Export for ActionScript” and “Export in first frame”

Scale 9 Slicing

If the object is a button skin or something else that will be resized by a Flex application you need to also configure the scale 9 slicing.

1. From the same Properties dialog as above, select “Enable guides for 9-slice scaling”
2. This will put some dotted lines over your object. Move the lines around to configure the sections of the object that will stretch.
3. If you are creating multiple state skins these lines must be exact for each state. If they are not exact, the items contained within them in the Flex application may appear to move around. For example, text on a button will move from side to side if the scale-9 lines are different for each state of the skin.

Using the Flash SWF in Flex

Once you have the SWF, all you need to do is add a few lines to your Flex stylesheet to start using it in your application.

Button
{
  color: #FFFFFF;
  textRollOverColor: #FFFFFF;
  textSelectedColor: #FFFFFF;
  paddingTop: 2;
  paddingBottom: 0;
  fontWeight: bold;
  fontSize: 14pt;
  upSkin: Embed(source='/assets/button.swf', symbol='up');
  overSkin: Embed(source='/assets/button.swf', symbol='over');
  downSkin: Embed(source='/assets/button.swf', symbol='down');
  disabledSkin: Embed(source='/assets/button.swf', symbol='disabled');
  selectedUpSkin: Embed(source='/assets/button.swf', symbol='selectedUp');
  selectedOverSkin: Embed(source='/assets/button.swf', symbol='selectedOver');
  selectedDownSkin: Embed(source='/assets/button.swf', symbol='selectedDown');
  selectedDisabledSkin: Embed(source='/assets/button.swf', symbol='selectedDisabled');
}

Christopher Flash, Flex