暑さに弱いマンノです。
この季節になるとタイパンツ以外履きたくなくなります。
タイで買ってから本当その履き心地に魅了されてから、毎日のように履いています。
今回はそんなタイパンツの魅力について熱く語っていきたいと思っていますが。
ゴム入りタイパンツは邪道
そういえば先日担当した案件の中で、
フロアマップの画像にモーダルを設定した時の話の方が楽しそうなので、
やっぱりそちらについて語っていきたいと思います。
モーダルとcanvasを組み合わせる方法
まずは画像を見ていただきましょう。
結果的にはAnimate CCで実装したのですが、
画像を見てもらうとわかる通り、画像の中に「①②③・・」と番号が振られており、番号をクリックするとモーダルで内装の画像が開くといった感じの動作を実装したいという事になりました。
Animate CCで実装を決める前にも、イメージマップで行こうかと思ったのですが、
せっかくなので今回はAnimate CCで実装していきました。
パーツを配置した後はjavascriptを設定していきます。モーダルの動作自体はbootstrapを使用しており、bootstrapのモーダルの遷移先がcanvasになっています。
bootstrapについては公式ドキュメントをご覧ください
それではcanvasのjavascriptを見てみましょう。
/* mouse over */
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip.addEventListener("mouseover", fl_MouseOverHandler_2);
function fl_MouseOverHandler_2()
{
document.body.style.cursor = "pointer";
}
/* mouse out */
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip.addEventListener("mouseout", fl_MouseOutHandler_2);
function fl_MouseOutHandler_2()
{
document.body.style.cursor ="default";
}
/* mouse click */
this.movieClip.addEventListener("click", fl_ClickToGoToWebPage_3);
function fl_ClickToGoToWebPage_3() {
$('#studio-Modal1').modal();
}
canvasでリンクを設定した場合、マウスカーソルが変化しないため、
マウスオーバーとマウスアウトの設定をしてあげる必要があります。
/* mouse over */
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip.addEventListener("mouseover", fl_MouseOverHandler_2);
function fl_MouseOverHandler_2()
{
document.body.style.cursor = "pointer";
}
/* mouse out */
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip.addEventListener("mouseout", fl_MouseOutHandler_2);
function fl_MouseOutHandler_2()
{
document.body.style.cursor ="default";
}
この部分ですね。
document.body.style.cursor = "pointer";でマウスカーソルをポインターにするように指示しています。
pointerをcssなどと同じように変更する事で他のマウスカーソルに変更する事も可能ですのでお好みで指定してあげてください。
htmlの時とは違い、変化のタイミングが微妙に遅いため、
ちょっと広めに範囲を設定しておくのがポイントです。
/* mouse click */
this.movieClip.addEventListener("click", fl_ClickToGoToWebPage_3);
function fl_ClickToGoToWebPage_3() {
$('#studio-Modal1').modal();
}
またモーダルを発動させるために、クリックイベントに
$('#studio-Modal1').modal();
を仕込んでいます。
これでbootstrapのモーダルと連携してイベントが発火するように設定しています。
#studio-Modal1の部分がbootstrapのモーダルのID設定と連携する事で発動するようになっています。
それ以外にもjQueryと合わせてモーダルを、何てのも考えたのですが、
正直時間がかかりそうだったのと、bootstrapのモーダルであれば
CSSをいじれば後々のメンテナンスや、急な変更にも対応しやすそうだったのでこれに決めました。
canvasで実装してしまえば、レスポンシブ対応させることも容易ですし、
座標を計算したりなんて手間も必要ないため、方法だけ知っておけばとても簡単に実装することができます。
イメージマップなどとは、また違った方法を試したいといった方は是非試してみてください。
