Andy Hulstkamp

about creating online experiences

20. July 2009

Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)

For the past couple of days I’ve had a look at creating Spark Icon Buttons. In this post I’ve created an FXG Icon Button with some transitions, leveraging pseudo selectors for states. The Icon was ‘hardcoded’ into the skin. For another Icon I would need to duplicate the skin and introduce another graphic. Not exactly generic. There are other ways to bring graphics into Spark Skins but none of them work with FXG Elements directly.

Advanced Flex Spark Buttons

What I want is:

  • work with FXG Graphic Elements for simpler manipulation and scaling
  • easily export the FXG-Definitions for the icons from a tool and/or be able to change them in FB directly
  • colorize the icons based on a color style-property and do this per state
  • change the icons based on a style-property and do this per state
  • change icons at runtime
  • scaling effect on icon
  • have ONE generic skin, so no duplicates for different icons are necessary

Most of the trouble with generic skins comes from the fact that there is no way to access the FXG Library-Definitions at run-time (as far as I know) - like getting an instance of a symbol in the library, the way we had in flash. Here’s a hack but I’d rather not use it.

After some headaches I finally managed to get a solution I can live with:

Demo

You’ll find the source at the end of this post.

The solution regarding the work flow mainly comes down to

  • Create Icons in Illustrator and convert them to symbols. One symbol per icon, name them. Save from Illustrator as ai.
  • Load the Illustrator-File in Flash Catalyst and go to the Code-View
  • You’ll see that FC creates mxml-files with the graphical content per icon
  • Copy these files over to Flex-Builder or set the source path so that the catalyst export is in your flex project

In the code there are some key concepts:

  • In the skin there is a group where the icons will get attached at run time
  • The skin listens for state changes and creates an instance of an icon component based on the iconName that is passed via styles.
  • There is some caching involved, so that there will be no instantiation when an icon/state has allready been created
  • The Icons get colorized based on a style property and - if defined - per state.
  • The colorization occurs recursively, diving through the nested elements and setting the color of any nested FilledElement
  • There is some code involved that manages the scaling of the new instances for the transitions
  • Icons, colors and baseColors can be set via styles (and using pseudo selectors for over and down states)

Source updated to Flex 4 release sdk.

Note: As a variation to instantiate the icons you could put all the FXG-Definition in the Skin inside the library and create them at runtime using the hack mentioned at the beginning of this post.

further reading

Using Magnolia CMS

First experience with Magnolia CMS. Pros and cons on using Magnolia CMS for the relaunch of Montanara.

UX - Inline Form Validation revisited - the while condition

Suggests a tolerated state for Inline Validation while the user is typing.