APNGエーピング(Animated Portable Network Graphics)形式とは、高画質なアニメーション用の画像形式です。類似の画像形式としてGIFアニメーション形式が存在しますが、APNGは高画質化が可能であり透過情報の扱いに長けています。詳しい利点は記事「これからはGIFアニメからAPNGの時代に」で紹介しています。

本記事ではAPNGファイルの作り方を解説します。APNGファイルの作り方はいろいろありますが、「できるだけデータ容量を軽く」というテーマでまとめてました。

※LINEアニメーションスタンプの作り方については、記事「LINEのアニメーションスタンプはこう作る! APNGファイルの作り方を徹底解説」で解説してます。

APNGの作り方の手順

本記事では次の手順で解説します。

  1. Adobe Animate CCでアニメーションを作成
  2. アニメーションの連番画像を書き出し
  3. 連番画像をAPNG AssemblerでAPNGに書き出し

1. アニメーションを作成

アニメーションを作成するソフトウェアも数多くありますが、今回はアニメーションの細部まで調整できて表現力も高くアニメーションの連番画像を書き出し可能なAdobe Animate CC(旧Adobe Flash Professional CC)を使用します。Animate CCの使い方は記事「Adobe Animate CC の使い方」で紹介してますので、あわせてご覧ください。

Flash Professional

本記事ではAnimate CCにもともと入っているテンプレートのアニメーションを利用します。メニューより[ファイル]→[新規]→[テンプレート]タブ→[HTML5 Canvas]カテゴリー→[サンプルアニメーション]を選択ください。

adobe-animate-cc-sample-animation

2. アニメーションの連番画像をPNG書き出し

Adobe Animate CCでアニメーションを作成したら、メニューより[ファイル]→[書き出し]→[ムービーの書き出し]を選択します。

ファイル > 書き出し > ムービーの書き出しを選択します

次に、書き出したい画像の名前を入力します。ここではframe.pngとしていますが、生成時にframe0001.pngと自動でフレーム番号を割り振られます。合わせてファイル形式の[PNG シーケンス(*.png)]を選択し保存ボタンをクリックします。

ファイル名とファイル形式を選択します

PNG書き出しのオプションウィンドウでは次の通り設定します。

  • [範囲]を「イメージサイズ」に選択
    ※アニメーションに影響のない余白が自動的にトリミングされます
  • [カラー]は「32bit」を選択
    ※透過(アルファチャンネル)を表現したいため

各項目を選択しましたら書き出しボタンをクリックします。

PNG書き出しの各項目設定

すると、次のように連番画像が書き出されます。これで、APNGの作成に必要な下準備が整いました。

アニメーションの連番画像が書き出されました

次のページでは、PNG連番画像からAPNGファイルフォーマットへ変換する手順を紹介します。