Panel Wipe

Source Code:

<?xml version="1.0" encoding="utf-8"?>


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"


xmlns:s="library://ns.adobe.com/flex/spark"


xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

<s:states>
<s:State name="One"/>
<s:State name="Two"/>
</s:states>

   <!-- Define a transition for all state changes.-->


<s:transitions>


<s:Transition id="t1" fromState="*" toState="*" >


<s:Sequence targets="{[pnl1,pnl2]}">


<s:Sequence id="sequence1" filter="hide" >


<s:Wipe direction="right" duration="1000"/>


</s:Sequence>


</s:Sequence>


</s:Transition>

</s:transitions>


<s:VGroup width="50%" height="70%" horizontalAlign="center">


<s:Group id="panelmaintain" width="100%" height="100%">


<s:Panel id="pnl1" title="Panel One" width="100%" height="100%"


click="currentState='Two'" visible="true" visible.Two="false">



<s:Label fontSize="24" text="One"/>


<s:Image includeIn="One" x="111" y="119"source="images/red.png"/>


</s:Panel>


<s:Panel id="pnl2" title="Panel two" width="100%"


height="100%"click="currentState=''"


visible="false" visible.Two="true">


<s:Label fontSize="24" text="Second"/>


<s:Image includeIn="Two" x="52" y="52"


source="@Embed(source='/images/blue.png')" />

</s:Panel>


</s:Group>


</s:VGroup>


</s:Application>