• 創作絵本を無料で利用できます。
    Pocket

     こうしくんは、クリスタ(CLIP STUDIO PAINT) と APNG Assembler を使って、アニメーションスタンプを作っています。
     クリスタのアニメーション機能を使ったらもっと作業しやすいのかも知れませんが、色々さわってみても使い方がよく分かりませんでした。結局、この方法が自分にとって一番簡単でした。

    ① クリスタの設定をする。
    「イラスト」「幅320pix」「高さ270pix」「解像度350dpi」

    ② 最初のフレームと最後のフレームを「ベクターレイヤー」に描画する。
     このサンプルでは、9フレームのアニメを作りますので、最初のフレームを「レイヤー1」最後のフレームを「レイヤー9」とします。

    ③ 「レイヤー1」と「レイヤー9」の間に、「レイヤー5」を作って、中間のコマを描画する。
    「レイヤー1」「レイヤー9」どちらかのレイヤーを複製して、ベクター線修正を使うと、動きをイメージしやすいです。
    「レイヤー1」「レイヤー9」は、透明度を40%ぐらいにしておくと、「レイヤー5」の描画がしやすくなります。

    ④ 2つのレイヤーの中間のフレームを作っていく。(レイヤー2,3,4,6,7,8)
    レイヤー5とレイヤー9の間にレイヤー7を、レイヤー1とレイヤー3の間にレイヤー2をというように、2つのレイヤーの中間の絵をベクターレイヤーに描画していきます。9つのレイヤーが描画できたら、昇順に並べておきます。

    ⑤ それぞれのベクターレイヤーに割り当てる着色用のラスターレイヤーを作成する。
    それぞれのベクターレイヤーのすぐ下にラスターレイヤーを作成します。

    ⑥ フレームごとに レイヤーフォルダーを作成し、ベクターレイヤーとラスターレイヤーを格納する。
    フォルダー名は、ベクターレイヤーと同じ番号にし、昇順に並べておきます。
    フォルダーに格納したら、非表示にしておきます。

    ⑦ 着色する。
    すべてのフォルダーで同じ色を使うので、2色ずつすべてのコマを着色すると効率的です。
    着色の作業からは、背景を透過にしておきます。

    ⑧ スタンプのコメントを入れる。

    ⑨ 「フォルダー1」から順に表示して、「ファイル」→「画像を統合して書き出し」→「png」で、9枚のpngファイルを書き出す。
    ファイル名は、01.png~09.png とします。

    ⑩ APNG Assembler を使って、apng(アニメーションpng )を作る。
    こうしくんは、「LINE Simulator 」「APNG Assembler 」「エクスプローラー」を並べて、作業しています。

    ⑪  APNG Assembler にPNGファイルを drag-and-drop で登録する。
    1フレーム目には、最後のフレーム(09.png )を置きます。LINEの画面では、最初のフレームが表示されます。また、アニメーション表示後すぐに最初のフレームが表示されてしまうので、注意が必要です。あとは、順番に並べていきます。後から途中にファイルを挿入することができないので注意。

    ⑫ ループ回数を指定する。
    デフォルトでは、無限ループになっています。こうしくんはほぼ「1」です。

    ⑬ 1コマあたりの表示時間を指定する
     分数で指定できるので、フレーム数を気にせず決まった再生時間にすることができます。このサンプルでは「1秒」にしています。

    ⑭ 圧縮の設定をする
     LINEアニメーションスタンプのガイドラインでは、ファイル容量は300KB以下となっています。圧縮率は高いめのほうが後々助かります。

    ⑮ 保存フォルダーとファイル名を指定する。
     PNGファイルを書き出したフォルダーがいいと思いますが、アニメーションPNGも同じ拡張子(.PNG)になるので、ファイル名には、アニメーションと分かるよう[a]などの記号や文字を入れておきます。

    ⑯ 作成ボタン「Make Animated PNG 」をクリックする。

    ⑰ 完成したAPNGファイルを確認する。
    「LINE Simulator 」にファイルをdrag-and-dropすると、再生されます。
    「LINE Simulator 」では、最後のフレームで止まりますが、実際のLINEでは、最初のフレームに戻ってしまいます。こうしくんは、このことを知らずに リクエスト→リリース し、すぐに販売停止、修正版作成という残念な経験をしてしまいました。

    自分が作ったアニメーションって、感動しますね。次もっとレベルアップしたアニメーションを作ろうって気になります。こうしくんはがんばりますよ。

    LINEアニメーションスタンプ「動く!ピンクのこかば-毎日使える」
    https://line.me/S/sticker/8379355


    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA