第5回　「表示リスト」で画面上のインスタンスの階層や重ね順を管理する

吉岡梅

2007.11.30

　ActionScriptでFlashムービー上のイラストやボタン等の配置をしたり，消去をしたりといった処理をする際に，知っておきたい基本的な仕組みに「表示リスト」（＊1）があります。

　図1のムービーでは，6種類の料理のイラストを，任意のお皿の上に配置しています。また，料理を配置したお皿が移動すると，その上に乗っている料理も一緒に移動します。このような動きを作成したい場合には，「表示リスト」の仕組みを知っておくのが便利です。

図1：表示したり，消去したり，移動したり（クリックすると別ウィンドウで表示します）

スクリプトを使ってインスタンスを配置する

　では，実際にコードを記述しながら「表示リスト」の仕組みを学習してみましょう。まずは，ステージ上に，スクリプトからインスタンスを作成して配置できるようにします。ActionScript3.0では，スクリプトを使ってインスタンスを配置するには，ライブラリ内のシンボルを「クラス化」するのが簡単です。

　シンボル化の手順のおさらいをしておきましょう（図2）。

図2：シンボル化の手順

　新規Flashドキュメントを作成し，任意のフォルダに保存します。ステージ上に適当なイラストを描き，描いたイラストを選択して[F8]キーを押します。すると，[シンボルに変換]ダイアログボックスが表示されますね。ここまでは前回ご紹介した「シンボル化」の操作と同じ手順ですね。

　今回は，さらにこの[シンボルに変換]ダイアログボックスの[詳細]ボタンを押します。すると，図3のように表示の内容が変化します。

図3：クラス名を付ける

　[ActionScript用に書き出し]にチェックを入れ，[クラス名]欄にわかりやすい任意の名前を入力します。今回は，お皿の絵を描いたので「Plate」というクラス名を付けてみました（＊2）。[OK]ボタンを押すと，図4のような警告メッセージが表示されますが，問題ない操作なので，そのまま[OK]ボタンを押します（＊3）。

図4：警告メッセージ

　これでクラス化の作業は終了です。[Ctrl]+[l]を押して[ライブラリ]パネルを確認してみると，「リンケージ」という見出しの所に，先ほど付けたクラス名である「Plate」が表示されていることを確認できますね（＊4）。

　さて，この「クラス化」したシンボルは，ActionScriptのコードからステージ上にインスタンスを配置できるようになります。今までは，[ライブラリ]パネルからステージへと，シンボルをドラッグ＆ドロップして配置していましたが，この操作をコードから実行できるようになるのです。

　実際にコードを記述してみましょう。新規のレイヤーを追加し，次のようにコードを記述します。

//変数「plate1」に
//Plateクラスのインスタンスを作成して代入
var plate1:Plate = new Plate();
//ステージに表示
this.addChild(plate1);
//位置を調整
plate1.x = 100;
plate1.y = 150;

　ムービープレビューを実行すると，「Plate」クラスのインスタンスが一つ，(x座標,y座標)が(100,150)の位置に表示されることを確認できます（図5）。ActionScriptのコードから，[ライブラリ]内のクラス(シンボル)のインスタンスを，ステージ上に配置できましたね。

図5：new+addChildで表示

　では，先ほど記述したコードが，どんなことをしているのかを，1行ずつ見ていきましょう。まずは1行目です。

var plate1:Plate = new Plate();

　この行は，「インスタンスの生成」という命令と，「変数への格納」という命令を行っています。手作業でやるならば，「new Plate()」という部分が，「[ライブラリ]パネル内の『Plateクラス』から，新しい(new)インスタンスを，一つ生成する。」という命令となります。

　さらに，「var plate1:Plate = 」の部分では，「plate1」という名前で，先ほど生成したインスタンスを扱えるようにしています。このように，「任意のクラスからインスタンスを生成し，それを扱いやすいように『変数』を使って指定できるようにする（＊5）」という処理は，

var 変数名:クラス名 = new クラス名();

のようにコードを記述します。ちょうど，手作業でステージに配置したインスタンスに「plate1」と「インスタンス名」を付ける作業によく似ていますね（＊6）。

　では，次の行を見てみましょう。

this.addChild(plate1);

　この行は「『plate1』をステージに配置する」という命令を行っています。

　実は，インスタンスを作成しただけでは，画面には表示されないのです。「new クラス名()」という処理は，とりあえずコンピュータのメモリーの中にインスタンスを準備しただけの状態となります。準備ができたインスタンスは，前回もご紹介した「addChildメソッド」を使うことによって，ステージの表示リストに追加され，結果として画面に表示されます。

　では，最後の2行も見てみましょう。

plate1.x = 100;
plate1.y = 150;

　この2行は，「『plate1』のx座標を100に，y座標を150に設定する」という命令を行っています。では，一連の処理をもう一度おさらいしてみましょう。スクリプトから[ライブラリ]パネル内のクラス(シンボル)をステージに配置するには，