ActionScriptは通常，タイムライン上のフレームに記述し，そのフレームが再生されたときに実行されます。しかし「イベント」の仕組みを利用すると，ボタンを押したときや，マウスを操作したときなど，ユーザーの操作に応じたタイミングで特定の処理を実行できるようになります。

マウスの操作に反応するボタン

　図1のムービーは「イベント」の仕組みを使ったムービーです。ボタンの上にマウスを移動したり，ボタンを押したり，離したりといった操作にあわせて，ボタンの下のテキスト・フィールドに表示される文字が変化します。

図1：ユーザーの操作に対するナビゲーションの例（クリックするとムービーを表示します）

　このムービーのFlashドキュメントのタイムラインは，図2のようになっています。1フレームしかありませんね。

図2：Flashドキュメントのタイムライン

　「ボタンとテキスト」レイヤーには，図3のように一つのボタン・インスタンスとテキスト・フィールドが配置されています(テキスト・フィールドの作成方法は後述します)。それぞれに対して「インスタンス名」，つまり，ActionScriptで何か処理を行いたいときに使う名前を「myButton」と「myMessageArea」と付けてあります。これの名前を使って，それぞれのインスタンスに命令ができるようにしているわけですね。

図3：ステージ上のインスタンス

　今回の処理の主役であるActionScriptは，「ActionScript」レイヤーの1フレーム目に次のように記述されています（図4）。すべて「myButton」と「myMessageArea」に対して何かの処理がしてあることがわかりますね＊1。

図4： 実際のスクリプト

　さらに，図4のコードをよく見ると，すべてが

  myButton.on○○ = function(){
    _root.myMessageArea.text = "××”;
  };
という決まったパターンになっている事に注目してください。この「on○○」が，「イベント」を利用するための仕組みである「イベントハンドラ」というものなのです＊2。

イベントハンドラを利用したムービーを作ってみよう

　では，実際に今回のムービーと同じ物を作成してみましょう。新規Flashドキュメントを作成し，適当な名前を付けて保存します。ボタン・シンボルを一つ作成し，「myButton」とインスタンス名を付けます。ここまでは前回と同じですね。

　次に「テキスト・フィールド」を作成します。[ツールパネル]から[テキストツール]を選択し，[プロパティインスペクタ]を表示します（図5）。[テキストの種類]ドロップダウンリストボックスから，「ダイナミックテキスト」を選択します＊3。

図5：テキストツールの設定

　この状態でステージ上の任意の範囲をドラッグすると，テキスト・フィールドが作成されます（図6）。すると，[プロパティインスペクタ]にインスタンス名を入力する欄が表示されるので，「myMessageArea」とインスタンス名を付けます。これで準備は完了です＊4。

図6：テキスト・フィールドの配置

イベントハンドラの概念

　準備ができたところでイベントハンドラを利用したコードを記述します。コード自体は先ほどご紹介した通りなのですが，ここでは「イベントハンドラ」というものの概念をちょっと詳しくご紹介します。

　Flashに用意されている「ムービークリップ」「ボタン」「テキスト・フィールド」などには，それぞれ異なる「イベント」とそのイベントが起きたときにそれを知らせるコンセントのような役目をする「イベントハンドラ」というものが用意されています。これはユーザーが決めるものではなく，あらかじめ用意されているものです。ボタンであれば，作成した時点であらかじめ図7のような状態になっていると考えてください。

図7：イベントハンドラの概念図

　イメージとしてはマルチタップのコンセントのようなものですね。ボタンの状態を調べてみて，「イベント」の状態になったら該当する「イベントハンドラ」のランプがピコーンと付いてコンセントのスイッチがONになり，その先にある物に電流が流れて，動き出す，といった感じです（図8）。

図8：イベントが起きたときの概念図

　それぞれのコンセント(イベントハンドラ)の先には最初は何も付いていない状態です。ですので，イベントが起きても，コンセントのスイッチがONになるだけで何も動きません。そこで，なにかイベントが起きたときに処理を行いたい場合には，該当するコンセントの先に動かしたい物を繋げておいてあげればいいというわけですね。 この処理が，前述の

  myButton.on○○ = function(){
    _root.myMessageArea.text = "××”;
  };
というコードになるのです。より具体的には，
  //ボタンを離したときのイベント
  myButton.onRelease = function() {
    _root.myMessageArea.text = "マウスボタンを離しました";
  };
というのは，「myButton」というボタンの「onRelease」イベントハンドラ（コンセントのようなものでしたね）に「function以下の処理」を繋げるといった指示を指定します。

　この指示を行った結果，myButtonを離したときに「Release」イベントが発生すると，「onRelease」イベントハンドラに電流が流れ，用意しておいた処理がはじめて実行されるというわけです。

　function以下の処理は，

  _root.myMessageArea.text = "マウスボタンを離しました";
となっており，_root(メインのタイムライン)上にあるテキスト・フィールド「myMessageArea」に表示するテキストである「text」の内容を「=」以下の文字に変更するといったものです。

　また，今回利用している五つのイベントハンドラは，それぞれ次のようなタイミングで処理を行いたいときに使用します（表1）＊5。

表1：ボタンシンボルのイベントハンドラ
イベントハンドライベントが発生するタイミング
onReleaseボタンを離したときのイベント
onPressボタンを押したときのイベント
onRollOverマウスが乗ったときのイベント
onRollOutマウスが離れたときのイベント
onReleaseOutsideボタン押したままマウスが離れたときのイベント

この仕組みを利用して，ユーザーのマウス操作に対応した処理を行っているわけですね。

　今回はActionScriptを使って「イベント」を利用する便利な仕組みである「イベントハンドラ」の考え方をご紹介しました。慣れないうちはちょっと難しい概念かもしれませんが，うまく利用するととても気持ちのいい操作ができたり，面白い動きをしたりするムービーを作成できます。この機会に基本的な概念を意識しながら実際に作成をしてみましょう。

　次回はイベントを使ってムービークリップを動かす方法をご紹介します。お楽しみに。

＊1 実際のコードはサンプル・ファイルをダウンロードして確認してみましょう（Flash 8で編集できるファイル（buttonEvent.fla）はこちら）。

＊2 実行する処理と合わせて「イベントハンドラ・メソッド」と呼ぶ場合もあります。

＊3 「静止テキスト」は普通に表示するだけのテキスト，「ダイナミックテキスト」はスクリプトから制御できるテキスト・フィールド，「テキスト入力」はユーザーに任意の文字を入力してもらうことのできるテキスト・フィールドとなります。

＊4 [プロパティインスペクタ]では，テキスト・フィールドに枠を付けたり，選択可能状態にしたりといった細かな設定を行うこともできます。

＊5 イベントの詳しい内容や，ボタン以外のクラスのイベントはFlashのヘルプ内のActionScript辞書に記載されています。

【コーヒーブレイク】
「onRelease」それとも「onPress」？

　ユーザーがボタンを押したときに任意の処理を行いたい。これは非常によくある要望です。そして，この処理はイベントハンドラの仕組みを使えば簡単に実現できます。

　では，ここで質問です。この処理を実装する際に，あなたが選ぶイベントハンドラはいったいどれですか？筆者の答えは「onRelease」です。「ボタンを押したとき」なのだから「onPress」でいいんじゃないの？と思う方も多いかと思います。しかし，onPressでは，ボタンを押したときに問答無用で処理が実行されてしまいます。

　それに対し，onReleaseでは，「ああ，やっぱやーめた」と気が変わったときの場合にも対応できるのです。ボタンを押したままマウスポインタをボタン領域から外して離すと呼び出されるイベントハンドラは「ReleaseOutside」となり，onReleaseは呼び出されません。つまり，ユーザーが迷いなくボタンを押し，離した時点で「処理を実行する意思アリ」と判断して該当する処理を実行するわけですね。

　ですので，筆者のように優柔不断なユーザーにとっては，onReleaseのほうがありがたいのです。もっとも，ムービークリップをドラッグ＆ドロップするような処理を作成する場合には，onPressとonReleaseの両方を使います。用途に合わせていろいろなイベントハンドラを選択できるというわけですね。