コンポーネントにマウスイベントを追加する

コンポーネントにマウスイベントを追加する [Edit]

投稿者：野中文雄 | 投稿日：2007.02.21 | [ActionScript][Tips][野中ゼミ]

Flash 8のUser Interfaceコンポーネントは、マウスイベントの種類が少ないです。たとえば、Buttonコンポーネントでも、マウスイベントとしてはclickしかありません(図001)。User Interfaceコンポーネントに、他のマウスイベントを追加してみましょう。

図001■Buttonコンポーネントのイベント

MovieClipのマウスイベントを設定する

もちろん、コンポーネントもMovieClipをベースにしているので、MovieClipクラスのマウスイベントを使うことはできます。

けれど、コンポーネントの動作ですでにそのマウスイベントが使われていた場合、その(コールバック)関数を上書きしてしまうことになります。たとえば、タイムラインに配置したButtonインスタンスmyButtonに対して、以下のフレームアクション(スクリプト001)でMovieClip.onRollOverイベントハンドラメソッドを設定すると、Buttonインスタンスにロールオーバーしてもハイライトしなくなってしまいます(図002)。

スクリプト001■ロールオーバーの動作を上書きする
// タイムライン: ButtonコンポーネントmyButtonを配置
// フレームアクション
var myButton:mx.controls.Button;
myButton.onRollOver = function() {
trace("元のロールオーバーの効果が消えます"); // 確認用
};

図002■Buttonコンポーネントインスタンスがハイライトしない

LowLevelEventsクラスを使う

LowLevelEventsクラスは、コンポーネントに以下のマウスイベントとUIEventDispatcherクラスを組込み(mix-inし)ます。LowLevelEventsクラスは、単にアクセスするだけで、組込みの処理を行います。

  (1) mouseOver
  (2) mouseOut
  (3) mouseDown
  (4) mouseUp

つぎのサンプルスクリプトは、[ライブラリ]にButtonコンポーネントと、リンケージ識別子"buttonSound"を設定したサウンドが格納されていれば動作します。ステージには何も配置する必要はありません。Buttonインスタンスにロールオーバーすると、リンケージサウンドが再生されます。なお、DepthManagerの使い方については、「深度の管理 − DepthManager」をご参照ください。

スクリプト002■[ライブラリ]のサウンドを再生する
// タイムライン: 何も配置する必要はない
// [ライブラリ]:
// Buttonコンポーネントおよびリンケージサウンド"buttonSound"を格納
// フレームアクション
mx.events.LowLevelEvents; // LowLevelEventsクラスにアクセスするだけ
// クラスのインポート
import mx.managers.DepthManager;
import mx.controls.Button;
// 初期設定
// Buttonコンポーネントの座標とラベル初期値
var nX:Number = 10;
var nY:Number = 10;
var label_str:String = "Button";
// Buttonコンポーネントの動的配置
var myButton:Button =
Button(this.createClassChildAtDepth(Button, DepthManager.kTop));
// Soundインスタンス生成
var my_sound:Sound = new Sound(myButton);
// リスナー設定
var listenerObject:Object = new Object();
listenerObject.mouseOver = function(eventObject:Object):Void {
  trace(eventObject.target); // 確認用
  my_sound.stop();
  my_sound.start();
};
myButton.addEventListener("mouseOver", listenerObject);
// Buttonコンポーネントの初期化
myButton.label = label_str;
myButton.move(nX, nY);
my_sound.attachSound("buttonSound");

参考: PhilterBlog「Dispatching Mouse Events with "Button-Based" Components」

F-site