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

    Search Boxの設定(MusexPress3)

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

  2. fluidslider01

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

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

  3. muse-samplesite01-01

    Adobe Museでレスポンシブ対応サンプルサイト01(Ado…

    Adobe Muse CCを利用して、レスポンシブ対応のサンプルサイトを制作しました。※ページ内…

  4. fullscreen-split-slider01

    フルスクリーン分割スライダー(Adobe Muse)

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

  5. animated-buttons

    ボタンにアニメーションを付けてワンポイント(Adobe Muse…

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

  6. hero-connect03

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

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

  7. musexpress3_12

    Page creatorの設定(MusexPress3)

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

  8. muut-forum01

    コミュニティフォーラムの設置(Adobe Muse)

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

PAGE TOP