Flash CS3 ドキュメンテーション

ActionScript 3.0 のプログラミング > 表示のプログラミング > オブジェクトのアニメーション化

オブジェクトのアニメーション化

アニメーションは、時間の経過と共に何かを動かす、または、何かを変化させる処理です。スクリプトで記述されたアニメーションは、ビデオゲームの基本的部分であり、他のアプリケーションを洗練したり、便利な操作上のヒントを提供したりするために頻繁に使用されます。

スクリプトで記述されたアニメーションの基本的概念は、変化が生じる必要があり、その変化が時間の経過と共にインクリメントに分割される必要があるということです。ActionScript では、一般的なループステートメントを使用して、何かを繰り返す処理が簡単にできます。ただし、ループは、表示を更新するまで、すべての繰り返しを通じて実行されます。スクリプトで記述されたアニメーションを作成するには、時間の経過と共に繰り返しアクションを実行する ActionScript を記述し、実行するたびに画面を更新する必要があります。

たとえば、画面でボールが移動するような、単純なアニメーションを作成するとします。ActionScript には、時間の推移を追跡し、これに従って画面を更新できるシンプルなメカニズムが備わっています。これはすなわち、ボールが目的地に到達するまで、時間と共に少しずつ移動するようなコードを記述できることを意味します。各動きごとに画面を更新すると、ステージをまたがるモーションがビューアに表示されます。

実用的な観点からは、スクリプトで記述されたアニメーションを SWF ファイルのフレームレートと同期させる (すなわち、新しいフレームが表示されるか、または表示されようとするたびにアニメーションを変化させる) ことに意味があります。Flash Player はこの方法により、画面を速く更新できるためです。各表示オブジェクトには、SWF ファイルのフレームレートに従って送出される enterFrame イベントがあります (各フレームに 1 イベント)。スクリプトで記述されたアニメーションを作成する開発者の多くは、enterFrame イベントを、時間と共に繰り返すアクションを作成する方法として使用しています。enterFrame イベントをリッスンするコードを記述して、アニメーション化されたボールを各フレームごとに一定量動かすことができます。画面の更新 (各フレーム) 後、ボールは新しい位置で再描画され、モーションが生成されます。

次の例では、circle という名前の円 Sprite インスタンスを Stage 上に作成します。円がクリックされると、スクリプトで記述されたアニメーションのシーケンスが開始し、円が完全に透明になるまで circle がフェードします (その alpha プロパティが減少します)。

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

// 円を描画し、表示リストに追加する。
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x990000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
addChild(circle);

// アニメーションの開始時、この関数は各フレームごとに呼び出される。
// この関数によって行われる変更 (各フレームごとに
// 画面に更新される) は次のとおり。
function fadeCircle(event:Event):void
{
    circle.alpha -= .05;
    
    if (circle.alpha <= 0)
    {
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle);
    }
}

function startAnimation(event:MouseEvent):void
{
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle);
}

circle.addEventListener(MouseEvent.CLICK, startAnimation);

円がクリックされると、fadeCircle() が enterFrame イベントのリスナーとしてサブスクライブされます (フレームごとに 1 回呼び出され始めます)。この関数では、alpha プロパティを変更することにより、circle をフェードさせます。したがって、フレームごとに 1 回、円の alpha が 0.05 (5%) ずつ減少し、画面が更新されます。最終的には、alpha 値が 0 (circle が完全に透明) になると、fadeCircle() 関数はリスナーとして削除され、アニメーションは終わります。

同じコードを使用して、たとえば、フェードではなく、モーションのアニメーションを作成できます。enterFrame イベントリスナーである関数内で、alpha に対するプロパティを置き換えることにより、このプロパティが代わりにアニメーション化されます。たとえば、次の行を

    circle.alpha -= .05;

次の行に

    circle.x += 5;

置き換えると、x プロパティがアニメーション化され、結果的に円がステージの右へ移動します。目的の x 座標に達したら、アニメーションを終了する条件を変更して、アニメーションを終了できます (enterFrame リスナーがサブスクライブ解除されます)。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000169.html

コメントの追加