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

第３回 表示リスト

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

★本日のテーマ


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

イベント処理の補足

前講で触れられなかった要点について捕捉する。

★Event.ENTER_FRAME

特定フレームが読み込まれたことをキッカケに、ある処理を実行する。
イベント定数説明
Event.ENTER_FRAMEFPSに合わせたタイミングで発生するenterFrameイベントを表す

★removeEventListeneメソッド(p.95)

不要になったイベントリスナーは、removeEventListenerメソッドで削除できる。
各パラメータにはaddEventListenerメソッドで登録した時と同じ値を指定する。

サンプルファイル →[download]
stage.addEventListener(Event.ENTER_FRAME,car_go);

function car_go(event) {
this.car.x += 1;

if(this.car.x > 100){
//x座標が100にななったら、イベントリスナーを削除する
stage.removeEventListener(Event.ENTER_FRAME,car_go);
}

//テキストフィールドにx座標を表示
this.x_zahyo.text = String(this.car.x);
}


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

●表示リストとは

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

●表示リストのイメージ

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

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

★ 表示リストへの子の追加（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++;
  }

}

★本日の課題

男性の顔の絵を描きなさい。さらに、ボタンを押すと、眼鏡、帽子、ヒゲがそれ ぞれ追加されたり、消えたりするインタラクティブ・コンテンツを作成しなさい。


ボタンは、眼鏡、帽子、ヒゲの３種用意しなさい。そして、それぞれのインスタ ンスが配置されていない時にボタンを押すとインスタンスが配置され、逆に、イ ンスタンスが配置されている時に押すとインスタンスが削除されるようにしなさ い。


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


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

発展課題

上記課題の作品を改造し、眼鏡、帽子、ヒゲをそれぞれ２種類ずつ用意し、切り 替えられるようにしなさい。
[Prev] [Home] [Next]