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

第30回 マウスイベントとインスタンスの兄弟・親子の関係

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

前回に続き,マウスとのインタラクションを扱う。今回のお題は,マウスのイベントだ。マウスイベントはとくに複数のインスタンスが絡むので,気をつけなければならないことがいくつかある。順に,解説していこう。

マウスイベントは誰が受取るのか

まず,マウスイベントは誰が受取るのかを確かめたい。クリックしたインスタンスに決まっている,と思うかもしれない。しかし,インスタンスがタイムラインにいくつも置かれているときは,マウスイベントの発生についてもう少し詳しく知っておかなければならない。

手始めに前回と同じく,インスタンスのマウスクリックで呼出されるInteractiveObject.clickイベント(定数MouseEvent.CLICKに,リスナー関数を定義しよう。ボタンのインスタンス名は,button_mcとする。ただし,前回のスクリプト1と異なり,MovieClipシンボルの中ではなく,インスタンスbutton_mcを置いたフレームアクションとして記述する。

// タイムライン: メイン
// MovieClipインスタンスbutton_mcを配置
// フレームアクション
button_mc.addEventListener(MouseEvent.CLICK, xTrace);
function xTrace(eventObject:MouseEvent):void {
  trace(button_mc.name);
}

また,MovieClipシンボル内のフレームアクションでは,マウスポインタを指差しカーソルに変えるためにSprite.buttonModeプロパティはtrueに設定しておく(図1。シンボル名は"Button"とした)。

図1 ボタンのMovieClipシンボルのフレームアクションでSprite.buttonModeプロパティをtrueに設定

図1 ボタンのMovieClipシンボルのフレームアクションでSprite.buttonModeプロパティをtrueに設定

もちろん,[ムービープレビュー]でボタンのMovieClipインスタンスをクリックすれば,[出力]パネルにはインスタンス名"button_mc"が表示される図2)。

図2 ボタンのMovieClipインスタンスをクリックするとインスタンス名が[出力]される

図2 ボタンのMovieClipインスタンスをクリックするとインスタンス名が[出力]される

つぎに,ボタンのインスタンスと少し重なり合うように,別のMovieClipを前に置いた。重なりがわかりやすいように[カラー効果]の[アルファ]で半透明にしたほかは,スクリプトも設定していなければ,インスタンス名さえつけていない。

図3 ボタンのインスタンスの前に別のMovieClipインスタンスを置く

図3 ボタンのインスタンスの前に別のMovieClipインスタンスを置く

[ムービープレビュー]で確かめると,ふたつのインスタンスが重なり合った部分では,マウスポインタが指差しカーソルに変わらない図4左図)。それだけでなく,そこでクリックしても,InteractiveObject.clickイベントのリスナー関数は呼出されない。ボタンのMovieClipインスタンスの重なっていない部分であれば,カーソルは変わり図4右図),リスナー関数も正しく動く。

図4 前に別のインスタンスが重なると後ろのMovieClipインスタンスはボタンとして振舞わない

図4 前に別のインスタンスが重なると後ろのMovieClipインスタンスはボタンとして振舞わない

ActionScript 3.0では,マウスイベントを受取れる(InteractiveObject)インスタンスが同じ階層で重なり合っている場合,つまり兄弟のインスタンス同士では手前のインスタンスが排他的にイベントを受け取る。それは,それらのインスタンスに,マウスイベントのリスナーが設定されているかどうかを問わない※1)。

インスタンスのInteractiveObject.mouseEnabledプロパティfalseに設定すると,マウスイベントを受取らなくなる。このプロパティのデフォルト値はtrueだ(マウスイベントを受け取る)。つぎのスクリプト1は,手前の矩形のMovieClipインスタンスにcover_mcという名前をつけたうえで,そのInteractiveObject.mouseEnabledプロパティをfalseにした。これで,後ろのボタンのMovieClipインスタンスが,マウスイベントを受取れるようになる図5)。

スクリプト1 手前のインスタンスのInteractiveObject.mouseEnabledプロパティをfalseに設定

// タイムライン: メイン
// MovieClipインスタンスbutton_mcを配置
// フレームアクション
button_mc.addEventListener(MouseEvent.CLICK, xTrace);
cover_mc.mouseEnabled = false;
function xTrace(eventObject:MouseEvent):void {
  trace(button_mc.name);
}

図5 手前のインスタンスが重なった部分でも後ろのインスタンスがマウスイベントを受け取る

図5 手前のインスタンスが重なった部分でも後ろのインスタンスがマウスイベントを受け取る

※1
ActionScript 2.0/1.0では,マウスイベントのハンドラが設定されていないインスタンスは,マウスイベントを受け取らなかった。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入