animate-sample10

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

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

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

ステージ上にマウスが重なると
ムービークリップがマウスの方向へ向きを変えます。
(マウスの動きに少し遅れて追随します。)

▷スクリプト
var music_mc = this.music_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 – music_mc.x;
var moveY = mouseY – music_mc.y;
music_mc.x += moveX * ease;
music_mc.y += moveY * ease;
if (moveX > 0) {
music_mc.scaleX = -1;
} else {
music_mc.scaleX = 1;
}
}

▽サンプル
live-preview

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

ステージをクリックする度にムービークリップが置き換わります(Adobe Animate CC)次のページanimate-sample11

関連記事

  1. musexpress11

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

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

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

  2. shake

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

    マウスオーバーで10種類の揺れを(Adobe Muse)

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

  3. animated-numbers-01

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

    数字のアニメーションが目を引きます(Adobe Muse)

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

  4. animate-sample07
  5. carousel-gallery

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

    メリーゴーランドギャラリー(Adobe Muse)

    サードパーティウィジェット「Carousel Gallery」Widg…

  6. fullscreen-video-slideshow-cover

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

    フルスクリーンビデオスライドショー(Adobe Muse)

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

  1. zoom-and-pan-slideshow-01

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

    ズームとパンスライドショー(Adobe Muse)
  2. filmora032-01

    Filmora

    26種類のフレームオーバーレイ(後半)(Filmora)
  3. filmora035-01

    Filmora

    旅の素敵な動画を飾る28種類のタイトル(前編)(Filmora)
  4. keynote-animation02

    Keynote Animation

    トランジションエフェクトのアニメーション(Keynote Animation)
  5. scroll-bar

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

    スクロールバー(Adobe Muse)
PAGE TOP