menu

Animate CC+Muse CCでスクロール効果を使ったアニメーション。(Adobe Muse)

iMac Proの紹介ページにあるブラウザのスクロールに合わせて
横向きのiMacが正面を向くアニメーションの様な仕組みを再現出来ないかと思い、
Animate CCとMuse CCで制作してみました。

▽サンプル
live-preview

<Animate CC>

1.Animate CCでアニメーションを作成。

・HTML5 Canvas ドキュメント
・フレームレート:30.00
・サイズ:W:800 H:600

muse-samplesite03-02

<Muse CC>

1.Animate CC書き出したオブジェクトデータ(.oam)を配置。

2.オブジェクトの固定をチェック。

3.スクロール効果のアニメーションを設定。

☆スクロールに合わせてアニメーションが進行します。逆にスクロールを戻していくとアニメーションが逆再生されます。

☆1秒間に進行するピクセル単位の値を小さくしていくとアニメーションの再生スピードがアップします。

muse-samplesite03-03

chart-cartoon-film2-1Keynoteでグラフアニメーション/3D編(Keynote)

superhero-slider04最大20枚設置可能のフルスクリーンスライドショー(Adobe Muse)

関連記事

  1. zoom-and-pan-slideshow-01

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

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

  2. cinch-slidshow

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

    サードパーティウィジェット「Cinch Slideshow」Widgetを利用することで、レスポ…

  3. qr-mobile-preview

    自動QRコード(Adobe Muse)

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

  4. infiniscroll01

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

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

  5. water-ripple-effect02

    画面いっぱいに水の波紋(Adobe Muse)

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

  6. musexpress2_0-13

    「Login Areaのインストール」MuseとWordPres…

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

  7. particles

    写真に重ねた素材に動きを付けて魅力アップ(Adobe Muse)…

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

  8. dropdown-list

    ドロップダウンメニュー(Adobe Muse)

    サードパーティウィジェット「Dropdown List」Widgetを利用することで、ドロップダ…

PAGE TOP