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);
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;
}
}

▽サンプル
live-preview

animate-sample09マウスの動きを追いかけるムービークリップに減速効果(Adobe Animate CC)

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

関連記事

  1. zoom-and-pan-slideshow-01

    ズームとパンスライドショー(Adobe Muse)

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

  2. animate-svg03

    SVGアニメーション(Adobe Muse)

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

  3. image-shapes-a-01-2

    ポリゴンの数値による画像のモーフィング(Adobe Muse)

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

  4. mediapro-gallery

    メディアプロ・ギャラリー(Adobe Muse)

    サードパーティウィジェット「Media Pro Gallery」Widgetを利用することで、ソ…

  5. carousel-image-slider01

    カルーセル画像スライダ2.0(Adobe Muse CC)

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

  6. fullscreen-slideshow-cover01

    Webサイト全体をフルスクリーンスライドショーで魅せる(Adob…

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

  7. audio-visualizer

    音に合わせてヴィジュアルが変化(Adobe Muse)

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

  8. gallery-connect01

    CSVファイルでコントロールするギャラリー(Adobe Muse…

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

PAGE TOP