After Effectsで動かしたイラストをWeb上で閲覧できるようにしてみた

10769 ワード
Lottie AdventCalendar AfterEffects illustrator AdventCalendar2019 AdventCalendar テキストリンク

はじめに

初めまして！7月からデザイナーとして入社した者です！
アドベントカレンダーという事でクリスマスに関連付けて、AfterEffectでWeb上で閲覧できるオリジナルのクリスマスカード（カードなのか...？）を作っていきたいと思います！
Illustratorで書いたイラストを、SVGで書き出し、AffterEffectでつけた動きを
WEB上で閲覧できるように書き出すところまでやってみたいと思います。

今回必要となるツールは下記になりますので、実際に作る方はあらかじめ用意してください。
（Adobeのソフトは初回ですと1ヶ月無料で体験できるのでまだインストールしたことのない人は是非試してみてください）

  • Illustrator
  • After Effects
  • texteditor
  • bodymovin（インストールの流れは後ほど説明します）

それでは、作業を進めていきましょう！

Illustratorで描いたイラストを用意する

svgで書き出すため、素材はIllustratorで作る必要があります。
今回は、サンタペンちゃんを用意しました！

Illustratorでweb用に使う素材を作成する際は、カラーモードをRGBに設定することを忘れないようにしましょう。
カラーモードの設定は、
メニューバーのファイル>ドキュメントのカラーモード>RGBカラーで設定できます。

After Effectsでイラストを動かしてみる

いよいよイラストを動かす作業に入ります。
ちょっと作業工程が長めなので、見たいところだけ見てください。

動かしたい画像を挿入する

After Effectsを立ち上げると、添付の画像のような画面になります。
新規コンポジションを選択し、サイズを任意に指定します。（ここでいうコンポジションはアートボードのようなものです）

コンポジションを作成すると、コンポ１という名称で画面が出てきます。
そこにペンちゃんを挿入していきます。
メニューバーのファイル>読み込み>ファイル>aiデータを選択
すると、画面の左側にaiデータが読み込まれます。

左側に入ったaiデータを下の画面にドラッグします。

次に、このaiデータをパスに変換します。現状のままだと、拡大縮小した際、画像がぼやけてしまいます。
パスに変換する方法は、aiデータを右クリック>作成>ベクトルレイヤーからシェイプを作成です。
そうするとaiのレイヤー以外にもう一つレイヤーが増えています。
レイヤーの中身を広げると、シェイプごとにさらにレイヤーが分かれているので確認してみてください！
これでこのイラストをいい感じに動かせるようになります。

イラストに動きをつけていく

イラストに動きをつけるためには、レイヤーの中のトランスフォームの要素の数値を調整していきます。
例えば、スケールを調整すると、このようになります。

下記画像のように、タイムラインに変更したサイズを打っていくと、再生された時にぬるぬる動きます！
この、タイムラインに打たれた「◆」マークは、キーフレームと言います。
キーフレームをどんどん追加していくほど、複雑な動きが表現できるということですね！

この要領で、放射状に開く挙動を、下記の動画を見ながら作成してみました。
【参考にした動画】
5分で出来る！シェイプアニメーション【リピーター】After Effects初心者講座#3
完成したものはこんな感じになりました。

この、放射状の動きとペンちゃんを組み合わせると、

こんな感じになりました！
ちなみに、ペンちゃんと文字のバウンドする動きは、エクスプレッションを追加してつけています。
ペンちゃんレイヤーのトランスフォームの中の、スケールを選択した状態で
メニューバーのアニメーション>エクスプレッションを追加で記述が可能になります。
参考にしたコードは下記になります。

puts amp = .1; freq = 5; decay = 7; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time){ n--; } } if (n == 0){ t = 0; }else{ t = time - key(n).time; } if (n > 0){ v = velocityAtTime(key(n).time - thisComp.frameDuration/10); value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t); }else{ value; }

参照:http://oldrookie.info/category/after-effects/

コードの記述場所はこちらです。

After Effectsで動かしたイラストをWeb上で閲覧できるようにする

動きをつけたイラストを書き出してみましょう。

Bodymovinを使って書き出しする

書き出すためには、BodymovinというAfter Effectsのプラグインが必要です。
下記からダウンロードができます。
Bodymovinのダウンロードはこちら

インストールされたか確認するには、メニューバーのウィンドウ>エクステンションから確認できます。

こちらをクリックすると、このような画面になります。

緑のボタンのRenderを押すと、イラストがWeb用に閲覧できるファイルが生成されます。
ここで、注意するところが、After Effectsの設定で
スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可という項目にチェックが入っていないと、ファイルが書き出されないので注意してください。
設定場所は、環境設定>一般設定>スクリプトとエクスプレッションになります。

書き出されると、jsonという拡張子のファイルが生成されます。（私が書き出した時はdata.jsonになりました）
ちなみに、Renderを押す前にSettingを押すと添付のような画面になります。

ここで、Demoにチェックを入れると、デモで閲覧できるhtmlが書き出されます。
ローカル上でブラウザにドラッグすると確認ができます。

.jsonを確認するには、下記にファイルをドラッグしてください。
プレビュー画面はこちら

プレビューで問題なく動いていたら、Web上で閲覧できるようにコードを書いていきます。

lottieを使ってイラストを表示させる

lottieは、Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリだそうです。
下記よりlottieを入手します。
lottie-web

使用するjsはこちらになります。

lottie
<script src="lottie.js" type="text/javascript"></script>

書き出したファイルと、js等を画像のように格納してみます。

index.htmlの中身はこうなりました。

indexhtml
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="lottie"></div>
        <script src="lottie.js" type="text/javascript"></script>
        <script>
        lottie.loadAnimation({
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'data.json'
        });
        </script>
    </body>
</html>

このデータを実際にサーバーに上げてみると、下記のようになりました！
クリスマスカード

demo用に書き出されたhtmlをこちらに添付するとこうなります。


See the Pen
penchan by aucfan-ohta (@aucfan-ohta)
on CodePen.


これで動くイラストがWeb上で閲覧できるようになりました！！

まとめ

ホームページにモーショングラフィックスを取り入れているところがとても多いので、デザインする時に自分でもつくってみたいと思い、
第一歩として描いたイラストを動かしてみました！
動くイラストを書き出すとき、gifにすると画質が荒くなってしまうので、このようにリッチなデータで書き出されると見栄えがとてもいいです。
デザイナーの表現の幅が広がるので、重要なコンテンツなどは、サイトにメリハリをつけるためにもっと動きのあるものを取り入れていきたいと思いました。
とはいえ、実際に今回作ったようなイラストを毎度作るのは手間なので、まずはちょっとしたアイコンの挙動などに今後活用できたらいいなと思いました（工数と相談しながら作り込めるところはもっと突き詰めたいです）

ここまで閲覧していただき、ありがとうございました！
良い年末をお過ごしくださいませ！