2020年10月26日

Adobe AnimaiteによるGIFアニメーション作成

皆さんこんにちは。
クリエイターの村本です。

今回、サイトで使用するGIFアニメーションを作成するために
「Adobe Animate」を利用しました。
これまでにもGIFアニメーション自体は作成したことはあったのですが
「Animate」の利用は初めてだったので、
今後のために手順や注意点をまとめておきたいと思います。

前提

・簡単な「イラストアニメーション」を作りたい方
・Illustrator、Photoshopは使ったことあるけどAnimaiteを使うのは初めてな方向け

作業全体の流れ

[XD]…Adobe XD
[AI]…Adobe Illustrator
[AN]…Adobe Animaite

０．Animateのヘルプから確認できる『実践チュートリアル』をみて基本を学ぶ

１．[XD]カンプのイラストを、書き出す画像ごとにAIファイルに変換
２．[AI]でイラストの調整
　　※この時、動かしたいオブジェクトと、動かさないオブジェクトをグループ分けしておく
３．[AN]でアニメーションを作成し、gif形式で画像を書き出す
　　→詳細は下記参照
４．画像のファイルサイズを圧縮する
　　※アニメーションGIFは、動きが複雑になるとサイズが大きくなってしまいます。
　　　アニメーションGIF用のファイル圧縮サイトなどの利用がおすすめです。
５．HTMLでjpg、pngと同様に実装する

Adobe AnimaiteによるGIFアニメーション作成

１．[AN]を起動し新規作成する。
２．「ファイル＞（ステージに）読み込み」をクリックして、
　　作成する元画像の[AI]ファイルのデータを取り込む。
３．タイムライン上でアニメーションの設定を行う。

　　① 動かしたいオブジェクトだけを別レイヤーにしておく
　　② 動かすレイヤーの初期フレームを選択して、オブジェクトを初期状態に調整する
　　③ 調整したオブジェクトを選択して「シンボル」にする
　　④ オブジェクトを選択してアニメーションの基準点を設定する
　　　（これを忘れると、上手く動かないので注意）
　　⑤ 全レイヤーの終了位置を選択して「キーフレーム」を作成する
　　　（初期状態と同じ設定のオブジェクトがコピーされる）
　　　 ※動きをループさせることを意識しておく
　　⑥ タイムラインの真ん中を選択して「キーフレーム」を作成する
　　　この時、アニメーションの動きに合わせてオブジェクトを移動させる
　　⑦ 作成したキーフレームの間を選択して「トゥイーン」を選択し、エフェクトを設定する
　　　 ※キーフレーム間のアニメーションパターンを設定する
　　⑧必要な場合、マスク用のレイヤーを作成する
　　　（通常通りレイヤーを追加し、右クリックで「マスク」を選択すると
　　　　マスク用のレイヤーになる）

４．「ファイル＞書き出し＞アニメーションGIFを書き出し」をクリックして画像として書き出す。
　　※画像に透過部分がある場合
　　　ステージの色＝透過部分と判断されるようです。
　　　[AN]はステージの色がデフォルト＃FFF（白色）になっています。
　　　ですので、イラスト自体に白色を使っていると、その部分まで透過で書き出されてしまいます。
　　　透過にしたくないときは、ステージの色を変更することで解決できます。