Getting Vector Graphics into Spark Skins

It was funny to see how many examples of Spark Icon Buttons have shown up in the past few days. Andy mcintosh did an example here, Ben another one here, I did one myself here. While all were using a slightly different approach the motivation behind them was probably, that the Spark Button does not have an icon property compared to the Halo coutnerpart.

Out of the box there are basically three ways to get graphics into a Spark skin.

Use Image:

Use an Image component in the skin of the button and embed the icon into a style that is used by the button (Using a property and fetching the graphic from there is another variation).

.btnClass {
symbol: Embed(source='../assets/crossSymbols.swf', symbol='addCross');
}
...
<mx:Image id="symbol"  source="{hostComponent.getStyle('symbol')}" />
...
or
...
<s:BitmapImage  source="{hostComponent.getStyle('symbol')}" />

pros:

• Can use bitmaps or vectors
• When using vectors, scaling effects of the graphic works well
• possible loading of graphics at run time
• reusable skin for different graphics

cons:

• Overhead by using Halo Component in the skin
• No FXG defined graphics, if you want them.

Use Spark BitmapImage

Works the same way as above, but uses an BitmapImage in the skin:

pros:

• Can use bitmaps or vectors
• reusable skin for different graphics

cons:

• Vectors are internally drawn to a bitmap an treated accordingly
• Scaling effects work not so well since bitmaps are used
• No FXG defined graphics, if you want them.

Use FXG GraphicElements

The Graphics are defined by FXG Graphic Elements directly.

pros:

• Uses FXG (with possible bi-directional tooling support)

cons:

• Skins are not reusable for different graphics, graphic is ‘hardcoded’ into the skin

Personally, I’d love to use FXG. With Flash Catalyst, the FXG-Support in Illustrator et al. and the obvious commitment of Adobe to push FXG as the XML-based graphics interchange format for the Flash Platform, I guess it will be easier and more transparent to work with FXG when it comes to vector graphics. Exporting all the stuff to swfs or swcs is ok, but i’d rather not.

Now, creating a spark skin for every OK-, Submit- and Cancel IconButton etc. just won’t cut it. Sure you can copy the skin over but when you have lots of transitions and stuff and your client asks for a change you gonna have to repeatedly change the skins. Not very funny.

All that’s needed is a way to access the Library-definitions of FXG at runtime. Up until now, I haven’t found any, except for the hack I posted here.

After banging my head against a wall again and again, I’ve finally found another way I can live with.

Follow any responses through RSS 2.0 feed. Leave a response, or trackback from your own site.