Flashでのカンタン3D

『おしえて!! FLASH MX 2004 ActionScript』
著者：森巧尚+komachanの、森さんがこの日のために関西から来てくれました！

3DソフトとFlashは似ているよ

Flash と3Dソフトの類似点と相違点を独自の視点で比較、「Flash を知っている人は、3Dソフトにも応用できる。 3Dソフトを知っている人は、Flash にも応用できる」と言う森さん。

両方の特徴をよく踏まえて、3D を Flash に取り入れた事例を紹介してくれました。

以下森さんの Flash と 3D の類似点・相違点の考察を表にまとめましたのでご覧ください。

Flash用の3D素材はレンダリング後の２次元ムービー、もしくは静止画になります。ムービーを swf で吐き出した場合一コマずつの状態で吐き出されるので、フレームレートに気を配らなければならないとのこと。

Flash のデフォルトフレームレートは 12fps、3Dソフトは 30fps が一般的です。

また、swf形式で吐き出された素材はベクターレンダリングなのでハイライトや影、鏡面反射が別オブジェクトでレンダリングされ、Flash での編集が簡単。

Flash 単体で作っているのではないので、素材の微調整が大変。複数のムービーが切り替わる場合は、どういう繋がりになるのかあらかじめ絵コンテを書いておくと良いそうです。

感覚としてはデジタルビデオを読み込んで編集するのに似ているとのこと。 インタラクティブなムービーなど、複数の同じようなムービーを作るときは、視点（カメラ）を統一しておくことが重要と森さんは考えています。

制御方法は2Dムービーと一緒。使用する Script も極簡単。
･ play(), stop()
･ gotoAndPlay(), gotoAndStop()
･ nextFrame(), prevFrame()

■3Dソフトで素材ムービーを作成
3Dソフトで作成したオブジェクトの周りを、カメラがぐるりと
1周するアニメーションをつけ、swf形式で出力。

■Flashにswfを読み込んで配置
ファイル＞読み込み＞ライブラリに読み込みで先ほど作成したswf ファイルを Flash に読み込みます。
読み込んだ swf ファイルをライブラリからステージにドラッグ & ドロップ。 名前を a_mc とつけます。
そのままだと動くので、a_mc を開いてタイムラインの第一フレームに stop(); を記述して止めます。

フレーム、ボタンに以下のような ActionScript を書いてボタンにマウスオーバーで右回転、左回転するようにします。

■ルートの第一フレームにフレームアクションを書く

ルートの第一フレームに次のアクションスクリプトを書きます。
------------------------------
a_mc.stop();
moveFlag = 0;
this.onEnterFrame = function() {
if (moveFlag == 1) {
a_mc.nextFrame();
}
if (moveFlag == -1) {
a_mc.prevFrame();
}
};
------------------------------

■ボタンを配置してActionScriptを書く
二つボタンを用意します。

右回り用ボタンのアクションスクリプト：
------------------------------
on (rollOver) {
moveFlag = 1;
}
on (rollOut) {
moveFlag = 0;
}
------------------------------

左回り用ボタンのアクションスクリプト：
------------------------------
on (rollOver) {
moveFlag = -1;
}
on (rollOut) {
moveFlag = 0;
}
------------------------------

>>サンプルを見る（Flash Player 7が必要です）

砂漠に配置された遺跡がボタンになっていて、クリックするとその遺跡の裏にカメラが回り込むアニメーションが再生されます。

用意する3D素材ムービーはカメラが遺跡の裏に回りこむ「行き」のムービーのみ。「帰り」は逆回転させればOK。3パターンムービーがあるので、各ムービーを別フレームに置き、各ボタンに gotoAndStop(); を記述して、指定のフレームにとばします。

各フレームに記述するフレームアクションは次のとおり。
------------------------------
moveFlag = 1;
a_mc.stop();
this.onEnterFrame = function() {
if (moveFlag == 1) {
a_mc.nextFrame();
if (a_mc._currentframe == a_mc._totalframes) {
moveFlag = 0;
}
}
if (moveFlag == -1) {
a_mc.prevFrame();
if (a_mc._currentframe == 2) {
_root.gotoAndStop(1);
}
}
}
------------------------------
逆再生は以上のスクリプトと3Dモデルの回転で使ったスクリプトを組み合わせです。ヒントを手がかりに作ってみてください。

今回森さんが用意した3Dムービー素材は3パターン。ダイナミックな動きが3Dらしくて良いですね。

>>サンプルを見る（Flash Player 7が必要です）

野中さんTIPS：
森さんとはちょっと違う方法で逆再生を実現。
>>サンプルを見る（Flash Player 7が必要です）
>>サンプルのFLAファイルをダウンロード（Flash MX 2004が必要です）

逆戻りアニメーションの詳細解説。
>>「ロールアウトで逆戻りするアニメーション」

以上森さんの「Flashでのカンタン3D」でした！

近日 ActionScript をわかりやすく解説した森さんの著作が発売されます。
『おしえて!! FLASH MX 2004 ActionScript』 著者：森巧尚+komachan
SIHOさんも絶賛
「この本なら、私もスラッシュシンタックスから卒業できるかもしれない。
巻頭漫画にケーオーパンチです。」