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. animate-sample08

    マウスの動きを追いかけるムービークリップ(Adobe Anima…

    ◎HTML5 CanvasではFlashプラグインを使用せずにインタラクティブコンテンツの表現を…

  2. image-text

    テキストに画像を配置(Adobe Muse)

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

  3. animate-sample01

    <HTML5 Canvas>仕様で可能な事を調べています。(その…

    ◎HTML5 CanvasではFlashプラグインを使用せずにインタラクティブコンテンツの表現を…

  4. mobilemenu01

    アコーディオンモバイルメニューの設置(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。ソフトにデフォルトで備わ…

  5. sample01-01

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

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

  6. bigmenu03

    フルスクリーンメニューが11種(Adobe Muse)

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

  7. fullscreen-gallery

    フルスクリーンフォトギャラリー(Adobe Muse)

    サードパーティウィジェット「Fullscreen Thumbnail Gallery」Widgetを…

  8. absolute-muse-gallery

    グリッドギャラリー(Adobe Muse)

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

PAGE TOP