State Transitions in Flex

Question

I have a flex component with 2 states - "" (ie no name / default) and "Transactional" - and a bunch of transitions to move from one state to the other.

There is a button to toggle between the two states which calls the following function when clicked

public function ToggleState():void
{
    if (this.currentState=="Transactional")
    {
        this.currentState = "";
    }
    else
    {
        this.currentState = "Transactional";
    }

}

Everything works as expected unless you click on the button whilst the component is changing from one state to the other. After that things start going strange - some components that would previously fade out, no longer disappear. Others no longer re-appear

I suspect this is because the transitions don't complete properly and so the properties of the components being animated are not properly reset to the correct values.

I tried to put in some checks to tell if the state is changing (and hence disable the button whilst the transitions are playing) but the only events I could find to listen for were

enterState
currentStateChange
currentStateChanging

all of which are fired before the transitions are complete.

Does anyone know of any other suitable events to listen for or a better way of doing the state change?

UPDATE:

Here is the mxml I am using for the transitions

<transitions>
    <mx:Transition fromState="" toState="Transactional">
        <mx:Sequence>
            <mx:Parallel>
                <mx:AnimateProperty target="{Controller}" property="y" fromValue="-60" toValue="-1" duration="600" />
                <mx:AnimateProperty target="{Environment}" property="y" fromValue="156" toValue="46" />
                <mx:AnimateProperty target="{ProfitAndLoss}" property="y" fromValue="156" toValue="126" />
                <mx:AnimateProperty target="{Summary}" property="y" fromValue="156" toValue="56" />
                <mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="266" toValue="246" />
                <mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="425" toValue="505" />
                <mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="1" />
            </mx:Parallel>
            <mx:AnimateProperty target="{Summary}" property="x" fromValue="42" toValue="256" />
        </mx:Sequence>
    </mx:Transition>
    <mx:Transition fromState="Transactional" toState="">
        <mx:Sequence>
            <mx:AnimateProperty target="{Summary}" property="x" fromValue="256" toValue="42" />
            <mx:Parallel>
                <mx:AnimateProperty target="{Controller}" property="y" fromValue="-1" toValue="-60" />
                <mx:AnimateProperty target="{Environment}" property="y" toValue="156" fromValue="46" />
                <mx:AnimateProperty target="{ProfitAndLoss}" property="y" toValue="156" fromValue="126" />
                <mx:AnimateProperty target="{Summary}" property="y" toValue="156" fromValue="56" />
                <mx:AnimateProperty target="{Assets_Container}" property="x" fromValue="246" toValue="266" />
                <mx:AnimateProperty target="{Liabilities_Container}" property="x" fromValue="505" toValue="425" />
                <mx:Fade target="{TransactionalBackgroundImage}" alphaFrom="0" alphaTo="0" />
            </mx:Parallel>
        </mx:Sequence>
    </mx:Transition>
</transitions>

Answer 1

The currentState property changes instantly, I'm pretty sure it's the transitions that cause the trouble (been there, done that ;-). If you click too fast, you have two concurrently running effects changing the same set of values, yielding an undefined result. Also, effectEnd event handlers on your effects will fire in the middle of another running effect. You might try the end() method on your effect instances to immediately end an effect before starting the next, this also sets all attributes to their final values and triggers effectEnd. If that does not help, can you post some of your effect code?