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. rapidreveal01

    アコーディオン方式で展開させるイメージギャラリー(Adobe M…

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

  2. animate-sample08

    マウスの動きを追いかけるムービークリップ(Adobe Anima…

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

  3. animate-sample12-2

    カメラツールでパン、ズームイン・アウト、回転(Adobe Ani…

    Adobe Animate CC 2017へのバージョンアップにより、「カメラツール」機能が追加…

  4. animate-sample06

    水平移動、垂直移動、角度変更、連続回転のアニメーション(Adob…

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

  5. gadient-background

    背景やグラフィックにグラデーションを(Adobe Muse)

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

  6. sunder-gallery-01

    演出効果に優れたカード型レイアウトを簡単に。(Adobe Mus…

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

  7. media-pro-gallery-2-01_01

    複数レイアウトからライトボックスに展開可能のメディアギャラリー(…

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

  8. animate-sample04

    オブジェクトの表示・非表示・移動(Adobe Animate C…

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

PAGE TOP