PNGアニメーションをたくさん作ってみた

PNGアニメーション

なぜPNGアニメーションを作ってみたかというLINEの仕様？がおそらくこれなのかな？と思って、いつか・・・いつか動くスタンプをデビューさせたいと思ってコツコツ作っていました。
しかし・・・動くスタンプのハードルが高すぎるので、お蔵入りになり前に公開しようと思いました(笑)
もともとアニメーションがすごく好きなので作るの最高に楽しかったです！

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

まずはイラストを描きます

illustlator か photoshopなど

まずはイラストを描きます。書いた後に旧Flash(Animate cc)に読みこみたいので、重いですがベクターデータのイラレの方がアニメーションしやすいです。

illustlatorからコピペで旧Flash(Animate cc)

illustlatorからコピペで旧Flash(Animate cc)に貼り付けます。

ペタっとはりつけます。旧Flash(Animate cc)でアニメーションを作ります。ActionScript、クラッシットゥイーンでもモーショントゥイーンでもなんでもよいです。

何かツールを使わないと、滑らかなアニメーションを作るのは3秒で30枚～60枚必要です。
作成後PNGでフレームを書き出します。そうすると複数画像がぱぱ～っと書き出されます。

PNG書き出したものを、ひとつにまとめる

何十枚ってどばっと書き出されるのでひとつにまとめます。

複数のPNGをまとめるのは、APNGアセンブラがいいかな？と思います。

そして完成した変な生き物とたち

推奨ブラウザFirefox Safari 8(iOS 8)以上

ポイントはFlashで滑らか～～に作っておくことです。

いつか、いつか動くのをリリースしたいです！！
月間？年間？一位になったらその権利があたえられるとかなんとか・・・(白目)

と、いうことで動かないですが販売されているスタンプで～す

下記、wikiより引用です。

GIFと比べ、フレーム内でフルカラー画像が取り扱えるようになり、さらにアルファチャンネルを使って背景にとけ込むような表現が可能となった。
フルカラー対応となった事でフレームごとに個別のパレット（ローカルパレット）を持つという概念が廃止され共通パレット（グローバルパレット）のみとなった。
互換性の面でも改善が加えられ、アニメーションのフレームとは独立して代替表示用（APNG非対応環境で使用される）のPNG画像を設定する事も可能となっている。

Tweet