Spark Button and ButtonBar with icons and rollover states

The Flash Builder Spark Button control doesn’t come with an icon property out of the box. So you have to extend the Button class and add your own. I created a Spark Skin to add two icons to the Button control, one for the up/disabled state and one for the over/down states.

The Spark ButtonBar control does accommodate an icon, but there is no way to change the icon when the selected index changes. So to change the icon of the selected item, I built a Spark Skin for the ButtonBarButton and the ButtonBar to accomplish the job. Here is the running example of the buttons in action:

IconButtons.swf

The code of the IconButton class and the IconButtonSkin mxml file that accompanies the class:

https://gist.github.com/946886

And the code of the IconButtonBarButton class and the IconButtonBarSkin and IconButtonBarButtonskin mxml

https://gist.github.com/947130

You can also download the IconButtons Flash Builder Project.

-Mr

4 Comments

  1. Thanks so much for the post. However I am having a difficult time getting labels under the icons to show up. Any ideas?

    Thanks,
    Carrie

      1. This happens because the call to getCurrentSkinState sometimes happens before the images are loaded. The fix above works because for some reason, the calls to getCurrentSkinState happens multiple times during the applications initialisation so the second or third time around the images are all loaded.. Obviously not an ideal fix.

Comments are closed.