第3回タイムライン制御

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

★本日のテーマ

本日は、ActionScriptによるムービー管理の基本となる「タイムライン制御」を中心に講義を進める。
また、衝突判定などインタラクティブコンテンツにおける頻出テクニックも紹介し、タイムライン制御と合わせて使用する方法を紹介する。

★タイムライン制御(pp.87-102)

素材ファイル　→[download]

再生ヘッドの移動：ファイルの再生や停止、指定したフレームへの移動

MovieClip.stop(); ムービークリップの再生ヘッドを停止する。
※ MovieClipの部分には、インスタンス名を書く。

MovieClip. play(); ムービークリップの再生ヘッドを”再生状態”にする。

MovieClip. gotoAndStop(フレーム); 再生ヘッドを特定のフレームに移動させて停止させる。

MovieClip. gotoAndPlay(フレーム); 再生ヘッドを特定のフレームに移動させて、そこから再生状態にする。

currentFrameプロパティ
MovieClip.currentFrameで、MovieClip インスタンスのタイムライン内の再生ヘッドが置かれているフレームの番号を示す。

play_btn.addEventListener(MouseEvent.MOUSE_DOWN,onPlay);
stop_btn.addEventListener(MouseEvent.MOUSE_DOWN,onStop);
woman_btn.addEventListener(MouseEvent.MOUSE_DOWN,onWomanStart);
start_btn.addEventListener(MouseEvent.MOUSE_DOWN,onGoToFirst);

function onPlay(evt:MouseEvent){
  play();
  trace("現在のフレームは＝"+currentFrame);
}

function onStop(evt:MouseEvent){
  stop();
  trace("現在のフレームは＝"+currentFrame);
}

function onWomanStart(evt:MouseEvent){
  gotoAndPlay(28);
  trace("現在のフレームは＝"+currentFrame);
}

function onGoToFirst(evt:MouseEvent){
  gotoAndStop(1);
  trace("現在のフレームは＝"+currentFrame);
}

※　この場合、メインタイムラインの制御であるため、MovieClip.Play()などのMovieClip.の部分が省略できる。

入れ子構造のインスタンスのタイムライン制御

素材ファイル →[download]

"入れ子"の"子"となっているMovieClipのタイムラインも、ターゲットパスの指定次第で自由に制御できる。

boy.hikou_1.addEventListener(MouseEvent.MOUSE_OVER,disp_a);
boy.hikou_1.addEventListener(MouseEvent.MOUSE_OUT,disp_b);

boy.hikou_2.addEventListener(MouseEvent.MOUSE_OVER,disp_c);
boy.hikou_2.addEventListener(MouseEvent.MOUSE_OUT,disp_d);

boy.hikou_3.addEventListener(MouseEvent.MOUSE_OVER,disp_e);
boy.hikou_3.addEventListener(MouseEvent.MOUSE_OUT,disp_f);

/* 秘孔１のイベントハンドラ */
function disp_a(e:MouseEvent){
  boy.hikou_1.gotoAndStop(2);
}

function disp_b(e:MouseEvent){
  boy.hikou_1.gotoAndStop(1);
}

/* 秘孔２のイベントハンドラ */
function disp_c(e:MouseEvent){
  boy.hikou_2.gotoAndStop(3);
}

function disp_d(e:MouseEvent){
  boy.hikou_2.gotoAndStop(1);
}

/* 秘孔３のイベントハンドラ */
function disp_e(e:MouseEvent){
  boy.hikou_3.gotoAndStop(4);
}

function disp_f(e:MouseEvent){
  boy.hikou_3.gotoAndStop(1);
}

★衝突判定　hitTestObjectメソッド(p.130)

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

DisplayObject.hitTestObject(DisplayObject );

ある表示オブジェクト(含MovieClip)が、他の表示オブジェクトと接触しているかどうかを調べる。
接触している場合にはtrueを返し、していない場合にはfalseを返す。

※衝突判定に使われるのは、表示オブジェクトの形状ではなく、表示オブジェクトの境界ボックスである。
※上記のDisplayObjectの部分にはインスタンス名を書く。

//ステージにイベントリスナーを登録する。イベント＝キーが押された時。
stage.addEventListener(KeyboardEvent.KEY_DOWN,keydown);

function keydown(event:KeyboardEvent) {

  //「←」キーが押された場合
  if (event.keyCode == 37) {

      //もし、carとhitmanの衝突判定が偽ならば
      if (car.hitTestObject(hitman)==false) {
        car.x -= 10;

      } else {
       //carとhitmanの衝突判定が真ならば
       trace("当たった！！！");
      hitman.gotoAndStop(2);
     }
    //「→」キーが押された場合
 } else if (event.keyCode == 39) {

   car.x += 10;

    if (hitman.currentFrame == 2) {
      hitman.gotoAndStop(1);
    }
  }
}

★本日の課題

課題

何か絵もしくは図を描きなさい。
そして、上の「経絡秘孔」のプログラムを参考に、絵や図の特定の部分にマウスポインターを合わせると、その部分についての説明を含む「吹き出し」が表示されるようにしなさい。

本課題は「個人課題」です。

発展課題

前回の講義において作成したUFOのプログラムを改造しなさい。
UFOの他に何か別の物体(いん石や小惑星等）を用意し、UFOがその物体に衝突した際に「GAME OVER」と画面表示するようにしなさい。

「GAME OVER」は、traceメソッドを用いた出力ではなく、ステージ上にテキストフィールドを用意し、そこに表示するようにすること。

[Prev] [Home] [Next]

第3回 タイムライン制御