View States and Transitions의 사용

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:states>
    <mx:State name="Advanced">
        <mx:AddChild relativeTo="{panel1}" position="lastChild">
            <mx:VBox x="20" y="160" width="160" height="80" id="myVBox">
                <mx:CheckBox label="Regular expression"/>
                <mx:CheckBox label="Case sensitive"/>
                <mx:CheckBox label="Exact phrase"/>
            </mx:VBox>
        </mx:AddChild>
        <mx:SetEventHandler target="{linkbutton1}" name="click" handler="currentState=''"/>
    </mx:State>
</mx:states>

 

/*

여기에서는, Transitions중에 2 개의 effect를 동시에 재생하므로, <mx:Parallel> 태그를 사용합니다. effect를 차례차례 재생하는 경우는, 대신에 <mx:Sequence> 태그를 사용합니다. 이 경우, 2 번째의 effect는 최초의 effect가 다 재생할 때까지 시작되지 않습니다.

*/

<mx:transitions>
    <mx:Transition id="myTransition" fromState="*" toState="Advanced">
  <mx:Parallel target="{myVBox}">
   <mx:WipeDown duration="500"/>
      <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="500"/>

  </mx:Parallel>
    </mx:Transition>
</mx:transitions>

 <mx:Glow id="glow" color="0x99ff66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>
 <mx:Button x="335" y="179" label="Button" mouseUpEffect="{glow}"/>
 <mx:Panel id="panel1" x="5" y="5" width="300" height="400" layout="absolute">
        <mx:Label x="20" y="70" text="Search"/>
        <mx:TextInput x="20" y="90"/>
        <mx:Button x="185" y="90" label="Go"/>
        <mx:LinkButton x="20" y="120" label="Advanced Options" click="currentState='Advanced'" id="linkbutton1"/>
    </mx:Panel>

</mx:Application>