gihyo.jp » DEVELOPER STAGE » 連載 » ActionScript 3.0で始めるオブジェクト指向スクリプティング » 第30回 マウスイベントとインスタンスの兄弟・親子の関係

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

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

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

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

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

手始めに前回と同じく,インスタンスのマウスクリックで呼出される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/

著書

  • ActionScript 3.0プロフェッショナルガイド

    ActionScript 3.0プロフェッショナルガイド(毎日コミュニケーションズ)

  • ActionScript 3.0辞典 [FlashPlayer 10/9対応]

    ActionScript 3.0辞典 [FlashPlayer 10/9対応](翔泳社)

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ruby Freaks Lounge

Rubyに関わる,執筆者自身の旬なテーマを扱った,リレー形式の連載です。

これでできる! クロスブラウザJavaScript入門

JavaScriptはウェブ制作において避けては通れない重要な言語ですが,JavaScriptに苦手意識を持たれている方は少なくないようです。 その最大の原因がクロスブラウザ対応という課題であり,本連載ではクロスブラウザ対応のテクニックを詳細に解説します。

ビジネスで成功するためのシステム運用管理のポイント

システムの多様化,技術進歩に伴い,ITシステムの運用管理の必要性が年々高まっています。本連載では,システムの運用管理とは何かについて,現場のニーズと具体的な指針を押さえながらを解説します。

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス

最近のコメント