Adobe Flex Button icon — change to greyscale and back

Question

Until now, my solution for a disabled button's icon was to have a second, greyscale icon and swap the icons based on the button's enabled value. Obviously this is very hackish.

I'd like to drill down into the button's icon and apply some kind of greyscale filter when the button is disabled and remove the filter when the button is re-enabled. I tried a couple of things, but I don't know enough about Flash graphics to really have a good idea about what to do.

Can anyone give me some pointers? Ideally, I'd like a Flex 3 solution (since most of my apps are still mx/spark mixed), but Flex 4 would be OK too.

Answer 1

That's a Flex3 solution.

mx:Button has icon as child inside itself. You can override updateDisplayList function and enabled setter to make this icon black-and-white.

In order to make an image black-and-white you need to average out the RGB values of color. Here is the formula from broadcasting and TV:

grey = R * 0.3 + b2 * 0.59 + b3 * 0.11

In your case you can use flash.filters.ColorMatrixFilter on icon, this filter transforms colors of the target. The black-and-white matrix for filter:

[ 0.3, 0.59, 0.11, 0,
  0.3, 0.59, 0.11, 0,
  0.3, 0.59, 0.11, 0,
  0,   0,    1,    0 ]

The last column specifies the summand to each color, so you can make your image more red, more green, sepia, etc.

The filter is applied to display component as follows:

var filter = Filter();
component.filters.push(filter); // doesn't work, and not because null pointer
component.filters = [filter];   // works

It's important to reassign array with new filters, as otherwise the component won't update it.

Answer 2

Use a skin! In flex 4 they made this much easier with the skin files, and being able to put per state properties. Here's one of ours that's somewhat similar, basically use states and filters to change the effect:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" width="28" height="28" xmlns:Common="UI.Common.*" xmlns:Controls="Core.Flex.Controls.*">
    <fx:Metadata>[HostComponent("Core.Flex.Controls.ToggleIcon")]</fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:Group left="2" right="2" top="2" bottom="2" useHandCursor="true" buttonMode="true">
        <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" alpha=".8" radiusX="6" radiusY="6" includeIn="up, disabled">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".56" quality="3" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <Controls:ColorRect width="24" height="24" FillColor="#1C648E" StrokeColor="#FFFFFF" StrokeWeight="2" radiusX="6" radiusY="6" includeIn="over">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".87" quality="3" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" radiusX="6" radiusY="6" includeIn="down, selectedStates">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".1" quality="3" highlightColor="#000000" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <s:BitmapImage source="{hostComponent.Icon}" left="2" top="2" right="2" bottom="2" alpha=".9" alpha.over="1" alpha.selectedStates="1"/>
    </s:Group>

</s:SparkSkin>