APNGの作り方③

いよいよAPNGに変換します。

まずは前回の「APNGの作り方②」で準備した連番PNGをZIPファイルに圧縮しておきます。


★「APNG Assembler 2.9」を開く


以下から「APNG Assembler 2.9」というサイトへ行きます。

http://littlesvr.ca/apng/assembler/assembler.php

データ変換サイトなので余計なソフトをダウンロードすることなくデータの変換が
できます。便利ですねー。


↓こんな画面。シンプルで非常に好感が持てます。



まずは①のところでフレームレートを設定します。今回は12fpsを想定しているので
「12」に書き換えます。(1フレームあたり1/12秒で表示するって意味)

次に②で1フレーム目を表示するかどうか決めます。
どういう意味かというと・・・
APNGってGIFと同じで仕上がりはループアニメになります。
なので1フレーム目が必ずしも見栄えが良い絵になるとは限りません。
でもファイルをデータとして扱う時のサムネイル(アイコン?)は普通のままだと
強制的に1フレーム目が表示されちゃうわけです。
そこで1フレーム目にサムネイル用の良い感じの絵を入れておいて
再生時には1フレーム目だけ除外してループさせる。
…なんてことができるようになってます。便利ですねー。

③用意したZIPファイルを選択します。ボタン上にドロップでもOKです。

④Create APNGボタンを押すとアップロードが始まります。

変換が完了すると上の画面に変わります。
「result」の文字のリンク先をダウンロードしましょう。
繰り返しますが形式はAPNGですが拡張子は.pngです。

以上でAPNGが完成です。
使い方は普通に貼り付けるだけです。
スマホやMozilla FirefoxなどAPNGに対応したブラウザだと動いて見えます。
やったー!

追記20160614 
LINEクリエイターズスタンプの制作規約が発表されたようですが…
それによるとループ回数と再生時間、画像枚数の制約があるようです。
残念ながら「APNG Assembler 2.9」のサイト版にはループ回数の設定項目がありませんので
面倒ですがダウンロード版が必要となりそうです。


→APNGの作り方①
→APNGの作り方②