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が元々の機能として対応してくれれば良いんですけどね。
とりあえずこれからはこの機能を追加していこう!
04webserverでのsvgの表示
ローカルのマシンで、04webserverを使っている時に、
今までsvgの画像が表示されなかった。
MIMEタイプの設定を追加すれば動くと言う事だったので、
追加してみたのだけれど全然表示されなかった。書き方は
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
だったので、04WebServerには
image/svg+xml svg
image/svg+xml svgz
と言う2行を付け足したのだけれど動かなかった。
何回かいろんなやり方試したんだけど駄目だったのだけど、
また今日表示させたい案件があってしつこくやってみた!
結果、表示された。
image/svg+xml svg svgz
って一括りに書く方法だとでた。
これでローカルのテストも同じように表示できて快適です。