Matrix3Dを使って、2次元を3次元表現にする
必要条件
ユーザーレベル
初級
はじめに
ActionScript 3.0になってから、Flashでも3Dの表現をよくみかけるようになってきました。
Papervision3Dなどの外部ライブラリを使えば、今までのFlashでは実現が難しかった3D表現もできるようになりました。
ただし、ActionScriptの知識はそれなりに必要になり、気軽に始めたい人には少しハードルが高いイメージがあります。
今回はAdobe CS4から導入されたMatrix3Dを使い、比較的簡単に3D表現ができる方法を紹介します。
Matrix3Dを使うメリット
3D表現をするのにMatrix3DとPapervision3Dのどちらを使うか悩む人は多いかと思います。
バリバリ3Dを動かすのであればPapervision3Dのほうがいいかもしれませんが、簡単に表現するにはMatrix3Dのいいかと思っています。
その理由は以下の２つのものにあります。
- ステージにおいているものをそのまま3Dにできる
Papervision3Dではコンポーネントを使うなどの方法は別として、まずは3D空間をプログラミングで作る必要があります。
対するMatrix3Dでは通常のFlash開発のように、ステージにムービークリップを配置し、それに奥行きをつけることができます。 - イラストなどの絵の世界観をそのまま3D表現にできる
3Dの表現では一般的に、立方体に絵をマッピングするなどして、絵を空間に貼り付けていきます。この方法だとどうしてもカクカクした画像や、いかにも3Dを使っているように見えてしまいます。
Matrix3Dではタイムラインに奥行きを持たせることができるので、イラストなどの見た目をそのまま3D空間のように見せることができます。
サンプル１．まずはトゥイーンで3Dを表現する。
まずはスクリプトなしで、3Dの表現を作ってみましょう。
ツールを使うだけでも簡単に傾きが表現できます。
- ダウンロード：1_logo_animation(1.82MB / zip形式）
ステージに背景とロゴをひとまとめにしたムービークリップを配置します。
タイムラインを伸ばし、モーショントゥイーンを作成します。
3Dの傾きは「変形パネル」の「3D 回転」の値を変えるか、ツールの「3D回転ツール」を使います。
タイムラインを移動させるとムービークリップが傾いているのがわかるでしょう。
logoC.z = -100;
logoS.z = -80;
logoH.z = -60;
logoO.z = -100;
logoO2.z = -70;
logoL.z = -90;
これだけではちょっと物足りないので、ロゴが画面から飛び出しているように見せましょう。
各ロゴのプロパティ「z」の値を変更するだけで、前に飛び出します。z軸はマイナスになるほど手前にきます。
同じロゴのムービークリップを黒くし、背景におけば影の演出もできます。
テクスチャなし
テクスチャあり
画面全体にテクスチャを置いてアナログっぽくみせるなど、通常の2DでのFlashの表現とも相性がいいです。
サンプル２．スクリプトで背景を傾ける
先ほどはモーショントゥイーンで動かしていましたが、今度はActionScriptを使って背景を傾かせ、画面全体がゆらゆらと動いている表現を作ります。
- ダウンロード：2_logo_script(1.83MB / zip形式）
X軸とY軸を傾けます。回転させるスクリプトはMatrix3DクラスのprependRotationを使います。
- 使い方：
ムービークリップ.transform.matrix3D.prependRotation(回転のスピード,回転の軸)
- 例：X軸を傾ける
mc.transform.matrix3D.prependRotation(-0.5, Vector3D.X_AXIS);
※回転の仕組みの詳細は野中文雄さんの記事をご覧ください。
Matrix3Dクラス － 変換行列2
http://www.adobe.com/jp/devnet/flash/articles/matrix3d_class.html
// enterFrameのイベントを登録する
addEventListener(Event.ENTER_FRAME, enterFrameX);
addEventListener(Event.ENTER_FRAME, enterFrameY);
// X軸を傾ける
private function enterFrameX(evt) {
mc.transform.matrix3D.prependRotation(-0.5, Vector3D.X_AXIS);
}
// Y軸を傾ける
private function enterFrameY(evt) {
mc.transform.matrix3D.prependRotation(-0.5, Vector3D.Y_AXIS);
}
実際にはenterFrameのイベント使い、連続的にそれぞれの軸を回転させます。
傾く角度をランダムに設定し、傾きを変えながら連続して動かすと、画面がゆらゆらしたような演出になります。
サンプル３．ロゴをz軸にトゥイーンさせる
- ダウンロード：3_logo_tweener(1.87MB / zip形式）
今度はロゴのZ軸の動きをTweenerというライブラリを使って動かしてみます。
Tweenerというとスクリプトでアニメーションを動かす時によく使うライブラリなのですが、だいたいがX、Y軸に動く、つまり平面上を動かすために使われます。
ただこれはZ軸にも採用することができます。つまり奥から手前に移動する動きを簡単に作成することができます。
Z軸をトゥイーンさせることで、より奥行きのある空間に見せることができます。
今回はTweenerの「easeOutElastic」の動きを付けて、ロゴがぼよーんと飛び出すような動きにしてみました。
- 使い方：
Tweener.addTween(ムービークリップ, { 動かしたい軸（x,y,z）:最終到達点, time:動かす時間（秒）, transition:"動きの種類" } );
- 例：
Tweener.addTween(mc, { z:-200, time:0.5, transition:"easeOutElastic" } );
※Tweenerのライブラリはこちらからダウンロードください。
Tweener
http://code.google.com/p/tweener/
サンプル４．z軸の動きを音楽を同期させる
さきほどのサンプル３の動きと音を連動させてみます。こちらも２次元ではよくあるサンプルなのですが、３次元の動きと連動させると、少し違った演出ができます。
- ダウンロード：4_logo_tweener_sound(22.2MB / zip形式）
音に合わせてロゴのZ軸の動きを変えたり、背景の落書きもイコライザのように動かしてみました。
// 音情報を解析する
var byteArray:ByteArray = new ByteArray();
SoundMixer.computeSpectrum(byteArray, false, 0);
for (var i = 0; i < 256; i++) {
// 音の大きさを取得する
scale = byteArray.readFloat()*500;
// 音の大きさをZ軸分アニメーションさせる（サンプルではある指定した音の領域の平均値を使っています）
Tweener.addTween(this["mc"+i], { z:-scale, time:1, transition:"easeOutElastic" } );
}
音の解析にはSoundSpectrumクラスを使います。
トゥイーンの動きは「サンプル３」と同じようにTweenerを使います。
サンプル５．おまけ
最後に演出的なおまけをつけてみました。3D空間にすると正面の物体はよく見えるのですが、底辺や側面にある物体は陰に隠れていたり、小さくなったりして見えにくいです。
その部分にギミックなどを入れてみると、回転したときに初めて確認できるようなおまけ要素が付けられます。
画面の下に要素を配置しておくと、普段は見えにくいですが、回転することで見えるようになります。
- ダウンロード：5_logo_card(22.4MB / zip形式）
まとめ
今回サンプルでいろいろと作ってみましたが、意外と簡単に3Dのギミックができるような感じがしました。
3Dを本格的にするのはちょっとハードルが高いという人は、まずはタイムラインでぐりぐり動かしてみるのも面白いかと思います。
あとは2Dの世界でも使っているActionScriptを利用し、それをZ軸に変えてみると今までとは違った動きができるかもしれません。
※サンプルのファイルは自由に触っていただいて結構ですが、絵の素材は実際のクスールのサイトでも使っていますので、個人利用のみに使用していただけると幸いです。
