この記事はLINEアニメーションスタンプの作り方をわかりやすく解説の続きです。
この記事でアニメーションスタンプの作成を進めていくには、上記の記事でアニメーションスタンプを作るために必要なデータの保存のファイル構成を準備しておく必要があります。
- アニメーションフレームの作り方
- アニメーションフレームの圧縮
- アニメーションフレームの連結
この記事は初心者でも作れるアニメーションスタンプの制作を目的にしているので、非常に簡単なアニメーション構成で進めていきます。
１コマをひとつずつ描きこんでいく進め方からはかなりショートカットしているので予めご理解ください。
アニメーションフレームの作り方
アニメーションスタンプを作っていくには、各スタンプで３つの準備をしておくことが必要です。
- 動く部分と動かない部分のパーツを分けておく
- アニメーション制作ソフトを用意する
- LINEアニメーションの約束事に適合した静止画連番ファイルを連結するソフトを用意する
今回は、私たち販売しているLINEアニメーションスタンプで「にゃっこらさんの猫看板」をベースに進めていきます。
動く部分と動かない部分
にゃっこらさんの猫看板は、すごく簡単にアニメーションスタンプを作るために、動く部分は「文字」だけにしています。
ものすごく凝った素敵なアニメーションスタンプはたくさんありますが、うまく構成すれば他の素敵なスタンプのように表現することも可能です。
動く部分
文字だけの部分が点滅するように調整しています。
動かない部分
文字が点滅する部分を囲うようにディスプレイをデザインしてあります。
重ねるとどうなるか
重ねるとこのようなイメージになります。実際のアニメーションイメージはLINE STOREで「にゃっこらさんの猫看板」と入れると出てきます。超簡単な仕様で恐縮ですが、そこで確認できます。
アニメーション制作ソフト
私たちはAdobe PhotoshopやAdobe Animateを使用していますが、なかなかそのような環境を作ることも難しいのでいくつかのデザインソフトを紹介します。
連番ファイルの連結ソフト
上記で紹介したデザインソフトを使用すると、アニメーション状態になった静止画連番ファイルが生成されます。
そのままの連番ファイルのかたまりでは使用できないので、「APNG」というひとつのファイルにまとめるコンテナを作成する必要があります。
今回は、LINEクリエイターズマーケットの公式動画で紹介されている「Pngyu」と「APNGb-v2.0.1」を使用しました。
その理由ですが、公式で紹介されているこのソフトはうまく動作しない部分がある情報が多かったので、不具合が起きないような手順を説明していきます。
アニメーションフレームの書き出し
アニメーションスタンプを作っていくために、あらためて仕様をおさらいします。
画像の形式
- メイン画像 240×240ピクセル APNG形式
- スタンプ画像 320×270ピクセル APNG形式
- トークルームタブ画像 96×74ピクセル PNG形式
APNGの形式
- フレーム数は５〜２０フレーム/秒まで
- ループ数は４回まで
- 最大再生時間は４秒まで
- 画像の容量は300KB以内
その他
- 検証環境はFirefoxの最新バージョンを推奨
- ストアでは、１コマ目がサムネイル表示される
- カラーモードはRGBにする
- 余白のトリミングをちゃんと行うこと
アニメーションフレームは５コマからになっていますが、５コマ間の間をフェードインはクロスフェードのエフェクトを使用して、コマ移動の間をスムーズに表現してあげることでリッチなコンテンツになるので、手間はかかりますがなんとか頑張りましょう。
アニメーションフレームの圧縮
今回は、アニメーションの連番ファイルが一つのスタンプあたり20ファイル出ていることを想定します。
圧縮ソフトの起動
ここで連番ファイルの圧縮を行います。連番ファイルの圧縮は非常にシンプルです。
現在、ファイル構造はアニメーションの書き出し時に、スタンプごとに「01」「02」「03」となっているはずです。
圧縮前に、圧縮するファイルを丸ごとコピーしてバックアップした状態にしておきましょう。
「Pngyu」には、各スタンプ画像のフォルダを丸ごと投げ込んでしまえば一気に圧縮ができます。
「Compress Start」を押すだけで完了します。
圧縮前のファイルは、１コマ30KB~50KBくらいの容量のはずです。
圧縮後は１コマあたり10KBくらいまで圧縮されるので、「容量」の問題はクリアになります。
アニメーションフレームの連結
圧縮されたアニメーションフレームの連結作業に入ります。
ここでは「APNGb-v2.0.1」を使用します。
もし、設定情報はとにかくすぐに簡単に書き出したいということであれば下記の記事で別のソフトを紹介しています。
画像の圧縮のときは、フォルダごとソフトに投げ込んで圧縮しましたが、「APNGb-v2.0.1」では、フォルダ内の連番ファイルを全て選択してソフトにドロップします。
下記に「APNG」にする時の設定項目を書いていくのですが、前提条件は
- スタンプのコマ数は20コマである
- １コマ20フレーム再生を想定
- ４回ループをさせる
- 「Loops」に４と入力する
- 「All frames delay」を1/20と入力する
- プレイボタンを押して「APNG」生成
たったこれだけです。変換後、保存場所が設定できるので、「名前の変更後」に所定のフォルダに保管していきましょう。
拡張子は「.png」なので注意が必要です。
画像をダウンローしてブラウザにドロップするとAPNGの動きを確認できます
これをデザインしたアニメーションスタンプほ数だけ行います。
「APNGb-v2.0.1」は、ひとつ前に設定した情報が反映されないようで、見た目の数字は合っているのですが、実はデフォルトの数字が適用されるバグがあります。
再度、同じ数字を入力し直すと正常に変換できますので、繰り返しは大変ですがやってみてください。
最後まで記事を読んでいただきありがとうございました。
