２０１４度　ウェブアニメーション実習（後半）
[Prev] [Home] [Next]

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

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

★本日のテーマ

本日は、インタラクティブ・コンテンツを制作する上で、特に使用頻度の高いテクニックを取り上げ解説する。

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

★先週の課題について

最終課題にむけての時間確保のため、内容を変更し簡略化します。
英語学習のリスニング教材を作成してください。

（１）それぞれに好きな英語のフレーズを考える。
（２）以前、講義で習った手順に従い録音する。※ひとり１フレーズ。
（３）ボタンを押すと、声が再生される仕組みを作る。
（４）フレーズの日本語訳（正解の選択肢）と不正解の選択肢を用意する。
（５）各選択肢に対応するボタンを用意する。
（６）各ボタンが押されたと時に正解/不正解が表示されるようにする。（タイムライン制御による）
------------▲ここまでやればよい【個人課題】▲---------------
（７）グループと他のメンバーの問題と統合する。
→ タイムライン制御もしくはaddChildを用いて問題を切り替える仕組みを作る。
（８）グループメンバーと相談し、さらに付加的な機能やアニメーションなどを自由に追加し、洗練化する。
------------▲（７）（８）は、時間に余裕があるグループのみ挑戦【グループ課題】▲---------------


締め切りは、次回の講義（７月９日）の開始前までとする。

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

★ startDrag メソッド / stopDragメソッド

素材ファイル　→[download]

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

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

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


このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

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

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

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

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

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

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

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

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

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

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

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

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

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

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

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

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

★ENTE_FRAMEイベントを利用したオブジェクトの移動

サンプルプログラムのダウンロード　 [click]

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得
＜ポイント＞
●公式 
1. 角速度へのx速度、y速度への変換
ax = speed * Math.cos(angle);
ay = speed * Math.sin(angle);

2. 加速度の速度への加算
vx += ax;
vy += ay;

3. ムービークリップの座標への適用
movieclip.x += vx;
movieclip.y += vy;
ソースコード 

var vr:Number=0;//回転速度
var thrust:Number=0;//推進力 ファイヤー
var vx:Number=0;
var vy:Number=0;

uchu_sen.fire.visible=false;

stage.addEventListener(Event.ENTER_FRAME, onEF); //フレームが読み込まれ
るたびに
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onUp);

function onDown(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case Keyboard.LEFT :
  vr=-5;
  break;

  case Keyboard.RIGHT :
  vr=5;
  break;

  case Keyboard.UP :
  thrust=0.2;
  .uchu_sen.fire.visible=true;
  break;

  default :
  break;
 }
}

function onUp(event:KeyboardEvent):void {
  vr=0;
  thrust=0;
  uchu_sen.fire.visible=false;
}

function onEF(event:Event):void {

  //角加速度の計算　：　x,y座標への適用
  uchu_sen.rotation+=vr;
  var angle:Number=uchu_sen.rotation*Math.PI/180;
  var ax:Number=Math.cos(angle)*thrust;
  var ay:Number=Math.sin(angle)*thrust;
  vx+=ax;
  vy+=ay;
  uchu_sen.x+=vx;
  uchu_sen.y+=vy;

  /* 画面から船がはみ出した時の処理 */
  var left:Number=0;
  var right:Number=stage.stageWidth;
  var top:Number=0;
  var bottom:Number=stage.stageHeight;

  if (uchu_sen.x-uchu_sen.width/2>right) {
    uchu_sen.x=left-uchu_sen.width/2;
  } else if (uchu_sen.x + uchu_sen.width / 2 < left) {
    uchu_sen.x=right+uchu_sen.width/2;
  }
  if (uchu_sen.y-uchu_sen.height/2>bottom) {
    uchu_sen.y=top-uchu_sen.height/2;
  } else if (uchu_sen.y < top - uchu_sen.height / 2) {
   uchu_sen.y=bottom+uchu_sen.height/2;
 }

}

★簡単なシューティングゲーム

サンプル・プログラムをダウンロード→[click]

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

＜ポイント＞
＜応用＞
前回の講義資料を参照し、キーが押された時、弾が敵に当たった時に音が鳴るように改造してみよう！ 

//フラグ　対戦中の時=１　ゲームオーバー時=0
var play_m:int = 1;

//敵のパワー設定
var score_p:int=200;

//敵のパワーの表示
score.text = String(score_p);

//弾の数の設定
var dan_p:int=10;

//残り弾数の表示
nokori.text = String(dan_p);


/**
*敵キャラの移動とゲームの終了の判断
*/
addEventListener(Event.ENTER_FRAME,enemy_move);
function enemy_move(Event) {

　//敵キャラの移動
　if (enemy.x < 450) {
　　enemy.x += Math.floor(Math.random()* 20);
　} else {
　　enemy.x -= Math.floor(Math.random()* 500);
　}

　//ゲーム終了判断
　//弾が無くなったら　you lose
　if (dan_p < 1) {
　　play_m = 0;//フラグ設定 ゲーム終了のサイン
　　enemy.visible = rkt.visible  = false;//キャラを消す
　　kekka.text = "YOU LOSE!";//結果表示
　　score.text = nokori.text = " ";//スコアを消す
　　hyouji.visible = false;//スコアを消す
　}

　//敵のパワーが無くなったら　you win
　if (score_p < 1) {
　　play_m = 0;//フラグ設定 ゲーム終了のサイン

　　enemy.visible = rkt.visible  = false;//キャラを消す
　　kekka.text = "YOU WIN!";//結果表示
　　score.text = nokori.text = " ";//スコアを消す
　　hyouji.visible = false;//スコアを消す
　}
}


/**
*味方（ロケット）の制御
*/

//キーボードでロケットを動かすためリスナー登録
stage.addEventListener(KeyboardEvent.KEY_DOWN,rkt_move);

function rkt_move(evt:KeyboardEvent) {

　if (play_m == 0) {
　　//ゲームオーバーになった場合、イベントリスナーを削除
　　stage.removeEventListener(KeyboardEvent.KEY_DOWN,rkt_move);
　}

　trace(evt.keyCode);

　if (evt.keyCode == 37) {
　　//左キーが押された時
　　rkt.x -= 15;
　}
　if (evt.keyCode == 39) {
　　//右キーが押された時
　　rkt.x += 15;
　}
　if (evt.keyCode == 32) {

　　if (play_m==1) {
　　　//spaceが押された時
　　　dan_p--;//残りの弾数を1減らす
　　　nokori.text = String(dan_p);

　　　//弾をaddChildによって表示
　　　var dan:MovieClip = new tama();
　　　dan.x = rkt.x;
　　　dan.y = rkt.y;
　　　addChild(dan);

　　　//弾の動きを制御するためイベントリスナー登録
　　　stage.addEventListener(Event.ENTER_FRAME,dandou);
　　　function dandou(Event) {
　　　　//フレームが読み込まれるたびに、弾のyを-15する
　　　　dan.y -= 15;
　　　　//弾と敵がぶつかったら
　　　　if (dan.hitTestObject(enemy)==true) {
　　　　　//弾が弾ける
　　　　　dan.gotoAndPlay(2);
　　　　　//敵が顔をしかめる。
　　　　　enemy.gotoAndPlay(29);
　　　　　//敵のパワーが5減る
　　　　　score_p-=5;
　　　　　score.text = String(score_p);
　　　　}
　　　}
　　}
　}
}

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

本講義にてこれまで習得した知識・技術を組み合わせて用い、簡単なFlashゲームを制作しなさい。 ゲームの種類（シューティング、アクション、パズル、クイズ等）は、自由とする。

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



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

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


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

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

[Prev] [Home] [Next]