func09

ActionScript3.0 Animation Making Things Move!を読み始めました。 英語よめねー。

で、読んでいるうちに何か作りたくなったので 簡単にこさえてみた。お絵かきツール。 実はFlashでお絵かきツールって作ったこと無かったのよねぇ。

下の灰色四角の中でマウスをクリックすると線が描けます。

概要

1. マウスを押したら、描画開始
2. マウスを放すまで、描画しつづける
3. マウスを放したら、描画終了

と、誰が作ってもこんな感じだと思います。 1時間くらいで作れるように、あまり機能は求めません。

作ったクラスは

paint.Paint お絵かきツールのメインクラス

paint.Background 背景

paint.Canvas 絵を描くカンバス

paint.Brush ブラシ。サイズとか色とか

本当は背景クラスはカンバスを継承した方がいいような気がしますが それは今後追求したくなったら、やろう。

おソース

[js] /** * お絵かきツールのメインクラス * @author mitsuru.haga@gmail.com * @version 0.1 */

package paint {

import paint.*;
import flash.display.Sprite;
import flash.events.*;

public class Paint extends Sprite{

    //  ブラシ
    protected var brush:Brush;

    //  ブラシコレクション
    protected var brushCollection:Array = [];

    //  カンバス
    protected var canvas:Canvas;

    //  背景
    protected var background:Background;

    /**
    * コンストラクタ
    */
    public function Paint(){
        initialize();
    }

    /**
    * 初期化
    * @return
    */
    protected function initialize():void{

        //  ブラシを配列にどんどん追加
        brushCollection.push( new Brush( 'Red', 5, 0xFF0000 ) );
        brushCollection.push( new Brush( 'Blue', 5, 0x0000FF ) );
        brushCollection.push( new Brush( 'Green', 5, 0x00FF00 ) );

        //  ランダムにブラシを決定する
        brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];

        //  背景を作る
        background = new Background();
        background.buttonMode = true;
        background.width = stage.stageWidth;
        background.height = stage.stageHeight;
        background.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
        background.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
        addChild( background );

        //  カンバスを作る
        canvas = new Canvas();
        canvas.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
        canvas.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
        addChild( canvas );

    }

    /**
    * マウスを押した場合
    * 線を描く準備
    * @param    e
    * @return
    */
    protected function onCanvasMouseDownHandler( e:MouseEvent ):void {
        trace( 'draw start' );
        brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];
        canvas.graphics.lineStyle( brush.thickness, brush.color, 1 );
        canvas.graphics.moveTo( mouseX, mouseY );
        canvas.addEventListener( Event.ENTER_FRAME, drawingHandler );
    }

    /**
    * マウスを放した場合
    * 線を描くの終わり
    * @param    e
    * @return
    */
    protected function onCanvasMouseUpHandler( e:MouseEvent ):void {
        trace('draw finish');
        canvas.graphics.endFill();
        canvas.removeEventListener( Event.ENTER_FRAME, drawingHandler );
    }

    /**
    * マウスを押している間
    * 線を描き続ける
    * @param    e
    * @return
    */
    protected function drawingHandler( e:Event ):void{
        trace('drawing');
        canvas.graphics.lineTo( mouseX, mouseY );
    }
}

} [/js]

感想

ふーん、実に簡単。 気分が乗ったら、Flexのコンポーネントにするくらいの事をしてみたい。 最近Flexばかりだったけど、素のActionScript3ってのも漢らしくていいなと最近思う。

ダウソ

ソースファイル

関連記事

1. as3版　CrossDrawer
2. ActionScript3とProcessingの勉強２
3. インスタンス変数のオーバーライド
4. ActionScript3.0 と Processingの勉強
5. 匿名関数をその場ですぐ使ってみる