2006/09/01
吉岡 梅

連載目次へ >>

　前回は，Tweenクラスを使うと，2点間を移動する様々な動きのアニメーションを簡単に作成できることを説明しました。今回はもう一歩踏み込んだTweenクラスの利用方法を紹介しましょう。Tweenクラスが備える，アニメーションの状態変化に対応するイベントハンドラや，コマ送りや逆再生といった動きを実現するメソッドを使って，サンプル・ムービーを作ってみます。

Tweenクラスのイベントハンドラ

　Tweenクラスでは，トゥイーン・アニメーションの状態の変化に対応して，表1のようなイベントハンドラが用意されています。

表1：Tweenクラスのイベントハンドラ

イベント	説明
onMotionChanged	トゥイーン対象のプロパティが変更されるたびに呼び出されます
onMotionFinished	一連の値の変化が終了すると呼び出されます
onMotionResumed	トゥイーン・アニメーションが再開されると，呼び出されます
onMotionStarted	トゥイーン・アニメーションが開始されると，呼び出されます
onMotionStopped	トゥイーン・アニメーションが停止すると，呼び出されます

これらのイベントハンドラを利用すれば，「アニメーションが終わった時点で任意の処理を実行」「アニメーションを停止した時点で解説を表示」「移動時に衝突判定をチェックする」といったような処理を簡単に記述できます。

　例えば図1のサンプルでは，画面の左端と右端の間の往復を，Tweenクラスを使用して行っています。

図1：Tweenクラスのイベントを利用したアニメーション（クリックするとムービーを表示します）

このアニメーションでは，一連の値の変化が終了すると呼び出される「onMotionFinishedイベントハンドラ」を使っています。ActionScriptのコードは図2の通りです。

図2：onMotionFinishedイベントハンドラを使ったコード

　まずTweenクラスを使って，画面の左端から右端へとインスタンスを移動させるアニメーションを作成しています。これについては前回，説明しましたね。ここではさらにonMotionFinishedイベントハンドラを使って，一連のアニメーションが終了したらインスタンスの向きをかえ，Tweenクラスが備える「yoyoメソッド」を使って今までとは逆方向への値の変化（つまり，逆向きへのトゥイーン・アニメーション）を行っています。

　onMotionFinishedイベントハンドラは，通常のアニメーションにより，「開始値→終了値」方向の動きが終了したタイミングと，yoyoメソッドによって「終了値→開始値」方向の動きが終了したタイミングの両方で発生します。そのため，通常のアニメーションに，onMotionFinishedイベントハンドラ内の簡単な2行のステートメントを加えるだけで，開始値から終了値までの値の座標を往復するアニメーションを作成できるのです。

Tweenクラスのメソッド

　さて，先ほどはさらっとyoyoメソッドを紹介しましたが，Tweenクラスにはyoyoメソッドのほかに，トゥイーン・アニメーションを制御する様々なメソッドが用意されています（表2）。これらのメソッドを使用すれば，まるでビデオやDVDデッキのリモコンのようにトゥイーン・アニメーションをコントロールできるのです。

表2：Tweenクラスのメソッド

メソッド	説明
start()	トゥイーン・アニメーションを先頭から開始します
stop()	トゥイーン・アニメーションを現在の位置で停止します
nextFrame()	次のフレームへと移動します
prevFrame()	前のフレームへと移動します
rewind()	先頭まで巻き戻します
fforward()	最終フレームへと移動します
yoyo()	現在の方向とは逆向きに再生します
continueTo()	現在値から新しい終了値に向けてアニメーションを行います
resume()	一時停止したアニメーションを再開します（フレームベースのアニメーションでのみ使用可能）

　図3では，Tweenクラスの各メソッドを使用してトゥイーン・アニメーションの動きをコントロールしています。

図3：Tweenクラスの各メソッドの使用例（クリックするとムービーを表示します）

※[新しい位置へ移動]ボタンではcontinueToメソッドを使用して，「myTween.continueTo(Math.random()*320,10)」と，「0以上320未満のランダムな位置へ10フレームかけて再移動」する命令を指定しています。

二つのTweenクラス・インスタンスを組み合わせる

　Tweenクラスのインスタンスでは，任意のインスタンス（シンボル）の一つのプロパティの値のみを変化させます。そこで，同じインスタンス（シンボル）に対してTweenクラスのインスタンスを複数作成し，それぞれで異なるプロパティを変化させてみましょう。

　図4の動きは同じインスタンス（シンボル）に対し，図5のように二つのTweenクラスのインスタンスを使って_xプロパティと_yプロパティをそれぞれ管理することによって実現しています。Tweenクラスのインスタンスを組み合わせることによって，サインカーブ風の運動や円運動のような複雑な動きを，x軸（横）とy軸（縦）のそれぞれの方向に分解して制御しているわけです。

図4：_x，_yプロパティを変化させるトゥイーン・アニメーション（クリックするとムービーを表示します）

図5：二つのTweenクラス・インスタンスを使用したアニメーションのActionScriptコード

　これなら決まった範囲をバウンドするような動きも簡単ですね。onMotionFinishedイベント内でcontinueToメソッドを使用すれば，動きの位置や速度に変化を付けることも簡単です。Flash Professional 8を持っている方は，ぜひ，お試しください。