【AEでSVGアニメーション! 002】制作フローと注意事項

どうも+Life Studioアキヤマです。
久々に、TIPSの更新です。
前回の記事に引き続き、After Effectstを使ったSVGアニメの作り方を書いていきます。
第1回目を読んでいない方は、先にこっちを読んでみてください。

 +Life Studio|徳島で、あなたの会社の広報部...
+Life Studio|徳島で、あなたの会社の広報部署、代行します。
https://plife.studio/blog/2017/09/make-svga-with-ae-001/
徳島で映像やウェブを使い、あなたの会社の広報部署を代行します。

前回の記事で、インストール方法を書きました。
今回は実践部分の話をします。
このサイトのトップの+Life Studioロゴは、まさに、Bodymovinを使用して制作したSVGアニメです。
今回はその制作をベースに書いていきます。

インストール後にちょっとだけ設定

Bodymovinをインストールしたら、ちょっとだけ設定をします。
メニューから
環境設定 > 「一般設定」タブ > 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れます

読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。
ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。

さっそく、SVGファイルを作りましょう

それでは、無事、インストールも設定も完了したということで、
アニメーションを作っていきましょう。

もう一度、できることできないことの確認

第1回の記事の復習ですが、BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。なので、パスデータ以外は画像(PNG)に変換されます。
これを念頭におき、再度確認しましょう。

エフェクトや3D、ビデオ、オーディオは非対応

  • 画像ファイルの書き出し
  • エフェクト類
  • 画像のシーケンス
  • ビデオ、オーディオ
  • レイヤーの時間伸縮
  • 3Dレイヤー

ウィグラやレンズフレアなどのポストエフェクトはすべて対応しておりません
ただ、今後対応予定という噂もありますので、期待しましょう。

シェイプ、パス、プリコンポ、マスクなどは対応

  • プリコンポーズ
  • シェイプ(矩形、楕円、星型)、テキスト
  • ヌルオブジェクトレイヤー
  • マスク
  • パスのトリミング
  • タイムリマップ
  • ブレンドモード(IE、Edgeを除く)

 

まずは、パスを用意


+Life Studioのロゴをすべてパスデータで起こしました。
と言っても、Adobe Illustratorで制作している場合は、コピペで対応できるので、楽です。

アニメーションをつける


通常、After Effectsでモーショングラフィックスを制作している方なら、難しいことではないですね。
キーフレームやパスを使って、素材に動きをつけていきます。

こんな感じで、動きをつけ終えたら、書き出していきましょう。

書き出すコンポと書き出し先のフォルダを指定


メニューで
ウィンドウ > 拡張機能 > Bodymovin を開くと書き出し用の画面が出てきます

書き出すコンポにチェックをいれ、書き出すフォルダを指定します(フォルダが表示されていない場合はをクリックして指定)

書き出しのセッティングをする

書き出すコンポ名の左にある「Settingsギアマーク」をクリックすると、プロパティ画面が開きます。
書き出し形式は「Glyphs」を選択し、「Save」をクリック

JSONファイルを書き出す


Bodymovin画面の左上にある「Render」ボタンを押すと、JSONファイルの書き出しが始まります。

Renders Finishedと表示されたら、レンダリング完了です。
書き出したフォルダを見てみると、JSONファイルが出来上がっていると思います。
これで、書き出し完了です!

htmlファイルで書き出してくれるDemoモード

実際にブラウザでどのように動作するかを確認できるDemoモードという書き出し方法がSettingsの中にあります。

「Demo」で書きだすと、htmlファイルが生成され、それをブラウザで開けば動作を確認できます。

次回は、書き出したJSONの設置方法を掲載します♪

次回は、書き出したJSONをどのようにサイトに配置するか、をまとめます。