CREATIVE CLOUD 道場       LIVE NOW

連載  /  

Animate CCでLINEアニメスタンプ制作 (5) APNGファイルの作成

BY 公開

Animate CCで作成したアニメーションは、LINEアニメーションスタンプの提出形式である「APNG」に変換しなければなりません。APNGとはアニメーションを高画質で保存できる画像形式です。Animate CCからAPNG形式へ直接保存できないため、一旦PNG形式としてファイルを出力し、別のソフトウェアを用いてAPNG形式へと変換します。

本記事では下記のサンプルファイルを使って、APNGファイル作成の手順を解説します。

Animate CCからPNG連番ファイルとして出力しよう

まず、作成したアニメーションを、PNGシーケンス(連番画像)として書き出します。連番画像とは、アニメーションの各フレームを個々に静止画像として記録したもので、連続した数字がファイル名に含まれているファイル群を指します。連番画像を書き出すには、Animate CCのメニューより[ファイル]→[書き出し]→[ムービーの書き出し]を選択します。

animatecc_export_01

[ムービーの書き出し]ダイアログが表示されたら、[名前]の欄に書き出したい画像の名前を入力します。下の例ではframe.pngとしていますが、出力後にframe0001.pngのように自動でフレーム番号も割り振られます。保存先フォルダを選択したら、[ファイル形式]で「PNG シーケンス(*.png)」を選択し、保存ボタンをクリックします。

animatecc_export_03

すると、こんどは[PNG 書き出し]ダイアログが表示されるので、以下の項目を設定します。

  • [範囲]は「ムービーサイズ」を選択
    • 連番画像をステージの幅と高さで書き出すため
  • [カラー]は「32bit」を選択
    • 背景を透過(アルファチャンネル)させるため

animatecc_export_04

これで[書き出し]ボタンをクリックすれば、次のように複数枚の静止画像が書き出されます。これらの画像を総称して連番画像と呼びます。

animatecc_export_05
20枚のPNGファイルが書き出された

連番画像をAPNGファイルに変換しよう

この記事では、APNGファイルへの変換には無料のツール「アニメ画像に変換する君」を使用します。WindowsとMac OSで利用できるソフトウェアです。次の記事の2ページ目のリンクからソフトウェアをインストールしましょう。

APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」

「アニメ画像に変換する君」をインストールしたら、先ほど作成したPNGの連番画像をAPNGに変換していきましょう。

①ファイルの読み込み

連番画像を読み込みます。「アニメ画像に変換する君」を起動し、[ファイルを選択]ボタンをクリックします。

animatecc_apng_01
「アニメ画像に変換する君」を起動したところ。[ファイルを選択]ボタンをクリックして連番画像を読み込む

ファイルダイアログが表示されたら、Shiftキーを押しながら複数枚の連番画像を選択して、[開く]をクリックします。

animatecc_apng_02
アニメーションに必要な連番画像を選択

すると「アニメ画像に変換する君」の画面内に複数の画像が読み込まれます。ファイル名に割り当てられた連番の順で、自動的にアニメーションが再生される状態になります。

animatecc_apng_03
読み込まれた連番画像が、アニメーションとして再生されている

②用途を選択

「アニメ画像に変換する君」の[用途]は「LINEアニメーションスタンプ」と「webページ用アニメ」から選択できます。今回は「LINEアニメーションスタンプ」を選択します。

animatecc_apng_04
用途を「LINEアニメーションスタンプ」に変更

[フレームレート]と[ループ回数]を設定しましょう。アニメーションスタンプの仕様で1つのAPNGファイルあたり1〜4回ループ可能(再生時間4秒を超えない範囲内)とあるので、再生時間に注意しながら調整しましょう。サンプルではフレームレートを20fpsで作成していたので、[フレームレート]には20と入力します。

animatecc_apng_05
フレームレートとループ回数を指定

③アニメ画像を保存

[アニメ画像を保存する]ボタンをクリックして、APNGファイルの保存先を選択します。

animatecc_apng_06
保存先を指定してAPNGファイルを保存

APNGファイルを確認しよう

APNGファイルを作成したら、提出前に実際のアニメーションを確認しておきましょう。確認には、ブラウザやスタンプシミュレータなどが利用できます。

ブラウザでの確認

LINEアニメーションスタンプのAPNGファイルは拡張子は.pngです(.apngではありません)。出力したAPNGファイルはAPNGファイルに対応しているFirefoxブラウザを使って確認してみましょう。
※APNGファイルのアニメーション表示に対応していないブラウザもあります。非対応のブラウザでAPNGファイルを表示すると静止画像として扱われます。

animatecc_apng_07
APNG形式を再生できるブラウザーは限られるため、確実に再生できるFirefoxブラウザーがおすすめ

スタンプシミュレータでの確認

LINEにはスタンプを確認できるWebアプリケーション「スタンプシミュレータ」が提供されています。Firefoxで「LINE Creators Market」のマイページへアクセスし、[シミュレータを使ってみよう!]ボタンをクリックすると利用できます。

表示されたスタンプシミュレーターへ作成したアニメーションスタンプをドラッグ&ドロップし、アニメーションが再生されることを確認しましょう。LINEユーザーの実際の使用感や、雰囲気がチェックできるので、提出前に試しておきましょう。

animatecc_line_simulator
ブラウザで実際のアニメーションスタンプの使用感を確認できる

最後に

本記事ではAnimate CCで作成したアニメーションを、APNGファイルへ変換する手順を紹介しました。提出用のAPNGファイルは容量を指定サイズ(300KB)以内に収める必要がありますが、これが意外と難しかったりします。勘所としては、色数を抑えたり、フレーム数を減らすといった対策が考えられますので、作りながら調整していくといいでしょう。

  AUTHOR

池田 泰延

株式会社 ICS / 代表取締役 / FlashやHTML5のテクニカルディレクターとして数々のプロモーションサイトやSNSゲームの制作に関わる。筑波大学の非常勤講師も勤めている。著書に「HTML5 インタラクティブ表現ガイド」(技術評論社)、「Stage3Dプログラミング」(ワークスコーポレーション刊)など多数。