プログラマのためのFlash遊び方

第4回 Flashのイベント処理を理解する

この記事を読むのに必要な時間:およそ 0.5 分

イベントオブジェクトとイベントハンドラ

では,clickHandler()メソッドを見ていきましょう。

画像

このように,イベントハンドラは1つの引数を受け取り,戻り値がない関数として定義します。関数の中に,イベントが発生したときの処理を書きます。

イベントオブジェクト

イベントハンドラの引数にはイベントオブジェクトが渡されます。

イベントオブジェクトには,イベントの種類やイベントの状態など,イベントに関する基本的な情報が格納されています。イベントの種類によっては,基本的な情報に加え,いくつかの情報が追加で入っている場合があります。

それでは,click イベントが発生した際,イベントオブジェクトにはどのような情報が入っているのでしょうか。Flex3リファレンスガイドのStageクラスをご覧ください。イベントの一覧の中からclickを開いてみましょう。

画像

「イベントオブジェクトの型」flash.events.MouseEventとなっています。このことから,clickイベントが発生したときには,MouseEventオブジェクトが渡されることが分かります。

プロパティの一覧がリファレンスに表形式で詳しく書いてありますね。これを見ると,マウス座標やCtrlキーの状態などが格納されていることが分かります。このように,日本語で充実したドキュメントが手に入るのはActionScript 3.0の大きな利点でしょう。

イベントハンドラの処理

それでは,イベントハンドラのソースコードを追っていきましょう。

private function clickHandler(event:MouseEvent):void {
    // 円を作成
    var s:Sprite = new Sprite();
    s.graphics.beginFill(Math.random() * 0x1000000); (1)
    s.graphics.drawCircle(0, 0, 10);
    s.graphics.endFill();
    addChild(s);

    // 円をクリックされた位置に移動
    s.x = event.stageX;                            --┐(2)
    s.y = event.stageY;                            --┘
}

前半は前回までの内容が理解できていれば大丈夫でしょう。Spriteを作成し,原点を中心とした半径10の円を描画しています。

(1)の箇所では色をランダムに選んでいます。Math.random()は0から1までの値をランダム値で返す関数です。0x1000000とMath.random()を掛け合わせることで,0x000000(黒)から0xffffff(白)までの間のランダムな色となります。

次の(2)では,イベントオブジェクトに格納されているマウスの座標を利用して,円の位置をマウスの座標に設定しています。

clickHandler()では,インスタンスメソッドであるaddChild()メソッドを呼んでいますが,JavaScriptに詳しい方には意外かもしれません。というのも,JavaScriptのイベントハンドラではthisがグローバルオブジェクトを指すからです。それに対して,ActionScript 3.0では,インスタンスメソッドをイベントハンドラにした場合,thisの参照先はインスタンスになります。そのため,イベントハンドラの中から,インスタンス変数やインスタンスメソッドを利用できます。このように,インスタンスに関連付けられたメソッドのことを「バインドメソッド」と呼びます。

無名関数をイベントハンドラにする

今のままだと,円は増えていく一方です。円をクリックすると消えるようにしてみましょう。

clickHandler()メソッドの最後に,次のような処理を追加します。

s.addEventListener("click", function(event:MouseEvent):void {
    removeChild(s);
});

先ほどは,メソッドをイベントハンドラとして登録しましたが,今度は無名関数を登録しています。

無名関数の中からsを参照している点に注目してください。このように,無名関数からは外側のローカル変数を参照することができます。この動作にはクロージャが関わっているのですが,クロージャについて詳しく説明すると,それだけで1回分の分量になってしまうので,ここでは詳細は割愛します。

さて,これでうまく動きそうですね。ところが,実際に動かしてみると,1つ気になる現象に出くわします。

確かにクリックした円は消えるのですが,新たに円が登場します。これはどういうことでしょうか?

実は,円をクリックすると,円のイベントハンドラが呼ばれるだけでなく,ステージ上のイベントハンドラ(clickHandler()メソッド)も呼ばれているのです。円がクリックされたということは,ステージがクリックされたことにもなるのですから,考えてみれば当然の動作です。

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/