＠IT
アジャイル/DevOps
HTML5 + UX
FlexアプリにFlashの視覚効果を取り入れるには？：...

FlexアプリにFlashの視覚効果を取り入れるには？：現場で使えるFlex実践テクニック（2）（2/2 ページ）

» 2007年07月19日 00時00分公開

[成瀬勉，クラスメソッド]

前のページへ 1|2 　　　　　　

ステートを移行する際の視覚効果：トランジション

　トランジションとは、ビューステートが、あるステートから別のステートへ移行する際の視覚効果です。

　以下は、前回と同じステートのサンプルです。コンボボックスで選択した項目に応じてステートが変化します。

　今回は、さらにトランジションを指定します。コード上ではApplication直下に<mx:transitions>タグを記述します。また、<mx:transitions>タグには<mx:Transition>タグを複数記述できます。

TransitionSample.mxml

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

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

                              layout="vertical">

              

                  <mx:Script>

                  <![CDATA[

                      private function selectForm(event:Event):void{

                          switch(event.currentTarget.selectedItem.label){

                          case "カレー":

                              currentState = "curry";

                              break;

                          case "ハンバーグ":

                              currentState = "hamburger";

                              break;

                          }

                      }

                  ]]>

                  </mx:Script>

              

                  <mx:states>

                      <mx:State name="curry">

                          <mx:AddChild relativeTo="{form1}" position="lastChild">

                              <mx:FormItem label="カレーの具は？">

                                  <mx:CheckBox label="チキン" />

                                  <mx:CheckBox label="ポーク" />

                                  <mx:CheckBox label="ビーフ" />

                                  <mx:CheckBox label="ジャガイモ" />

                              </mx:FormItem>

                          </mx:AddChild>

                      </mx:State>

                      <mx:State name="hamburger">

                          <mx:AddChild relativeTo="{form1}" position="lastChild">

                              <mx:FormItem label="焼き加減は？">

                                  <mx:RadioButton label="レア" />

                                  <mx:RadioButton label="ミディアム" />

                                  <mx:RadioButton label="ウェルダン" />

                              </mx:FormItem>

                          </mx:AddChild>

                      </mx:State>

                  </mx:states>

              

                  <mx:transitions>

                      <mx:Transition fromState="*" toState="curry">

                          <mx:Move yFrom="0" yTo="{form1.y}" target="{form1}" />

                      </mx:Transition>

                      <mx:Transition fromState="*" toState="hamburger">

                          <mx:Iris target="{form1}" />

                      </mx:Transition>

                  </mx:transitions>

              

                  <mx:Form id="form1">

                      <mx:FormItem label="好きな食べ物は？">

                          <mx:ComboBox change="selectForm(event)" 

                                       prompt="選択してください">

                              <mx:dataProvider>

                                  <mx:Object>

                                      <mx:label>カレー</mx:label>

                                  </mx:Object>

                                  <mx:Object>

                                      <mx:label>ハンバーグ</mx:label>

                                  </mx:Object>

                              </mx:dataProvider>

                          </mx:ComboBox>

                      </mx:FormItem>

                  </mx:Form>

                </mx:Application>

　<mx:Transition>タグでは、どのステートからどのステートへ移行したときに実行されるかをfromState、toStateでステートのnameを指定します。*（ワイルドカード）を指定することですべてのステートを対象とすることが可能です。

　<mx:Transition>タグには、実際のエフェクトを記述します。ここでは、エフェクトの対象とするコンポーネントをtargetにidで指定しています。複数のコンポーネントをエフェクトの対象とするにはtargetsに配列で指定します。

サンプル3　コンボボックスを選択すると、「カレー」と「ハンバーグ」でステートの動きが変わる

エフェクトの変化の速さを変える：イージング

　通常では、エフェクトの変化の度合いは一定ですが、イージングを使うと、だんだん加速しながら目的の値まで変化したり、逆に減速しながら変化したり、途中でいったん戻ったりしながら変化したりと、複雑な変化を指定できます。

　イージングを使うには、エフェクトのeasingFunctionに変化の仕方を定義した関数を指定します。

■ ボタンをプルプル弾ませてみよう！

BehaviorSample3.mxml

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

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

                              layout="vertical">

              

                  <mx:Resize id="resize" widthFrom="80" widthTo="120" 

                             heightFrom="80"heightTo="120" 

                             easingFunction="{Bounce.easeOut}" />

              

                    <mx:Button mouseDownEffect="resize" width="80" height="80" />

                  

                        <mx:Script>

                          <![CDATA[

                                import mx.effects.easing.Bounce;

                              ]]>

                                </mx:Script>

                              </mx:Application>