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, just add this to the skin (
<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
MovieClip (vector) instead.
I did it using
SpriteVisualElement which takes a few more lines to set up. You’ll have to add the
tag and add the external symbol to it through code (on the
addedToStage event). Here’s the full code of the skin file
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:
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.