AnimateCCでPNGアニメーションの作り方

2016年の記事です。少し内容が古い可能性がございますのでご了承ください。

LINEのPNGアニメーション

こんにちは～～

LINEでクリエーター枠のアニメーションスタンプ(PNGアニメーション)が販売開始しました！
一通り作り方が書いてあるページはあるものの、実際のツール(IllustratorからAnimateまで)の使い方などがあまりないようなので、審査も無事に通ったので公開いたします。以前のものより…

記事を楽しくしました

Illustratorで描いたベクターの素材をanimate ccで簡単に動かす！までをやってみたいと思います。
実際のアニメーションスタンプが、どれくらいヌルっと動くかは下記をご覧ください。

それでは制作、レッツゴー！

※上記は販売中の
白いカピバラ cool white ぬるぬる
 眉間にシワ鳥2 ドコドコドン！

PNGアニメーションを作るために用意する環境

Adobe Illustrator、AnimateはCreative Cloudで月に5000円？ぐらいだったと思います。書き出したイラストの容量削減のために、Tiny PNGなども使えます。
PNG AssemblerはFlashで書き出したPNG画像を、PNGアニメーション(APNG)にするために一つにまとめるツールです。こちらもご用意ください。

※作成ツールはアップデートが頻繁にあります。またLINE側でもレギュレーションが変わることも多々ございますので、大変申し訳ないですが自己責任でお願いいたします。リジェクトを踏まえて公開目標日がある場合は、早めに制作にお取りかかりください。
※3,4辺りは他のサイトでも載っているので、ここでは省きます。Illustrator → Animate の書き出しになります。

Adobe Illustrator CC で描いてみよう

今回は『通り過ぎてきたUFOがハートを落としいく』というテーマで、UFOまでを説明します

先ずはペンツールなどで好きなイラストを描き上げましょう。今回はレーバーを押したときにハートを落としたいので・・・

1. レーバーが通常の状態のイラスト
2. レバーを押し込んだ時のイラスト
3. 落とすハートの山

を用意します。Animateに慣れてきたら下記のような感じでパーツ別に切り離して動かすと楽ちんです。

描いたイラストをAnimateでコマアニメにするので、一番左からコピーしていきます。

Adobe Animateで動かそう！

①. まずはAnimateで新規ファイルを開きます

②. ステージを作ります

下記のようにLINEのレギュレーションに合わせたサイズにします。最大320×270なのでこれで作成します。
また、最後のデフォルトにするをクリックしておくと、次から新規ファイルがそのサイズになるので非常に便利です。

FPSというのは1秒間にイラストを何枚動かすか、ということなので、ちょっとゆっくり目ですが【9】としておいてください。
あまり多く動かしても、LINEでは最大1秒で20枚までなのでこんな感じでよいと思います。動きが遅すぎてやりにくい方は、FPSを増やしてPNGシーケンスとして書き出した画像を削る方法もあります。

③. 成功すると下記のようになっています

モニターのタイプが違う・・・となっていたら、ウィンドウ→ワークスペース→アニメーターとしてください。

④. 次は先ほどコピーしたイラストを白いステージに貼り付けます

下記のようになります。

⑤. コピーしたイラストを動かすためにシンボルにします

この時、貼り付けた全てを選択できてない事もあるのでctrl+A(全て選択)→して右クリック、シンボルに変換します

⑥. シンボルに変換します

画像の矢印の場所にある基準点はデフォルトではずれているかもしれません。真ん中にしておいてください。クリックするとずらせます。名前はなんでもよいです。
シンボルの作る方法は、上のツールバーから挿入→新規シンボル→直接コピーなどでもできます。
こうしてアニメーションの数だけイラストをシンボル化していきます。基準点の機能についてはここでは省きます。