YOUR GOOD CREATOR
AND SOULMATE

BLOG

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

2017.11.28

コンテンツ

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

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

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

第１回の記事の復習ですが、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をどのようにサイトに配置するか、をまとめます。]]>