<?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"
viewSourceURL="srcview/index.html"
width="400">
<s:states>
<s:State name="s1"/>
<s:State name="s2"/>
</s:states>
<s:transitions>
<s:Transition fromState="s1" toState="s2" autoReverse="true">
<s:Sequence>
<s:Move target="{button}"/>
<s:AddAction target="{panel}"/>
<s:Scale target="{panel}" scaleXFrom="0" scaleYFrom="0"
autoCenterTransform="true"/>
<s:AddAction target="{button12Group}"/>
<s:AddAction target="{button2}"/>
<s:Move target="{button2}" xFrom="-150" disableLayout="true"/>
<s:AddAction target="{button1}"/>
<s:Move target="{button1}" xFrom="-150" disableLayout="true"/>
<s:AddAction target="{button34Group}"/>
<s:Fade target="{button34Group}"/>
</s:Sequence>
</s:Transition>
<s:Transition fromState="s2" toState="s1" autoReverse="true">
<s:Sequence target="{button}">
<s:Fade target="{button34Group}"/>
<s:Move target="{button1}" xTo="-150" disableLayout="true"/>
<s:RemoveAction target="{button1}"/>
<s:Move target="{button2}" xTo="-150" disableLayout="true"/>
<s:RemoveAction target="{button2}"/>
<s:RemoveAction target="{button12Group}"/>
<s:Scale target="{panel}" scaleXTo="0" scaleYTo="0"
autoCenterTransform="true"/>
<s:RemoveAction target="{panel}"/>
<s:SetAction target="{panel}" property="scaleX" value="1"/>
<s:SetAction target="{panel}" property="scaleY" value="1"/>
<s:SetAction target="{panel}" property="x" value="0"/>
<s:SetAction target="{panel}" property="y" value="0"/>
<s:Move target="{button}"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Button id="button" label="Toggle State" x.s2="310"
click="currentState = (currentState=='s1')?'s2':'s1'"/>
<s:Panel id="panel" title="A Panel" width="300" height="300" includeIn="s2"/>
<s:HGroup width="300" y="310" id="button12Group" includeIn="s2">
<s:Button id="button1" label="Button 1" width="50%" includeIn="s2"/>
<s:Button id="button2" label="Button 2" width="50%" includeIn="s2"/>
</s:HGroup>
<s:HGroup width="300" y="330" id="button34Group" includeIn="s2">
<s:Button id="button3" label="Button 3" width="50%"/>
<s:Button id="button4" label="Button 4" width="50%"/>
</s:HGroup>
</s:Application>