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

第2回 イベント処理

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


★本日のテーマ

本日は、Flashを用いてインタラクティブ・コンテンツを作成する上で、最も重要となるイベント処理について学習する。

※本日の内容は特に重要です。心して取り組んでください。



★グループ分け

今回は、出身地別にグループをつくる。

  • 席替え
    *毎回、グループで着席すること

  • グループメンバー表の作成
    全部で5部作成のこと。提出用1部+各メンバー分4部
    必ず、各自デジタル・データを保存しておくこと。

    ※ また、教材フォルダにも1部保存しておく。

    グループメンバー表フォーマットのダウンロード →[click]

    ●課題提出時のファイル名
    下記の例にならいファイル名をつける。

    [個人課題]
    例)osakaA_saito_110615.fla
    ※ 大阪など複数の区分があるばあいは、A、B、Cの識別アルファベットを大文字で付記する。

    [グループ課題]
    例)osakaA_110615.fla

    ★イベント処理とは?(pp.17-18)

    イベント処理とは、何かが起きたことを"キッカケ"として、任意の処理を実行するための仕組み。

    例えば、ボタンがクリックされたことを"キッカケ"として、オブジェクトの座標xに10加算するなどといった処理。


    すなわち、特定の処理があるとして、それを「いつ実行するのか」ということが問題になる。
    キッカケは「ボタンが押された時」なのか、「特定のフレームが読まれた時」な のか、「キーボードのキーが押された時」なのか??

    そして、そうしたキッカケを統制するのが、「イベントリスナー」である。


    次のサンプルプログラムを見てみよう。 →[download]
    this.btn.addEventListener(MouseEvent.CLICK,showMessage);
    
    function showMessage(event:MouseEvent){
    
     trace("高さは"+this.obj.height+"です。");
     trace("幅は"+this.obj.width+"です。");
     trace("xは"+this.obj.x+"です。");
     trace("yは"+this.obj.y+"です。");
        
    }
    

    ★ イベントリスナーの使用(p.94) 【重要】

    addEventListenerメソッド

    addEventListenerは、「●●に、あることが起きた場合、こうしなさい」ということを設定するメソッドである。
    →「●●」は、インスタンス。「あること」はイベント。「こうしなさい」は関数。

    インスタンス名.addEventListener(イベント定 数(イベントの種類), 通知先の関数名(イベントハンドラ));

    通知先の関数の設定
    →「こうしなさい」の内容を記述する。

    function 関数名 ( 引数 ) { 処理 ;}

    よく使うイベント定数(イベントの種類)

    イベント定数説明
    MouseEvent.CLICKクリックしたときに発生するclickイベントを表す
    KeyboadEvent.KEY_DOWN キーが押されたときに発生するKeydownイベントを表す
    Event.ENTER_FRAMEFPSに合わせたタイミングで発生するenterFrameイベントを表す



    ★マウスイベントを使ったプロパティ制御

    マウスイベントの種類

    イベント定数説明
    MouseEvent.CLICKオブジェクトの領域内でマウスボタンを押して離す
    MouseEvent.DOUBLE_CLICKオブジェクトの領域内でマウスボタンを連続して2回押して離す。
    MouseEvent.MOUSE_DOWNオブジェクトの領域内でマウスボタンを押す
    MouseEvent.ROLL_OVERオブジェクトの領域内にマウスカーソルが入る
    MouseEvent.ROLL_OUTオブジェクトの領域内からマウスカーソルが出る

    ★試してみよう

    次のファイルをダウンロードし、マウス操作によって車を前後に動かすプログラムを作成してみよう。→[download]

    this.left_btn.addEventListener(MouseEvent.CLICK,car_back);
    this.right_btn.addEventListener(MouseEvent.CLICK,car_go);
    
    function car_back(event:MouseEvent){
     this.car.x -= 10;
    }
    
    function car_go(event:MouseEvent){
     this.car.x += 10;
    }
    

    ★キーボードイベントを使ったプロパティの制御

    主なイベント定数

    イベント定数説明
    KeyboadEvent.KEY_DOWNキーが押された
    KeyboardEvent.KEY_UPキーが離された

    ★試してみよう

    先に作成した(マウス操作の)プログラムを改造し、キーボード操作によって車を前後に動かすプログラムを作成してみよう。
    //ステージにイベントリスナーを登録する。イベントはキーが押された時。
    stage.addEventListener(KeyboardEvent.KEY_DOWN,keydown);
    
    function keydown(event:KeyboardEvent){
    
    //押されたキーのキーコードを出力する
        trace(event.keyCode);
        
        //キーコードによって、処理を分岐させる。37は「←」キー、39は「→」
        キー。
        if(event.keyCode == 37){
        this.car.x -= 10;
        }else if(event.keyCode == 39){
        this.car.x += 10;
        }
    }
    

    ★練習

    次の素材ファイルを用いて、イベント処理の練習をしてみよう。
    素材のダウンロー ド → [click]
    • 拡大/縮小
      this.kakudai_btn.addEventListener(MouseEvent.CLICK, tako_kakudai);
      this.syukusyo_btn.addEventListener(MouseEvent.CLICK, tako_syukusyo);
      
      function tako_kakudai(event:MouseEvent){
       this.tako.scaleX *= 1.02;
       this.tako.scaleY *= 1.02;
      }
      
      function tako_syukusyo(event:MouseEvent){
       this.tako.scaleX *= 0.98;
       this.tako.scaleY *= 0.98;
      }
      

    • 回転

      this.hantokei.addEventListener(MouseEvent.CLICK, tokei_mawari);
      this.tokei.addEventListener(MouseEvent.CLICK, hantokei_mawari);
      
      function tokei_mawari(event:MouseEvent){
       this.tako.rotation -= 5;
      }
      
      function hantokei_mawari(event:MouseEvent){
       this.tako.rotation += 5;
      }
      

    • 透明度と可視性
    //0の時、visible==true / 1の時false
    var i:Number = 0; 
    
    this.vsible_btn.addEventListener(MouseEvent.CLICK, tako_visible);
    stage.addEventListener(KeyboardEvent.KEY_DOWN, alpha_updown);
    
    
    function tako_visible(event:MouseEvent){
    if(i==0){
    this.tako.visible = false; //見せなくする
    i=1;
    }else{
    this.tako.visible = true;
    i=0;
    }
    }
    
    function alpha_updown(event:KeyboardEvent){
        //keyCodeをえる。 
        //trace(event.keyCode);
        //38が「↑」 40が「↓」
        
        if(event.keyCode == 38){
        this.tako.alpha *=1.2;
        }
        
        if(event.keyCode == 40){
        this.tako.alpha *=0.8;
        }
    }
    

    [注意]イベントには、下記の2種類がある。
    1. ユーザの動作によるイベント
      例えば、マウスのクリックされた時に発生するイベントなど。
    2. 自動的に発生するイベント
      フレームが読み込まれた時に発生するイベントなど。

    ★Event.ENTER_FRAME

    特定フレームが読み込まれたことをキッカケに、ある処理を実行する。
    イベント定数説明
    Event.ENTER_FRAMEFPSに合わせたタイミングで発生するenterFrameイベントを表す

    ★removeEventListeneメソッド(p.95)

    不要になったイベントリスナーは、removeEventListenerメソッドで削除できる。
    各パラメータにはaddEventListenerメソッドで登録した時と同じ値を指定する。

    サンプルファイル →[download]
    stage.addEventListener(Event.ENTER_FRAME,car_go);
    
    function car_go(event) {
    this.car.x += 1;
    
    if(this.car.x >= 100){
    //x座標が100にななったら、イベントリスナーを削除する
    stage.removeEventListener(Event.ENTER_FRAME,car_go);
    }
    
    //テキストフィールドにx座標を表示
    this.x_zahyo.text = String(this.car.x);
    }
    




    ★本日の課題

    宇宙空間およびUFOを描きなさい。

    なお、UFOはキーボード操作によって左右に移動できるようにしなさい。(「←」キー、「→」キーを使用)
    また、直進/後退による遠近感を表現するために、UFOの大きさを拡大縮小できる ようにしなさい。この処理についてもキーボード操作によって行う。(「↑」キー (前進:縮小)、「↓」キー(後退:拡大)を使用。)

    なお、本日の課題は「個人課題」である。

    <注意事項>
    グループで、知識、技術を共有するように努めてください!
    困っているメンバーがいたら積極的に助けましょう。
    分からないことがあれば、どんどん他のメンバーに質問しましょう。


    発展課題1(時間があまった人はやってみよう)

    教科書やWebサイトなどを各自で調べ、UFOの座標をテキストフィールドに表示するように上記課題プログラムを改造しなさい。

    ↓テキストフィールドへの座標表示の例

    発展課題2(さらに時間があまっている人)

    前回制作した「BMI値計算アプリ」に下記の新機能をつけ加えなさい。

    <追加機能>
    算出されたBMI値にしたがって分岐処理をおこない、適当なメッセージとイラストを表示する。
    例えば、 BMI値が30以上の場合は、「ダイエットをしよう!」というメッセージとともに、 ジョギングをしているイラストやアニメーションを表示するといった具合。

    イラスト(アニメーション)の切り替えはgotoAndStop()などタイムライン制御のメソッドを活用するとよいだろう。

    BMI値の詳細は下記サイトを参照↓
    BMI計算器
    [Prev] [Home] [Next]