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

第3回 タイムライン制御

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


★本日のテーマ

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


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

素材ファイル →[download]

★インタラクティブ・コンテンツ作成テクニックス(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);
    }
  }
}


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


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

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

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

[サンプルファイル] menuBtn.fla
[サンプルファイル] menu.xml
<手順>
  1. ボタンを作る。
    • ムービークリップ型でボタン用のシンボルを作成。
      ボタンラベルを表示するためのテキストフィールドを配置しておく。

      ボタン型を使用しないのは、ボタン内のテキストフィールドに動的にテキストを挿入できるゆようにするため。
    • ライブラリでリンケージの設定をおこなう。
      ライブラリ内のシンボルをASを使って動的に配置するため。

  2. 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

  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++; //カウンター:ループが回るたびに1増加
        }
    }
    
    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の締め切りは、次々回(第5回)終了時までとします。

本日の課題の進め方

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