このwikiの更新情報RSSトップページ > マウス, キーボード > マウスイベントを受け取る
概要
ある表示オブジェクトに対して、
- 左クリックをした
- ダブルクリックをした
- ポイントを当てた(マウスオーバー)
など、マウスに関わるイベントが起こったときにそのイベントを受け取るように設定してみましょう。
プログラム
var canvas:Sprite = new Sprite();
canvas.graphics.beginFill(0xFF0000);
canvas.graphics.drawRect(0, 0, 100, 100);
canvas.graphics.endFill();
addChild(canvas);
まずはその対象となる表示オブジェクトを作成してみましょう。
canvasという名前のSpriteを用意して、100 * 100ピクセルの赤四角形を描いておきます。
canvasという名前のSpriteを用意して、100 * 100ピクセルの赤四角形を描いておきます。
canvas.addEventListener(MouseEvent.CLICK, onMouseClick);
左クリックのイベントを呼ぶようにしてみましょう。
addEventListener()にMouseEvent.CLICKを指定します。
第二引数に呼び出すメソッド名を書いておきます。
addEventListener()にMouseEvent.CLICKを指定します。
第二引数に呼び出すメソッド名を書いておきます。
private function onMouseClick(event:MouseEvent):void
{
trace(mouseX, mouseY);
}
メソッドの書き方はこんな感じです。
MouseEventが送出されてくるので、event:MouseEventと引数に書いておきましょう。
MouseEventが送出されてくるので、event:MouseEventと引数に書いておきましょう。
trace(mouseX, mouseY)と書いてあるのでクリックした地点の座標を表示します。
ここで気づいて欲しいのは、クリックが反応する範囲が赤四角形の部分だけということです。
当たり前のように感じる方もいらっしゃるかもしれませんが、一応念のためにもう一つサンプルを作ってみましょう。
当たり前のように感じる方もいらっしゃるかもしれませんが、一応念のためにもう一つサンプルを作ってみましょう。
canvas.graphics.beginFill(0xFF0000);
canvas.graphics.drawRect(120, 120, 200, 150);
canvas.graphics.endFill();
drawRect()で新しい長方形を適当な場所に描いてみましょう。
このように表示されるはずです。
実行してみると、クリックが反応する範囲は先ほどと同じく赤四角形の部分だけですね。
実行してみると、クリックが反応する範囲は先ほどと同じく赤四角形の部分だけですね。
注意
stage.addEventListener(MouseEvent.CLICK, onMouseClick);
メインクラス自体もSpriteかMovieClipを継承しているので、マウスイベントが使用できるはずです。
しかし、addEventListener(MouseEvent.CLICK, onMouseClick)と書いても反応しません。
メインクラスのgraphicsで描画してもマウスイベントは発行されない仕様になっているからです。
しかし、addEventListener(MouseEvent.CLICK, onMouseClick)と書いても反応しません。
メインクラスのgraphicsで描画してもマウスイベントは発行されない仕様になっているからです。
この場合、stage.addEventListener()という風に、stageを介してaddEventListener()を付けるようにします。
stage、つまり描画領域にイベント設定をしているので、クリックの反応範囲が画面全体になります。
stage、つまり描画領域にイベント設定をしているので、クリックの反応範囲が画面全体になります。
もうちょっと具体的に知りたい方は、イベントフローの項目を参照してください。
検証用コード
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Main extends Sprite
{
public function Main()
{
var canvas:Sprite = new Sprite();
canvas.graphics.beginFill(0xFF0000);
canvas.graphics.drawRect(0, 0, 100, 100);
canvas.graphics.endFill();
canvas.graphics.beginFill(0xFF0000);
canvas.graphics.drawRect(120, 120, 200, 150);
canvas.graphics.endFill();
canvas.addEventListener(MouseEvent.CLICK, onMouseClick);
addChild(canvas);
}
private function onMouseClick(event:MouseEvent):void
{
trace(mouseX, mouseY);
}
}
}
