FlashCS3でお絵かきツール

このエントリーを含むはてなブックマーク

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

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

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

概要

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

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

作ったクラスは

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

paint.Background 背景

paint.Canvas 絵を描くカンバス

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

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

おソース

  1. /**
  2. * お絵かきツールのメインクラス
  3. * @author mitsuru.haga@gmail.com
  4. * @version 0.1
  5. */
  6.  
  7. package paint {
  8.  
  9.     import paint.*;
  10.     import flash.display.Sprite;
  11.     import flash.events.*;
  12.  
  13.     public class Paint extends Sprite{
  14.  
  15.         //  ブラシ
  16.         protected var brush:Brush;
  17.  
  18.         //  ブラシコレクション
  19.         protected var brushCollection:Array = [];
  20.  
  21.         //  カンバス
  22.         protected var canvas:Canvas;
  23.  
  24.         //  背景
  25.         protected var background:Background;
  26.  
  27.         /**
  28.         * コンストラクタ
  29.         */
  30.         public function Paint(){
  31.             initialize();
  32.         }
  33.  
  34.         /**
  35.         * 初期化
  36.         * @return
  37.         */
  38.         protected function initialize():void{
  39.  
  40.             //  ブラシを配列にどんどん追加
  41.             brushCollection.push( new Brush( 'Red', 5, 0xFF0000 ) );
  42.             brushCollection.push( new Brush( 'Blue', 5, 0x0000FF ) );
  43.             brushCollection.push( new Brush( 'Green', 5, 0x00FF00 ) );
  44.  
  45.             //  ランダムにブラシを決定する
  46.             brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];
  47.  
  48.             //  背景を作る
  49.             background = new Background();
  50.             background.buttonMode = true;
  51.             background.width = stage.stageWidth;
  52.             background.height = stage.stageHeight;
  53.             background.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
  54.             background.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
  55.             addChild( background );
  56.  
  57.             //  カンバスを作る
  58.             canvas = new Canvas();
  59.             canvas.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
  60.             canvas.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
  61.             addChild( canvas );
  62.  
  63.         }
  64.  
  65.         /**
  66.         * マウスを押した場合
  67.         * 線を描く準備
  68.         * @param    e
  69.         * @return
  70.         */
  71.         protected function onCanvasMouseDownHandler( e:MouseEvent ):void {
  72.             trace( 'draw start' );
  73.             brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];
  74.             canvas.graphics.lineStyle( brush.thickness, brush.color, 1 );
  75.             canvas.graphics.moveTo( mouseX, mouseY );
  76.             canvas.addEventListener( Event.ENTER_FRAME, drawingHandler );
  77.         }
  78.  
  79.         /**
  80.         * マウスを放した場合
  81.         * 線を描くの終わり
  82.         * @param    e
  83.         * @return
  84.         */
  85.         protected function onCanvasMouseUpHandler( e:MouseEvent ):void {
  86.             trace('draw finish');
  87.             canvas.graphics.endFill();
  88.             canvas.removeEventListener( Event.ENTER_FRAME, drawingHandler );
  89.         }
  90.  
  91.         /**
  92.         * マウスを押している間
  93.         * 線を描き続ける
  94.         * @param    e
  95.         * @return
  96.         */
  97.         protected function drawingHandler( e:Event ):void{
  98.             trace('drawing');
  99.             canvas.graphics.lineTo( mouseX, mouseY );
  100.         }
  101.     }
  102.  
  103. }


感想

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

ダウソ

ソースファイル

Posted in actionscript3.0, flash, 日記 at 10月 4th, 2007. Trackback URI: trackback

2 Responses to “FlashCS3でお絵かきツール”

  1. 8月 14th, 2009 at 12:03 AM #Flash中のBitmapをJPG/PNGで保存するには » TECH Matari

    [...] func09 » FlashCS3でお絵かきツール ソースがかっこいい。こういうふうに書くのね～なるほど。あとでちゃんと読もう。 [...]

  2. 1月 20th, 2010 at 2:53 AM #お絵かきFlash と Flexの まとめ（ソース付） | Web活メモ帳

    [...] FlashCS3でお絵かきツール – func09 [...]

Leave a Reply