ステージをクリックする度にムービークリップが置き換わります(Adobe Animate CC)

SERVICE

◎HTML5 Canvasでは
Flashプラグインを使用せずにインタラクティブコンテンツの表現を可能にします。

ステージをクリックする度にムービークリップが置き換わります
(ステージ上にマウスが重なると
・ムービークリップがマウスの方向へ向きを変えます。
・マウスの動きに少し遅れて追随します。)

▷スクリプト
var music_mc = this.music_mc;
var ease = 0.2;
var mouseX = 0;
var mouseY = 0;
this.stage.addEventListener(“stagemousemove”, recordMouse);
this.stage.addEventListener(“stagemousedown”, changeAnimation);
createjs.Ticker._addEventListener(“tick”, followMouse);
function recordMouse(eventObject) {
mouseX = eventObject.stageX;
mouseY = eventObject.stageY;
}
function followMouse(eventObject) {
var moveX = mouseX – music_mc.x;
var moveY = mouseY – music_mc.y;
music_mc.x += moveX * ease;
music_mc.y += moveY * ease;
if (moveX > 0) {
music_mc.scaleX = -1;
} else {
music_mc.scaleX = 1;
}
}
function changeAnimation(eventObject) {
var currentFrame = music_mc.currentFrame;
if (currentFrame == 0) {
music_mc.gotoAndStop(1);
} else {
music_mc.gotoAndStop(0);
}
}

▽サンプル
live-preview

kishioka yasuo

kishioka yasuo

ホームページの企画・制作・運営・管理を主業務とする岸岡デザイン事務所のブログです。

関連記事

最近の記事

ランキング

  1. 1

    パラパラと文字が上から落ちてくるモーショングラフィックス(After Effects)

  2. 2

    黒板にチョークで書いたような文字とイラストのアニメーション

  3. 3

    映像にシェイク効果を簡単に(Premiere Pro/Motion Array)

  4. 4

    STUDIOでタブ切り替えコンテンツの掲載

  5. 5

    ストロボ効果を簡単に(Premiere Pro/Motion Array/Extreme Flicker)

最近の記事

  1. スケッチ線画、ガッシュ水彩画、手描きの落書きなどを組み合わせた写真からのイラスト化

  2. 二重露光【Photoshop-Art-001】

  3. サンプルサイト16(カフェサイト)の制作【STUDIO】

  4. サンプルサイト15(ランドスケープ&ガーデニングWebサイト)

  5. 音楽に合わせてアニメーションさせる方法【Affter Effects】

STUDIOで制作するWEBサイト

時短で低価格の本格的なホームページを『STUDIO』で制作
kishioka yasuo

kishioka yasuo

ホームページの企画・制作・運営・管理を主業務とする岸岡デザイン事務所のブログです。

TOP