January 26, 2017

FLASHでGIFアニメ制作

GIFアニメAnimate CC 2017でアニメーションGIFの書き出しが改善されたんだってね。でもオレの環境には2017はインストールできんから、従来のやり方しかないわけだ。でもFLASHからムービーの書き出しでアニメーションGIFを選ぶなんてことはしないよね。せっかく作ったアニメーションが汚くなっちゃうから。どうやってるか。そりゃPhotoshopに読み込んでからGIFアニメに書き出しますよ。問題はアニメーションGIFなのかGIFアニメなのかってことじゃなくて、FlashからどのフォーマットでPhotoshipに渡すかだね。FLASHでGIFアニメを作る場合、アニメーションのタイミングは均一が望ましい。全部1コマ打ちならいいけど、2コマ打ちと3コマ打ちが混在してると後々めんどくさいことになるかもよ。

PNGシーケンス

PNG 書き出しムービーの書き出しで、PNGシーケンスを選ぶよ。PNG 書き出し設定が開いたら書き出しするとPNGがだだだっっと連番で書き出される。3コマ打ちの場合、同じ絵が3枚ずつできるね。それってイヤだよね、大変じゃなければ、あらかじめキーフレームを1コマ打ちに修正しておくといい。


シーケンス読み込みPhotoshopでPNGシーケンスを開く。画像シーケンスにチェック入れとく。大量にあってもここで選ぶのはシーケンスの先頭のPNGファイルだけでいい。

次にフレームレートを聞いてくるよ。


フレームレート
もちろん、Flashアニメーションと同じフレームレートにしておく。

ビデオタイムライン Photoshopのタイムラインにビデオとして読み込まれたよ。ビデオとしてね。

ビデオタイムライン「WEB用に保存...」でGIFアニメの設定をする。色数、画像の縮小、ループ回数など。あとは保存すればできあがり。

なんだけど、2コマ打ちや3コマ打ちはGIFアニメ内で重複フレームになって、ファイルサイズがでかくなっちゃうんだよね。書き出したGIFアニメをもう一度Photoshopで開いて重複フレームを整理してディレイで調整したくなる。なのでこの方法を使うのは、オール1コマ打ちで作ったFLASHアニメか、30コマ程度までの短いアニメーションになるわけです。

2コマ打ちや3コマ打ちのFLASHアニメの場合は別の方法を使うよ。スイベルの出番だ!


SWF→MOV

まずはFLASHからSWFをパブリッシュ。SWFなら連番PNGと比べて書き出しは速いしファイルも1コですむ。
スイベル
パブリッシュしたFlashアニメをスイベルに読み込む。

Swivel
ビデオのサイズを決めて、ビデオコーデックを選ぶ。QuickTime Animationがいい。あとはConvertしてMOVを書き出す。

ビデオ読み込み
Photoshopの読み込みで「ビデオフレームからレイヤー...」を選ぶ。

ビデオをレイヤーに読み込み
ビデオをレイヤーに読み込みで、フレームアニメーションにチェックを入れる。頻度制限は2コマ打ちなら「2」、3コマ打ちなら「3」フレームおきにする。これによって重複するコマの読み込みを防げる。

タイムライン Photoshopのタイムラインにフレームアニメーションとして読み込まれたよ。ここ重要ポイント。

ディレイフレームアニメなのでディレイを設定できるのだ。コマを表示する時間を選ぶ。

ディレイ設定「その他...」を選ぶと、任意の時間を指定できる。

ディレイ
指定したいフレームを一気に選択してまとめてディレイ指定してもいいし、個別のフレームにディレイ指定してメリハリをつけるのもいいね。再生回数の指定も忘れずに。1回か3回か無限か。あとは「WEB用に保存...」でGIFアニメを書き出して完成。

Posted by A.e.Suck at January 26, 2017 12:41 PM





Flash
AE