menu

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

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

ステージ上にマウスが重なると
ムービークリップがマウスの動きに少し遅れて追随するようになります。

▷スクリプト
var people_mc = this.people_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 – people_mc.x) * ease;
var moveY = (mouseY – people_mc.y) * ease;
people_mc.x += moveX;
people_mc.y += moveY;
}

▽サンプル
live-preview

animate-sample08マウスの動きを追いかけるムービークリップ(Adobe Animate CC)

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

関連記事

  1. musexpress2_0-10

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

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

  2. shake

    マウスオーバーで10種類の揺れを(Adobe Muse)

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

  3. scroll-bar

    スクロールバー(Adobe Muse)

    サードパーティウィジェット「Custom Scroll Bar」Widgetを利用することで、特…

  4. multiscroll01

    左右の画面を逆スクロールで1枚に合成(Adobe Muse CC…

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

  5. cinch-slidshow

    レスポンシブ対応スライドショー(Adobe Muse)

    サードパーティウィジェット「Cinch Slideshow」Widgetを利用することで、レスポ…

  6. musexpress09

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

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

  7. animated-notification-bar_01

    アニメーション通知バー(Adobe Muse)

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

  8. muse-Introduction2-5

    Adobe Muse CCならブラウザ上から更新可能。 (Ado…

    Adobe Muse CCならブラウザ上から更新可能。 (Adobe Muse) from ya…

PAGE TOP