DisableIcon for Buttons

Assigning an icon to a button is a fairly trivial task in Flex. It is so easy in fact that I use it quite often. At the same time buttons often will become disabled depending on the state of the application and this then leads to a problem. Although the button will not respond to user interaction, the icon on the button itself will still appear the same, thus the user might think that the button is enabled when it fact it is not.

In order to resolve this you must use the disabledIcon style of the button to specify a "greyed-out" version of your icon that will be displayed when the button is disabled (refer to Flex API). Then the question arises how do you get a "greyed-out" look of your icon to use on your button? What I did was use Fireworks to set the saturation level of the original icon to -100. I did so by going into the following menu:

Filters > Adjust Color > Hue/Saturation

You will get a window that will pop open and allow you to change the Saturation level to -100. Then save the icon with a new name and use it in your Flex application as so:

icon="@Embed('/assets/ok.png')"

disabledIcon="@Embed('/assets/ok_disabled.png')"