基本的にやってることはいたってシンプルで、
2Dのドット絵をたくさんあつめて、
Flash上で動かしてるだけです。
一部3D表現のみAfterEffectsでやってます。

■はじめに
動画制作に使ったソフトは主に以下です。

・Photoshop CS3　→　ドット絵の加工に使用
・Flash CS3 → ドット絵の2Dアニメーションに使用
・After Effects CS3 → 動画にエフェクトかけたり3Dアニメーションに使用
・Premiere CS3 → 動画の最終的な切り貼りに

■その１ - 素材集め
実はこれが一番大変。
ファミコン元気玉のときはニコニコ動画やらYouTubeから、
画質の良い動画を探してきては、
各モーションごとに画像をキャプチャして、
キャラのドット絵を抜き出すという気の遠くなる作業をしてたのですが、
今回は海外のドット絵ファンサイトさんの素材を使用させていただきました。
「SNES」「sprite」とかで検索するといっぱい出てくると思います。
どうしてもないときだけ、動画から抽出しました。

世のたくさんのゲームファンの方々に感謝です。

■その２ - キャラモーション作り
あるキャラクターの各モーションの一連のドット絵が集まったら、
それをFlashに取り込んでタイムラインに並べて、
各キャラクターごとにムービークリップ(※後述)を作ります。
素材ドット絵の中にはすでにGIFアニメ化されているものもあり、
その場合Flashに直接GIFアニメとして取り込むと、
なんと設定したフレームレートにあわせて、
自動的にキーフレームが打ち込まれるっていう便利っぷりw

まず、Flashプロジェクトを立ち上げたら、
ライブラリとかで新規にムービークリップを作成します。
ムービークリップってのはそれ自身がタイムラインを持ったオブジェクトみたいなもので、
つまりアニメーションさせる物をいれる器みたいなものです。
でその作成したムービークリップの中に入って、
ムービークリップのタイムラインを表示します。

Flashにはタイムラインという概念があって、
上図でいうと右にいけばいくほど時間がたつということになります。
でタイムライン上にキーフレームを打って画像を配置すると、
各キーフレームに再生ヘッダが到達するたびに、
そのキーフレームに存在する絵が表示されるわけです。
上図でいう crono という行の各黒丸がキーフレームになります。
各黒丸にはクロノの走ってるモーションのいろんなポーズが配置されてるわけです。

んで一連のモーション単位ごとにラベルをつけます。
前向いて走るモーションだったら「run_front」、
左向いて走るモーションだったら「run_left」みたいに。
ラベル名は好きにつけてOKだけど、
どんなモーションか名前見てわかるのがよいと思います。

次に各モーションの最後のフレームにキーフレームを打って、
そこに ActionScriptで、

this.gotoAndPlay("run_front");

とか、

this.stop();

とか書くことで、
そのモーションをループさせたり、
別のモーションに飛ばしたり、
ループさせずに再生を止めたりします。

上記を必要なモーションの数だけ繰り返します。
ちなみに最終的にクロノは50モーションくらいになりましたw

これでクロノのムービークリップができました。
これを登場キャラクター分繰り返します。
どんだけ大変な作業かw

■その２ - キャラクターのシーンアニメーション作り
続いてモーションを細かく設定したキャラのムービークリップを、
シーンのタイムラインに配置していきます。

シーンってのはFlashの一番根っこになる舞台のことで、
ようは舞台の上でいろんなキャラクターを動かすわけです。

ここでポイントなのは、シーン上でのキャラの動きは、
あくまで空間(=2次元座標空間)上の座標移動や、透明度とかのアニメーションのみで、
各キャラの走る・斬るといったモーションは、
シーンのタイムラインではなく、
先ほど作った各キャラのムービークリップのタイムライン内でおこなっているという点です。

上図では kaeru の行にキーフレームが打ち込まれていますが、
これはあくまで kaeru の座標位置のみのキーフレームです。
上図はカエルがクロノの左隣からラヴォスのところへ向かって移動しているところになります。

でこれとは別に action の行にキーフレームを打って、

this.kaeru.gotoAndPlay("jump_back");

とか書くことで、
「再生ヘッダがここにきたら、
　舞台の上のカエルさんに飛ぶように言って！」
と指示できるわけです。

空間上の移動と個々のモーションを分離することで、
あとあとの修正作業がぐんと楽になります。

あとは延々とこれを繰り返して、
キャラの空間上の移動とモーションの再生の演出をおこないます。

背景やエフェクトなども必要に応じて舞台上に配置して、
最終的に Flash から動画ファイルを出力します。

■その３ - AfterEffects で動画にさらに演出を加える
多くの場合 Flash のみで完結するのですが、
Flash は3Dの表現があまり得意でないので、
FZEROとかマリオカートとか、
3Dにしたいなーというゲームのみ、
FlashとAfterEffectsの両方を使って動画を作りました。

上図はちょっとわかりにくいですが、
AfterEffects ではシーンに配置した素材に、
「君は今日から3Dレイヤーだよ」
と一言伝えるだけで、簡単に3次元空間で移動・回転ができるようになります。

でマリオカートのレインボーロードの床の画像を用意して、
それを AfterEffects上で3Dレイヤーにして、
3D空間上でその画像の上をカメラを動かすとあら不思議、
レインボーロードの上を走っている背景動画のできあがりです。
(※ 実際はカメラではなく、床画像の方を動かしました)

また Flash 側ではこの背景動画に乗せるマリオたちのアニメーションを別途作り、
Flash から背景を透明にした形で動画を描き出します。

最後に AfterEffecs で作った背景3D動画と、
Flash で作った2Dキャラ動画を合体して、
3D空間上をマリオたちが動いているように見える動画の完成です。

あ、あと元気玉のエフェクトとかで使われているパーティクルは、
AfterEffects のプラグインを使ってます。

■その4 - 音楽に合わせて動画を編集
最後は、Flash や AfterEffects から書き出した個々の動画と、
Protools から書き出した曲とを、
Premiere のタイムラインに並べて、
音楽のタイミングにあわせて動画を切り貼りします。

Flash で作業するときも AfterEffects で作業するときも、
常に曲を聴きながらアニメーション作成するんですが、
Premiere での作業が最終的な映像と音楽との合体作業になります。
といっても個々の動画ファイルのつながり部分を自然にする処理くらいですが。

こうして音楽に合わせて全部の動画を並べて、
ようやくスーファミ元気玉が誕生したとさ。

ってかなり長くなっちゃいましたねw
すごく地味な作業をコツコツとやってきたって感じです。

何が大変って、スーファミになってキャラのモーションが細かくなったから、
それを集めて使えるようにするのがほんと大変でした。
ファミコン・・カワイイよファミコン・・・。

次回作はまだ決めてませんが、
時期的にはワンマンの後になるかと思います。
首をながーーーーーくしてお待ちください〜。