初めてのプログラム
それでは「test」と画面に表示するだけの簡単なプログラムを作ってみます。メモ帳などのテキストエディタで、以下のプログラムを書いて、「test.as」という名前で保存します。
class test { static function main() { _root.createTextField("a_txt", 100, 0, 0, 400, 32); _root.a_txt.text = "test!"; } }
そして、コマンドラインで以下のように入力し、コンパイルします。
>mtasc -swf test.swf -main test.as -header 400:200:30
これで「test.swf」という名前のFlashファイルが作成されています。先ほど、「mtasc --help」で見たとおり、MTASCでコンパイルするには、以下の書式で記述します。
mtasc -swf （出力ファイル） -main （入力ファイル）-header （幅）:（高さ）:（フレーム）
-header （幅）:（高さ）:（フレーム）
Flashプレイヤーが拡張子「.swf」と関連付けられていれば、ダブルクリックするだけで起動できます。Flashプレイヤーは、Webサイトより入手できます。
改めてプログラムを見てみます。Macromedia Flashで行うプログラミングと違って、MTASCでは、必ずクラスを定義する必要があります。Javaと同じで、ファイル名とクラス名を必ず対応させ、1ファイル1クラスの原則を守らなくてはなりません。つまり、「test.as」というファイルなら、その中でtestというクラスを宣言する必要があります。1のファイルの中に2つ以上のクラスを宣言することはできません。
そしてメインプログラムは、クラス定義の中でmain()という関数を定義します。この時、main()関数には、staticキーワードをつけて宣言します。
詳しくプログラムを見ると、main()関数の1行目で、_rootが使われています。_rootはメインステージを表すMovieClipクラスのインスタンスです。そして、画面に文字を表示するために、「createTextField()」メソッドを使ってTextFiledを生成し、テキストを設定しています。
Macromedia Flashでは、trace()関数を使って、デバッグ用のウィンドウにメッセージや変数の値を出力することができますが、MTASCにはtrace()関数が用意されていません。デバッグ用になにか表示させたい場合は、TextFiledを生成しそこにテキストを設定することで、trace()関数の代わりにします。
シンプルなお絵かきプログラム
それでは、お絵かきプログラムを作ってみましょう。以下がシンプルなお絵かきプログラムになります。EDrawという名前のクラスを作りますので、「EDraw.as」という名前で保存してください。
class EDraw { static function main() { var mouse_b:Boolean; // 描画スタイルの指定 _root.lineStyle(5, 0xFF0000, 100); // 赤色で線を描画 // マウスボタンを押した時の動作 _root.onMouseDown = function () { mouse_b = true; _root.moveTo(_root._xmouse, _root._ymouse); } // マウスボタンを離した時の動作 _root.onMouseUp = function () { mouse_b = false; } // マウスボタンを動かした時の動作 _root.onMouseMove = function () { if (!mouse_b) { return; } _root.lineTo(_root._xmouse, _root._ymouse); } } }
これをコンパイルするには、以下のように指定します。
>mtasc -swf EDraw.swf -main EDraw.as -header 400:400:30
先ほども述べましたが、_rootはMovieClipのインスタンスとなっています。ですから、_rootには様々なメソッドやプロパティが用意されています。マウスイベントを設定し、その中で、線を描画するように指示するだけで、お絵かきプログラムが完成したのは、MovieClipに豊富な機能が備わっているおかげです。
保存機能の実装
さて、これに保存機能を実装してみます。Flashは通常WEBブラウザ内で動かしますので、セキュリティの問題上、好き勝手にファイルを保存することができません。そのため、保存機能を実現するには、以下の2つの方法しかありません。
- （ブラウザのCookieに似た機能）
SharedObjectを使ってローカルPCに保存 - CGIを介してサーバーに保存
まずは、前者のSharedObjectを使って保存してみます。保存機能のついたお絵かきプログラムを「EDraw2.as」という名前で作りました。
以下が、その中から、SharedObjectを使ってデータを保存と読み込みをしているしている部分です。
// 保存 function saveDataToSharedObject(save_data:String) { /* SharedObjectへ保存 */ var so = SharedObject.getLocal("EDraw"); so.data.draw = save_data; } // 読込 function loadDataFromSharedObject():String { var so = SharedObject.getLocal("EDraw"); return so.data.draw; }
「SharedObject.getLocal(オブジェクト名)」でSharedObjectオブジェクトを取得し、このdataプロパティへ適当なフィールド名で読み書きすることでデータを保存したり、読み込んだりできます。
そして、保存する描画データですが、これはプログラムを単純にするために、描画コマンドと座標の組み合わせで実現しています。以下が描画データの作成部分ですが、実際の描画と同時に、保存用のデータも作成しています。
例えば、座標（10, 20）でマウスボタンを押した時には、"m,10,20:"という文字列を保存用の変数に追加し、マウスを座標（20, 30）へ動かすと、"l,20,30:"という文字列を追加します。
/* コンストラクタ */ function EDraw2() { var mouse_b:Boolean; // マウスの状態 var link = this; // this の省略用 /* ...省略... */ // マウスボタンを押した時の動作 _root.onMouseDown = function () { mouse_b = true; _root.canvas_mc.moveTo(_root._xmouse, _root._ymouse); link.draw_str += "m," + _root._xmouse + "," + _root._ymouse + ":"; } // マウスボタンを動かした時の動作 _root.onMouseMove = function () { if (!mouse_b) { return; } _root.canvas_mc.lineTo(_root._xmouse, _root._ymouse); link.draw_str += "l," + _root._xmouse + "," + _root._ymouse + ":"; } // マウスボタンを離した時の動作 _root.onMouseUp = function () { mouse_b = false; } /* ...省略... */
文字列の描画データを、実際にキャンバスへ反映するプログラムが以下になります。描画用のコマンド文字列は1コマンドごとが":"で区切られており、さらにコマンドの引数が","で区切られています。そこで、split()メソッドを使って、文字列を区切ることで、すっきり解析処理ができるようにしました。
/* 描画の再現 */ function drawSaveData(save_data:String) { var commands:Array = save_data.split(":"); // ":"がコマンドの区切り for (var i = 0; i < commands.length; i++) { var arg = commands[i].split(","); // ","が引数の区切り if (arg[0] == "m") { // 基点移動コマンド _root.canvas_mc.moveTo(arg[1],arg[2]); } else if (arg[0] == "l") { // 線描画コマンド _root.canvas_mc.lineTo(arg[1],arg[2]); } } }
