Question

No matter what I do, my transitions won’t work as expected. I’ll explain the issues and then place the code at the bottom.

There are 4 States in my application.

goButton is present only in "State1" and "State2".

State1 and State2 are nearly the same, but the y property of the goButton is diffrent in each. So I’ve made a little transition that moves the Button back and forth. Good so far.

However, both "State1" and "State2" can also be Transitioned to "State3". But there’s no goButton in "State3", so I’ve used the <s:Fade> and the <s:RemoveAction> effects to get rid of it.

The Transition from "State1" to "State3" works ok, but the Transition from "State2" to "State3" doesn’t.

When I attempt to call the transition from "State2" to "State3" the goButton flickers/flashes quickly back to the position where it was in "State1" and only the the Transition to "State3" actually takes place.

this is my goButton

<s:Button id="goButton" includeIn="State1,State2" x="319" y="212" width="33" height="33"
click="goButton_clickHandler()"
icon="@Embed('file:///C:/Users/Felipe/Downloads/1317358341_magnifier_medium.png')"
toolTip="go"
x.State2="319" y.State2="275"/>

and these are the relevant Transitions:

<s:Transition fromState="State1" toState="State3" >
            <s:Sequence>
                <s:Fade duration="700" targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,goButton,addNewLessonButton]}" />
                <s:RemoveAction targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,goButton,addNewLessonButton]}" />
                <s:AddAction targets="{[lessonsDataGrid,backButton]}" />
                <s:Fade duration="700" targets="{[lessonsDataGrid,backButton]}" />
            </s:Sequence>
        </s:Transition>

        <s:Transition fromState="State2" toState="State3" >
            <s:Sequence>
                <s:Fade duration="700" targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,tagsLabel,tagsTextInput,goButton,addNewLessonButton]}" />
                <s:RemoveAction targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,tagsLabel,tagsTextInput,goButton,addNewLessonButton]}" />
                <s:AddAction targets="{[lessonsDataGrid,backButton]}" />
                <s:Fade duration="700" targets="{[lessonsDataGrid,backButton]}" />
            </s:Sequence>
        </s:Transition>

My guess is that Flex always (don’t ask me why) moves the component back to its original position before performing a Transition. I’ve tried a different version of this app in which I set the x and y properties of my goButton to what they are in "State2" and then set x.State1 = something else and y.State1 = something else and guess what happens? I get the exact inverse problem! Transition from "State2" to "State3" is ok but the Transition from "State1" to "State3" doesn’t work, as the goButton flickers back to its original position (now it is the position in "State2") and only then does the Transition takes place.

Man this is driving me crazy.
__________________//______________________________
__________________ //____________________________

EDIT

I’ve added a link to the app >>>>HERE<<<<<< You can see the issue by selecting the option ‘selected tags’ and then clicking the ‘goButton’ . You’ll see what I’m talking about. View source is available!!!

Answer 1

It looks like it’s looking for an x,y for the goButton in State3. If you don’t set one explicitly, it falls back to the default. Adding

x.State3="{this.x}" y.State3="{this.x}"

to <s:Button id="goButton" ... /> fixed it for me.