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画像を設定する事も可能となっている。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

嫁の方

代表取締役 ： かぴのんスタジオ

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

最新記事 by 嫁の方 (全て見る)

• 【2019 令和元年】 プロカメラマンが選ぶオススメドローン 購入編 - 2019年4月4日
• xampp(ザンプ)複数のローカルホスト使えなくなった時の設定メモ【windows】 - 2018年10月13日
• 駆け出しフリーランスデザイナーが買ってよかったものリスト - 2018年9月18日