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

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

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

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

実用的な観点から、スクリプトで記述するアニメーションは SWF ファイルのフレームレートと同期させる（個々の新しいフレームが表示されるタイミングまたはその直前にアニメーションを変化させる）ことが合理的です。なぜなら、Flash Player または AIR で画面の更新処理を実行する頻度はフレームレートによって決定されるからです。各表示オブジェクトには、SWF ファイルのフレームレートに従って送出される enterFrame イベントがあります（各フレームに 1 イベント）。スクリプトで記述されたアニメーションを作成する開発者の多くは、 enterFrame イベントを、時間と共に繰り返すアクションを作成する方法として使用しています。 enterFrame イベントをリッスンするコードを記述して、アニメーション化されたボールを各フレームごとに一定量動かすことができます。画面の更新（各フレーム）後、ボールは新しい位置で再描画され、モーションが生成されます。

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

import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
 
// draw a circle and add it to the display list 
var circle:Sprite = new Sprite(); 
circle.graphics.beginFill(0x990000); 
circle.graphics.drawCircle(50, 50, 50); 
circle.graphics.endFill(); 
addChild(circle); 
 
// When this animation starts, this function is called every frame. 
// The change made by this function (updated to the screen every 
// frame) is what causes the animation to occur. 
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 リスナーがサブスクライブ解除されます）。

Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。