2015年02月15日

PNGアニメーションの作り方


 今日は、一部で話題のPNGアニメーションの作り方をご紹介します。

 PNGアニメーションってGIFアニメーションと何が違うのか?
 画質が違います。

 先ずは見比べて下さい。サイズが小さいと分かり難いので、拡大表示します(・・・、と思ったのですが、拡大表示しても違いがよく分からないので通常表示にしました)。
 (PNGアニメーションは、IEやGoogle Chromeではこの形式に対応していないため静止画像として表示され動きません。FirefoxかOperaでご覧下さい。)

 サンプルとして、昨年作った「ヒツジ猫」を使います。
 ところが、このヒツジ猫は時間をかけて結構きれいに作ったので、GIFアニメとPNGアニメの差がほとんど分からない。なんてこった。めんどくさいのでこのままアップします。 拡大表示すると、空の部分に違いが現れていますが、縮小表示すると同じに見えますね。

【GIFアニメーション】
Cat_animated.gif


【PNGアニメーション】
Cat_animated.apng


【PNGアニメーションの作り方】

 PNGアニメーションを作るには「APNG Assembler 2.9」というフリーソフトを使います。このソフトはIrfanviewのフォーラムで回答者として活躍中の方が作成したものです。この手のソフトはダウンロード元を誤るとウイルスに感染する恐れがあるので、下のリンク先からダウンロードして下さい。

1.「APNG Assembler」というサイトから「APNG Assembler 2.9」をダウンロードします。
 上のリンクを開くとダウンロードリストにいくつかファイルがありますが、一番上の「apngasm_gui-2.9-bin-win32.zip」を選びます。

2.ダウンロードしたZipファイルを解凍するとフォルダの中に「apngasm_gui.exe」という実行ファイルが入っているので、これをクリックしてソフトを起動します。

3.アニメーションしたいファイルをソフトの窓にドロップ。ファイルをひとつずつ順番にドロップした方が、順番がずれるトラブルを回避できます。
 「Delays -All Frames」でスライドの時間を設定。上のヒツジ猫の雪の設定は[4/10]としています。
 最後に[Make Amimated PNG]ボタンを押してPNGアニメーションを作成します。
APNG_Assembler_exp0.png


Seesaaブログにアップロードする際の留意点

 「APNG Assembler 2.9」で生成されたPNGアニメーションは、拡張子が[.png]となっています。IrfanView(テスト版)ではそのままアニメーション表示できますが、Seesaaブログでは静止画像になってしまいます。

 そこで、ファイルの拡張子を[png]⇒[apng]に変更します。IrfanView(テスト版)では、どちらの拡張子でもアニメーション表示されます。Seesaaブログでは、拡張子が[apng]でないとPNGアニメーションとして表示できません。(『IrfanViewテスト版』については過去記事『IrfanViewでPNGアニメーションを表示する方法』をご覧下さい。通常のIrfanViewではPNGアニメは動きません。)

 拡張子[png]のPNGアニメーションをSeesaaブログにアップロードした段階でアニメーション機能は失われ、ただの画像ファイルになります。このファイルをダウンロードしても動きません。このため、アップロードする場合には、拡張子を[apng]に変更して下さい。

補足説明

 IrfanViewのフォーラムを閲覧していたとき、いつも回答者になっている、今回のソフトを開発したBhikkhu Pesala氏が「Creating Animated PNG Images (APNG) 」というタイトルのコメントの中で、「APNG Assembler」を紹介していたので試して見ました。GIFアニメがどうしても汚くなってしまう場合にお勧めです。
 しかし、このPNGアニメーションをどう使うかが大きな課題です。主要ブラウザのうち、IEとGoogle Chromeが「apng」型式に対応していないということが痛いです。

 なお、PNGアニメーションからスライドを抽出するには、「APNG Disassembler」というソフトを使います。

 また、GIF ⇒ APNG、APNG ⇒ GIFの変換ソフトも上でリンクしたサイトにあります。

 しかし、この変換ソフトは使い道がないように思います。高画質にするためにGIFではなくAPNGにしているわけで、GIF画像からAPNGを作っても意味がないように思います。やはり、きれいなPNG画像を使ってAPNGアニメーションを作るというのが本来の使い方でしょう。

別のソフトの紹介:日本製の「ApngComposite」


 スマホやタブレット(iOS8)でPNGアニメーションを見ることができるようになりました。
 そこで、この記事も追記することにします。

 アニメーションPNGを作るフリーソフトとして日本製の「ApngComposite」というフリーソフトがあります。Vectorからダウンロード可能です。使い方は以下の通りです。

1.ソフトをダウンロードし、解凍したフォルダ(「ApngComposite」)の中の実行ファイル[ApngComposite.exe]をクリックしてソフトを起動。

2.開いた画面の中に、アニメーションしたい全てのファイルをドロップします。ファイルは連番化しておくと便利です。ドロップした際に順番がずれる場合にはファイルを一つ一つドロップします。

3.[PREVIEW]ボタンで動きを確認。[QUEUE]ボタンを押した後で[MAKE]ボタンをクリック。プログラムフォルダ「ApngComposite」の中にアニメーションPNGが生成されます。拡張子はpngです。Seesaaブログにアップロードする場合には、拡張子を[apng]に変更します。

ApngComposite画面


 このソフトは、いろいろ細かな調整ができるので、後は使いながら覚えて下さい。

 下のアニメーションは、このソフトを使ってPNGアニメーションとして作ったものです。

elisabeth_PNG_Animation.apng


関連記事:「鏡に映るエリザベート:立体GIFアニメ
 (追記:2016/06/05)

APNG Anime Maker

 PNGアニメーションを作れるフリーソフトとして『APNG Anime Maker』があります。
 このソフトも操作方法はほぼ同じです。違うのは、ファイルをドロップするのではなく、[Open]から読み込むところ。読み込んだら[Save]で保存するだけのシンプル設計です。もちろん、アニメーション用のスライドがある場合のことですが。

APNG_Anime_Maker1.jpg


 このソフトで最適化を試して見ました。デフォルトの設定で作成したPNGアニメーションのファイルサイズは11.67MBと巨大なものになりましたが、最適化(Optimize)すると0.43MBに激減しました。拡大しても両者の違いを見つけることができない。


posted by ネコ師 at 19:53 | Comment(0) | apngアニメーションの作り方 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
記事に関係ないコメント、宣伝的なコメントは削除させていただきます。
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

▲ このページのTOPに戻る