前回は基本描画APIを使って静止画を描くプログラムを紹介しましたが,
動きのあるグラフィックの描画
まずは,
リスト1 AnimationSample
package {
import frocessing.display.F5MovieClip2D;
[SWF(width=465,height=465,backgroundColor=0x000000)]
public class AnimationSample extends F5MovieClip2D
{
private var n:int;
private var r:Number;
private var a:int;
//描画プログラムの初期化(ADDED_TO_STAGE)
public function setup():void //・・・・・(3)
{
n = 30;
r = 2*Math.PI/n;
a = 0;
colorMode( HSV, n, 1, 1 );
rectMode( CENTER );
noStroke();
}
//一定間隔で描画を実行する(ENTER_FRAME)
public function draw():void //・・・・・(1)
{
//キャンバスをステージの中心へ移動
translate( 465/2, 465/2 );
//キャンバスを角度a*r回転
rotate( r * a ); //・・・・・(2)
//描画
for ( var i:int = 0; i < n; i++ ) {
rotate( r );
fill( i, 1, 1 );
rect( 150, 0, 36, 10, 4, 4 );
}
a++;
}
}
}
図1 リスト1
描画関数 draw
前回までは描画プログラムをコンストラクタ内に記述していましたが,
public function draw():void { }
グラフィックはdraw()が実行される度にクリアされ,
drawの制御
draw()は自動的に繰り返し実行されますが,
noLoop() //draw()を停止
loop() //draw()を再開
draw()の描画プログラムを明示的に実行する場合はredraw()を使います。
redraw() //draw()による描画を実行
- 注1
- frocessing.
display. F5MovieClipを拡張して描画プログラムを記述する場合は, コンストラクタかdraw()のいずれかで描画が実行される必要があります。他の場所で実行したとき, 描画の前後処理がなせれずにグラフィックが描画されないことがあります。
初期化関数 setup
リスト1のsetup()はプログラムの表示時に実行されます(3)。繰り返し実行する必要がない初期化の処理などを記述します。
public function setup():void { }
draw()はsetup()の実行後に開始されます。
イベントとの対応
setup()とdraw()は自動的にFlashのイベントに割り当てられます。次の表で関数と対応するイベントを確認してください。
表1 イベントとの対応
関数名 | イベント |
---|---|
draw | Event. |
setup | Event. |
※クラス内でこれらの関数を実装する場合はpublic属性を指定する必要があります。