Tweenクラスのイベントハンドラ
Tweenクラスでは,トゥイーン・アニメーションの状態の変化に対応して,表1のようなイベントハンドラが用意されています。
イベント | 説明 |
---|---|
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デッキのリモコンのようにトゥイーン・アニメーションをコントロールできるのです。
メソッド | 説明 |
---|---|
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を持っている方は,ぜひ,お試しください。