menu

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

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

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

▷スクリプト
var people_mc = this.people_mc;
var mouseX = 0;
var mouseY = 0;
this.stage.addEventListener(“stagemousemove”, recordMouse);
function recordMouse(eventObject) {
mouseX = eventObject.stageX;
mouseY = eventObject.stageY;
people_mc.x = mouseX;
people_mc.y = mouseY;
}

▽サンプル
live-preview

animate-sample07ステージ上を水平方向にアニメーション(Adobe Animate CC)

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

関連記事

  1. animate-sample05

    クリックしてテキストを表示(Adobe Animate CC)

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

  2. animate-sample03

    ムービークリップの再生・停止(Adobe Animate CC)…

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

  3. animate-sample11

    ステージをクリックする度にムービークリップが置き換わります(Ad…

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

  4. absolute-muse-gallery

    グリッドギャラリー(Adobe Muse)

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

  5. infiniscroll01

    イメージのスクロールでパノラマ表現(Adobe Muse)

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

  6. svgdraww

    テキストの描写をアニメーション表現(Adobe Muse)

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

  7. scrollpercentage

    スクロールの追跡(Adobe Muse)

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

  8. image-text

    テキストに画像を配置(Adobe Muse)

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

PAGE TOP