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

徳島の広告制作・ブランディング会社+Life Studio（プラスライフスタジオ）

~~https://plife.studio/blog/2017/09/make-svga-with-ae-001~~

徳島で「インターネット配信」「映像」「チラシ・パンフレット」ならお任せください。

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

ナナメ読み目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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