ARCHIVE  ENTRY  COMMENT  TRACKBACK  CATEGORY  RECOMMEND  LINK  PROFILE  OTHERS
<< June 2017 | 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 >>
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が元々の機能として対応してくれれば良いんですけどね。

とりあえずこれからはこの機能を追加していこう!

2017.06.05 Monday

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

って一括りに書く方法だとでた。

これでローカルのテストも同じように表示できて快適です。

Powered by
30days Album