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. table-maker

    表組の作成(Adobe Muse)

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

  2. text-animations

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

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

  3. animate-sample12-2

    カメラツールでパン、ズームイン・アウト、回転(Adobe Ani…

    Adobe Animate CC 2017へのバージョンアップにより、「カメラツール」機能が追加…

  4. kishioka-design_sample001_01

    サンプルブログ001の制作(MusexPress3.x)

    ※2017年6月8日ブレークポイントを追加してのレスポンシブ対応を試みたのですがエラー発生。…

  5. muse-table-01

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

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

  6. pop-ups01

    3つの方法でポップアップ(Adobe Muse)

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

  7. superhero-slider04

    最大20枚設置可能のフルスクリーンスライドショー(Adobe M…

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

  8. musexpress3_01

    Adobe Muse+MusexPress3=WordPress…

    『Adobe Muse』と『MusexPress3』を組み合わせることでコーディング作業なしにW…

PAGE TOP