Flex入門～トランジション編～だじぇ

トランジションはビューステートが変更されるときに、どのように変化していくかを指定する機能です。

ビューステートを変更すると、トランジションを指定しない場合は一瞬で状態が切り替わりますが、トランジションを指定しておけば、ジワジワ～とかウニョウニョ～といった感じに変化していきます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:states>
    <!-- 登録用ビューステート -->
    <mx:State name="Regitster">
      <!-- タイトルを「ユーザ情報」に変更 -->
      <mx:SetProperty target="{loginPanel}" name="title" value="ユーザ登録" />
      
      <!-- 「パスワード確認」テキストボックスを追加 -->
      <mx:AddChild relativeTo="{loginForm}" position="lastChild">
        <mx:FormItem label="パスワード確認">
          <mx:TextInput displayAsPassword="true" width="300" />
        </mx:FormItem>
      </mx:AddChild>
      
      <!-- コントロールバーのリンクとボタンを削除 -->
      <mx:RemoveChild target="{registerLink}" />
      <mx:RemoveChild target="{loginBtn}" />
      
      <!-- コントロールバーに「登録」「キャンセル」ボタンを追加 -->
      <mx:AddChild relativeTo="{ctrlBar}" position="lastChild">
        <mx:HBox>
          <mx:Button id="regBtn" label="登録" width="120" />
          <mx:Button id="cancelBtn" label="キャンセル" click="currentState=''" width="120" />
        </mx:HBox>
      </mx:AddChild>
    </mx:State>
  </mx:states>
  
  <mx:transitions>
    <!-- デフォルトビューステート⇒Registerビューステートのトランジション -->
    <mx:Transition fromState="*" toState="Regitster">
      <mx:Parallel id="t1" target="{loginPanel}">
        <mx:Resize duration="400"></mx:Resize>
      </mx:Parallel>
    </mx:Transition>
    
    <!-- Registerビューステート⇒デフォルトビューステートのトランジション -->
    <mx:Transition fromState="Regitster" toState="*">
      <mx:Parallel id="t2" target="{loginPanel}">
        <mx:Resize duration="2000"></mx:Resize>
      </mx:Parallel>
    </mx:Transition>
  </mx:transitions>
  
  <mx:Panel title="ログインフォーム" id="loginPanel">
    <mx:Form id="loginForm">
      <mx:FormItem label="ユーザID">
        <mx:TextInput width="300" />
      </mx:FormItem>
      <mx:FormItem label="パスワード">
        <mx:TextInput displayAsPassword="true" width="300" />
      </mx:FormItem>
    </mx:Form>
    <mx:ControlBar id="ctrlBar">
      <mx:LinkButton id="registerLink" label="ユーザ登録" textDecoration="underline" click="currentState='Regitster'" />
      <mx:Spacer width="100%" />
      <mx:Button id="loginBtn" label="ログイン" width="120" />
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

TransitionタグのfromStateとtoStateにビューステートの変更を記述し、合致するトランジションが使用されます。

なので、デフォルト⇒Registerでは0.4sec、Register⇒デフォルトでは2secでリサイズしています。

ﾉｼ