Flex state transition that resizes a TitleWindow by animating - apache-flex

Question

I have a title window based component in Flex 4 that has two states: A & B.
The title window is wider in state B.
I want the title window to animate when I switch states by using the Resize effect to widen the component.
What's the correct way to do this? Should define state specific width for the component or should I just run a transition effect that does this? The first option seems cleaner to me, but I can't figure out how to tell flex to use an effect and figure out by itself how much to resize the component..

Answer 1

Assaf, You can use tween, Parallel, Move and Resize properties for the same.

Answer 2

I implemented something similar to your request: I needed to add a transition effect, (Resize effect), between two states included in a TitleWindow component. This is how I did it:
My two states:
<s:states>
<s:State name="State1"/>
<s:State name="myInfoState"/>
</s:states>
My transition effect:
<s:transitions>
<s:Transition id="myTransition" fromState="*" toState="myInfoState">
<s:Parallel target="{this}">
<s:Resize duration="400"/>
</s:Parallel>
</s:Transition>
</s:transitions>
Note the {this} property. This is because my TitleWindow doesn't have an id.
Finally, you just need to call your currentState declaration as always:
<s:Button click="currentState = 'myInfoState'"/>
I guess that the keyword is {this} instead of the element's id.
Greetings from Pachuca, México!