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

[Prev] [Home] [Next]

第3回タイムライン制御

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

★本日のテーマ

本日は、ActionScriptによるムービー管理の基本となる「タイムライン制御」を中心に講義を進める。
また、当たり判定、メニューボタンの動的配置といったインタラクティブ・コンテンツ制作における頻出テクニックを紹介する。

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

素材ファイル　→[download]

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

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);
}

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

★接触（当たり）判定　hitTestObjectメソッド(p.130)

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

DisplayObject.hitTestObject(DisplayObject );

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

※接触判定に使われるのは、表示オブジェクトの形状ではなく、表示オブジェクトの境界ボックスである。

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

function keydown(event:KeyboardEvent) {

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

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

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

   this.car.x += 10;

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

★ ウェブデザインテクニックス（１）: メニューボタンの動的配置

通常、企業などの自社サイトは、トピックごとに分けられ、それぞれにページが用意されている。
そして、サイトのトップページ（ホームページ）には、各トピックへのリンクが張られたボタン、あるいはナビゲーションバーが用意されている。
Flashを使うことで、そうしたボタンの作成、リンクの定義などを容易におこなうことが出来る。

一方で、ボタンやナビゲーションバーなどを固定的なものにしてしまうと、トピックを変更、追加することが容易におこなえなくなってしまうことがある。
そうした場合に備え、ActionScriptを用いてフレキシブルにメニューボタンを配置する仕組みを紹介する。

ここでは、外部に用意したXMLファイルを読み込み、XMLに記載される情報を元にボタンを配置する。
一見、面倒そうにみえるが、一度作ってしまえば、その後の編集や管理がとても楽。

[サンプルファイル]　menuBtn.fla
[サンプルファイル] menu.xml
＜手順＞

ボタンを作る。
- ムービークリップ型でボタン用のシンボルを作成。
  ボタンラベルを表示するためのテキストフィールドを配置しておく。
  
  ボタン型を使用しないのは、ボタン内のテキストフィールドに動的にテキストを挿入できるゆようにするため。
- ライブラリでリンケージの設定をおこなう。
  ライブラリ内のシンボルをASを使って動的に配置するため。
XMLファイルを作る。
xyzzy、もしくはメモ帳で作成。ファイル名は「menu.xml」。以下のxmlにおいて、buttonタグに囲まれた部分が各メニューボタンの情報。

<?xml version="1.0 "?>　

<menu>
  <button>
    <label> Rits</label>
    <url> http://www.ritsumei.jp/ </url>
  </button>
  <button>
    <label> Yahoo</label>
    <url> http://www.yahoo.co.jp/</url>
  </button>
</menu>

※XMLとは
→ 参考1
→ 参考2
→ 参考3

ActionScriptを書く。

var xmlfile:XML;//外部のXMLファイルを格納するための変数
var i:int = 0; //カウンター用変数

//XMLファイルの読み込み。および、読み込み後の 処理(xmlLoaded)
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("menu.xml"));//読み込み
loader.addEventListener(Event.COMPLETE,xmlLoaded);//読み込み後の処理を指定

function xmlLoaded(e:Event):void{//XMLファイルに記述されているデータを変数に格納        
    xmlfile = new XML(loader.data);


  //for eachステートメントを使いxmlfile におけるbutton要素分のループ処理
    for each (var button:XML in xmlfile.button){
      var menu_btn:btn = new btn();//あらかじめ作成しておいたボタンのインスタンス生成                
      menu_btn.menu_t.text = String(button.label);//ボタンのラベル設定
      menu_btn.menu_t.mouseEnabled = false;//テキストフィールドにマウスが反応しないように
      menu_btn.menu_t.selectable = false;//テキストフィールドが選択されないように
      menu_btn.linkTo = String(button.url);//ボタンの位置                
      menu_btn.x = 0 + i*150; //複数のボタンを横並びに配置　150はボタンのwidth
      menu_btn.y = 0;    

      //ボタンが押された時のアクション
      menu_btn.addEventListener(MouseEvent.CLICK,onClick);
      //ボタンをstageにaddChildする。つまり、実際に配置。
      stage.addChild(menu_btn);
                
      i++; //カウンター：ループが回るたびに１増加
    }
}

function onClick(e:MouseEvent){
        //ボタンがクリックされた時の処理
        //リンク先のページを開く
        var link:URLRequest = new URLRequest(e.target.linkTo);
        navigateToURL(link);
}

●参考キーワード：ググってみよう！

クラスとインスタンス、オブジェクト
URLLoaderクラス
URLRequestクラス
for each
addChildメソッド
navigateToURLメソッド

上記の仕組みでは、外部XMLファイル（menu.xml）におけるbutton要素を編集することで、メニューボタンの追加と削除、あるいは表示順の入れ替えなどをフレキシブルに行うことが出来る。

★本日の課題

課題A

出身都道府県、もしくは出身市区町村の地図を描きなさい。
そして、地図内に印をつけなさい。

その印にマウスカーソルをあわせることで、名所・旧跡、特産物、観光・レジャースポットなど、
注目すべきスポットの情報やイラストが表示されるというインタラクティブ・コンテンツを作成しなさい。

課題Aは「グループ課題」です。

※　いくつかの異なる出身地から選択する必要がある場合は、出身者数の多い地域にする。同数の場合は、話し合って決める。
　
課題Aの締め切りは、次回（第4回）の授業開始前までです。

課題B

今後、班ごとにWebサイトを作っていく予定。
今日は、サイトのホームページ(トップページ)に配置するメニューボタンを作成してください。

次回以降、いろいろなコンテンツを制作していきますが、メニューボタンを押すことで各コンテンツを閲覧できるようにする予定です。
したがって、今後フレキシブルにボタンの追加、編集ができるような設計にしてください。

本日示した例のように、ボタンを押した際に、新たなページを開くという方法ではなく、トップページに大きめのムービークリップを用意しておき、タイムライン制御を用いて各コンテンツ間の移動を実現する方法を推奨する。

余裕のある班は、トップページに表示するグラフィックやアニメーションを作成してください。

課題Bは「グループ課題」です。
※課題Bの締め切りは、次々回（第５回）終了時までとします。

本日の課題の進め方

本日はグループ課題が２つ出ています。あらかじめ役割分担について十分議論するように。