解 説

最初に戻って立方体を動かしてみましょう。

説明はいいからやり方を教えろという方向けの手順です。

  1. CubePic.asファイルをダウンロードしてFlashDevelopなどに取り込みます。Adbe Flash ではうまくいかないです。(FlashCS3以上ではEmbedは使えないし、その必要もないですね。画像はもっと簡単にクラス化できる訳ですから)
  2. FlashDevelopの場合asファイルはsrcフォルダに入れます。またsrcフォルダにはPV3Dから持って来たnochumpフォルダと orgフォルダも入れておきます。
  3. 書き出しサイズは315x250pxとします。FlashDevelopではメニューのプロジェクトからプロジェクトの設定で行います。
  4. srcフォルダーの中にimagesフォルダを作成してa.jpg,b.jpg,c.jpg,d.jpg,e.jpg,f.jpgの画像ファイル6枚を入れてください
  5. コンパイルするとbinフォルダにswf拡張子のファイルができています。これがFlashファイルです。

 

立方体を動かすソース

ここから文法の説明です。

Embedとは

Embedは謎が多いです。使い方だけ覚えてしまいましょう。

通常Embedを使用した画像表示はEmbedでロードしたい画像のファイル名を指定し,クラス型の任意の名前のクラスとして宣言します。次にそのクラスを使用してBitmapとしてインスタンス化します。(asを使用してキャストしています)その後はこのBitmapをaddChildしてやれば表示することが出来ます。

ソースについて

以下はEmbedを使用して各画像をクラスとして宣言しています。

コンストラクタ

  1. Cubeクラスをインスタンス化するメソッドcreateMyCube()を実行。
  2. インスタンスcubeを表示リストに加えています。
  3. ENTER_FRAMEが実施されるごとに行われるリスナー関数 enterFrameHandleを宣言しています。

createMyCubeメソッドの定義

createMyCubeメソッドはCubeクラスをインスタンス化するための処理をメソッドにしてまとめたものです。

以下Cube クラスのコンストラクタのパラメータです。

以下はMaterialsListクラスをインスタンス化して画像をそれぞれの面に設定し、最後にCubeクラスのインスタンス化で活用しています。

  1. MaterialsListをインスタンス化。MaterialsListとはキューブ体をインスタンス化する際に必要になる各側面のテクスチャーをリスト化するクラスです。
  2. 画像のクラスを配列にする
  3. キューブの面を配列にする
  4. for文で画像の配列をインスタンス化し、そのままBitmap型にキャストする
  5. 新規のBitmapDataクラスをインスタンス化する。サイズは縦横200px。なぜBitmapDataクラスが必要なのかは別途説明します。
  6. BitmapDataクラスのdrawメソッドで画像を描きます。
  7. BitmapMaterialをインスタンス化します
  8. materialをsmooth に表示させる処理
  9. addMaterialメソッドでmaterialsListに画像データを追加します
  10. materialsListを第1引数に入れてCubeクラスをインスタンス化します。

メソッドの詳細はPapervision3D 2.1 日本語 リファレンスガイドを参照してください。

onMove(e:Event)について

イベントのENTER_FRAMEが実行されるごとに実施されるリスナー関数です。

オブジェクトcubeのヨー(y軸を中心に回転)とピッチ(x軸を中心にした回転)、そしてy座標を決めカメラのx座標とz座標を決めてレンダリングを開始します。
startRendering();メソッドをsingleRender();と書き換えると鏡面効果が得られます。

一番下のstartRendering();メソドッドをsingleRender();メソッドに変更するだけで鏡面体が現れます。カメラの位置を多少変更します。

更に次のようにソースを一部加えると鏡面との境界面ができ上がります。

次は同じ立方体の回転でも画像の読み込みをサーバー上で行う方法です。

ソースサンプルはこちらから右クリックでダウンロード

出来上がりサンプルはこちらから右クリックでダウンロード