Andy Hulstkamp

about creating online experiences

29. April 2010

Getting Vector Graphics into Spark Skins

Getting Vector Graphics into Spark Skins

It was great 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 was that the Spark Button does not have an icon property compared to the Halo counterpart.

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

Using 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.

Using 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.

Using 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.

further reading

Gumbo Mixer Slider

A first look at Skinning and custom Components in Gumbo (Flex 4). Turns a VSlider into a Mixer-Slider.

Customize the Spark TextInput Component in Flex 4 (Gumbo). Adding focus and Transitions.

A custom Flex Spark Text-Input.