• このエントリーをはてなブックマークに追加
【APNG】ブロマガのサムネイルを動かす方法
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

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

2013-09-08 00:40
    ブロマガのサムネイルには 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 をループ出力する
    コメントを書く
    コメントをするには、
    ログインして下さい。