フリーのFlashコンパイラMTASCを使ってお絵かきツールを作る

MTASCの使い方とサンプルプログラム

外部の画像を読み込んでボタンとして使う

　それから、ちょっとやっかいなのが、外部画像をボタンとして使う場合です。MovieClipに画像を読み込むだけなら、以下のようにcreateEmptyMovieClip()メソッドで空のムービークリップを作っておき、そこへloadMovie()メソッドで画像を読み込むことができます。

簡単な外部画像のロード

class TestPic
{
    static function main()
    {
        _root.createEmptyMovieClip("a_mc", 10);
        _root.a_mc.loadMovie("save.jpg");
    }
}

　画像を読み込んでボタンを作る場合も、この方法で問題なくできそうなのですが、loadMovie()メソッドを使うと、画像を読み込んだ時点でMovieClipの全てのプロパティが初期化されてしまうのです。つまり、ここでonReleaseなどクリックした時のイベントを設定しても、画像が読み込まれた時点で、設定したイベントなどが消えてしまうのです。これは、loadMovie()でFlashファイルを読み込んだ場合に、読み込んだFlashファイルのプロパティが設定されるという性質のために起きる問題です。

　そこで、MovieClipLoaderクラスを使って、MovieClipに画像が読み込まれたことを検出します。以下は、「EDraw2.as」で画像を読み込んでいる部分です。ここでは、初めに読み込む画像ファイルとクリックしたときに実行するイベントなどを配列変数btn_infoに代入しておき、この情報を元に、画像を読み込んで読込が終わった時点で、プロパティを再設定するというプログラムになっています。

画像ロード後にイベントを設定する

function loadButton()
{
    /* 画像ボタンの情報を設定 */
    var btn_info:Array = [
        { name:"save_mc",  file:"save.jpg",  depth:51, x:0,
          event:this.saveData },
        { name:"load_mc",  file:"load.jpg",  depth:52, x:70,
          event:this.loadData },
        { name:"clear_mc", file:"clear.jpg", depth:53, x:140,
          event:this.clearData}
    ];
    
    /* ループ内で画像をロードしイベントを設定する */
    for (var i = 0; i < btn_info.length; i++) {
        var o = btn_info[i];
        var loader:MovieClipLoader = new MovieClipLoader();
        var event_obj = new Object();

        // 空のMovieClip生成
        _root.createEmptyMovieClip(o.name, o.depth);
        event_obj.info = o;
        /* 画像のロード後にプロパティを再設定する */
        event_obj.onLoadComplete = function (mc:MovieClip) {
            var info = this.info;
            mc._x = info.x;
            mc.onRelease = info.event;
        }
        loader.addListener(event_obj);
        loader.loadClip(o.file, _root[o.name])
    }
}

WEB上で共有する

　次にWEB上でお絵かきデータを共有してみます。このためには、CGIを介してデータの読み書きを行うようにします。「EDraw3.as」というファイル名でサーバーへ保存するお絵かきプログラムを作りました。

　PerlやPHPなどのプログラミング言語でCGIを作成します。お絵かきデータの書き込みを行う場合は、FlashからCGIへデータをポストし、読み込みを行う場合は、CGIからデータを取得するという手順を踏みます。

　ここでは、以下のような適当なPHPプログラムを作ってみました。保存する時は、"cmd=save&data=xxx"のようにしてデータをポストします。読み込む時は、特にパラメータを指定せずにアクセスすると"data=xxx"のようなデータを返します。

サーバー読み書き用PHP

<?php
// 保存する時 save.php?cmd=save&data=xxxx
$FILE_SAVE = "data.txt";
$cmd = isset($_POST['cmd']) ? $_POST['cmd'] : "";
if ($cmd == "save") {
  $data = isset($_POST['data']) ? $_POST['data'] : "";
  $fp = fopen($FILE_SAVE, "w");
  if (!$fp) { echo "result=ng"; return; }
  if (flock($fp, 2)) {
    fwrite($fp, $data);
    flock($fp, 3);
  }
  fclose($fp);
  echo "result=ok";
} else {
  if (file_exists($FILE_SAVE)) {
    $fp = fopen($FILE_SAVE, "r");
    if (!$fp) { echo "result=ng"; return; }
    if (flock($fp, 2)) {
      $s = fread($fp, filesize($FILE_SAVE));
      flock($fp, 3);
    }
    fclose($fp);
  } else {
    $s = "";
  }
  echo "result=ok&data=" . urlencode($s);
}
?>

　そして、CGIへデータをポストするActionScriptのプログラムは以下の通りです。CGIとの受け渡しには、LoadVarsを使います。ここでは送信用と受信用の2つのLoadVarsオブジェクトを生成しています。

CGIへデータをポストする

function saveDataToServer(cgi:String, save_data:String)
{
    var send_lv:LoadVars = new LoadVars();
    var recv_lv:LoadVars = new LoadVars();
    send_lv.cmd  = "save";
    send_lv.data = save_data;
    send_lv.n    = Math.random();
    recv_lv.onLoad = function ()
    {
        EDraw3.echo("result=" + recv_lv.result);
    }
    send_lv.sendAndLoad(cgi, recv_lv, "POST");
}

　実際にサーバー上で動いていると感じがつかみやすいと思いますので、以下のWEBサイトにテスト用のCGIを設置してみました（デバッグ用のメッセージを消したものを置いています）。

• テスト用のCGI（http://kujirahand.com/）

　それから、Macromedia Flashでは、Flashファイル（SWFファイル）と同時に、HTMLファイルも生成してくれますが、MTASCでは、Flashを表示するHTML部分を自分で書かなければなりません。下記がHTMLの雛形となるでしょう。「EDraw4.swf」の部分を表示したい任意のファイル名に書き換え、width（幅）や、height（高さ）を変更することで表示できます（同じ値が2箇所ありますが両方変更します）。

Flashファイル表示部分

<OBJECT id=EDraw4 
        codeBase=http://fpdownload.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=7,0,0,0 
        height=400 width=400 align=middle
        classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000>
        <PARAM NAME="allowScriptAccess" VALUE="sameDomain">
        <PARAM NAME="movie" VALUE="EDraw4.swf">
        <PARAM NAME="quality" VALUE="high">
        <PARAM NAME="bgcolor" VALUE="#ffffff">
        <EMBED src="EDraw4.swf" quality="high" bgcolor="#ffffff"
               width="400" height="400" name="EDraw4"
               align="middle" allowScriptAccess="sameDomain"
               type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer">
</OBJECT>

おわりに

　以上、MTASCを使って、お絵かきツールを作ってみました。ActionScript2は、クラスベースのプログラミングができるという点に関して、MTASCもFlashもそれほど差はないと思います。素材の動的な読み込みが必要だったりと面倒な部分はありますが、ライブラリを作って回避できるレベルだと思います。

　お絵かきツール部分に関しては、さらに作りこむことで、いろいろな機能を追加できると思います。今、思いつくだけでも以下の改造を加えてみたいところです。機会があれば、ぜひ、これらの拡張を施してみてください。

• 色を変えて描画する機能
• 自由線だけでなく、直線や四角形を描画する機能
• アンドゥ機能
• CGIとの連携で、複数枚の絵を保存できる機能

参考資料

　Adobeから、ActionScriptのマニュアルが公開されています。

• Macromedia Flash Support Center - ActionScript Dictionary

　他にも、検索エンジンで「ActionScript」に加えてメソッド名やクラス名を検索すると、具体的な使い方や使うときの注意点などを調べることができます。