[動くスノードーム1&2]を発売してから
[apngの作り方を教えて欲しい！]
というご要望をたくさん戴きましたので、
今回は僕(流)のapngの作り方を説明させて頂きます。
まず、動画スタンプについては、
過去のブログ
①動くスタンプの作り方～1～
②動くスタンプの作り方～2～
③動くスタンプの作り方-番外編
をご参照頂ければ、
基本的には拡張子を.gifで保存するか.pngで保存するかの違いのみですので、
ある程度の事はわかると思います。
さて、ここからはapngのお話…
まずLINEさんの規定にある通り、5～20個のアニメーションにしたいpngを作ります
このままだと画像が重すぎるので、↓のサイトを使って
画像を圧縮いたします。
良く使われるhttps://tinypng.com/ で、
何回かかけても良いのですが、
僕は最近http://optimizilla.com/ja/ を使っております。
こちらの方が減色した際のプレビューと圧縮率が分かり易いので。
次に用意した画像を全部選択し、D&D(ドラッグ＆ドロップ)します。
そして、1枚ずつ赤い数値の部分をいじります。
画像の色数が多くない場合は100くらいがオススメです。
「全てダウンロード」で圧縮ファイルを得ます。
この時、16枚なら[230KB～240KB]。20枚なら[215KB～230KB]のファイルになればもう安心です。
解凍すると↓んな感じに…圧縮したので、名前の後に[-min]がついてますが、な～んの意味もないので、お気になさらず
ここで巷で噂の[APNG Assembler]の登場です。ネットのそこら辺にポポイッと落ちてます
アッセンブラーに圧縮した画像をD&Dします。
ちなみにこれがアッセンブラーの詳細のようなもののようなものです。左上にこれまた巷で噂のディレイがありますね(-_-;)
またまたちなみにこれが僕の使っているExcelで作ったディレイ計算式です。この表を元にFPSをどの数値に設定すればよいか求めてます(^^
今回はお試しに[animated.png]のままでapngを作ってみました♪左下の赤く囲まれているのができたapngです
ちゃんと動くかの確認方法は
FirefoxのブラウザでLINE CREATERS MARKET のマイページに入り
「ラインスタンプシミュレータ」にD&Dしてみましょう。
ちゃんと動くか確認できますよ♪
以上apngの作り方でした。
今回は頑張って作ってみよう！
という意味を込めて[ガンバレ!!]で
解説させて頂きました(^^;
apngは取っ付き辛いかもしれませんが、
覚えると簡単です。
是非みんなで一緒に頑張りましょう
僕もこのやり方で動くスタンプ2種販売させて頂きましたので、
何卒宜しくお願い致します(>_<)ゝ
キウィのスタンプ
●ここをクリックするとLINEストアに飛びます
