animate-sample09

Adobe Animate CCを使ったコンテンツ制作

マウスの動きを追いかけるムービークリップに減速効果(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)前のページ

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

関連記事

  1. animator01

    Adobe Muse CCを使ったホームページ制作

    130種類以上の中からアニメーションを選択(Adobe Muse CC)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  2. interactive-particles

    Adobe Muse CCを使ったホームページ制作

    マウス操作で粒子が飛び散るインパクト表現(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  3. musexpress2_0-06

    Adobe Muse CCを使ったホームページ制作

    MuseとWordPressの連携(その6/Adobe Muse)

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

  4. youtube-video-gallery-01

    Adobe Muse CCを使ったホームページ制作

    YouTubeビデオギャラリー(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  5. text-animations

    Adobe Muse CCを使ったホームページ制作

    13種類のテキストアニメーション(Adobe Muse)

    サードパーティウィジェット「Text Animations」Widge…

  6. musexpress3_18

    Adobe Muse CCを使ったホームページ制作

    Dynamic Menuの設置(MusexPress3)

    『Adobe Muse』と『MusexPress3』を組み合わせること…

  1. fullscreen-split-slider01

    Adobe Muse CCを使ったホームページ制作

    フルスクリーン分割スライダー(Adobe Muse)
  2. slides-presentations01

    Adobe Muse CCを使ったホームページ制作

    スライドショーでプレゼンテーション(Adobe Muse CC)
  3. filmora-pho003-01

    Filmora

    テキスト「タイトル編」(Filmora)
  4. musexpress3_07

    Adobe Muse CCを使ったホームページ制作

    インストールから公開まで(MusexPress3)
  5. webflow001-01

    STUDY

    ナビゲーションの設置。(webflow)
PAGE TOP