マンガ制作演習ⅢA「デジタル表現」

もどる

タップエフェクトの作成


画面をタップした際に波紋のエフェクトを表示してタップした位置を確認できるようにする。

キラとマリアの初めてのパース教室
キラとマリアの初めてのパース教室


①タップエフェクトのMovieClipオブジェクトを作成する。

  1. 波紋のMovieClipを作成する。波紋のアニメーションは最後のフレームで透明になるようにして最後のフレームで再生を停止する。
  2. 作成したMovieClipはステージのx=0、y=0の位置に配置して、インスタンス名を設定しておく。
図1.波紋アニメーション
図2.MovieClipの配置



②タップエフェクトを作成

クリックイベントでクリックした場所にMovieClipを表示して再生する。

スクリプト

this.stage.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler()
{

this.mc_p.x = stage.mouseX;
this.mc_p.y = stage.mouseY;
this.mc_p.gotoAndPlay(0);
}
//stage.mouseXでクリック位置を取得。gotoAndPlay(0);でエフェクトを再生。



③プレビュー

ブラウザで表示する際にcanvasの表示サイズが変更されると正しい位置にタップエフェクトが表示されない。

図3.表示サイズとエフェクトの表示


④canvasサイズの取得

エフェクトの表示位置を調整するために、まずブラウザで表示されているcanvasサイズを取得する

図4.canvasサイズを取得

スクリプト

var canvas_w = canvas.width;
var canvas_y = canvas.height;



⑤ステージの縮尺を求める

ステージサイズとブラウザ表示の対角線の長さを取得して、ブラウザ表示のcanvasサイズの縮尺を求める。

図5.対角線の長さを取得

スクリプト

var stage_w = 1024; //ステージの横幅
var stage_h = 768; //ステージの高さ
var retio_a = Math.sqrt(Math.pow(stage_w,2) + Math.pow(stage_h,2)); //ステージの対角線の長さを取得
var retio_b = Math.sqrt(Math.pow(canvas_w,2) + Math.pow(canvas_y,2)); //ブラウザ表示の対角線の長さを取得
var ratio_c = retio_a/retio_b; //縮尺を取得



⑥エフェクト位置の取得

クリックの位置を縮尺で乗算をするとタップエフェクトの表示位置が取得できる。

スクリプト

this.mc_p.x = stage.mouseX*ratio_c;
this.mc_p.y = stage.mouseY*ratio_c;



⑦スクリプト

//※エフェクトのMovieClipのインスタンス名は「mc_p」に設定
var stage_w = 1024;
var stage_h = 768;

this.stage.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
var canvas_w = canvas.width; //再生中にサイズ変更される可能性があるので
var canvas_h = canvas.height; //canvasサイズの取得をマウスイベントに格納している
var retio_a = Math.sqrt(Math.pow(stage_w,2) + Math.pow(stage_h,2));
var retio_b = Math.sqrt(Math.pow(canvas_w,2) + Math.pow(canvas_h,2));
var ratio_c = retio_a/retio_b;
this.mc_p.x = stage.mouseX*ratio_c;
this.mc_p.y = stage.mouseY*ratio_c;
this.mc_p.gotoAndPlay(0);
}


もどる