ニコラボチャンネル のブログ

【APNG】ブロマガのサムネイルを動かす方法

2013/09/08 00:40 投稿

  • タグ:
  • ニコハック
  • ブロマガ
  • サムネ
  • GIF
ブロマガのサムネイルには jpg, gif, png が使えるが、アニメーションGIF(AGIF)は使うことが出来ない。そこでアニメーションPNG(APNG)を使う事で一部のブラウザ(firefox)だけが表示できる APNG の作り方の紹介。


81e52c47dd98e32232a6a6b52cc6f0d8ac9d265a
Chrome で見る場合にはエクステンションを導入する必要がある。
Chrome Web Store - APNG

まずはアニメーションの元となる画像を用意するか、動画から1フレームずつの画像を用意する。AviUtl を使っている場合は拡張編集プラグインのタイムラインに動画を読み込ませて拡張編集AVI/BMP出力(RGBA)での .bmp 出力で1フレームずつの画像を用意できる。

AviUtlで透過AVI・透過BMPを作る:AviUtlの小言 - ブロマガ

次に APNG Anime Maker を使って画像を読み込んで APNG を作る。ここで画像が読み込めない場合は PNG にフォーマットを変換する。私がよく使っているのは Ralpha

7e4372811068ac3f6f37bcddeb89ec03e087c8d8

Open から画像を一括して開き、Delay で描写速度を設定。msec は1枚あたりの時間。大きい値ほど動きがゆっくりになる。fps 1秒当たりのフレームレート。動画から APNG を作る場合はそれと一致させる。その他の設定は右下にある Loop(繰り返す回数)。無限なら 0 のままに。回数を指定する場合にはその値にする。Compression Level は圧縮率の設定。0(無圧縮)から9(高圧縮)まで。

適宜 Move Up, Move Down で順番を変えて Save で保存して APNG の完成。

この APNG の何がいいかというと AGIF と比べてフルカラーが使える点と、画像投稿サイトで裏技として隠し画像として投稿できる点であるが、互換性がとても乏しいので firefox だけ見られると書いてないと firefox でも最初の1フレーム目の1枚画像としか見られない。

静画に投稿したサンプル
APNGテスト / ロべルト さんのイラスト - ニコニコ静画 (イラスト)

コモンズにも投稿できる
APNGテスト - ニコニ・コモンズ

今度は APNG から動画に変換するには VirtualDub APNG Mod を使う。
SourceForge.net: VirtualDub APNG Mod

普通の画像に場合はこのまま AVI で出力をすればいいのだが、透過情報を含んでいる場合はこのまま AVI 出力をしても透過情報を維持できないので utvideo をインストールする。

或るプログラマの一生 » Ut Video Codec Suite

インストールが終わったら設定を変更する。

Video < Compression... < Utvideo RGBA (ULRA) VCM

f726fd191aae481086ce1fe3bd497938843ecc5a

Video < Color Depth... < Output format to compressor/display にチェック

472a69284e4885de0840194ddee608361750f037

Save as AVI... で動画を出力。

2019年現在では ffmpeg でも APNG ファイルを作ることができる。
APNG をループ出力する

ブロマガ会員ならもっと楽しめる!

  • 会員限定の新着記事が読み放題!※1
  • 動画や生放送などの追加コンテンツが見放題!※2
    • ※1、入会月以降の記事が対象になります。
    • ※2、チャンネルによって、見放題になるコンテンツは異なります。
ニコラボチャンネル のブログ

ニコラボチャンネル のブログ

ロべルト

月額:¥550 (税込)

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事

継続入会すると1ヶ月分が無料です。 条件を読む

ニコラボチャンネル

ニコラボチャンネル

月額
¥550  (税込)
このチャンネルの詳細