animate-sample08

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

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

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

関連記事

  1. snipcart-ecommerce

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

    Museでeコマース出来るのですが・・・(Adobe Muse)

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

  2. animated-page

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

    ページ遷移アニメーション(Adobe Muse)

    サードパーティウィジェット「Animated Page Transit…

  3. animate-sample05

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

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

    ◎HTML5 CanvasではFlashプラグインを使用せずにイン…

  4. musexpress3_12

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

    Page creatorの設定(MusexPress3)

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

  5. lightbox01

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

    2タイプのライトボックスギャラリー(Adobe Muse)

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

  6. headliner

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

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

    サードパーティウィジェット「HeadLiner」Widgetを利用する…

  1. div_block_img01

    STUDY

    Divブロックの説明(webflow)
  2. animate-sample05

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

    クリックしてテキストを表示(Adobe Animate CC)
  3. eyecatch-20201208

    Filmora

    Filmora Xの新機能『モーショントラッキング』の制作方法
  4. randomizer01

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

    イメージのランダム表示(Adobe Muse)
  5. eyecatch-20201129

    Premiere Pro

    イーズアウトの動きをMotion ArrayのPremiere Proプラグイン…
PAGE TOP