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

第４回 表示リストとサウンド

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

★本日のテーマ


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

また今回は、ゲームなどのインタラクティブコンテンツに不可欠な「サウンド」を扱う方法も学ぶ。

★ 表示リスト（pp.59-85）

●表示リストとは

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

●表示リストのイメージ

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

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



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

★表示リストへの子の追加


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

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

★リンケージの設定

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



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



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

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

★インスタンスの生成

ActionScriptによって、表示リストへのオブジェクト（インスタンス）の追加／削除を 制御するためには、先ず、インスタンスを作成するための記述を行う必要がある。
※クラスについての補足説明→[click]

インスタンスを生成するためのスクリプト。
new クラス名() ;
※ クラス名は、上述のリンケージの設定時に用いたもの。

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

ここでは、下記のように記述する。 ここではのクラス名は、上述のリンケージプロパティにおいて設定したものを用いる。 
var boy:MovieClip = new kodomo();

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

★addChild ()メソッド

表示リストにインスタンスを追加する際に用いるaddChildメソッドの書式は下記の通りである。
表示オブジェクトコンテナ.addChild(インスタンス名 );
※StageにaddChildする場合は、「表示オブジェクトコンテナ．」の部分を省略。

ここでは、下記のように記述する。 
var boy:MovieClip = new kodomo();
addChild(boy);

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

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

★remoevChild()メソッド

removeChildメソッドを用いると、表示リストからインスタンスを削除すること ができる。
removeChildメソッドの書式は下記の通りである。
表示オブジェクトコンテナ.removeChild(インスタンス );
※Stage上のオブジェクトをremoveChildする場合は、「表示オブジェクトコンテナ．」の部分を省略。

15フレーム目に、キーフレームを作成し、下記のスクリプトを書いてみよう。 
removeChild(boy);
trace("消えた！");


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

練習

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

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

var boy:MovieClip = new kodomo();
btn_a.addEventListener(MouseEvent.CLICK,onAdd);
btn_r.addEventListener(MouseEvent.CLICK,onRemove);

function onAdd(event:MouseEvent) {
　if (flag==0) {
　　addChild(boy);
　　flag=1;
　}
}

function onRemove(event:MouseEvent) {
　if (flag==1) {
　　removeChild(boy);
　　flag=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;
  
  addChild(boy);

}
※ループ処理（for文など）については、教科書p24を参照のこと。
※ランダム関数（Math.randam()）の参考サイト
[click→]ランダム関数の基本
[click→]ランダム関数の応用

★入れ子構造

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

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


var n:int = 0; //カウント用

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

add_btn.addEventListener(MouseEvent.CLICK,onAdd);

function onAdd(event:MouseEvent){

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

}

★サウンドの制御(pp.277-311)

ActionScript3.0によってサウンドを制御する場合、以下の３つの方式が考えられる。
方式説明
埋め込みアセットクラス方式「ライブラリ」内に読み込んで使用する。サウンドファイルは、埋め込み"アセットクラス"として登録される。
読み込み方式Flashムービーとは別にMP3ファイルを用意し、ムービー再生時にSoundクラスのloadメソッドを使って読み込み、再生を行う。
タイムライン配置方 式任意のムービークリップのタイムラインにサウンドを配置しておき、そのムー ビークリップを再生することで、サウンドを鳴らす。

ここでは、「埋め込みアセットクラス方式」によるサウンド制御の手順について解説する。

☆指示に従いながら、プログラミングしてみましょう。

（１）音源を用意する。
インターネット上には、無料で音源を提供しているサイトが多く存在する。
ただし、それらのサイトを利用する際には、利用規約をしっかりと守る必要がある。
また、利用規約はサイトによって異なるため、注意が必要。

●フリー音源提供サイトのリンク集

ここでは、「音の葉っぱ～効果音・ジングル・BGMのフリー音素材集～」より、音源を借用させて戴いた。
（２）音源（mp3ファイル）をライブラリに読み込み、リンケージの設定（クラス名の設定）を行う。



リンケージの設定。クラス名を付ける。
（２）ActionScriptの記述
まず、new演算子を用いて、インスタンスを作成する。
new クラス名(); インスタンスを生成する。
具体的には、次のように記述する。Sound型の変数に代入するというかたちをとる。
var s:Sound = new sound_1();

play()メソッド、stop()メソッドを用いて、再生／停止する。
Sound.play(); サウンドを再生する。
※Soundの部分は、使用する変数名がくる。上記の例でいうと「s」。「s.play();」となる。

また、サウンドの再生時に、それを「サウンドチャネル」に割り当てておくと、サウンドを制御する際に便利である。
SoundChannel型の変数を宣言し、サウンドの再生時に返される値をそこに格納するというかたちをとる。
var s_channel:SoundChannel = s.play();

サウンドを停止する場合は、下記のように書く。
SoundChannel.stop(); 管理しているサウンドを停止する。

上記の例に当てはめると、
s_channel.stop();
[※ミスに注意！！]上記の例でいうと、「s.stop();」としがちだが、これではダメ。

サンプル１

var wd_snd:Sound = new wd();
var wd_sndch:SoundChannel;
var f:int = 0; //0の時、停止中。　1の時、再生中。

play_btn.addEventListener(MouseEvent.CLICK,onSndPlay);

function onSndPlay(e:MouseEvent){
if(f==0){
/**
* 再生する。
*/
wd_sndch = wd_snd.play();
f=1;
play_btn.saisei.text = "停止"; 
}else{
/**
* 停止する。
*/
wd_sndch.stop();
f=0;
play_btn.saisei.text = "再生";
}
}

サンプル２

stage.addEventListener(KeyboardEvent.KEY_DOWN,key_sound);
var space_snd:Sound = new bm1();
var right_snd:Sound = new bm2();
var left_snd:Sound = new bm3();

function key_sound(evt:KeyboardEvent){
//trace(evt.keyCode);
//space=32 右=39 左=37
if(evt.keyCode==32){
trace("space");
space_snd.play();
}else if(evt.keyCode==39){
trace("右");
right_snd.play();
}else if(evt.keyCode==37){
trace("左");
left_snd.play();
}

}

★課題

自画像を描きなさい。
さらに、眼鏡ボタン、帽子ボタン、ピアスボタンを用意し、それらを押すと自画像に各アイテムが追加されるインタラクティブコンテンツを作成しなさい。
また、各アイテムを削除するボタンも用意しなさい。

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


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

★発展課題

DJ用ターンテーブルを描きなさい。（上から見た絵）
DJ用ターンテーブルでは、左右で２枚のレコードを再生できる。

左右にそれぞれに再生ボタンを用意し、それらを押すとレコードが回転し、音楽が流れるようにしなさい。また、停止ボタンを押すとレコードの回転が止まり、音楽が停止するようにしなさい。

左右のターンテーブルを別々に制御できるようにすること。

※　音源は、上で紹介したサイトのものを使わせて頂く。
[Prev] [Home] [Next]