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. sample01-01

    アダプティブWebデザイン/サンプル01(Adobe Muse)…

    Adobe Muse CC 2015 最新リリース版に搭載されているデスクトップ、タブレット…

  2. multiscroll01

    左右の画面を逆スクロールで1枚に合成(Adobe Muse CC…

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

  3. zoom-and-pan-slideshow-01

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

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

  4. tabs

    アコーディオンパネル(Adobe Muse)

    サードパーティウィジェット「Tabs」Widgetを利用することで、アコーディオンパネルの機能を…

  5. musexpress09

    MuseとWordPressの連携(その3/Adobe Muse…

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

  6. presentation-panels

    フルスクリーンスクロール(Adobe Muse)

    サードパーティウィジェット「Presentation Panels」Widgetを利用することで、…

  7. superhero01

    ブラウザ天地に自動調整フルスクリーンイメージ(Adobe Mus…

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

  8. muse-table-01

    Museの苦手なテーブル機能を克服(Adobe Muse)

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

PAGE TOP