第26回　Flexでちょっと実用的なサンプル・サイトを作ってみる（視覚エフェクト編）

　今回は本連載第21回のサンプル・サイトで使用しているTween系のエフェクトをいくつか紹介します。「Tween」とは，「色や形などの状態の変化をアニメーションで表現する」手法のことで，Flashに存在する「モーショントゥイーン」のようなものです。ちょっと，言葉で表現するのは難しいので，実際にサンプルを見ていただきましょう（図1）。

図1：Tween系エフェクトのサンプル（クリックすると別ウィンドウで動作を確認できます）

上のボタンから順に

1-1．「Blur」エフェクト
1-2．「Dissolve」エフェクト
1-3．「Fade」エフェクト
1-4．「Glow」エフェクト
1-5．「Move」エフェクト（相対）
1-6．「Move」エフェクト（座標指定）
1-7．「Resize」エフェクト（相対）
1-8．「Resize」エフェクト（サイズ指定）
1-9．「Rotate」エフェクト
1-10．「Zoom」エフェクト
1-11．「スタイル」を変化させるエフェクト
1-12．複数のエフェクトを連続再生

となります。

　1-1 から 1-11 で使用している各エフェクトは「mx.effects.TweenEffect」クラス（＊1）を継承しているので共通した項目があります。

　まずは「target」属性。これはエフェクトを適用する対象のオブジェクトの「id」になります。セットする値は文字列ではなく「{effect_target}」のように中括弧で囲む必要があるので注意してください（＊2）。

　次に「duration」属性。これはエフェクトを実行する時間で，ミリ秒で指定します。例えば100（0.1秒）のような短い値をセットすれば一瞬でエフェクトが終了し，10000（10秒）のように長い値をセットすればエフェクトはゆっくりと実行されます。

　前述の「TweenEffect」クラスの継承元である「mx.effects.Effect」クラスにエフェクトを制御する共通のメソッドがいくつかあります（＊3）。もちろん，サンプルで紹介しているエフェクトも継承しています。

　エフェクトを再生するには「play」メソッドを使用し，停止させるには「end」メソッドを使用します。この「end」メソッドを実行するとエフェクト・ターゲットは即座に終了状態になります。そうではなく，一時停止したい場合は「pause」メソッドを使用し，再開したい場合は「resume」メソッドを使用します。