※動くスタンプの画像サイズとフレーム等に関してはこちらのページをご覧下さい。
今までスタンプを作成されていた方も
apng(アニメーションpng)となると、どのように作成して良いか分からない方もいるかと思いますので、
フリーツールの「APNG Assembler」を使用して作成する手順を簡単にまとめてみました。
「APNG Assemblerのダウンロード」
公式サイトからダウンロードします

左上の「Download APNG Assembler」をクリック
↓
下記のようなページに移動し、表示されているタイマーが0になると自動的にダウンロードが始まります。
(0になって、暫くしてもダウンロードが開始しないようであれば、赤枠で囲っている「mirror」をクリックしてみて下さい)

↓
圧縮されたファイルがダウンロードされますのでこれを解凍(展開)して下さい

↓
インストールはなく、直接実行するタイプのものですので「apngasm_gui」をダブルクリックすると起動できます。

「画像の用意」
今までの1枚絵のスタンプと異なり、アニメーションとなりますので
コマ送りのような連続した画像を用意する必要があります。
この画像1枚が1フレームとなりますので、ガイドライン上5~20枚の範囲で作成する必要があります。
今回はサンプルに以下の5枚の画像を用意してみました。





※画像の作成方法に関しては使用されているツールにより異なってくるかと思いますが、
FireAlpacaを使用している方でしたら
「オニオンスキンモード」というアニメーション用の連続画像作成に便利な機能があります。
こちらは公式サイトに詳しく説明が載っていました。
※画像の作り方はこちらのページに取り上げしています。
「apngの作成」
・画像の取込
APNG Assemblerを起動して、作成した画像をドラッグして下さい

※ここで並んでいる画像の順番にアニメーションがされますので、順番に注意
↓
・表示速度の設定
今回は5枚の画像を2秒間で1周させようと思いますので全部の画像のDelayを2/5に設定

これで1枚辺り2/5=0.4秒の遅延という設定になります
良く描画速度で表記されるFPSがこれに当たるのですが、
(60fps=1/60=1秒間に60フレーム描画ですね)
あまり馴染みのない方は
「x/y = x秒間にy枚画像を表示」という風に覚えると分かりやすいと思います。
↓
・ループ回数設定
「Play indefinitely」のチェックを外し、loopsに回数を設定して下さい。
今回1周2秒を想定しているので、ガイドライン規定の最長4秒に納める為に2ループに設定しました。

※この設定は初期設定が永久ループとなっていますので必ず行う必要があります
↓
・apngファイルの出力
「...」から出力する場所とファイル名を指定し、
「Make Animated PNG」をクリックすると作成されます。

※2016.06.28追記
時間指定ですが、1,2,3,4秒でぴったりでないといけないようでしたので
1連の動作の時間を秒単位で決めて
そこにループ回数を4秒に収まるように設定(あるいは1ループ固定)するとやり易いかと思います。
例)1連の動作が7枚の画像(7フレーム)の場合
1動作を4秒で1回(4/7設定)&1ループ
1動作を3秒で1回(3/7設定)&1ループ
1動作を2秒で1回(2/7設定)&2ループ
1動作を1秒で1回(1/7設定)&4ループ
1動作を0.5秒で1回(1/14設定)&8ループ
今回試しに作成したアニメーション画像はこんな感じになりました(apng対応のブラウザ(主要どころだとfirefoxとsafari)でないと動かないです・・)

この記事へのコメント