Setting up a transition by using Fade, Move, RemoveAction and AddAction

Question

Hi,
I've been working on a transition for a few days now but I can't seem to get it to animate how I envisioned it. I'm pretty new at Flex so I decided to check with you guys here just to see if I'm approaching the issue from the right angle.
After fiddling with the transition in our application I decided to create a dummy project and try to create the animation there. I want a transition where a group of text inputs fades out and moves to the left followed by a group of text inputs fading in and moving from right to left to take the place of the first group.
I've defined two states, one where the first group of inputs is visible and one where the second group of inputs is visible:
<s:states>
<s:State id="A" name="A" stateGroups="groupA" />
<s:State id="B" name="B" stateGroups="groupB" />
</s:states>
Below are the components I'm trying to animate:
<s:VGroup id="mainGroup" paddingTop="500" gap="20" width="100%" height="100%">
<s:Group id="textSurroundingGroupA" height="50%" width="100%" >
<s:Rect id="rectA" width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1" />
</s:stroke>
</s:Rect>
<s:VGroup id="textGroupA" includeIn="groupA" width="100%" height="100%" >
<s:TextInput id="txt1" text="TEST1" />
<s:TextInput id="txt2" text="TEST2" />
<s:TextInput id="txt3" text="TEST3" />
</s:VGroup>
</s:Group>
<s:Group id="textSurroundingGroupB" height="50%" width="100%">
<s:Rect id="rectB" width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1" />
</s:stroke>
</s:Rect>
<s:VGroup id="textGroupB" includeIn="groupB" width="100%" height="100%" >
<s:TextInput id="txt4" text="TEST4" />
<s:TextInput id="txt5" text="TEST5" />
<s:TextInput id="txt6" text="TEST6" />
</s:VGroup>
</s:Group>
<s:Button label="Switch" click="button1_clickHandler(event)" /> // the event here is a quick function that switches this.currentState from A to B and vice versa, nothing else
<s:TextInput text="{this.currentState}" />
</s:VGroup>
As you can see, there are two VGroups which I've surrounded with rectangles so I can see what's going on as they animate. Also, the VGroups are surrounded by Groups because I've read online that you can't animate components within VGroup with <s:Move> because VGroup forces its layout over any of its components while ignoring animations.
Below is the transition:
<s:transitions>
<s:Transition fromState="A" toState="B">
<s:Sequence>
<s:Parallel duration="1400">
<s:Move target="{textGroupA}" xFrom="0" xTo="100" />
<s:Fade target="{textGroupA}" alphaFrom="1.0" alphaTo="0.0" />
</s:Parallel>
<s:RemoveAction target="{textSurroundingGroupA}" />
<s:AddAction target="{textSurroundingGroupB}" />
<s:Parallel duration="1400">
<s:Move target="{textGroupB}" xFrom="100" xTo="0" />
<s:Fade target="{textGroupB}" alphaFrom="0.0" alphaTo="1.0" />
</s:Parallel>
</s:Sequence>
</s:Transition>
</s:transitions>
I have a few problems with this transition:
1. The rectangles and surrounding groups stay visible and still exist after the state switches to B. This causes the B group to fade in and show below where the A group was. The effect we're trying to create is group B taking the place of group A. I thought RemoveAction triggers a RemoveChild() call on the displayList. If I removed "textSurroundingGroupA" and all its children, how can they still be visible and visually take up space?
2. Group B immediately pops into view when the transition is triggered and then animates. I presumed that AddAction would delay adding group B to the displayList until <s:AddAction> gets its turn in the transition sequence. Is this not the case?
What's the best way to get a transition like this? Are there any best practices? How can I easily use a reversed sequence of this animation to move from state B to A?
Sorry for the long post but I'm sure if anyone can help me it's you guys.
Thanks in advance!
Vladimir Kovač

Answer 1

Hi,
I've been working on a transition for a few days now but I can't seem to get it to animate how I envisioned it. I'm pretty new at Flex so I decided to check with you guys here just to see if I'm approaching the issue from the right angle.
After fiddling with the transition in our application I decided to create a dummy project and try to create the animation there. I want a transition where a group of text inputs fades out and moves to the left followed by a group of text inputs fading in and moving from right to left to take the place of the first group.
I've defined two states, one where the first group of inputs is visible and one where the second group of inputs is visible:
<s:states>
<s:State id="A" name="A" stateGroups="groupA" />
<s:State id="B" name="B" stateGroups="groupB" />
</s:states>
Below are the components I'm trying to animate:
<s:VGroup id="mainGroup" paddingTop="500" gap="20" width="100%" height="100%">
<s:Group id="textSurroundingGroupA" height="50%" width="100%" >
<s:Rect id="rectA" width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1" />
</s:stroke>
</s:Rect>
<s:VGroup id="textGroupA" includeIn="groupA" width="100%" height="100%" >
<s:TextInput id="txt1" text="TEST1" />
<s:TextInput id="txt2" text="TEST2" />
<s:TextInput id="txt3" text="TEST3" />
</s:VGroup>
</s:Group>
<s:Group id="textSurroundingGroupB" height="50%" width="100%">
<s:Rect id="rectB" width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1" />
</s:stroke>
</s:Rect>
<s:VGroup id="textGroupB" includeIn="groupB" width="100%" height="100%" >
<s:TextInput id="txt4" text="TEST4" />
<s:TextInput id="txt5" text="TEST5" />
<s:TextInput id="txt6" text="TEST6" />
</s:VGroup>
</s:Group>
<s:Button label="Switch" click="button1_clickHandler(event)" /> // the event here is a quick function that switches this.currentState from A to B and vice versa, nothing else
<s:TextInput text="{this.currentState}" />
</s:VGroup>
As you can see, there are two VGroups which I've surrounded with rectangles so I can see what's going on as they animate. Also, the VGroups are surrounded by Groups because I've read online that you can't animate components within VGroup with <s:Move> because VGroup forces its layout over any of its components while ignoring animations.
Below is the transition:
<s:transitions>
<s:Transition fromState="A" toState="B">
<s:Sequence>
<s:Parallel duration="1400">
<s:Move target="{textGroupA}" xFrom="0" xTo="100" />
<s:Fade target="{textGroupA}" alphaFrom="1.0" alphaTo="0.0" />
</s:Parallel>
<s:RemoveAction target="{textSurroundingGroupA}" />
<s:AddAction target="{textSurroundingGroupB}" />
<s:Parallel duration="1400">
<s:Move target="{textGroupB}" xFrom="100" xTo="0" />
<s:Fade target="{textGroupB}" alphaFrom="0.0" alphaTo="1.0" />
</s:Parallel>
</s:Sequence>
</s:Transition>
</s:transitions>
I have a few problems with this transition:
1. The rectangles and surrounding groups stay visible and still exist after the state switches to B. This causes the B group to fade in and show below where the A group was. The effect we're trying to create is group B taking the place of group A. I thought RemoveAction triggers a RemoveChild() call on the displayList. If I removed "textSurroundingGroupA" and all its children, how can they still be visible and visually take up space?
2. Group B immediately pops into view when the transition is triggered and then animates. I presumed that AddAction would delay adding group B to the displayList until <s:AddAction> gets its turn in the transition sequence. Is this not the case?
What's the best way to get a transition like this? Are there any best practices? How can I easily use a reversed sequence of this animation to move from state B to A?
Sorry for the long post but I'm sure if anyone can help me it's you guys.
Thanks in advance!
Vladimir Kovač