menu

ポリゴンの数値による画像のモーフィングPart2(Adobe Muse)

【Adobe Muse】の機能を利用したコンテンツを紹介しています。
サードパーティウィジェット「Image Shapes」Widgetを利用することで、
1枚の画像を使って面白いアニメーションを掲載することが可能になります。
☆Part2では別の画像からアニメーションの動作を制御しています。

・画像の前と後をポリゴンの数値で図形を設定。
・オンロード、ホバーオン、クリック時、またはスクロール時に2つの図形間をモーフィング。モーフィングの速度、遅延、リピート、インージングを設定。

・ポリゴンの形状は下記のアドレスから抽出します。
https://bennettfeely.com/clippy/

☆イラストレーターで作成した図案をSVCで別名保存する際にSVGコードを確認することができます。ポリゴンのパスが取得できればコピーペーストで「Image Shapes」Widgetで利用することができます。
※幾つか試しましたが形状の簡単なものでないと難しいようです。

▽サンプル
live-preview

ポリゴンの数値による画像のモーフィングPart2(Adobe Muse) from KISHIOKA.DESIGN on Vimeo.

「Image Shapes」Widgetについての詳細はコチラ(外部サイト)

image-shapes-a-01-2ポリゴンの数値による画像のモーフィング(Adobe Muse)

image-shapes-c-01ポリゴンの数値による画像のモーフィングPart3(Adobe Muse)

関連記事

  1. sidebar-connect02

    強力サイドバーナビゲーションシステム(Adobe Muse)

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

  2. google-calender

    グーグルカレンダーへのアクセス(Adobe Muse CC)

    2018年5月13日(更新)☆Google Calendar(v1.4)Googleのサーバ…

  3. animate-sample06

    水平移動、垂直移動、角度変更、連続回転のアニメーション(Adob…

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

  4. zoom-and-pan-slideshow-01

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

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

  5. qr-mobile-preview

    自動QRコード(Adobe Muse)

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

  6. slide-reel01

    フルスクリーン表示のスライドショー(Adobe Muse)

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

  7. musexpress3_07

    インストールから公開まで(MusexPress3)

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

  8. animate-sample04

    オブジェクトの表示・非表示・移動(Adobe Animate C…

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

PAGE TOP