I’m trying to learn a little bit of Flex 4 development. I’ve done a lot of Flash/AS3 since more than a year now but I haven’t really gotten into Flex yet. From what I learned in a day, they did a lot of improvements in separating the logic from the presentation (design). Most of this is done through skins (i.e. separate mxml files defining how a control will look). Skins act just like a container; it can contain shapes and additional controls. If applied to a control, that control will inherit all the shapes and controls from that skin.

My first annoying stumbling block was trying to add an exported symbol (e.g. MovieClip, Sprite) from an external swf to a skin. The skin will be applied to a button and should apply a background using the exported symbol. There are two ways that I’ve come up with: using BitmapImage or SpriteVisualElement.

For BitmapImage, just add this to the skin (<s:SparkSkin> tag):

<s:BitmapImage source="@Embed('assets/assets.swf#CaptureButton')" />


The above will add a bitmap version of the exported symbol named “CaptureButton” from the SWF file named “assets/assets.swf” located in the project directory. The problem with bitmaps is they look horrible when scaled up so I wanted to add the CaptureButton as a Sprite or MovieClip (vector) instead. I did it using SpriteVisualElement which takes a few more lines to set up. You’ll have to add the SpriteVisualElement tag and add the external symbol to it through code (on the addedToStage event). Here’s the full code of the skin file using SpriteVisualElement:

The SpriteVisualElement takes more lines to setup than BitmapImage. I hope that this is just a lack of knowledge on my part. There might be a way to add a Sprite/MovieClip with just 1 tag. For now, this works great and I’m fine with that.

Assigning the skin to a button should look like this:

Update 2010-08-26

After a night’s sleep I found it. Crap. It was this easy:

Face palm. Excuse me while I bang my head against the wall.