よく使うパーツや処理は再利用しやすいようにパッケージにしておきたい。そんなのときに便利なのがコンポーネント。Flashで提供されているのはほとんどがUser Interfaceコンポーネントだ（もちろんそうじゃないのもごろごろあるけど）。今日からしばらく（ときどき？）はこのコンポーネントの作り方、インストーラーの作成について紹介していきたいと思っている。
僕のゆるゆる解説で物足りない人はFLASH OOPをご覧くださいませ。かくいう僕もこの本を参考にしてコンポーネントを作り始めたんだ。
コンポーネントって？
さて、コンポーネントってなんだろう？とりあえず辞書を引いてみる。辞書によると「構成する; 要素, 成分; 部品.」となっている。まぁ、なにかの部品ってことだね。Flashの場合は何度もいろんなコンテンツで利用することを想定した部品のことをいうようだ。コンポーネントを利用する側はコンポーネントの中でどんな処理をされているのか細かいことを気にすることなく用意されたパラメータやAPIを使って見た目のコントロールや機能を利用する。
GIZMO コミュニティでもGizmoコンポーネントをはじめいくつかのコンポーネントを提供しているので、ガジェット制作者の方々にはおなじみだろう。
コンポーネントの材料
コンポーネントを作るにはコンポーネントの見た目を決めるFLAファイルと処理の中身のASファイルの二つがあればいい。コンポーネント ウィンドウに一覧されたときかっこよく見せたければアイコン用のPNG画像も用意しておくといいだろう（今回はアイコンの話はでてこないよ）。
とりあえずコンポーネントをつくってみる
今回はコンポーネントらしい見た目は特に用意せず、まずはコンポーネントとして書き出すことだけやってみようと思う（コンポーネントらしいコンポーネントはまたそのうち）。
まずは、ステージ上に配置したときに配置したことがわかるようにイメージを用意する。なんでもいいので「配置されてますよー」ってのがわかればOK。Flashを起動したら新規ムービーを用意してステージに適当な絵を描いてしまおう。
絵が描けたら、ムービークリップにしてしまう。
FLAファイルは適当な名前をつけて保存しておく。とりえあず、”myTimer.fla”という名前で保存。
さて、今度は今回作成するコンポーネントの心臓部！クラスファイルを作成する。クラスファイルはご存知のとおりASファイルとして用意する。今回組み込む機能は、
- 再生を開始したら見えなくなる
- 一回だけ実行するタイマー
の2つ。実にシンプル（手抜きともいう）。MyTimerクラスとでも名づけておこう。スクリプトは次のようにしておく。
MyTimer.asの中身
class MyTimer extends MovieClip {
private var timerList:Object;
private var lastID:Number;
function MyTimer() {
this._visible = false;
timerList = new Object();
lastID = 0;
}
function addTimer(objectRef:Object, funcName:String, interval:Number, paramList:Array):Void {
var localID:String = "timer"+lastID;
timerList[localID] = new Object();
timerList[localID].trg = objectRef;
timerList[localID].func = funcName;
timerList[localID].param = (paramList instanceof Array)?paramList:[];
timerList[localID].id = setInterval(this, "myTimeOut", interval, localID);
lastID++;
}
function myTimeOut(localID:String):Void {
var _obj:Object = timerList[localID];
clearInterval(_obj.id);
_obj.trg[_obj.func].apply(_obj.trg, _obj.param);
}
}
シンプル。さて、FLAファイルとASファイルが用意できたらあとはコンポーネントとして書き出す準備をするだけだ。コンポーネントとして書き出すにはあと3つのステップで完了だ。
SWCで書き出ししてしまおう
コンポーネントとして書き出すためのステップは
- リンケージの設定
- コンポーネント定義の設定
- SWCファイルの書き出し
の3つ。とっても簡単。
まずは、リンケージの設定。myTimer.flaのライブラリから、コンポーネントとして書き出すムービークリップシンボルのリンケージを設定する。リンケージプロパティダイアログの出し方はしってるよね？ここで設定するのは、「識別子」と「AS 2.0 クラス」の2箇所。もちろん「ActionScriptに書き出し」にチェックしないと設定できないのでチェックするように。このとき「最初のフレームに書き出し」のチェックははずしておこう。別にチェックしてても困らない感じなんだけど、Flashにあらかじめ入っているコンポーネントはこうなっているみたいだから、それにあわせておく。
次に、コンポーネント定義の設定。リンケージと同様に、ライブラリのムービークリップシンボルを右クリックして表示されるメニューから「コンポーネント定義…」を選べばコンポーネント定義ダイアログが表示される。
ここで設定するのは「AS 2.0 クラス」と「コンポーネントパネルに表示」の2箇所。お好みで「ツールヒントテキスト」も入力するといいかもね。入力がすんだらOKボタンをクリックしよう。もしクラスファイルに問題があったり、設定がトンチンカンだとこの段階で出力ウィンドウにメッセージが表示されるよ（今回は完璧なのでスクリーンショットはないよ）。
なにも出力されなければ設定には問題が無いということになる。ただしクラスファイル内にバグが潜んでいてもわからないのでうまくいかないときは苦しむことになるかもしれない。
最後に、SWCファイル（コンポーネントね）の書き出し。ライブラリのムービークリップシンボルを右クリックして表示されるメニューから「SWC ファイル書き出し…」を選んで書き出そう。ファイル名はクラス名と同じにしておこうね。今回は”myTimer.swc”という名前になる。書き出したSWCファイルは以下のディレクトリに入れることで使用できるようになる。
コンポーネント ディレクトリ
ドライブ名:\Documents and Settings\ユーザー\Local Settings\Application Data\Macromedia\Flash 8\ja\Configuration\Components\
環境ごとにドライブ名とユーザーが変わるのでその辺は臨機応変に対応してクダサイ。これでFlashを再起動すればコンポーネントとして使用できるようになるわけだ。再起動するのがめんどくさい人はコンポーネント ウィンドウをリロードしても認識されるよ。
つかってみる。
実際に使うときは、コンポーネントウィンドウからステージにドラッグ＆ドロップしてインスタンス名をつける（_timerとしてみた）。これで準備OK。あとはメソッドを実行すれば・・・。
お試しソース
function myCompTest(msg:String) {
trace(msg);
}
_timer.addTimer(this, "myCompTest", 3000, ["3秒後にメッセージトレース"]);
_timer.addTimer(this, "myCompTest", 4000, ["4秒後にメッセージトレース"]);
_timer.addTimer(this, "myCompTest";, 5000, ["5秒後にメッセージトレース"]);
実行結果はこんな感じになる。もしかしたら便利かもしれないね。
今回はここまで！
次回は、
- コンポーネントにアイコンをつける
- パラメータを追加する
あたりを説明してみようかな。それでは、また。
