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. modal-pop-up

    モーダルポップアップ通知(Adobe Muse)

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

  2. simple-and-sweet-on-scroll-animations

    26種類のスクロールアニメーション(Adobe Muse)

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

  3. mediapro-gallery

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

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

  4. musexpress3_07

    インストールから公開まで(MusexPress3)

    『Adobe Muse』と『MusexPress3』を組み合わせることでコーディング作業なしにW…

  5. typekit01

    Adobe MuseにおけるTypekitフォント使用に関する検…

    作業画面上ではTypekitフォントが反映されるものの書き出したHTMLには反映されないので検証して…

  6. dynamic-slide

    映画的表現のスライドショー(Adobe Muse)

    サードパーティウィジェット「Dynamic Slide」Widgetを利用することで、数枚の写真…

  7. hero-connect03

    時刻や曜日に合わせて画像・動画・テキストを自動で切り替え(Ado…

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

  8. zoom-and-pan-slideshow-01

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

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

PAGE TOP