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

第５回 インタラクティブ・コンテンツ制作Tips：基礎編

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

★本日のテーマ

本日は、インタラクティブ・コンテンツを制作する上で、特に使用頻度の高いテクニックを取り上げ解説する。
中でもサウンド処理に力点を置く予定である。

また、応用力を強化するため実践課題に取り組む。

★インタラクティブ・コンテンツ作成テクニックス（２）

★サウンドの制御(p.436)

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

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

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

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

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

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



クラス名を付ける。
リンケージの設定方法の詳細については、「第３回 表示リスト」を参照のこと。
（２）ActionScriptの記述
まず、new演算子を用いて、インスタンスを作成する。
new クラス名(); インスタンスを生成する。
具体的には、次のように記述する。Sound型の変数に代入するというかたちをとる。
var oto_a:Sound = new sound_1();

play()メソッド、stop()メソッドを用いて、再生／停止する。
Sound.play(); サウンドを再生する。

SoundChannel.stop(); 管理しているサウンドを停止する。

＜注意＞
stop()メソッドを使用するには、play()メソッドの実行時に、サウンドをSoundChannel型変数に割り当てておく必要がある。
↓ 
var oto_a:Sound = new sound_1(); //ライブラリに登録されているsound_1をインスタンス化、変数oto_aに格納
var oto_kanri:SoundChannel; //SoundChannel型変数の宣言
var oto_kanri = oto_a.play(); //oto_aを再生すると同時に、oto_kanri（SoundChannel）に割り当てる
.
.
中略
.
.
oto_kanri.stop();


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

this.play_btn.addEventListener(MouseEvent.CLICK,snd_play);

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


stage.addEventListener(KeyboardEvent.KEY_DOWN,key_sound);
var space_snd:Sound = new bm1;
var migi_snd:Sound = new bm2;
var hidari_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("右");
migi_snd.play();
}else if(evt.keyCode==37){
trace("左");
hidari_snd.play();
}

}


★ ＜参考テクニック＞ startDrag メソッド / stopDragメソッド (p.174)

素材ファイル　→[download]

startDrag メソッド / stopDragメソッドを用いることで、任意のオブジェクトをドラッグして移動されることが可能。　

MovieClip.startDrag(); オブジェクトのドラッグを開始する。

MovieClip.stopDrag(); オブジェクトのドラッグを終了する。 



/*トマト*/
this.tomato_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_tomato_a);
this.tomato_a.addEventListener(MouseEvent.MOUSE_UP,drop_tomato_a);

function drag_tomato_a(e:MouseEvent){
  //ドラッグ開始
   this.tomato_a.startDrag();
}

function drop_tomato_a(e:MouseEvent){
  //ドラッグ終了
  this.tomato_a.stopDrag();
}

/* ピーマン */
this.p_man_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_p_man);
this.p_man_a.addEventListener(MouseEvent.MOUSE_UP,drop_p_man);

function drag_p_man(e:MouseEvent){
  //ドラッグ開始
  this.p_man_a.startDrag();
}

function drop_p_man(e:MouseEvent){
  //ドラッグ終了
  this.p_man_a.stopDrag();
}
★numChildrenプロパティ、setChildIndexメソッド : 重なり順のコントロール(p.161)
→ドラッグした時に、重なりが最前面になるようにする。

サンプルファイル→ [download]

DisplayObjectContainer.numChildren 表示オブジェクトコンテナ内の子オブジェクトの数を返す。

DisplayObjectContainer.setChildIndex(オブ ジェクト ,インデックス); オブジェクトに任意のインデックス位置（順番）を割り当てる。 


/* トマト */
this.tomato_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_tomato_a);
this.tomato_a.addEventListener(MouseEvent.MOUSE_UP,drop_tomato_a);

function drag_tomato_a(e:MouseEvent){
  //ドラッグ開始
  this.tomato_a.startDrag();
	   
 
  var myContainer:DisplayObjectContainer = this.tomato_a.root as DisplayObjectContainer;
  var lastIndex:int = myContainer.numChildren-1; //１引くのは、index番号は0から始まるため myContainer.setChildIndex(this.tomato_a,lastIndex); 
}

function drop_tomato_a(e:MouseEvent){
 //ドラッグ終了
 this.tomato_a.stopDrag();
}

/* ピーマン */
this.p_man_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_p_man);
this.p_man_a.addEventListener(MouseEvent.MOUSE_UP,drop_p_man);

function drag_p_man(e:MouseEvent){
  var myContainer_b:DisplayObjectContainer = this.p_man_a.root as DisplayObjectContainer;
  var lastIndex_b:int = myContainer_b.numChildren-1;
  myContainer_b.setChildIndex(this.p_man_a,lastIndex_b);
  //ドラッグ開始
  this.p_man_a.startDrag();
}

function drop_p_man(e:MouseEvent){
  //ドラッグ終了
  this.p_man_a.stopDrag();
}

★実践課題（２）Flashゲーム製作企画

本講義にてこれまで習得した知識・技術を組み合わせて用い、簡単なFlashゲームを制作しなさい。 ゲームの種類（シューティング、アクション、パズル、クイズ等）は、自由とするがこれまでの成果との整合性を考慮し、各自の出身地域と関わりのある題材を選ぶことが望ましい。

なお、本講義では今後、Flashゲームの制作と前々回より取り組んでいる班ごと のWebサイト構築（地元PRサイト）を主な作業として進める予定である。

最終的には、FlashゲームもWebサイトのいちコンテンツとして組み込む。


＜手順＞
（１）企画書の作成（全員作成する) →企画書フォーマットのダウンロード
（２）グループ内で企画を選考。
　採用する企画は基本的にグループで１つとする。
　特に希望する場合は、グループで２つまで可とする。
　→採用された企画書を本日提出（次回授業終了時まで受け付ける）
（３）制作作業に取り掛かる。
　自分の作業が早く終わった人は、他のメンバーの仕事を手伝うこと。
＜要点・注意点＞
・企画を選考するにあたって、十分に実現可能性や役割分担について吟味すること。
・役割分担にあたって、グループメンバー全員がプログラミングをする必要はない。
・今回は、実践的な課題であるため、授業で習っていない技術も教科書等を参考にして積極的に導入しなさい。

＜地域PRサイトの要件＞
（１）トップページにメニューボタン（ナビゲーションバー）があり、各コンテンツにとべること。
（２）トップページにアニメーションをつくること。
（３）メニューボタンは、地図（第三回課題）、地域の有名人（第四回課題）、ゲーム（実践課題２）、関連リンク集のページの４つを最低限作成する。

＜企画書＞
企画書は、５部（グループで４部、提出用1部）作成のこと。５名で取り組む場合は、６部。３名で取り組む場合は４部。
ここでの企画書は、グループ内で採用されたものをさす。

・本日の日付のフォルダにグループ用フォルダを作成の上、一部、保存。


＜共同作業をするにあたって＞
・グループで知識やスキルを共有するよう努めて下さい。
・困っているメンバーがいたら、積極的に助けて下さい。
　

＜メンバー数が少なくて困っている班＞
・ボーナス得点あり
・実践課題に着手するまえに、教員と相談

[Prev] [Home] [Next]