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

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

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

  2. table-maker

    表組の作成(Adobe Muse)

    サードパーティウィジェット「Table Maker」Widgetを利用することで、表組作成機能の…

  3. musexpress2_0-10

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

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

  4. social-sharing01

    ソーシャルシェアボタンの掲載(Adobe Muse)

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

  5. parallax-tilt-effect

    ちょっと不思議な画像の浮き出し効果(Adobe Muse)

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

  6. qr-mobile-preview

    自動QRコード(Adobe Muse)

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

  7. sunder-gallery-01

    演出効果に優れたカード型レイアウトを簡単に。(Adobe Mus…

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

  8. nav-system_05

    簡単でバラエティ豊かなナビゲーションシステム(Adobe Mus…

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

PAGE TOP