こんにちは。イラストレーターのこばやしです。
最近、GIFアニメーションを制作したとき、データを軽量化するのに苦労したので、そのとき調べたことを紹介します。
以下の流れで制作をします。
今回は、以下の流れでGIFアニメーションを制作します。
- アニメーション作成（Adobe Animate CC）
- GIFアニメーション書き出し（Adobe Fireworks CS6）
Fireworksの書き出し機能でGIFアニメーションを軽くします。
アニメーションの連番画像がある場合は（2）からでも大丈夫です。
制作時に参考にした記事と補足を以下で紹介します。
Animate CC の使い方まとめ
Animate CCツール、機能
Adobe公式ページです。ツール関連の記事が意外に見つけられなかったので紹介します。
ツールやタイムラインの表示について、ビジュアル付きで説明されています。
Adobe公式のチュートリアル動画
アニメーションのステージを準備から書き出しまで3～5分くらいの6つの動画で説明されています。
時間があるときに見るととても参考になります。
Illustratorファイルのドラッグ&ドロップ
Illustratorで作ったデータを読み込むときはAnimate CC にそのままファイルをドロップすると、ライブラリに読み込むかどうかをダイアログで聞いてくれます。
複数ファイルドロップしても読み込んでくれます。
基本的なコマンドはFireworksと同じ
重ね順の入れ替えやシンボル化などのコマンドはFireworksと同じなため、覚えておくと便利です。
- 重ね順の入れ替え：
「Ctrl」+「↑」（前面）
「Ctrl」+「↓」（背面）
「Shift」+「Ctrl」+「↑」（最前面）
「Shift」+「Ctrl」+「↓」（最背面） - シンボルに変換：「F8」
- 自由変形：「Q」
シンボルの変形点について
シンボル選択時に表示されるアイコンは、「＋」が基準点、「○」が回転の変形点です。
自由変形「Q」でシンボルを選択した状態で、「○」の部分にカーソルを合わせると「○」を移動することができます。
Fireworksの書き出し方法
Photoshopでも同じことができますが、Fireworksの方が差分でアニメーションを作成できるため、容量が軽いデータが作成できます。
Fireworksでの連番画像の読み込み・GIFアニメーションの書き出し方法
記事はFlashについてですが、、アニメーション作成～連番書き出し、FireworksでのGIFアニメーションの書き出しといった流れは、Animate CCとほぼ一緒です。
GIFアニメーション書き出し時に色が飛んでしまう場合の参考記事
まとめ
GIFアニメーションを軽量化するためのフリーソフトやサービスはあるのですが、上手くいかなかったため今回は書き出しするときに軽くするという方法をとりました。
実際探してみたところ、Animate CC 関連の記事を見つけるのが結構大変でした。
急いでいる時などに、落ち着いて勉強することは難しいので、日頃からチュートリアル動画や参考記事などで勉強したいと思います。
