« HTTPステータスコードについて（200, 301, 302, 404, 418）
2008年12月17日の技術ニュース »

ActionScript 3.0でお絵かきアプリ – Flash/ActionScript入門

2008 年 12 月 16 日 投稿者: naga3

今回はActionScript 3.0でお絵かきアプリを作ってみましょう。こういう対話的なビジュアルアプリを簡単に作成できるのがFlashの良いところですね。実際の実行画面を以下に示しますのでマウスでお絵かきしてみてください（Flash Player 9.0以上が必要です）。


プロジェクトの作成と実行
FlashDevelopを起動して、「New Project...」を選択、テンプレートは「AS3 Project」を選び、「Name」の欄に「paint」と入力し、Locationは適当なフォルダを選んでOKを押します。
右側のProjectウインドウの「src」→「Main.as」をダブルクリックしてソースを表示し、以下のように書き換えてください。

PLAIN TEXT
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.MouseEvent;
  4.  
  5.     public class Main extends Sprite {
  6.         private var mf:Boolean = false;
  7.         public function Main():void {
  8.             graphics.lineStyle(5, 0x00aa00);
  9.             stage.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
  10.                 graphics.moveTo(mouseX, mouseY);
  11.                 mf = true;
  12.             });
  13.             stage.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void {
  14.                 mf = false;
  15.             });
  16.             stage.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
  17.                 if (mf) graphics.lineTo(mouseX, mouseY);
  18.             });
  19.         }
  20.     }
  21. }


F5(Test Movie)を押すとお絵かきアプリが起動します。

ソースの解説
PLAIN TEXT
  1. import flash.display.Sprite;
  2. import flash.events.MouseEvent;

flash.displayパッケージの「Sprite」クラスと、flash.eventsパッケージの「MouseEvent」クラスをインポートしています。MouseEventクラスはマウスが押された・離された・動いたなどのアクションをイベントという概念で管理するクラスです。Javaをやっている人にはお馴染みですね。
PLAIN TEXT
  1. private var mf:Boolean = false;

mfはマウスの押下状態を表わす変数です。左ボタンが押されるとtrueになります。

PLAIN TEXT
  1. stage.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
  2.     graphics.moveTo(mouseX, mouseY);
  3.     mf = true;
  4. });

画面全体を表すオブジェクトであるstageに対して、マウスボタン押下時のイベントを割り当てています。第２引数で押下時のアクションを関数で指定するのですが、無名関数で書いていますので少し分かりにくいですね。関数を分離した場合は以下のようになります。
PLAIN TEXT
  1. stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
  2. function onMouseDown(e:MouseEvent):void {
  3.     graphics.moveTo(mouseX, mouseY);
  4.     mf = true;
  5. }

moveToはポインタの座標を移動するメソッド、lineToは移動した座標から線を引くメソッドです。引数で指定した座標 (mouseX, mouseY) はそれぞれマウスのX, Y座標となります。

以上、とてもシンプルなソースでお絵かきアプリを作ることができました。

ちなみに、以前のActionScriptでは更にシンプルなプログラムになります。
PLAIN TEXT
  1. mf = false;
  2. lineStyle(5, 0x00aa00);
  3. onMouseDown = function() {
  4.     moveTo(_xmouse, _ymouse);
  5.     mf = true;
  6. }
  7. onMouseMove = function() {
  8.     if (mf) lineTo(_xmouse, _ymouse);
  9. }
  10. onMouseUp = function() {
  11.     mf = false;
  12. }

ActionScript 3.0 に比べると短いのですが、バグが入り込みやすいかも知れません。

カテゴリー: ActionScript, Flash, 入門・講座

この記事へのトラックバックURL

コメントをどうぞ