第4回　Sandyを使った3Dインターフェイス

テクノロジー

2007.1.23 TUE

Lesson6　Sandyを利用した3D表現

Lesson6では「Fuse Kit」に続いて、オープンソースの「Sandy」を取り上げる。SandyはFlashで3Dを表現することができるActionScript2.0 ベースのクラスパッケージライブラリーだ。3Dに関してかなり広範囲のことができるが、筆者自身も勉強中の段階である。全容を解説とまでいかないが、簡単で効果の高いものをピックアップしながら進めていきたい。

（解説：茅原伸幸）

最終回となる今回はSandyを利用して3Dのインターフェイスを作ってみたい。サイコロのような立方体の各面に、本連載でこれまで登場してきたサンプルの画像を貼り付けた。各面をクリックするとそれぞれのリンク先へジャンプするものだ【サンプル1】。

【サンプル1】BOX（立方体）の各面をクリックすると、それぞれのサンプルが登場したLessonにジャンプする。背景の黒い部分でドラッグすれば、BOXを回転させることができる

ポイントは以下の点となる。

BOXの面に画像を用いている点
BOXの回転角度に対応して、画像の明るさが変化することでライティングの表現をしている点
各面に対してイベントリスナーを設定している点

通常これらは、いずれも難易度の高い処理だが、後述するActionScriptのような相応の記述が必要とはいえ、Sandyを使うことによって簡単に実現できる。

BOXの作成

では、さっそく制作にとりかかろう。まず各面となる正方形の画像を6つ用意し（【サンプル1】では縦横160pxのpng画像を使っている）、sideと名前を付けたムービークリップ内に左上を基準にして、2フレームずつに順番に配置している。ムービーをプレビューしたとき、4番目の画像のみ横に反転してしまうため、少々強引な手法であるが4番目の画像のみ、横反転させている。そして、そのムービークリップ内のフレーム1にstop();を記述する【図1】。

【図1】6つの画像を格納したムービークリップ（インスタンス名：side）は、ステージ枠外に配置している

次にActionScriptを記述すれば完了だが、記述量が多いため次のテキストエリアを用意した。テキストをすべてコピーして、_rootのフレーム1にペーストしてほしい。

【サンプル2】テキスト内のコメントも参考にしてほしい

詳細な解説は省略するが、各行をコメントを参考に順番に見ていくと大体の流れはつかめるのではないだろうか。3Dワールドにはスクリーン、カメラ、ライト、オブジェクトを配し、設定した座標を元にSandyの各クラスパッケージが連携して、3D計算を行っている。Sandyの利用者側からすれば、各種設定を行っているだけのようなものだ。

■Point　Sandyの面の設定

今回のポイントとしては、面の設定がある。【サンプル1】では、各面に画像を使っているため、面の分割には三角形を利用する必要がある。そのためBOXの生成時、面の分割方法を3点による面として'tri'と指定している（画像の傾斜などを考えなくてもよい場合は、4点による面として'quad'を指定すればよい）。

下記のActionScriptは、【サンプル2】で青い文字で示した部分を引用したものだ。

var cube:Object3D = new Box(60, 60, 60, 'tri', 1);//BOXを生成（横幅,縦幅,奥行き,面の分割方法,Quality）

六面体の一面の四角形を三角形に分割しているため、実際には12の面（face）が存在していることになる。ActionScript中の配列「faces」にはこの12の面が格納されている。【図1】で各画像を2フレームずつにしたのは、各面とフレーム番号を対応させるためだ。

そして、各面に対し「sandy.events.ObjectEvent」クラスでイベントリスナーを設定し、クリック時にリンク先へジャンプするように設定している。今回はロールオーバーのイベントリスナーをコメントアウトにしているが、ロールオーバー効果を利用する場合、反応するのは画像の半分（三角形）のみになるので工夫が必要だろう。

あとは、各パラメータを変えたりしながら、理解を深めてほしい。なお今回のサンプルはPetit Labs Using Sandy 3D Flash Libraryを参考にしている。とても詳しく解説されているので、ぜひこちらも参照いただきたい。また、合わせて、SandyのDocumentationも確認してほしい。

Lesson6では「Sandy」、Lesson5では「Fuse Kit」と、オープンソースのクラスライブラリを取り上げてきたが、いずれも利用価値の高いものだ。3Dではさらに気になる「papervision3D」など、次々とオープンソースのクラスライブラリが充実してきている。オープンソースのクラスライブラリの利用には、最初習得するまで多少の煩雑さが伴うが、慣れてしまえば生産性は格段に向上すると思う。

Flashのスキルアップには、積極的に新しいものにチャレンジし、研究する姿勢が非常に大切だ。そして、何よりもFlashが好きで好きでしょうがない！という人が最も大きな可能性を秘めている。どんな技術書を読むよりも「Flashを好きになること」が、スキルアップへのいちばんの近道ではないだろうか。この連載がその礎となれば幸いである。

――「Flashスキルアップ講座」は、今回で一旦終了となります。
次回からは新テーマでお送りします。ご期待ください。