こんばんは、織田檸檬です。
今回はBodymovinっていうスクリプトの記事です。
AEのデータをjson形式で吐き出してくれるソフト＝Bodymovin
ためしにこちらのサイトに飛んでみて下さい。
僕のブログのタイトルロゴが変形しながら出てくるかと思います。
PCの方はブラウザの幅を変える、スマホの方は横向きにしてみると、これが普通の動画とは違うということがわかるかと思います。
どうでしょう。おそらく、画面幅に合わせて伸縮したんじゃないかと思います。
AEで作ったモーションをweb上で表示できるっていうのは、つまりそういうことです。
先ほどのモーショングラフィックスはGIFでもAPNGでもMP4でもありません。画像や動画データではないんです。HTMLとJavaScriptとjsonで、クライアント側（みなさんの表示デバイス、iPhoneとか）で生成・再生しているんです。
拡大しても画像が荒くならないのはそのせいです。Illustratorのデータみたいですね。
ちなみにアイキャッチ画像は今までと同じGIFなので、見比べてみるとより違いがわかるかと思います。
またインタラクティブ性を持つので、上手く作れば、こちらのサンプルのようなこともできます。これらのモーショングラフィックスはAfterEffectsで作られたものです。
json形式へはボタンひとつで出力可能
jsonを吐き出すだけなら、コンポジションを選んでボタンを押すだけで簡単に作成できます。
jsonにするのは驚くほど簡単
ただし、トラックマットは機能しなくなりますし、エフェクトが入ってるとそもそも書き出しが止まります。
そうです。webで書き出せるとはいえ、制限があります。
基本的にトランスフォームをいじるか、パスのアニメーションをいじるか、マスクの形状を変えるか、等のことしかできないです。
Particularとかは使えないということですね。
bodymovin自体の導入にはZXP installerが必要になるので、まずそれをインストールしておきます。
ZXP Installer - aescripts + aeplugins - aescripts.com
それをインストールしてしまえば、あとは解凍後、/build/extension内にあるzxpファイルをZXP installerで開けばOKです。
AEユーザーにとっての壁はHTMLとjsを書くこと
モーショングラフィックスを作るのは得意なAEユーザーのみなさんにおかれましては、HTMLとjsを用いてjsonを呼び出すというのが最も大きな壁になるかと思います。
それはおいおい勉強するとして、一旦まずは書き出してみたjsonをweb上で動くか見てみたい……！
そんな方に、とあるサイトをご紹介します。
jsonを投げれば表示してくれるwebサービス
web上で上手く表示できるかの確認に、こちらのサイトがおすすめです。
僕の友人が作ったwebアプリです。無料です。
コードは書けないけど、とりあえず表示させてみたいって方に。これを機にwebの知識を身に着けて圧倒的成長を図ろう。
Bodymovinで吐き出したjsonを、枠の中にドラッグ・アンド・ドロップしてみてください。おそらく表示されるかと思います。
自分で作ったモーショングラフィックスがweb上で動くと、ちょっと感動しますよね。
みなさんもためしに作ってみましょう！
終わりに
それにしても面白いですよねBodymovin。AEで作ったモーションがwebページで表示できるっていうのは、なかなかロマンありますよね。
ここははてブなのでブログページそのものをいじるのはかなりしんどいですけれども、WordPressなどカスタマイズ性の高いサイトを利用している方なら、他のサイトとは違った、活かすウェブページを作ることができるでしょう。
僕に頼みたいですか？ いいでしょう。
制作費は200万円からお受けいたしますので、どうぞご検討下さいませ。
以上です。
今日のGIFについて
以前あげたロゴモーショングラフィックスを流用しています。
こちらの記事ですね。
ただこのとき、マスクにエフェクトの線をつかって表現していたので、全部パスアニメーションに変えました。めちゃ面倒でした。
今日の貯金について
合計17,100円。