スタンプの作成にはアニメーション制作ソフトのAdobe Animate CC (旧Adobe Flash Professional CC)を使用しましょう。Animate CCは有料のソフトウェアですが、無料で試せる体験版期間あります。Animate CCには次のようなメリットがあるので、アニメーションスタンプ制作に最適です。
※Animate CCの使い方は記事「Adobe Animate CC の使い方」や寄稿記事「Animate CCでLINEアニメスタンプ制作」で紹介してますので、あわせてご覧ください。

  • 一つのソフトウェアでイラスト作成からアニメーション作成まで対応できる
  • Adobe Illustrator CCのようにベクターで絵を描ける
  • 作成したアニメーションを連番画像を書き出せる
  • トゥイーンでアニメーション制作の手間が激減する

Animate CCのキャプチャ画像

▲Animate CCでアニメーションを作成している様子

Animate CCがスタンプ制作に一番のオススメである理由

アニメーションスタンプの作成はAdobe Photoshop CCのタイムラインパネルやIllustrator CCやGIMPでも可能ですが、手間がかかります。なぜならば、アニメーションを滑らかにするにはコマを多くする必要があるからです。Photoshop等ではコマを増やすのに何枚も絵を描かなければなりませんが、Animate CCだと自動的に中間のコマを補完してくれる「トゥイーン」機能があるので作業の手間が激減します。このことはアドビのサイトで、筆者が記事「Animate CCでLINEアニメスタンプ制作 (1) 便利なアニメーション制作機能の紹介」として紹介しているのでご参照ください。

また、次のサイト「【番外編】LINEアニメスタンプをAnimateを使って作る – 初心者のためのAdobe Animateブログ」でも、Animate CCでのLINEアニメスタンプの作り方が紹介されています。実際にスタンプを販売しているクリエイターの記事なので、とても参考になるでしょう。

1. アニメーションを作成する前の下ごしらえ

本記事で作成したアニメーションスタンプのサンプルは次のURLからダウンロードできます。このファイルを参考にしながら読み進めてください。

新規ファイルの作成

Adobe Creative CloudからAnimate CCをインストールして起動します。起動したら[新規作成]の一覧から[HTML5 Canvas](もしくは[ActionScript 3.0])を選択して新規ファイルを作成します。作成後に任意の場所に保存すると、.flaという拡張子のファイルが生成されます。

新規ファイルを作成している様子

フレームレートの設定

フレームレートを設定します。フレームレートとは、1秒間に何コマ(フレーム)切り替わるのかというものです(fpsという単位で表します)。アニメーションスタンプの仕様の中で「再生時間」の項目に関係します。

再生時間(1つのAPNGファイルあたり)の仕様

  • 最大再生時間は4秒
  • 最大フレーム(コマ)数は5~20フレーム
  • 1〜4回ループ可能(再生時間4秒を超えない範囲内)
  • 再生時間の単位は1、2、3、4秒のいずれかとなり、端数(1.5秒)単位は設定できない

上記の仕様は複雑に感じるかと思いますが、よくわからない方はフレームレートを20fpsに設定しましょう。10コマで0.5秒、20コマで1秒といった形で作成するとなめらかなアニメーションができます。サンプルでは、書き出したアニメーションスタンプのデータ容量との兼ね合いで、フレームレートを15fpsで設定しています。

フレームレートを設定している様子

ステージサイズの設定

ステージサイズを設定します。ステージサイズとは、アニメーションを描画する領域の大きさのことです。アニメーションスタンプの仕様で、画像サイズは幅320×高さ270px以内と指定されているので、ステージサイズもそれに合わせて「W:320, H:270」に設定します(Wは横幅、Hは高さ)。

ステージサイズを設定している様子

これでアニメーションを作成する下ごしらえが完了しました。

※アニメーションスタンプの仕様で、アニメーションが描画されない余白は削除する必要があるので、左右もしくは上下に余白が生じる場合はステージサイズを調整してください。

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

アニメーションの作成はタイムラインで行います。タイムラインとは、次の図のようなマス目のようになっているパネルです。縦方向がレイヤー順(重ね順)で、横方向が時間を表します。

Animate CCのタイムライン画像

▲実際に作成したアニメーションのタイムライン。詳しい使い方は記事「Adobe Animate CC の使い方」で紹介しています

アニメーションを編集している様子

▲テキストのアニメーションを調整している様子。マウスでアニメーションの細かな調整も直感的にできる

3. アニメーションの連番画像をPNGファイルに書き出し

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

ムービーの書き出しまでの流れ

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

ムービーの書き出しウィンドウ

連番画像をステージサイズで書き出されるように設定します。

  • [範囲]は「ムービーサイズ」を選択
    連番画像がステージサイズで書き出されます
  • [カラー]は「32bit」を選択
    透過(アルファチャンネル)を表現したいため

PNG書き出しのオプションウィンドウ

次のように連番画像が書き出されます。

書き出された連番画像が並んでいる様子

ここまできたらあとはAPNGファイルに変換するだけです。次のページでは、APNGファイルの変換方法を解説します。