Adobe イラストレーターで作成したファイルを、アフターエフェクツに読み込んで、ロッティー形式で書き出す方法。
一筋縄ではいかない。最後の最後で書き出せなかったり、書き出したけど表示されないなどのトラップまみれ。
ググっても言葉足らずの記事が多いので、画像付きで解説。
↓こんなアニメーションが作れます。（自作）
おもしろフラッシュ倉庫みたいで怖い・・・
今回作る物のサンプル
表示されていなければ、ほかのサイトの解説同様この記事もあてにならない。
Lottieとは
・json形式のアニメーション
・制限はあるがGifアニメーションより高画質
・軽い
・拡大してもきれい
・モバイルアプリにも好んで埋め込まれることがある
こんな風に完成品が素材で配布されてたりもする。
Featured animations from our community
この動画を参考に作っていくぜ（結構わかりにくいから俺様が解説）
Aiファイルを作るの面倒くさければ、ここにあるからダウンロードして。
Aiファイルはパーツごとにレイヤーが分かれている必要がある。
↓↓Aiファイル
最後の最後で動かんかったら嫌やからまずは完成品よこせって人は、↓↓をダウンロード
前提条件
・Adobe Aftereffectsをもっている
・Adobe ilustlatorを持っている
せっかくイラストレーターでイラストを作ったのに、なんかうまくAfterEfffectsで読み書きできなかった！ってなったらだるすぎるから、まずは上記のpost.aiを使ってほしい。
後々自分で作る人は「Lottieとは」の部分に貼った動画を参考にして！
もう1回貼っとくわ
まだAdobeを持っていない人は、ここからならだれでも学生料金で契約可能。
覗いてみて。
Aiファイルを自分で作るとの注意点
レイヤー名はすべて半角英数字にしたほうがいい（多分）
日本語が含まれていると、After Effectsで書き出した後のjsonファイルに日本語が含まれてしまう。
完成したlottieファイルをしようする環境によっては問題が起こりそうな気がするので、やめたほうがいい気がする。
レイヤーは細かく分ける
レイヤーを分けるか迷ったら、とりあえず分けておく。
パーツごとに動きを付けられるので、細かく分けておく方が便利。
例えば、「顔」を表すレイヤーなら、
・目
・鼻
・口
分けたほうが独立して動かせるので融通が利く。
After Effects側で簡単にグループ化できるので、連動して動かしてい要素がでてくるのかは後で考えればいい。
AfterEffectsの設定
拡張機能インストール
https://exchange.adobe.com/creativecloud.details.12557.html
これをインストール。
なんかほかにも入れないといけないものが書いてる人もいるが、自分の環境ではこれだけでよかった。
参考動画の人は違うプラグインを使っているっぽが気にするな。
スクリプトとjson許可
↓
この2つにチェックが入るようにする。
じゃないと書き出しの時に何も起こらなくなる。
AfterEffectsでの編集
下準備
プロジェクトパネル上で右クリック>読み込み>ファイル
でAiファイルを選択。
コンポジション
レイヤーサイズ
の状態でOK
もし背景色が黒でイラストが同化してしまうなら、
左上のコンポジション > コンポジション設定
から白とかに変更できる。
プロジェクトパネル上のコンポジションをダブルクリックすると、タイムラインにレイヤーが挿入される。
レイヤーを全部選択して、右クリック＞作成＞ベクトルレイヤーからのシェイプ作成
（ちなみに上記の画像は背景が黒であることに気づかずイラストが見えなくなっている）
AIファイルだけを複数選択で全部選んで、deleteキーなどで削除
結果的にアウトラインと名づくものだけが残る。
アニメーションの時間を設定
↓
自分は１秒にした。
冒頭に貼り付けた動画の解説者は、
フレームレート60
デュレーション2秒にしてるっぽい。
このブログの記事を参考にするなら、1秒と29.97フレームにしておいたほうが分かりやすいかも。
モーションをつける
回転させたい。
letterbox-flagアウトラインを選択して、アンカーポイント（図形の中心となる場所）をずらす。
これで、ずらした後の位置を中心に回転できるようになる。
↓
この例でいうpostパネルの上で右クリックして列を表示＞親とリンク が表示されるようにする。
↓
flag-maskアウトラインの「親とリンク」を「lettebox-filagアウトライン」にする。
これにより親である「lettebox-filagアウトライン」が回転したら、子である「flag-maskアウトライン」も一緒に動く。
postパネルのレイヤーを子の順番になるように並べ替える&letterbox outlineのトラックマットをアルファ反転的にする。
わかりやすいようにタグをピンクにする。
postテーブルの何もないところで右クリックして、新規＞nullオブジェクト
動画編集ソフトPremiere proとかで言う調整レイヤーみたいなものを作る。
・letterbox-mouseアウトライン
・lettebox-sideアウトライン
・letterboxアウトライン
を
ヌルの子供にする。
・letterbox-mouseアウトライン
・lettebox-sideアウトライン
・letterboxアウトライン
の3つを選択した状態で、上記の画像のようにどれでもいいので子供となるレイヤーの「親とリンク」のぐるぐるアイコンを「ltterbox-post」にドラッグして親子関係を生成する。
↓結果的にこうなればなんでもいい。
これでヌルに加えた操作に連動して
・letterbox-mouseアウトライン
・lettebox-sideアウトライン
・letterboxアウトライン
も動くようになる。
別に今は動かさなくてもいい。
postの右上のオブジェクトを動かす。
letterbox-flagとヌルのレイヤーを展開して、回転の角度を決定する。
適当に回転のキーフレーム打って、画像のように回転に角度を入力する
キーフレームの打ち方は動画を見るかググってくれ。
動画の説明下手過ぎて意味わからんけど、こういうだと思われる。
滑らかさの設定
↑動画ではこうなっているが、そんなんならん。
↑自分の環境
わからんから飛ばすわ。
でもこのままでもちゃんと動く。
書き出す
いざ書き出し！
参考動画では違うプラグインを使っているが、わかりにくいのでBodymovinをインストールしてもらっているはず！
インストール方法は、上記で開設済み。
ウィンドウ＞エクステンション＞Bodymovin
書き出し先を選んでRender(絶対選んで）
これでjsonファイルが書き出される。
これがlottieファイルの実体となる。
プレビュー
↓
↓
再生できたらOK！
本当に他の人からも見えるか心配であれば、
LottieFiles - Download Free Lottie Animations, Integrations & Plugins
にユーザー登録して、Dashboardとかに書き出したjsonファイルをドラッグアンドドロップしたらブラウザ上でもプレビューできる。
こんなかんじ。
このサイトちょっと反応が悪いから、アップロード後何も起こらなければページを再読み込みしてほしい。
ていうかこのサイト、結構クオリティーの高いLottieファイルを無料で配布してるから自分で作らずに済む方法を先に考える方が賢いような・・・
うまくいったら自分でイラストレーターで簡単なファイルを作ってみたらいいと思う。
イラストを一から作るのが面倒な人は、
2.600万点以上の高品質なフリー画像素材 - Pixabay
このサイトで、ベクター画像で素材を検索してダウンロードできる。
SVGというファイル形式で手に入るので、それをイラストレーターに読み込んでAi形式で保存すればAfter Effectsでも扱える。
もちろんイラストレーター上で編集もできる。
やってみ？
