Processingで作った作品をAS3に移植しました。

CrossDrawerのイメージ プログラムのイメージ画像。

こちらもご覧ください。 FlashDevelop環境で、AS3を開発してみる。

処理の流れ

  1. setup関数で初期化
  2. Event.ENTER_FRAMEでdraw関数をループ実行
  3. マウスクリックでreset関数を実行し、カンバスをクリア。

という流れになっています。

setupメソッドから見てみます。

/**
* A initialization function which refers Processing.
*/

public function setup():void {
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align=StageAlign.TOP_LEFT;

    canvas = new BitmapData( stage.stageWidth, stage.stageHeight, false, bgColor );
    addChild( new Bitmap( canvas ) );

    element = getCross();

    addEventListener( Event.ENTER_FRAME, draw );
    stage.addEventListener( MouseEvent.MOUSE_DOWN, reset );
}


変数canvasにステージのサイズで新しいBitmapDataインスタンスを生成し、その変数を利用してBitmapインスタンスをメインの表示リストに追加します。 次に変数エレメントにgetCross関数で描画用のエレメントを格納します。getCross関数については後述します。

Event.ENTER_FRAMEにリスナーを張り、draw関数を登録します。ステージがクリックされた時に、reset関数を呼ぶように、リスナーを張ります。 ここで、メインのSpriteインスタンスでなく、ステージにしたのは、Spriteの内容がビットマップのみだと、MouseEventを取れない(らしい)からです。

/**
* A function which returns the drawing element.
* @return a drawing element
*/

public function getCross():DisplayObject {

    var sp:Shape = new Shape();
    sp.graphics.beginFill( 0xFFFFFF );
    sp.graphics.lineTo( 1, 0 );
    sp.graphics.lineTo( 2, 0 );
    sp.graphics.lineTo( 2, 1 );
    sp.graphics.lineTo( 3, 1 );
    sp.graphics.lineTo( 3, 2 );
    sp.graphics.lineTo( 2, 2 );
    sp.graphics.lineTo( 2, 3 );
    sp.graphics.lineTo( 1, 3 );
    sp.graphics.lineTo( 1, 2 );
    sp.graphics.lineTo( 0, 2 );
    sp.graphics.lineTo( 0, 1 );
    sp.graphics.lineTo( 1, 1 );
    sp.graphics.lineTo( 1, 0 );
    sp.graphics.endFill();
    return sp as DisplayObject;
}


getCross関数は描画用のDisplayObjectを返す関数です。 46行目で格納している、変数elementDisplayObject型なので、戻り値の型指定がDisplayObjectになっていますが 実際に返しているオブジェクトはSpriteです。 returnするときに、as演算子を使って、DisplayObjectとしています。 何故、elementSprite型にしないかというと、別の描画要素を返す関数を作る時にBitmapにしたい場合もあったり、Shapeにしたい場合もあると想定して 格納できるインスタンスの範囲を限定したくなかったからです。

ここではGraphics.lineTo関数を使って、十字のグラフィックを作成しています。

/**
* A drawing function called from Event.ENTER_FRAME
* @param    event   Event
*/

public function draw( event:Event ):void {

    var posX:uint = Math.random() * stage.stageWidth;
    var posY:uint = Math.random() * stage.stageHeight;
    var scale:Number = Math.random() * 6;
    var radian:Number =  Math.random() * 360 * Math.PI / 180;

    var matrix:Matrix = new Matrix();
    matrix.rotate( radian );
    matrix.scale( scale, scale );
    matrix.translate( posX, posY );
    var coltrans:ColorTransform = new ColorTransform( 0, 0, 0, 0, Math.random() * 0xFF, 0x00, 0x64, 0xFF * 0.2 );
    canvas.draw( element, matrix, coltrans, null, null, false );
}


draw関数は、毎フレーム描画するためのメソッドです。 ランダムにX座標、Y座標、拡大率、角度(ラジアン)を設定し、カンバスに直接描いていきます。

/**
* A reset function called from MouseEvent.MOUSE_DOWN
* @param    event   Event
*/

public function reset( event:MouseEvent ):void {
    var rect:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight);
    canvas.fillRect( rect, bgColor );
}


reset関数は、ステージをクリックした際に呼び出されるメソッドです。 カンバスをステージのサイズと初期設定の背景色で塗りつぶすだけです。

非常にシンプルなので、AS3で作るまでもないようなプログラミングですね。

Posted in actionscript3.0, flash, programing at 1月 8th, 2007. Trackback URI: trackback

No Responses to “as3版 CrossDrawer”

Leave a Reply