Home > Archives > 2009-06

2009-06

Away3D Synthax


久しぶりに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の時

mxpがonの場合

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

mxpがOFFの時

mxpがoffの場合

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

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

Progression + CMS + Box2D


以前作成したProgression + CMSで作ったPhoto Album的なものに、今度はBox2Dを絡めてみました。

これもブログ記事を投稿すると、上から降ってくるサムネイルが増えていきます。

作成方法はPaperVision3Dを絡めたときと、ほぼ一緒です。

  1. CastSpriteを継承したBox2Dのクラスを作成
  2. 作成したクラスに、Box2Dのworldを作成
  3. 重力とか物理エンジンとかを設定
  4. 床やBoxを作成
  5. BoxのuserDataにサムネイルのインスタンスを貼り付ける

2~4は、普通にBox2Dの設定をしてあげれば問題ありません。

インスタンスの取得方法は、PaperVisionを絡めた時と一緒です。

userDataに取得したインスタンスをそのまま渡してあげると、(多分、僕のソースの書き方が悪いからだと思いますが)パブリッシュの際、エラーになってしまいました。

なので、userDataはとりあえずSpriteにしておいて、そこに(取得した)インスタンスをaddChildしてあげる形を取りました。

そうすると、エラーは出なくなりました。

Spriteでくるんだせいなのかは分かりませんが、サムネイルが斜めになってしまうと、エッジのギザギザが目立ってしまいます。

インスタンスにはsmoothingが適用されていて、そのまま(サムネイルを)addChildする分には、そんなことはないのですが…

ここらあたりは、要検証。

あと画像の読み込みが完了するまで、Boxが落ちてこないという設定もしていないので、(当サンプルでは)落ちながら画像を読み込んでいるって感じになっています。

(Box2Dの空間に配置している)サムネイルにロールオーバーすると、きちんとツールチップが適用されます。

サムネイルをクリックすると、写真の詳しい説明のページに遷移します。

いや~、Progression凄い!

★追記(2009/06/27)

userDataに画像を貼り付けると、こんな感じになりました。

Box2Dの座標軸

Box2Dの原点(0,0)はオブジェクトの中心になっているみたいなので、画像を貼り付ける際には、位置調整が必要になってきます。

コマンドを使って読み込んだデータの取得方法


前回の記事で、こんなことを書きました。

XMLファイルを読み込む

こんな感じのXMLファイルがあったとします。

<?xml version="1.0" encoding="UTF-8" ?>
<scene>		
	<num>airport</num>
	<cap>空港</cap>
	<path>image1.jpg</path>
	<date>2008/12/24</date>
	<category>建物</category>
</scene>

で、これをコマンド内で読み込みたい場合。

protected override function _onLoad():void {
    // 実行したいコマンドを登録します。
    addCommand(
        new LoadURL( new URLRequest( "sample.xml" ) ),
        function():void {
            trace(this.latestData);
        }
    );
}

僕はもっぱらこの方法を使っていたんですが、上記以外にもやり方があったので、忘れないようにメモ。

protected override function _onLoad():void {
    // 実行したいコマンドを登録します。
    addCommand(
        new LoadURL( new URLRequest( "sample.xml" ) )
        .after( function():void {
            trace( this.data ); //trace(this.latestData)でもOK!
        } )
    );
}

これを実行してみると…

Progression 3.1.62
Copyright (C) 2007-2009 taka:nium
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<scene>
<num>airport</num>
<cap>空港</cap>
<path>image1.jpg</path>
<date>2008/12/24</date>
<category>建物</category>
</scene>

こんな感じで使ってあげてもOKなんですねぇ… 知らなかった。

ちなみにですが、afterの箇所をbefore、applyにしてみると、どうなるか?

nullが返ってきます。

Progressionのコマンド処理あれこれ


Progressionのよく使うコマンド処理を、まとめてみました。

コマンド内でtraceしたい!

いろいろ書き方があります。

var sList:SerialList = new SerialList(null,
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!",{id:"end"})
);
sList.execute();

僕が使うのは、function():void{}かnew Trace()です。

SerialListとParallelList

SerialList
処理が上から順番に行われる
ParallelList
処理が同時に行われる

★SerialListの例

var sList:SerialList = new SerialList(null,
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!",{id:"end"})
);
sList.execute();

これを実行すると、Progression→一秒経過→は→一秒経過→楽しいな→一秒経過→!!のように、上から順番に処理が行われます。

★ParallelListの例

var pList:ParallelList = new ParallelList(null,
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!",{id:"end"})
);
pList.execute();

これを実行すると、「Progressionは楽しいな!!」が同時に表示されます。つまり、全ての処理が同時に行われるということです。

ショートハンドが使えるよ!

SerialListの中にショートハンド([])を使うことで、ParallelListへ。ParallelListの中にショートハンド([])を使うことで、SerialListに変換することが出来ます。

★SerialList→ParallelListの例

var sList:SerialList = new SerialList(null,
    [    
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!",{id:"end"})
    ]
);
sList.execute();

これを実行すると、「Progressionは楽しいな!!」が同時に表示されます。

★ParallelList→SerialListの例

var pList:ParallelList = new ParallelList(null,
    [    
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!",{id:"end"})
    ]
);
pList.execute();

これを実行すると、Progression→一秒経過→は→一秒経過→楽しいな→一秒経過→!!のように、上から順番に(SerialListとして)処理が行われます。

コマンドにリストを追加したい!(末尾の場合)

コマンドのリストに他の処理を追加したいという場合。リストの末尾に追加するには、addCommandを使ってあげればOK。

var sList:SerialList = new SerialList(null,  
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!")
);
sList.execute();
//新たにリストを追加
var list:SerialList = new SerialList(null,
    new Wait(1000),
    new Trace("★★★★★★")
);
//addCommandで追加してあげる
sList.addCommand(list);

これを実行すると、こんな感じになります。

Progression

楽しいな
!!
★★★★★★

sListの末尾にlistが追加されました。

配列にpushするみたいな感じかと…

コマンドにリストを追加したい!(途中の場合)

コマンドのリストに他の処理を追加したいという場合。リストの途中に追加するには、insertCommandを使ってあげればOK。

var sList:SerialList = new SerialList(null,  
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Func(function(){
        trace("は" )}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!")
);
sList.execute();
//新たにリストを追加
var list:SerialList = new SerialList(null,
    new Wait(1000),
    new Trace("やっぱり")
);
//insertCommandで追加してあげる
sList.insertCommand(list);

これを実行すると、困ったことになります。

Progression
やっぱり

楽しいな
!!

Progressionの処理が行われた後(表示された後)で、insertCommandされてしまいます。

今回は、以下の様にしたいと思っています。

Progression

やっぱり
楽しいな
!!

方法はいろいろあるかと思いますが、今回はgetCommandByIdを使ってみました。

var sList:SerialList = new SerialList(null,
    new Func(trace,["Progression"] ),
    new Wait(1000),
    new Trace(("は" ),{id:"middle"}),
    new Wait(1000),
    function():void{
        trace("楽しいな")
    },
    new Wait(1000),
    new Trace("!!")
);
sList.execute();

//getCommandByIdを使って、コマンドのインスタンスを取得しておく
var command:Command = sList.getCommandById("middle");
var list:SerialList = new SerialList(null,
    new Wait(1000),
    new Trace("やっぱり")
);

//Commandクラスのafterメソッドを使って、「は」が表示された後に、処理を割り込ませる
command.after(function():void{sList.insertCommand(list)});

これを実行してみると、

Progression

やっぱり
楽しいな
!!

末尾にリストを追加する場合、予めidを付けておいて、getCommandByIdとinsertCommandを使って行うこともできますが、折角addCommandというものがあるので、そちらを使った方がスマートかと思われます。

XMLファイルを読み込む

こんな感じのXMLファイルがあったとします。

<?xml version="1.0" encoding="UTF-8" ?>
<scene>		
	<num>airport</num>
	<cap>空港</cap>
	<path>image1.jpg</path>
	<date>2008/12/24</date>
	<category>建物</category>
</scene>

で、これをコマンド内で読み込みたい場合。

protected override function _onLoad():void {
    // 実行したいコマンドを登録します。
    addCommand(
        new LoadURL( new URLRequest( "sample.xml" ) ),
        function():void {
            trace(this.latestData);
        }
    );
}

これを実行してみると…

Progression 3.1.62
Copyright (C) 2007-2009 taka:nium
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<scene>
<num>airport</num>
<cap>空港</cap>
<path>image1.jpg</path>
<date>2008/12/24</date>
<category>建物</category>
</scene>

このようにコマンドを使って読み込んでおいた(外部読み込みの)データは、latestDataを使うことによって取得出来ます。

ステージをグリグリしてみる


前回のエントリ(Progression + CMS + PaperVision3D)で作ってみたPhoto Album的なもの。

(これなら)わざわざ3Dにする必要あるの? って感じだったので、ステージをマウスでドラッグすると、カメラの視点が変わるようにしてみました。

3D超~初心者の僕は、PaperVision3DにPlaneなどをaddChildした際、(位置指定をしない場合)ステージの中央に配置されることに、戸惑ってしまいまして…

「何で、左上(Flashの場合の原点)じゃないの?」って。

こんな基本的なことを理解しておらず、かなりの時間を費やしてしまいました。

きちんと3Dの勉強します!

Home > Archives > 2009-06

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top