September 12th, 2008 by Kyle
Tags: Flex, state, states, transition, transitions
Posted in: ActionScript, Flex
Here is a simple sample demonstrating how to achieve a “reverse transition” when using states.
The key is actually setting the target or targets array for the sequence or parallel transition.
Although from the Flex 2 docs, the following are good resources (and in fact the setting of the targets is pointed out in the comments on the docs in the first link:)
http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000103.html
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=transitions_080_03.html
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Here is the app code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="currentState=”" viewSourceURL="srcview/index.html">
<mx:states>
<mx:State name="the_wrong_way">
<mx:AddChild relativeTo="{hb}" >
<mx:Panel paddingTop="0" id="pnl_o">
<mx:Button label="Close" click="currentState=”" />
</mx:Panel>
</mx:AddChild>
</mx:State>
<mx:State name="the_right_way">
<mx:AddChild relativeTo="{hb}">
<mx:Panel id="pnl" paddingTop="0" >
<mx:Button label="Close" click="currentState=”" />
</mx:Panel>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="the_wrong_way" >
<mx:Move target="{pnl_o}" xFrom="-150" xTo="125" duration="1500"/>
</mx:Transition>
<mx:Transition fromState="the_wrong_way" toState="*">
<mx:Sequence>
<mx:Move target="{pnl_o}" xFrom="125" xTo="-150" duration="1500"/>
<mx:RemoveChildAction/>
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="*" toState="the_right_way" >
<mx:Move target="{pnl}" xFrom="-150" xTo="125" duration="1500"/>
</mx:Transition>
<mx:Transition fromState="the_right_way" toState="*">
<mx:Sequence targets="{[pnl]}" >
<mx:Move target="{pnl}" xFrom="125" xTo="-150" duration="1500"/>
<mx:RemoveChildAction/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:HBox id="hb" height="75" width="340" borderStyle="solid" borderThickness="5"
verticalScrollPolicy="off" horizontalScrollPolicy="off">
</mx:HBox>
<mx:Button label="the_wrong_way" click="currentState=’the_wrong_way’" width="120" />
<mx:Button label="the_right_way" click="currentState=’the_right_way’" width="120" />
</mx:Application>
