第４回 タイムライン制御

★本日のテーマ

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

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

  MovieClip.stop();

  ムービークリップの再生ヘッドを停止する。

  
  
  

  MovieClip. play();

  ムービークリップの再生ヘッドをを”再生状態”にする。

  
  
  

  MovieClip. gotoAndStop(フレーム);

  再生ヘッドを特定のフレームに移動させて停止させる。

  
  
  

  MovieClip. gotoAndPlay(フレーム);

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

  
  
  

  this.play_btn.addEventListener(MouseEvent.MOUSE_DOWN,play_m); this.stop_btn.addEventListener(MouseEvent.MOUSE_DOWN,stop_m); this.onna_btn.addEventListener(MouseEvent.MOUSE_DOWN,onna_m); this.hajime_btn.addEventListener(MouseEvent.MOUSE_DOWN,hajime_m); function play_m(evt:MouseEvent){ this.play(); trace("現在のフレームは＝"+currentFrame); } function stop_m(evt:MouseEvent){ this.stop(); trace("現在のフレームは＝"+currentFrame); } function onna_m(evt:MouseEvent){ this.gotoAndPlay(28); trace("現在のフレームは＝"+currentFrame); } function hajime_m(evt:MouseEvent){ this.gotoAndStop(1); trace("現在のフレームは＝"+currentFrame); }

  ---

• フレームラベルを付ける
  任意のフレームラベルをつけることで、フレーム番号に依存せず再生ヘッドを移動させることができる。
  
  フレーム番号をもとにしたスクリプトを記述すると、のちにフレームを追加/削除するなどの編集を加えた場合に、フレーム番号にズレが生じプログラムを正常に実行できなくなるので、そうした恐れが有る場合は、フレームラベルを付与しておくと良い。
  
  任意のキーフレームを選択し、[プロパティ]のフレー ムの項目に記入。
  
  
  
  
  

  this.play_btn.addEventListener(MouseEvent.MOUSE_DOWN,play_m); this.stop_btn.addEventListener(MouseEvent.MOUSE_DOWN,stop_m); this.onna_btn.addEventListener(MouseEvent.MOUSE_DOWN,onna_m); this.hajime_btn.addEventListener(MouseEvent.MOUSE_DOWN,hajime_m); function play_m(evt:MouseEvent){ this.play(); trace("現在のフレームは＝"+currentFrame); } function stop_m(evt:MouseEvent){ this.stop(); trace("現在のフレームは＝"+currentFrame); } function onna_m(evt:MouseEvent){ this.gotoAndPlay('woman'); trace("現在のフレームは＝"+currentFrame); } function hajime_m(evt:MouseEvent){ this.gotoAndStop('first'); trace("現在のフレームは＝"+currentFrame); }

  
  

  ---

• 入れ子構造のインスタンスのタイムライン制御
  
  素材ファイル →[download]
  
  "入れ子"の"子"となっているMovieClipのタイムラインも、ターゲットパスの指定次第で自由に制御できる。
  
  
  

  this.boy.hikou_1.addEventListener(MouseEvent.MOUSE_OVER,disp_a); this.boy.hikou_1.addEventListener(MouseEvent.MOUSE_OUT,disp_b); this.boy.hikou_2.addEventListener(MouseEvent.MOUSE_OVER,disp_c); this.boy.hikou_2.addEventListener(MouseEvent.MOUSE_OUT,disp_d); this.boy.hikou_3.addEventListener(MouseEvent.MOUSE_OVER,disp_e); this.boy.hikou_3.addEventListener(MouseEvent.MOUSE_OUT,disp_f); function disp_a(e:MouseEvent){ this.boy.hikou_1.gotoAndStop(2); } function disp_b(e:MouseEvent){ this.boy.hikou_1.gotoAndStop(1); } function disp_c(e:MouseEvent){ this.boy.hikou_2.gotoAndStop(3); } function disp_d(e:MouseEvent){ this.boy.hikou_2.gotoAndStop(1); } function disp_e(e:MouseEvent){ this.boy.hikou_3.gotoAndStop(4); } function disp_f(e:MouseEvent){ this.boy.hikou_3.gotoAndStop(1); }

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

★ startDrag メソッド / stopDragメソッド (p.174)

/*トマト */
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();
}

//トマト 
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();
}