ARCHIVE  ENTRY  COMMENT  TRACKBACK  CATEGORY  RECOMMEND  LINK  PROFILE  OTHERS
<< July 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< 04webserverでのsvgの表示 | main | createJSでIEとchromeの違い >>
2017.06.16 Friday

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
トラックバック
Powered by
30days Album