Flex 4 マスターシリーズ #09 Flex 4 エフェクト
必要条件
ユーザーレベル
すべて
必要な製品
- Flash Builder 4 (Download trial)
Flex 4 マスターシリーズ 連載記事一覧
- #01 MXML 2009
- #02 Flash Builder 4 新機能
- #03 Flex 4 ステート
- #04 Flex 4 CSS
- #05 Spark コンポーネント
- #06 データ中心型開発（DCD）Part1
- #07 Spark Skining part 1
- #08 Spark Skining part 2
- #09 Flex 4 エフェクト
- #10 Flex 4 Spark Layouts
- #11 FlexUnit 4
- #12 データ中心型開発（DCD）Part2
はじめに
このチュートリアルでは、Flex 4 から新しく採用されたエフェクトについて紹介します。
Animate クラス
Flex 4 のエフェクトは、すべて Animate クラスを基に構築されています。( Animate クラス自体は、 Effect クラスのサブクラスです。 )
<fx:Declarations>
<s:Animate id="animate" target="{button}">
<s:SimpleMotionPath property="x" valueFrom="0" valueTo="480" />
</s:Animate>
</fx:Declarations>
<s:Button id="button" click="animate.play()" />
サンプルコード 01. Animate の使用例 1
Animate クラスの target プロパティに、エフェクトの対象となるコンポーネントを指定して、アニメーションさせたいコンポーネントのプロパティ名と、そのプロパティに定義する値を指定した SimpleMotionPath タグを Animate タグで囲みます。
上記サンプルコードの例では、エフェクトを再生すると、ボタンの x 座標値が 0 から 480 まで移動します。なお、Animate クラスは、非ビジュアルエレメントなので、Declarations タグの中に含まれている必要があります。
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : BasicEffectSample01.fxp )
サンプル 01 : BasicEffectSample01.swf
Animateクラスは、SimpleMotionPath タグを複数定義することによって、複数のプロパティを操作することも可能です。( サンプルプロジェクト : BasicEffectSample02.fxp )
<fx:Declarations>
<s:Animate id="animate" target="{button}">
<s:SimpleMotionPath property="x" valueBy="50" />
<s:SimpleMotionPath property="y" valueTo="260" />
<s:SimpleMotionPath property="width" valueFrom="150" valueTo="50" />
</s:Animate>
</fx:Declarations>
<s:Button id="button" click="animate.play()" />
サンプルコード 02. Animate の使用例 2
上記サンプルコードの例では、x プロパティ、 y プロパティ、 width プロパティに対して、値を指定しています。
y プロパティの指定では、valueTo プロパティのみを指定して、valueFrom プロパティの値は、ターゲットのプロパティの現在の値から暗黙的に割り当て、x プロパティの指定では、valueBy プロパティを使用することで、絶対値ではなく相対値として値を指定しています。
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : BasicEffectSample02.fxp )
サンプル 02 : BasicEffectSample02.swf
基本エフェクト
使用頻度の高いエフェクトを扱いやすくするために、Animate クラスのサブクラスには、さまざまなクラスが用意されています。これらのエフェクトクラスを使用すれば、簡単に目的の振る舞いを指定できるようになります。
たとえば、Animate クラスのサブクラスである Move エフェクトでは、アニメーションの開始地点、終了地点、移動時間の値を指定することが可能です。( Animate クラスが期待する SimpleMotionPath オブジェクトが Move クラスの内部で作成され、ターゲットオブジェクトのxプロパティとyプロパティにアニメーションが適用されます。 )
次のサンプルは、前のセクションで説明したものと同じボタンアニメーションを、Move エフェクトを使用して実現したものです。
<fx:Declarations>
<s:Move id="animate" target="{button}" duration="1000"
xFrom="0" xTo="480"
yFrom="135" yTo="270" />
</fx:Declarations>
<s:Button id="button" width="150" height="30" click="animate.play()" />
サンプルコード 03. Move の使用例
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : MoveEffectSample.fxp )
サンプル 03 : MoveEffectSample.swf
Resizeエフェクトは、幅と高さの両方に from / to / by プロパティが用意されている、Animate クラスのサブクラスです。前述の Move エフェクトと同じ方法で使用します。
<fx:Declarations>
<s:Resize id="animate" target="{button}"
widthFrom="50" widthTo="200"
heightFrom="50" heightTo="200" />
</fx:Declarations>
<s:Button id="button" width="50" height="50" click="animate.play()" />
サンプルコード 04. Resize の使用例
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : ResizeEffectSample.fxp )
サンプル 04 : ResizeEffectSample.swf
エフェクトの中心点設定プロパティ
Move、Rotate、Scale などのトランスフォームエフェクトには、ターゲットコンポーネントの中心点を変更する autoCenterTransform、transformX、transformY プロパティが用意されています。
次のサンプルは、Rotate エフェクトを使用して autoCenterTransform プロパティと、transformX、transformY プロパティの機能をそれぞれ比較したものです。
<fx:Declarations>
<s:Rotate
id="animateMC" target="{buttonMC}"
angleFrom="0" angleTo="360"
autoCenterTransform="true" />
<s:Rotate
id="animateTL" target="{buttonTL}"
angleFrom="0" angleTo="360"
autoCenterTransform = "false" />
<s:Rotate
id="animateBR" target="{buttonBR}"
angleFrom="0" angleTo="360"
transformX="{buttonBR.width}"
transformY="{buttonBR.height}" />
</fx:Declarations>
<s:Button id="buttonMC" click="animateMC.play()" />
<s:Button id="buttonTL" click="animateTL.play()" />
<s:Button id="buttonBR" click="animateBR.play()" />
サンプルコード 05. Rotate を用いた autoCenterTransform、transformX、transformY プロパティの比較例
autoCenterTransform プロパティの値を true にした場合、Rotate エフェクトはターゲットのボタンは中心点 ( x = width / 2, y = height / 2 ) を基準点として作用します。autoCenterTransform プロパティの値を false にした場合、Rotate エフェクトはターゲットのボタンは中心点 ( x = 0, y = 0 ) を基準点として作用します。
transformX、transformY プロパティは、autoCenterTransform プロパティが使用されていない場合、エフェクトのターゲットの中心点を、任意に指定することができます。
上記サンプルコード 05 では、ボタンの右下 ( x = width, y = height ) が基準となるように指定しています。
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : RotateEffectSample.fxp )
サンプル 05 : RotateEffectSample.swf
エフェクトの反復設定プロパティ
エフェクトクラスには、作用するエフェクトの反復について設定する repeatCount、repeatDelay、repeatBehavior プロパティが用意されています。
次のサンプルは、Fade エフェクトを使用して repeatBehavior プロパティの機能をそれぞれ比較したものです。同時にrepeatCount、repeatDelay プロパティも使用しています。
<fx:Declarations>
<s:Fade
id="animateReverse" target="{buttonReverse}"
alphaFrom="1" alphaTo="0.2"
repeatCount="10" repeatDelay="100" repeatBehavior="reverse" />
<s:Fade
id="animateLoop" target="{buttonLoop}"
alphaFrom="1" alphaTo="0.2"
repeatCount="10" repeatDelay="100" repeatBehavior="loop" />
</fx:Declarations>
<s:Button id="buttonReverse" click="animateReverse.play()" />
<s:Button id="buttonLoop" click="animateLoop.play()" />
サンプルコード 06. Fade を用いた repeatCount、repeatDelay、repeatBehavior プロパティの使用例
repeatCount プロパティは、名前のとおりエフェクトの反復回数を指定するプロパティです。指定した回数分エフェクトは反復します。
repeatDelay プロパティは、エフェクトが反復する直前の待機時間をミリ秒単位で指定するプロパティです。エフェクトが反復するたびに、エフェクトは作用する直前に指定した時間分待機します。
repeatBehavior プロパティは、repeatCount が 2 以上の値を指定しているときのみ有効になり、エフェクトが複数回反復するときの繰り返し方を指定するプロパティです。指定できる値は、” reverse” か “loop” の 2 種類ですが、”reverse” を指定した場合、偶数回目に作用するエフェクトは逆再生されます。( Fade エフェクトの場合、alphaFrom と alphaTo の値が逆転します。 ) “loop” はデフォルト値で、単純に repeatCount で指定された回数エフェクトを反復します。
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : FadeEffectSample.fxp )
サンプル 06 : FadeEffectSample.swf
複数のエフェクト
Parallel、Sequence エフェクトは、自身の子としてエフェクトを保持し再生することができます。
次のサンプルでは、Parallel、Sequence エフェクトを比較しています。
<fx:Declarations>
<s:Parallel id="effectsParallel" target="{buttonParallel}">
<s:children>
<s:Move yFrom="0" yTo="250" />
<s:Rotate angleFrom="0" angleTo="360" />
</s:children>
</s:Parallel>
<s:Sequence id="effectsSequence" target="{buttonSequence}">
<s:children>
<s:Move yFrom="0" yTo="250" />
<s:Rotate angleFrom="0" angleTo="360" />
</s:children>
</s:Sequence>
</fx:Declarations>
<s:Button id="buttonParallel" click="effectsParallel.play()" />
<s:Button id="buttonSequence" click="effectsSequence.play()" />
サンプルコード 07. Parallel、Sequence エフェクトの比較例
Parallel と Sequence エフェクトが保持している子エフェクトはまったく同じものです。Parallel エフェクトは、複数の子エフェクトを同時に再生しますが、Sequence エフェクトは、複数の子エフェクトを、追加された順番に再生します。
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : ParallelAndSequenceEffectsSample.fxp )
サンプル 07 : ParallelAndSequenceEffectsSample.swf
トランジションのエフェクト
トランジションは、ステートが変化するときのエフェクトを定義することができます。
Flex 4 のステートについては、Flex 4 マスターシリーズ #03 Flex 4 ステートを参照してください。
次のサンプルでは、前述の Sequence エフェクトを Transition のエフェクトとして使用しています。
<s:states>
<mx:State name="default" />
<mx:State name="aState" />
</s:states>
<s:transitions>
<s:Transition fromState="default" toState="aState">
<s:effect>
<s:Sequence target="{buttonSequence}">
<s:children>
<s:Fade alphaFrom="0" alphaTo="1" />
<s:Rotate angleFrom="0" angleTo="360" />
</s:children>
</s:Sequence>
</s:effect>
</s:Transition>
</s:transitions>
<mx:Button width="150" label="default" click="currentState='default'" />
<mx:Button width="150" label="aState" click="currentState='aState'" />
<s:Button id="defaultButton" />
<s:Button id="buttonSequence" includeIn="aState" />
サンプルコード 08. Transitionの使用例
Transition の記法は、Flex 3 以前と変わりません。
transitions タグ内に Transition タグを記述して、fromState、 toState プロパティにステート名を指定します。Transition タグ内には、任意のエフェクトのタグを記述します。
サンプルコードでは、”default” ステートから “aState” に遷移するとき、buttonSequence に対して Fade エフェクトと Rotate エフェクトを順番に作用させます。
実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : TransitionEffectSample.fxp )
サンプル 08 : TransitionEffectsSample.swf
おわりに
以上が Flex 4 のエフェクトでした。
Flex 3 以前から Flex アプリケーションの開発や制作に携われている方は気付かれたと思いますが、記法はほとんど変わっていません。ですが、機能的には Flex 3 以前のころよりも強化されていて、ここでは紹介できなかった新しいエフェクトもたくさん追加されています。
これらのチュートリアル、サンプルコードを試すことによって、Flex 4 アプリケーションのエフェクトを自由に扱えるようになるはずなので、是非色々なエフェクトを試してください。
