２０１１年度　インタラクティブ映像制作実習II(1)

[Prev] [Home] [Next]

第４回表示リスト

担当者: 斎藤進也 (saitos[at]fc.ritsumei.ac.jp)

★本日のテーマ

本日は、オブジェクトの配置を制御する上で重要となる「表示リスト」について学習する。
本日の内容において特に重要だといえるのは「addChildメソッド」であり、今後、多用することが予想されるので、確実に理解するように。

★ 表示リスト（pp.15-16）

●表示リストとは

表示リストとは、Flashで「画面に表示するもの（絵や文字列など）」を管理する仕組みである。

●表示リストのイメージ

「表示リスト」は、組織図などのような“ツリー状”のリストとして管理される。
頂点から、だんだんと下のものへとつながっていく仕組みとなっている。
そして、この頂点にあたるのが「Stageオブジェクト」である。

Flashムービーは、再生されるとまずStageオブジェクトが自動で作成され、続いて、それに連なる１つ目のメンバとして「メインのタイムライン」が作成される。
そして、任意に作成したオブジェクト（絵、テキストなど）を表示リストのメンバとして追加すると、そのオブジェクトが画面に表示される。

・参考サイト
表示リストのプログラミング Adobe公式
ActionScript3.0入門ノート

★表示リストへの子の追加（p.104,p.166）

ActionScriptを用いて「ライブラリ」内のシンボルを表示リストに追加する方法について説明する。

次の素材ファイルをダウンロードして開く。→[download]

★リンケージの設定

ライブラリ内の任意のムービークリップを選択。[右クリック]→[リンケージ]

[リンケージのプロパティ]で、「リンケージ：」項目のActionScriptに書き出しにチェック。
必要に応じクラス名を変更する。（ここでは、そのまま「kodomo」を使用）

下記のメッセージがでるが、「ＯＫ」ボタンを押す。

ライブラリの「リンケージ」項目にクラス名が表示されていることを確認。

★インスタンスの生成

ActionScriptによって、表示リストへのクラス（インスタンス）の追加／削除を制御するためには、先ず、スクリプトパネルにインスタンスを作成するための記述を行う必要がある。

インスタンスの生成するためのスクリプト。

new クラス名() ;

※ クラス名は、上述のリンケージの設定時に用いたもの。

ex) MovieClipインスタンスを作成する場合下記のように記述する。新規クラスを、MovieClip型の変数に代入するという形をとる。

var インスタンス名:MovieClip = new クラス名() ;

ここでは、下記のように記述する。ここではのクラス名は、上述のリンケージプロパティにおいて設定したものを用いる。

var boy:MovieClip = new kodomo;

「new クラス名();」でインスタンスが生成されるが、これだけでは表示リストには追加されない。
生成したインスタンスを表示リストに追加するためには、「addChild()メソッド」を用いる。

★addChild ()メソッド(p.104, p.166)

表示リストにインスタンスを追加する際に用いるaddChildメソッドの書式は下記の通りである。

表示オブジェクトコンテナ.addChild(インスタンス名 );

ここでは、下記のように記述する。

var boy:MovieClip = new kodomo;
this.addChild(boy);

また、追加するインスタンスのプロパティを設定することも可能である。
適当にプロパティ値を変更し、ムービーを実行してみよう。

var boy:MovieClip = new kodomo;
boy.x = 100;
boy.y = -50;
boy.width = 350;
boy.height = 300;
this.addChild(boy);

★remoevChild()メソッド(p.104,p.106)

removeChildメソッドを用いると、表示リストからインスタンスを削除することができる。
removeChildメソッドの書式は下記の通りである。

表示オブジェクトコンテナ.removeChild(インスタンス );

15フレーム目に、キーフレームを作成し、下記のスクリプトを書いてみよう。

this.removeChild(boy);
trace("消えた！");

さらに、間を作るため30コマ目までフレームを挿入し、ムービーを実行してみよう。

練習

ボタンを押すと、インスタンスが表示されるようにする。
前回学んだaddEventListenerメソッドを用いる。

var i:int = 0;//フラグ（0のとき非表示、１の時表示）

var boy:MovieClip = new kodomo();
this.btn_a.addEventListener(MouseEvent.CLICK,hyouji);
this.btn_r.addEventListener(MouseEvent.CLICK,sakujyo);

function hyouji(event:MouseEvent) {
　if (i==0) {
　　this.addChild(boy);
　　i=1;
　}
}

function sakujyo(event:MouseEvent) {
　if (i==1) {
　　this.removeChild(boy);
　　i=0;
　}
}

★ループ処理による大量のインスタンス配置

var i:int;

for(i=0; i<120; i++){
  
  var boy:MovieClip = new kodomo();

  //x,yをランダムに割り当てる。
  boy.x = Math.random() * 500;
  boy.y = Math.random() * 350;
  
  this.addChild(boy);

}

※ループ処理（for文など）については、教科書p31を参照のこと。
※ランダム関数（Math.randam()）については、教科書p.45を参照のこと。

★入れ子構造

次の素材ファイルをダウンロード。→[download]

mado（win）を配置し、madoの中にcar（kuruma）を配置する。

var kai:int = 0;

var win:MovieClip = new mado();
var kuruma:MovieClip = new car();

this.add_btn.addEventListener(MouseEvent.CLICK,add_nest);

function add_nest(event:MouseEvent){

  if(kai == 0){
  //窓の座標とスケールの設定
    win.width = 400;
    win.height = 400;
    this.addChild(win);
    kai++; //kaiの値を１増やす
  }else if(kai == 1){
    kuruma.x = 15;
    kuruma.y = 30;
    kuruma.width = 60;
    kuruma.height = 40;
    this.win.addChild(kuruma);
    kai++;
  }

}

★課題A

自身の地元出身の名士、著名人、歴史上の人物をひとり選び、顔を描きなさい。
さらに、ボタンを押すと、眼鏡、帽子、ヒゲなどがそれぞれ追加されたり、消えたりするインタラクティブ・コンテンツを作成しなさい。追加アイテムは、眼鏡、帽子、ヒゲである必要はないが、少なくとも２つ以上のアイテムを用意しなさい。

アイテム（眼鏡、帽子など）と同数のボタンを配置しなさい。そして、それぞれのインスタンスが配置されていない時にボタンを押すとインスタンスが配置され、逆に、インスタンスが配置されている時に押すとインスタンスが削除されるようにしなさい。

なお、addChildメソッド、removeChildメソッドを使用すること。
なお、課題Aは「個人課題」である。

＜注意事項＞
グループで、知識、技術を共有するように努めてください！
困っているメンバーがいたら積極的に助けましょう。
分からないことがあれば、どんどん他のメンバーに質問しましょう。

課題B

今後、班ごとにWebサイトを作っていく予定。
今日は、サイトのホームページ(トップページ)に配置するメニューボタンを作成してください。

次回以降、いろいろなコンテンツを制作していきますが、メニューボタンを押すことで各コンテンツを閲覧できるようにする予定です。
したがって、今後フレキシブルにボタンの追加、編集ができるような設計にしてください。

本日示した例のように、ボタンを押した際に、新たなページを開くという方法ではなく、トップページに大きめのムービークリップを用意しておき、タイムライン制御を用いて各コンテンツ間の移動を実現する方法を推奨する。

また、トップページに表示するグラフィックやアニメーションを作成するとともに、サイト内に前回の課題A（地図コンテンツ）を組み込む方法について議論しなさい。

時間に余裕があれば、実際に組み込んでみよう。

課題Bは「グループ課題」です。
※課題Bの締め切りは、次々回（第５回）終了時までとします。