ずっと作りたかった動くスタンプ!
この度クリエイターズで作成可能になったので
早速作らなきゃ!!って思ったけど
色々躓いたので自分メモ程度にちょっと書いてみようかと。
APNGってファイルの種類は初耳であたふた。
Gifアニメにすりゃあいいってもんじゃないんだよ( TДT)
あくまでも私の作り方なので多分他にもっと効率良いやり方もあると思うのですが
これでLINEクリエイターズの審査は通るのでよかったら参考にしてみて下さい(^o^)
★使用環境★
・制作はWindows、APNG化はMac
①Photoshopでアニメを作る(今回は1秒のアニメーション)
(AnimateCC(旧FLASH)にも挑戦したけど
フォトショでコマアニメ作るのに慣れてたから作業効率悪くてやめた)
計算が出来ない子なので1枚を0.1秒で基本作成。
見せたい部分は0.2秒だったり臨機応変に。
★アニメの1枚目がLINEストア上のプレビュー画像になるので
最終フレームと繋がるor最終フレームと同じ絵 に設定しておくと綺麗。
②余白をトリミング
※ここで躓いたポイント!
画像サイズが270px以上であればオッケーなのかとおもいきや
高さが270px以上あるとエラーでアップロード出来ません!!
320px×270pxまでってそういうことだったのね( TДT)
高さを270px以下になるように画像サイズも調整。
③フレームを書き出す
0.2秒で作ったものは同じフレームを二枚書き出し。
全部で10枚の画像完成てってれー♪
※20枚以上になるとエラーではじかれるので
画像は20枚までにおさめる。
〜ここからMac登場〜
④このままだと重いのでPNG圧縮
「Automator」のスクリプトで一括圧縮します。
それでもアニメが300KB以上になる場合は「ImageAlpha」で一枚ずつ圧縮しておさえます。
★APNGに書き出し
⑤「ターミナル」を起動
⑥cd(半角スペース)を打って「apngasm」が入ってるフォルダを
ターミナルにドラッグ、Enter。
(apngasmはフリー配布されてるAPNG AssemblerをDLしました)
こちら→
https://sourceforge.net/projects/apngasm/⑦「apngasm」をターミナルにドラッグ、Enter。
(詳細みたいなのが出てこない時はもう一回ドラッグ&Enterしてみる)
⑧./apngasm animate.png frame*.png 1 10 -l2 をターミナルにコピペ。
ファイル名に「frame」と名前のついてる画像を
「1/10秒(0.1秒ごとに1枚ずつ画像表示)」で「ループ2回」させて「animate.png」
というファイルを作りますよという意味。
これで10枚のPNG画像が2回繰り返されるので2秒のアニメーションが完成。
ちなみにループさせたくない場合は「l1」で出来ました!
⑨APNGファイル完成!(てってれー♪)
そんなこんなで無事作成された
「ゆるゆるハムスターとアニマル」のLINEスタンプは下記から見れますよ〜!(宣伝)
ポチポチ再生してやって下さると嬉しいです!
さーてまったりと次回作も作っちゃおうかな!
ゆるゆるハムスターとアニマル