勢いでナストマのモーフィングGIFアニメを作ってしまいました。
その時の全く役に立たないTIPSを書いてみますｗ
（個人的に敢えてFlashを使ってないのがミソです）
- イラストレーターのブレンド機能でキャラクターのモーフィング
- Fireworksで複数画像を一発でステート（CS3までのフレーム）に配置してGIFアニメに
イラストレーターのブレンド機能でキャラクターのモーフィング
illustoratorにはブレンド機能という、A→Bの変化の段階を自動的に生成してくれる便利な機能があります。
しかし、トマトとナスみたいなキャラクターの場合、パスが多すぎて中間の計算がおかしくなります(図1)
イラストレーター 図1 : 通常のブレンド
そこで、各パーツ単位でブレンドを掛けることで上手くいきます。
図2: ブレンド調整後
図3: 各パーツ毎にブレンドした
Fireworksで複数画像を一発でステート（旧フレーム）に配置してGIFアニメに
※下記手順は、Fireworks CS3での画面です。
- illustoratorのデータを画像データ（PNG等で）書き出し
- Fireworksで書き出したPNGを開いて各コマをスライスして書き出す
- Fireworksで新規ファイルを作成し、そこに上記のスライスで書き出された画像をまとめてドラッグする。
うまくいけば？ファイル順に重なってくれる。
（うまくいかなかった場合は順番を入れ替えたり、整列で揃える。） - 全てのオブジェクトを選択して、ステートメニューの[ステートに配分]を実行
CS3以前では[フレームに配分]です。 - これで一発でステート(フレーム)に配分されます
ちなみに、選択オブジェクト郡の重なりが上ほど後のステートに配分されます。
一番上のオブジェクトが一番最後のステートに、
一番下のオブジェクトがステート１になります。 - 後はキャラB→Aに戻る分のステート（フレーム）を準備します。
ここでは、[トマ]→[ナス]がフレーム1〜7なので、
[ナス]→[トマ]の分としてフレーム1〜6を複製してから逆順に並べ直しています。 - 後は表示時間を調整してGIFアニメとして書きだせば完成です。
決めのコマは１秒ぐらい止めてた方がいいですね。
[ステートに配分]は簡単なGIFアニメ(Nowloading画像とか）を作らないといけない時などに便利です。
ちなみに、元ネタのナスとトマトは何も見ずに僕がイラストレーターで書きましたｗ
思い出しながらだけど、意外と書けるもんですねｗ
思いついたのは、デジハリの授業でmutsuking氏がイラレの授業を行ってる時。
かけそうだなーと思って書いて、ブレンドしてみたらこんな事になってしまいました。
ナストマくんは携帯サイトで連載中です。
タグ: Fireworks, GIFアニメ, Illustrator, TIPS, ナストマ, 作ってみた
