CreateJSでボタンにマウスを乗せた時、指マークにする
createJSでPC向けのコンテンツを作ってる時に、当たり前ですけど、
ボタンとかリンクしてるところにマウスを乗せても矢印のまんまがデフォルトなんです。
なので、野中さんとICSさんの記事を見つけて、それを自分のボタン登録のファンクションみたいなやつに
追加しました。
野中さんの記事
http://f-site.org/articles/2012/11/29210000.html
ICSさんの記事
https://ics.media/tutorial-createjs/mouse_over.html
ウチの会社だと、ボタンのイベントを登録するのにいちいちリスナーを書いて行くのがめんどいので
createjs.MovieClip.prototype.makeBtn = functionfunction(p_mc,notRollOverFlg){
p_mc.addEventListener(
"click", function(e){
if(('ontouchstart' in window) && e.nativeEvent.type=="mouseup") return;//2回目をはじく
var mc = e.currentTarget;
mc.onclick(e);
}
);
if(!notRollOverFlg) {
p_mc.addEventListener("mouseover", handleMouseOver);
p_mc.addEventListener("mouseout", handleMouseOut);
}
}
// マウスオーバーしたとき
function handleMouseOver(event) {
document.body.style.cursor = "pointer";
}
// マウスアウトしたとき
function handleMouseOut(event) {
document.body.style.cursor = "";
}
これを書き出すAnimateの一番上の階層に書いておいて、
ボタンにしたいMCのあるところで、
this.makeBtn(btnName);
btnName.onclick = function(){〜};
と書きます。
いろんな所でボタンを作成する時に自動でポインタが指になるようになった!
これからFlashがブラウザで動かなくなって代わりにCJSとかで作った
りするものが増えたりしたら、こう言うのやっておくといいかもですね。
まー、これだとロールオーバーの時に別の挙動をさせたい時に
いい書き方を考えないといけないけど後で考えます。
一番いいのは普通にEaselJSが元々の機能として対応してくれれば良いんですけどね。
とりあえずこれからはこの機能を追加していこう!
- コメント
- コメントする
- この記事のトラックバックURL
- トラックバック