menu

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

◎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

animate-sample10ムービークリップがマウスの方向へ向きを変えます(Adobe Animate CC)

musexpress11MuseとWordPressの連携(その5/Adobe Muse)

関連記事

  1. musexpress06

    MuseとWordPressの連携(その2/Adobe Muse…

    Adobe MuseとWordPressを連携させたサイトの制作に挑戦。「MusexPress」…

  2. muse-samplesite03-03

    Animate CC+Muse CCでスクロール効果を使ったアニ…

    iMac Proの紹介ページにあるブラウザのスクロールに合わせて横向きのiMacが正面を向くアニ…

  3. audio-visualizer-set01

    音楽とマウスでビジュアルを操作(Adobe Muse CC)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  4. onload-animator

    30種類のワンポイントアニメーション(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  5. nav-system_05

    簡単でバラエティ豊かなナビゲーションシステム(Adobe Mus…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  6. countdown-clock

    カウントダウン時計(Adobe Muse)

    サードパーティウィジェット「Countdown Clock 2.0」Widgetを利用することで、…

  7. animated-buttons

    ボタンにアニメーションを付けてワンポイント(Adobe Muse…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  8. animate-sample01

    <HTML5 Canvas>仕様で可能な事を調べています。(その…

    ◎HTML5 CanvasではFlashプラグインを使用せずにインタラクティブコンテンツの表現を…

PAGE TOP