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

June 20, 2009. Posted by Andy Hulstkamp under Actionscript 3 FXG Gumbo (Flex 4 beta)
Keywords: , , , , , , ,

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.

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:

Click here for a test.

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)

Here’s the source (sdk 4.0.0.7282)

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.

« Previous post
Next post »


Share/Save/Bookmark

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

10 Responses to “Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)”

  1. Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo) | Web 2.0 Designer Says:
    June 20th, 2009 at 9:04 pm

    [...] Original post: Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo) [...]

  2. AH: Spark Icon Button with Gradient effects and Filter animation, colorized by styles. Flex 4 (Gumbo) - Andy Hulstkamp. Seedlings for RIAs Says:
    June 21st, 2009 at 7:25 pm

    [...] Check this example for a more advanced and generic [...]

  3. Flex 4 skinning ignores developer needs | Says:
    August 3rd, 2009 at 9:56 pm

    [...] noticed a number of people here (Andy McIntosh), and here (Andy Hulstkamp) working with button icon skins. The main reason for this is that Adobe saw fit to remove the icon [...]

  4. WS-Blog » Quick tip (Flex 4): Using generic skin classes Says:
    August 10th, 2009 at 6:29 pm

    [...] “Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)” by Andy Hulstkamp [...]

  5. Yarin Says:
    September 4th, 2009 at 9:58 pm

    Huge! Thank you

  6. carmine Says:
    September 6th, 2009 at 3:30 am

    Andy, I am losing my mind here. Why can’t I do this:

    Why import graphics from catalyst if you can’t use them easily? This is a one time interaction for one project, I don’t need to skin! I will continue reading your examples, but if you have some quick enlightenment, it would be much appreciated.

  7. Andy Hulstkamp Says:
    September 6th, 2009 at 5:31 pm

    Carmin

    I’m not sure if I know what you mean. If you don’t need to skin then you can simply use the default spark-buttons.

    The Spark-Button comes without an icon, so if you want one, then you would need to extend the component or the skin.

    If you don’t need a generic way to have your Icon-Buttons you can embedd the FXG-Definitions right into the skin (so you would have one - mostly duplicated - skin per Icon-Button). If you wan’t a more generic approach, you have to externalise the Icon-Graphic. I wanted to use FXG for this and this post looks into this.

    To add graphics you could also simply rely on bitmap-based images or vectors in a swf or swc like in flex 3. Have a look at this post .

    Now, Adobe has a clear dedication to FXG. The Flex 4 api and components are clearly laid out to use with FXG, the whole Product-Suite has FXG as a new Export-Format and Flash-Catalyst use FXG.

    Personally I like to have an editable vector-graphics format right in Flash-Builder. With FXG, once the Export is done, I can esily edit some aspects of the graphics right in the IDE - and using FXG gives me advantages when using some tags (transitions) or working with the graphics-api in Flex 4. That’s why I used the round-trip via FC (which gives me nice mxml-components with FXG that I can use right away.)

    Now, Flash-Catalyst and Flex 4 is not quite where I’d love it to be. I think we need a way to export FXG-Definitions to a library and load and access them at runtime. Adobe is not there yet, but I’m pretty sure that this will be added with priority in later versions.

    Even with this limitations I’m gonna use FXG wherever I can but I think it’s perfectly ok to use other formats if this suits the task.

    Does this answer your question?

  8. carmine Says:
    September 9th, 2009 at 4:22 am

    s:Button click=”button1_clickHandler(event)”
    s:BitmapImage id=”tete_coq” source=”@Embed(’/tete_coq.png’)” /
    /s:Button

    Sorry, the code in my last comment got eaten. Basically, why can’t I skin a button by putting a BitmapImage within its tags?

    I appreciate the explanation though. I want to use my psds and ais too! This skinning thing seems heavyhanded though.

  9. Nikos Says:
    November 7th, 2009 at 2:58 pm

    wow so cool, thanks

  10. Flex 4 Skin – Links « iuricmp Says:
    February 24th, 2010 at 10:59 pm

    [...] http://www.hulstkamp.com/2009/06/20/advanced-fxg-spark-icon-buttons-with-one-generic-skin-in-flex4-g... Deixe um Comentário [...]

Leave a Reply