ActionScript 3.0で始めるオブジェクト指向スクリプティング

第31回 マウスのロールオーバー

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

前回の第30回「マウスイベントとインスタンスの兄弟・親子の関係」に引続き,今回もマウスイベントの扱いをお題にする。とくに,マウスのロールオーバーをネタに,複数のインスタンスを含んだマウスイベントの捉え方について解説したい。

InteractiveObject.mouseOverとInteractiveObject.rollOverイベント

マウスのロールオーバーを捉えるイベントには,InteractiveObject.mouseOver(定数MouseEvent.MOUSE_OVER)とInteractiveObject.rollOver(定数MouseEvent.ROLL_OVER)がある(※1)。このふたつのイベントの違いについて調べるムービーをつくってみよう。MovieClipシンボル(シンボル名Parent)の中に,ふたつの MovieClipインスタンスを入れ子にする。ふたつのインスタンス名は,それぞれpen0_mcとpen1_mcだ(図1)。

図1 MovieClipシンボル内にふたつのMovieClipインスタンスを入れ子にする

図1 MovieClipシンボル内にふたつのMovieClipインスタンスを入れ子にする

このMovieClipシンボルのインスタンスをひとつメインタイムラインに配置し,インスタンス名はparent_mcとする。イベントInteractiveObject.mouseOverInteractiveObject.rollOverとは,そのターゲットのインスタンスをどう捉えるかが違っている。親のMovieClipインスタンスparent_mcの第1フレームアクションに以下のスクリプト1を書き,ふたつのイベントにリスナー関数xTraceを登録する(図2)。

スクリプト1 イベントInteractiveObject.mouseOverとInteractiveObject.rollOverにリスナー関数を登録

// MovieClip: マウスイベントを処理するparent_mc
// MovieClipインスタンスpen0_mcとpen1_mcを配置
// 第1フレームアクション
addEventListener(MouseEvent.MOUSE_OVER, xTrace);
addEventListener(MouseEvent.ROLL_OVER, xTrace);
function xTrace(eventObject:MouseEvent):void {
  trace(eventObject.type,
   eventObject.target.name,
   eventObject.currentTarget.name);
}

図2 親のMovieClipインスタンスparent_mc内に第1フレームアクションを記述

図2 親のMovieClipインスタンスparent_mc内に第1フレームアクションを記述

リスナー関数xTrace()は,受取ったイベントオブジェクトから,3つのプロパティを取出す。Event.typeEvent.targetおよびEvent.currentTargetプロパティだ。ただし,後のふたつはインスタンスが区別できるようDisplayObject.nameプロパティを調べたうえで,trace()関数により3つの情報を[出力]する。なお,シンボル内に入れ子にしたふたつのインスタンスには,名前をつけたほかはとくに設定はしていない。

[ムービープレビュー]して,入れ子の一方のMovieClipインスタンス(pen0_mc)にマウスポインタを重ねると,イベントInteractiveObject.mouseOverInteractiveObject.rollOverがともに発生する。ただし,つぎのようにEvent.targetプロパティのインスタンスの[出力]が異なる。

rollOver parent_mc parent_mc
mouseOver pen0_mc parent_mc

InteractiveObject.mouseOverイベントではマウスポインタを重ねた子のインスタンスが捉えられているのに対し,InteractiveObject.rollOverイベントはリスナーを登録した親に発生したものと扱われるのだ。

さらに,マウスポインタを他方のインスタンス(pen1_mc)の上に移すと,InteractiveObject.mouseOverイベントはインスタンスpen1_mcに対して改めて発生する。しかし,InteractiveObject.rollOverイベントは起こらない(図3)。つまり,InteractiveObject.mouseOverイベントは子インスタンスごとに,InteractiveObject.rollOverイベントはリスナーが登録されたインスタンスをひとつとみなして発生するのである。

図3 InteractiveObject.mouseOverイベントは子インスタンスごとに発生する

図3 InteractiveObject.mouseOverイベントは子インスタンスごとに発生する

※1
マウスポインタのロールアウトを扱うイベントは,ロールオーバーのイベントInteractiveObject.mouseOverInteractiveObject.rollOverに対応して,それぞれInteractiveObject.mouseOutInteractiveObject.rollOutがある。

子のインスタンスに対するマウスイベントの発生を止める

マウスのロールオーバーについては,子インスタンスごとにイベントを受取りたいときはInteractiveObject.mouseOver,リスナーを登録した親インスタンスでまとめて捉えたいときにはInteractiveObject.rollOverと,ふたつを使い分ければよいと一応はいえる。しかし,InteractiveObject.mouseOverイベントを使いつつ,子インスタンスごとではなく,親インスタンスでまとめて扱いたい場合があるかもしれない。

それだけでなく,マウスクリックを捉えるInteractiveObject.clickイベントも,実は子インスタンスごとに発生する。つまり,前述のムービーのようにふたつの子インスタンスが入れ子になっている場合(前掲図3参照),一方の子インスタンス上でマウスボタンを押したまま,ポインタを他方のインスタンス上に移してボタンを放したとき,InteractiveObject.clickイベントは発生しない。しかも,ロールオーバーと違って,クリックを親インスタンスでまとめて受取るイベントというものは別に用意されてない。

そうなると,子インスタンスごとにイベントを発生させない手段が知りたい。ひとつは,前回紹介したInteractiveObject.mouseEnabledプロパティfalseにすることだ。すると,子インスタンスへのマウスイベントは親インスタンスが直接受取れる。ただし,その設定をしていない子インスタンスは,相変わらず自分に対するマウスイベントと捉えてしまう。したがって,マウスイベントを親インスタンスがまとめて受取るためには,すべての子インスタンスのInteractiveObject.mouseEnabledプロパティをfalseにしなければならない(図4)。

pen0_mc.mouseEnabled = false;
pen1_mc.mouseEnabled = false;

図4 すべての子インスタンスのInteractiveObject.mouseEnabledプロパティをfalseに設定

図4 すべての子インスタンスのInteractiveObject.mouseEnabledプロパティをfalseに設定

もうひとつ,子インスタンスごとにマウスイベントが発生しないように,親インスタンスのプロパティを使って設定できる。DisplayObjectContainer.mouseChildrenプロパティfalseにすると,その子インスタンスはマウスイベントを自分に対して受取らなくなり,親インスタンスへのイベントとして扱われる(図5)。すると,InteractiveObject.mouseOverイベントも,InteractiveObject.rollOverと同じ動きになる。

mouseChildren = false;

図5 DisplayObjectContainer.mouseChildrenプロパティをfalseにすると親がマウスイベントを受取る

図5 DisplayObjectContainer.mouseChildrenプロパティをfalseにすると親がマウスイベントを受取る

画像

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入