ボタンに連動してアクションスクリプトが動くタイミングを変更する

「FLash CS4」体験版ダウンロードはこちらから
「Adobe CS4」購入はこちらから

これまでのこの連載で、ボタンに音をつけたり、ロールオーバーでボタンイメージを切り替えることができるようになった。ボタンに関連づけたアクションスクリプトが動くタイミングも変更できるので、今回はそこを解説しよう。今回の参考ファイルはここからダウンロード できる。

ボタンの動くタイミングはマウスイベントと呼ばれてFlashでは定義されている。主にボタンに使用するものには次の種類がある。

ボタンの主なマウスイベントの種類と動作内容

マウスイベントの種類	動作内容
クリック	同じボタン上でボタンを押して放したとき
ダブルクリック	2度素早くボタンをクリックしたとき
ロールオーバー	マウスカーソルがボタンのヒットエリアに重なったとき
ロールアウト	マウスカーソルがボタンのヒットエリアから出たとき

そして、これらに対応するためには、アクションスクリプトで1カ所を書き換えるだけでよい。連載第11回で設定したアクションをここで、もう一度引用しよう。

1行目にある、home_btn.addEventListener(MouseEvent.CLICK,onHomeClick); の中のMouseEvent.CLICKが肝になる。CLICKのことを、定数と呼び、先ほどの表の「マウスイベントの種類」では「クリック」に相当する。また、このCLICKはMouseEventというグループ(正確にはクラス)に属しているため「MouseEvent.CLICK」は、「MouseEvent の CLICK 定数＝クリック」と見ることができる。MouseEventとCLICKの間にある「.」(ドット)は、「～の中の」と訳すことができ、たとえば、Aの中のB とすれば、A.B と表現できる。

アクションスクリプトで、イベントを変更するには、この「MouseEvent.CLICK」をその他のイベント名に相当する定数に書き換えれば良い。それが、次の表だ。

ボタンの主なマウスイベント定数と動作内容

マウスイベントの種類	MouseEvent定数名	動作内容
クリック	CLICK	ボタンのヒットエリアを押して放した(クリック)とき
ダブルクリック	DOUBLE_CLICK	ボタンのヒットエリアを2度素早くクリックしたとき
ロールオーバー	ROLL_OVER	マウスカーソルがボタンのヒットエリアに重なったとき
ロールアウト	ROLL_OUT	マウスカーソルがボタンのヒットエリアから出たとき

たとえば、次のように「CLICK」を「ROLL_OVER」と書き換えると、ボタンのヒットエリアにマウスカーソルが重なったとき、テキストの色が変わり、音が鳴ると同時に、関数onHomeClick()を実行し、ウェブサイトを開くのがわかる。

その他のイベント定数も同様に置き換えることができて、addEventListenerの前に書いたボタンに対する反応を指定できる。ただし、ダブルクリックは、デフォルトでは無効で、有効にするには1行追加しなくてはいけない。次はその方法を説明しておこう。

ダブルクリックを有効にする

「MouseEvent.CLICK」を「MouseEvent.DOUBLE_CLICK」と書き換えるのは、間違いではない。ただし、ブラウザ内のリンクなども含め、Flashコンテンツでダブルクリックはあまり使用しない。そこで、どうしてもダブルクリックを利用したいという場合は、次の1行を追加しよう。

最初の●は、ボタンを指すので、この場合、home_btnとなる。

これで、home_btnに対するMouseEvent.DOUBLE_CLICKが有効になるというわけだ。

4つを同時に使用したサンプル

今回は4つのイベントの違いがわかるように同じシンボルを複製してみた。このときの特徴は、どのボタンもイベントが異なるが動作は同じなので、実行すべき関数onHomeClick()は1回しか定義していないということだ。以下にそのスクリプトを掲載しておく。

ボタンのインスタンス名は、左上から時計回りに、click_btn、doubleClick_btn、rollout_btn、rollover_btn、となっている。

実行例

ほかにもあるマウスイベント

今回紹介したマウスイベントは主にボタンに対するものだったが、実は、ボタンではなくムービークリップにもマウスイベントは設定できる。 次の表のものがそれだ。

ボタンの主なマウスイベント定数と動作内容

マウスイベントの種類	MouseEvent定数名	動作内容
マウスダウン	MOUSE_DOWN	マウスボタンが押されたとき
マウスアップ	MOUSE_UP	マウスボタンが放されたとき
マウスオーバー	MOUSE_OVER	マウスカーソルが自分自身と重なったとき
マウスアウト	MOUSE_OUT	マウスカーソルが自分自身から外れたとき
マウスムーブ	MOUSE_MOVE	マウスカーソルが動いたとき
マウスホイール	MOUSE_WHEEL	マウスホイールが回転したとき

さらに、詳細を知りたい場合は、Flashヘルプの flash.events.MouseEventを参考にするといいだろう。

ムービークリップとボタンの違いについては、また、別の機会に紹介したい。

まとめ

Flashの中のイベントと言われるタイミングはすべて、同じ方法(文法)で記述されていて、今回の記述方法が基礎となる。どんな種類のイベントがあるのか詳細に記憶する必要はないが文法は同じなので、しっかり覚えておくと良いだろう。

次回も必須のテクニックとして、アクションスクリプトで画面に変化する文字(テキスト)を表示する方法を紹介しよう。これを身につければ、ゲームのスコア表示や時計などプログラムで表示する文字をダイナミックに変更できたり、ユーザーの入力した文字を表示したりできる。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。オーサリングエンジニア。Flashでの制作を中心に活動。ライターとしてFlash関連書籍や雑誌記事の執筆を行うほか、AdobeTVでも解説。著書の「ActionScript3.0辞典」が発売中。NORIでつぶやき中。