インストール後にちょっとだけ設定
Bodymovinをインストールしたら、ちょっとだけ設定をします。
メニューから
環境設定 ＞ 「一般設定」タブ ＞ 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れます
読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。
ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。
さっそく、SVGファイルを作りましょう
それでは、無事、インストールも設定も完了したということで、 アニメーションを作っていきましょう。もう一度、できることできないことの確認
第１回の記事の復習ですが、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ファイルが生成され、それをブラウザで開けば動作を確認できます。
今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。
GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、
HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。
右側の「Clone or download」をクリックしてダウンロードしましょう。
extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。
その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。
ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。
かなり細かくカテゴリ分けしてあります。
カテゴリーだけでなく、キーワードで検索できるのがいいですね。
また、「Shuffle」をクリックすると、更新日に関係なくランダムに並ぶようになります。
予期せず出会ういいデザインがあるのが魅力です。
カテゴリ分けは最小限。カラムで分けられているのはいいですね。
