Away3D Archive

久しぶりにAway3Dでも触ってみようかなぁ…と思って、公式サイトのDownloadのページをみていたら、気になるものが…

Current syntax highlight for Flash IDE CS3/CS4というmxpファイルがあったので、早速インストールしてみました。

Component installerと書かれていたので、インストールしたら、ウィンドウ>コンポーネントに何か表示されるのかなぁ…と思っていたんですが、どうやらそうではないみたい。

で、これ（mxp）をインストールしたらどうなるの？　ってのを、調べてみました。

★mxpでインストールされるもの

• Cドライブ>Documents and Settings>User Name>Local Settings>Application Data>Adobe>Flash CS3>ja>ConfigurationのExtensionsフォルダにmxiファイル
• ConfigurationのActionsPanel>CustomActionsフォルダにAway3D_synthax.xmlファイル

で、このAway3D_synthax.xmlをエディタで開いてみると、colorsyntaxのidentifierがイロイロ定義されています。

ここから判断すると、識別子のカラーリングがどうにかなるのかな？　と思って、早速Flash IDEのアクションパネルを開いてみました。

比較したソースは、getting startedからダウンロードしたlessonsフォルダのLesson_Basic_01_HelloAway3D.flaのソースです。

mxpがONの時

Away3D_synthax.xmlファイルに定義されているidentifierがカラーリングされています。

mxpがOFFの時

identifierはカラーリングされていません。

Flash IDEのアクションパネルでソースを書いていく方は、これを入れておいた方が便利なんじゃないかなぁ…と思います。

昨日、家でまったりしながら『Web Designing8月号』を読んでいたら、思わず声をあげてしまいました！

trick7のteraさんが短期連載されているFlash開発の新機軸『ActionScriptライブラリ』の記事内で、当ブログが参照記事という形で掲載されていました。

いや〜、驚いた！

僻地で細々とやっているこのブログが、（多分間違ってでしょうけども）全国発売されている雑誌に掲載されてしまうとは…

世の中、何が起こるか分かりません。

●↓Web Designing8月号の記事を見て、当ブログにお越し下さった方へ↓●

Away3Dの知識が「0」＆大して英語も出来ない僕が、手探り状態で書いた記事です。あまり期待なさらないでくださいね。

Away3Dのサイトに、FlashDevelopでAway3Dを使う方法のチュートリアルがあったので、早速試してみました。

1. チュートリアルページから、サンプルファイルをダウンロード（ページの下部UpdateObjectSliding()の下、File Download Areaの箇所）
2. Away3Dのクラスファイルをまだダウンロードしていない場合は、CompilationのところにあるAway3D V1.9.4 Downloadからダウンロードしておく
3. 展開すると、ObjectExamplesというフォルダが現れます
4. その中にあるclassesの中に、away3dのクラスファイルを入れておく（classes＞away3d＞coreみたいな感じに）
5. ObjectExamplesフォルダの中に、ObjectExamples.as3projというFlashDevelopのプロジェクトファイルがあるので、これを起動させる
6. 画面右のProjectパネルから、classesフォルダ内にあるObjectExamples.asをダブルクリック
7. コンパイル（ツールバーの右側の歯車に赤いマークが付いてるものをクリック）すると、asWingのクラスファイルがないと怒られる
8. どうやらasWingというフレームワークを使っているみたいなので、GooleCodeからasWingのクラスファイルをダウンロードする（ちなみに僕は1.3.2のzipをダウンロード）
9. aswing_a3_1.3.2_allinone＞AsWing＞src＞の中にorgというフォルダがあるので、このフォルダごとコピーして、ObjectExamples＞classesの中に入れる（AS2のCasaFrameworkを使っている方は、フォルダ名がバッティングする可能性があるので、AS2とAS3のクラスファイルを別にしておいた方がいいかも…）
10. もう一回FlashDevelopでコンパイル。今度は怒られない！

すると、このクラスファイルを使ったら、こんなのが出来るというものを見ることが出来ます。

ObjectExamples.asファイルの中身を見て、FlashDevelop側でどんなスクリプトを書いたらいいのかも学べます。

今回はclassesフォルダの中に、away3dとaswingのクラスファイルを入れましたが、予めFlashDevelop側でクラスパスを通しておいても大丈夫かと思います。

FlashDevelopを使うとき、Tools＞Global Classpaths（ショートカットはCtrl＋F9）で、クラスパスを通しておく。

今回はCドライブのas3classというフォルダ内にaway3dのクラスファイルを置いて、そこにC:\as3classというクラスパスを通しています。

そうすると、Away3Dのviewクラスを使いたいとき、var view:と打った時点で、コードヒントが表示される。

var view:Vとすると、さらにリストを絞り込める。

リストから選択し、確定した時点で、FlashDevelopがimport away3d.core.scene.View3D;の一行を先頭に自動的に書いてくれる。

う～ん、便利！

WireTorus.asファイルを使ってのオブジェクトの作成です。

まず最初に、使うファイルをimportします。（objectsフォルダの全ファイルとsceneフォルダの全ファイルを読み込んでます）

import away3d.core.scene.*;
import away3d.objects.*;

次にオブジェクトをステージの中心に配置します。（ステージのサイズが600×400の場合）

var view:View3D = new View3D({x:300, y:200});

そして今作成したvar viewを表示リストに追加させます。

addChild(view);

wiretorusを作成します。

var wiretorus:Object3D = new WireTorus();

WireTorus.asのデフォルトの設定は以下のようなものです。

線の色

ランダム

radius

100

tube

40

segmentsR

8

segmentsT

6

線のみで構成されるオブジェクトなので、面の色指定（material:”white#blue”）をするとエラーになります。

線の色指定をする場合は、material:”blue”もしくは、material:”#blue”とすると大丈夫です。

tubeやsegmentsR、segmentsTの詳細はこちらのエントリをご覧ください。

そして作成したwiretorusを表示リストに追加します。

view.scene.addChild(wiretorus);

あと最後に一行追記します。

view.render();

これはレンダリングに関しての設定（？）かと思われます。この一行を書かないと、swfファイルにはオブジェクトが表示されません。

このままだと2Dの物体が画面に表示されるだけです。
ですので、3D表示をするためにカメラ位置の設定を行います。これにはNumber3Dというクラスファイルを使います。

away3d＞core＞mathフォルダからファイルをimportします。（以下を追記）

import away3d.core.math.*;

続いてカメラ位置の設定を行います。

view.camera.position = new Number3D(1000, 1000, 1000);

Number3D.asファイルでは、デフォルトの設定は（0,0,1000）になっています。new Number3D()と記述すると、デフォルトの値が適用されます。

view.camera.lookAt(wiretorus.position);

カメラを作成したwiretorusに向けています。（lookAtの箇所）

これで完成です。

wiretorus作成のスクリプトは以下の通りです。

// 使うライブラリをimportする
import away3d.core.scene.*;
import away3d.objects.*;
import away3d.core.math.*;

// 3Dの視点を作成（ステージのサイズが600×400なので、ステージの中心にくるように設定）
var view:View3D = new View3D({x:300, y:200});
// 表示リストにviewを追加する
addChild(view);

// wiretorusを作成する
var wiretorus:Object3D = new WireTorus();
// 表示リストに追加
view.scene.addChild(wiretorus);

// wiretorusのカメラポジション（デフォルトの値は0,0,1000）
view.camera.position = new Number3D(1000, 1000, 1000);
view.camera.lookAt(wiretorus.position);

view.render();

wiretorusを3Dっぽく回してみた例

// 使うライブラリをimportする
import away3d.core.scene.*;
import away3d.objects.*;
import away3d.core.math.*;

// 3Dの視点を作成（ステージのサイズが600×400なので、ステージの中心にくるように設定）
var view:View3D = new View3D({x:300, y:200});
// 表示リストにviewを追加する
addChild(view);

// wiretorusを作成する
var wiretorus:Object3D = new WireTorus();
// 表示リストに追加
view.scene.addChild(wiretorus);

// wiretorusのカメラポジション（デフォルトの値は0,0,1000）
view.camera.position = new Number3D(1000, 1000, 1000);
view.camera.lookAt(wiretorus.position);

// フレームを更新される度に行う処理
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
wiretorus.rotationZ = getTimer() / -50;
view.render();
}