In Flex 4, how to create a transition for a styled property?

Question

I am trying to create a skin for the Flex 4 Spark Button. It has a background rectangle having its color controlled by the "chromeColor" style property. If I create a style declaration for it that has different color value for up and over states it works fine - the background color of the button changes when the mouse is over.

However, I would like to alter this behaviour so that the background color changes with a transition rather than immediately, while still being able to define the colors to change from and to with CSS pseudo-selectors. So I've added the declaration in the skin definition, but it doesen't work well.

It behaves like this:

• on roll over, the color changes immediately,
• if the mouse is rolled out before the roll over transition (which didn't really occur) ends (i.e. before the time set in the animation definition has passed), the transition works, and the color is tweened to the original, "up" value
• if the mouse is rolled out after that time, the change of color is instant

Here are the relevant code fragments:

Main.mxml:

<fx:Style>

    .blackSquare {
        skinClass: ClassReference("OverButtonSkin");
        chromeColor: #000000;
    }

    .blackSquare:over {
        chromeColor: #ABCDEF; 
    }

</fx:Style>
<s:Button styleName="blackSquare" />

OverButtonSkin.mxml:

<s:transitions>
    <s:Transition>
        <s:AnimateColor target="{bgFill}" duration="1000" />
    </s:Transition>
</s:transitions>

<s:Rect width="100%" height="100%">
    <s:fill>
        <mx:SolidColor id="bgFill" color="{getStyle('chromeColor')}"/>
    </s:fill>
</s:Rect>

Am I doing something wrong, or have I found a bug? I'm using Flex SDK 4.6.0.

Answer 1

I don't think pseudo selectors for states are valid Flex CSS (which is only a subset of standard CSS). What you can do though, is create your own CSS properties, like this:

s|Button {
    chromeColorUp: red;
    chromeColorOver: green;
    chromeColorDown: blue;
}

You can now use the Flex 4 state-based property assignment to achieve the desired effect.

<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor id="bgFill"
                      color.up="{getStyle('chromeColorUp')}"
                      color.over="{getStyle('chromeColorOver')}"
                      color.down="{getStyle('chromeColorDown')}" />
    </s:fill>
</s:Rect>

The Transition you already defined will now automatically play the color transition between red, green and blue when the Button changes its state.