YoYoYoY

君はこの、GIFばかりの重たいブログを開けるか

AEで作ったモーションをwebで表示できる!? Bodymovinの良さみが深い件

f:id:yoooooemin:20170319105208g:plain

こんばんは、織田檸檬です。

今回はBodymovinっていうスクリプトの記事です。

AEのデータをjson形式で吐き出してくれるソフト=Bodymovin

 

ためしにこちらのサイトに飛んでみて下さい。

 

僕のブログのタイトルロゴが変形しながら出てくるかと思います。

PCの方はブラウザの幅を変える、スマホの方は横向きにしてみると、これが普通の動画とは違うということがわかるかと思います。

 

どうでしょう。おそらく、画面幅に合わせて伸縮したんじゃないかと思います。

AEで作ったモーションをweb上で表示できるっていうのは、つまりそういうことです。

 

先ほどのモーショングラフィックスはGIFでもAPNGでもMP4でもありません。画像や動画データではないんです。HTMLとJavaScriptjsonで、クライアント側(みなさんの表示デバイスiPhoneとか)で生成・再生しているんです。

拡大しても画像が荒くならないのはそのせいです。Illustratorのデータみたいですね。

 

ちなみにアイキャッチ画像は今までと同じGIFなので、見比べてみるとより違いがわかるかと思います。

 

またインタラクティブ性を持つので、上手く作れば、こちらのサンプルのようなこともできます。これらのモーショングラフィックスはAfterEffectsで作られたものです。

 

json形式へはボタンひとつで出力可能

 

jsonを吐き出すだけなら、コンポジションを選んでボタンを押すだけで簡単に作成できます。

 

f:id:yoooooemin:20170319004418j:plain

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アプリです。無料です。

 

f:id:yoooooemin:20170319005029p:plainコードは書けないけど、とりあえず表示させてみたいって方に。これを機にwebの知識を身に着けて圧倒的成長を図ろう。

 

Bodymovinで吐き出したjsonを、枠の中にドラッグ・アンド・ドロップしてみてください。おそらく表示されるかと思います。

 

自分で作ったモーショングラフィックスがweb上で動くと、ちょっと感動しますよね。

 

みなさんもためしに作ってみましょう!

 

終わりに

 

それにしても面白いですよねBodymovin。AEで作ったモーションがwebページで表示できるっていうのは、なかなかロマンありますよね。

 

ここははてブなのでブログページそのものをいじるのはかなりしんどいですけれども、WordPressなどカスタマイズ性の高いサイトを利用している方なら、他のサイトとは違った、活かすウェブページを作ることができるでしょう。

 

僕に頼みたいですか? いいでしょう。

制作費は200万円からお受けいたしますので、どうぞご検討下さいませ。

 

以上です。

 

今日のGIFについて

 

以前あげたロゴモーショングラフィックスを流用しています。

こちらの記事ですね。

 

yoooooemin.hatenablog.com

 

ただこのとき、マスクにエフェクトの線をつかって表現していたので、全部パスアニメーションに変えました。めちゃ面倒でした。

 

今日の貯金について

 

 

f:id:yoooooemin:20170319110452p:plain

 

合計17,100円。