サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJSでマウスのロールオーバーとロールアウトを捉える

ID: FN1211002 Technique: HTML5 and JavaScript

DisplayObject.onMouseOverイベント
文法 DisplayObjectオブジェクト.onMouseOver = function (event) {}
イベント インスタンスにマウスポインタが重なった(ロールオーバーした)ときに、イベントハンドラ(コールバック関数)を呼出す。予めStage.enableMouseOver()メソッドによりイベントが有効にされていなければならない。
引数

event − 発生したマウスイベントの情報をもつMouseEventオブジェクト

DisplayObject.onMouseOutイベント
文法 DisplayObjectオブジェクト.onMouseOut = function (event) {}
イベント インスタンスに重ねられた(ロールオーバーした)マウスポインタが重なりを離れた(ロールアウトした)ときに、イベントハンドラ(コールバック関数)を呼出す。予めStage.enableMouseOver()メソッドによりイベントが有効にされていなければならない。
引数

event − 発生したマウスイベントの情報をもつMouseEventオブジェクト

Stage.enableMouseOver()メソッド
文法 Stageオブジェクト.enableMouseOver(frequency)
概要 Stageオブジェクトの表示リストに加えられたインスタンスに対して、マウスポインタの重なりについてのイベント(DisplayObject.onMouseOverおよびDisplayObject.onMouseOut)を引数に定めた頻度で調べて送る。マウスポインタの重なりのイベントを起こすのは負荷が高いため、デフォルトでは止められている。
引数

frequency − マウスポインタのインスタンスとの重なりをイベントとして送る1秒あたりの最大回数。0を渡すと、マウスポインタの重なりについてのイベントは起こらない。最大値は50で、デフォルト値は20。高い値は反応を速め、低い値はCPUへの負荷を下げる。

戻り値 なし。

説明

EaselJSでインスタンスへのマウスポインタの重なり(ロールオーバー)と重なりが外れたこと(ロールアウト)は、それぞれDisplayObject.onMouseOverDisplayObject.onMouseOutイベントで捉えます。これらのイベントにハンドラの(コールバック)関数を定めれば、インスタンスにマウスポインタがロールオーバーおよびロールアウトしたときにそれぞれ呼出されます。

ただし、インスタンスとマウスポインタの重なりを調べるのは負荷が高いので、初めはイベントが起こらないよう定められています。そのため、予めStage.enableMouseOver()メソッドを呼出しておかなければなりません。イベントの頻度を定める引数はオプションで、0を渡すとイベントが止まります。


つぎのJavaScriptコード001の関数initialize()を呼出すと、Canvasの真ん中に円形のShapeインスタンスが描かれ、マウスポインタをロールオーバーすると指差しカーソルにかわります[*1]。なお、canvas要素のid属性は"myCanvas"と定められているとします。また、EaselJS 0.5.0を用いましたので、クラスの参照には名前空間「createjs」が添えてあります[*2]

コード001■インスタンスにマウスポインタをロールオーバーすると指差しカーソルに変わる
  1. var stage;
  2. function initialize() {
  3.   var canvasElement = document.getElementById("myCanvas");
  4.   stage = new createjs.Stage("myCanvas");
  5.   var myShape = new createjs.Shape();
  6.   stage.addChild(myShape);
  7.   stage.enableMouseOver();
  8.   myShape.onMouseOver = function (eventObject) {
  9.     document.body.style.cursor = "pointer";
  10.   };
  11.   myShape.onMouseOut = function (eventObject) {
  12.     document.body.style.cursor = "";
  13.   };
  14.   myShape.x = canvasElement.width / 2;
  15.   myShape.y = canvasElement.height / 2;
  16.   draw(myShape);
  17. }
  18. function draw(myShape) {
  19.   var myGraphics = myShape.graphics;
  20.   myGraphics.beginStroke("#0000FF");
  21.   myGraphics.beginFill("#00FFFF");
  22.   myGraphics.drawCircle(0, 0, 40);
  23.   stage.update();
  24. }

図001■インスタンスにロールオーバーするとマウスポインタが指差しカーソルに変わる

[*1] マウスカーソルの変更については、 「マウスカーソルの形を変える」をご参照ください。

[*2] 名前空間および旧バージョンとの互換性については、「CreateJS Suiteのクラスに名前空間が設定される」をお読みください。


作成者: 野中文雄
更新日: 2012年11月29日 コード001をEaselJS 0.5.0対応とし、注[*2]を追加。
作成日: 2012年11月27日


Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.