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)以上

PNGアニメーション
PNGアニメーション
PNGアニメーション
ポイントはFlashで滑らか～～に作っておくことです。

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

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

LINEcreaters白カピバラ顔スタンプ
Dental dinosaur2　ハミガキ恐竜

下記、wikiより引用です。

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




The following two tabs change content below.
Twitter のプロフィールMy Instagram profileMy YouTube channel

嫁の方

代表取締役 ： かぴのんスタジオ
株式会社かぴのんスタジオ夫婦の嫁のほう。 webのデザイン&イラスト&コーディングまでが得意。写真は田舎のロケが大好き。富士山の樹海でよくキノコを追いかけています。 ご質問はこちら

ご質問はこちら