PR
 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に設定する」という命令を行っています。では,一連の処理をもう一度おさらいしてみましょう。スクリプトから[ライブラリ]パネル内のクラス(シンボル)をステージに配置するには,

  1. [ライブラリ]内のシンボルに「クラス名」を付ける
  2. 「クラス名」を使って「new クラス名()」としてインスタンスを生成する
  3. 2.で作成したインスタンスを,扱いやすいように「var 変数名:クラス名 = new クラス名()」のようなコードで「変数」に代入する
  4. 「addChildメソッド」を使用して,表示リストに追加し,表示する。
  5. 変数名を使って追加したインスタンスにアクセスし,x,yなどのプロパティを使って位置を調整する

と,上記のような手順で配置を行うことができます。