Flexで遠近を使う方法

ActionScriptでクラスを作る派な方はみなさんroot.stageや
stageに対して、PerspectiveProjectionを使用しているので、Flexではどうするんだろうなぁって
ことでいろいろと調べてやってみました。
こんな感じ
http://moeten.info/flex/20091201_xmasTree/bin-release/main.html

回転はマクロスを意識しております（＾−＾）

Flexでの遠近の設定方法

FlexではいったんPerspectiveProjectionを作成して、キャンバスなどに指定すればＯＫです。
ですので、個別のキャンバスに設定することも可能です。

//パースペクティブの変更
var pp:PerspectiveProjection = new PerspectiveProjection();
//中心に設定
pp.projectionCenter = new Point( this.width/2 , this.height/2);
pp.fieldOfView = 1;
myScene.transform.perspectiveProjection = pp;

ソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #B5B5B5]" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.controls.Image;
import mx.effects.easing.Linear;
[Embed(source="minisqure.png")][Bindable]private var minisqure:Class;
//初期化関数
private function init():void{
    //パースペクティブの変更
    var pp:PerspectiveProjection = new PerspectiveProjection();
    //中心に設定
    pp.projectionCenter = new Point( this.width/2 , this.height/2);
    pp.fieldOfView = 1;
    myScene.transform.perspectiveProjection = pp;
    //スライダー初期値設定
    pps.value = this.width / 2;
    fvs.value = 1;
    //複数オブジェクトの一括配置
    var num:int = 8;
    for( var i:int = 0 ; i < num ; i ++ ){
        var image:Image = new Image();
        image.source = minisqure;
        var canvas:Canvas = new Canvas();
        canvas.clipContent = false;
        canvas.width = 1;
        canvas.height = 1;
        var xy:int = 500;
        var angle:int = 0;
        canvas.x = Math.cos(angle + i / num * Math.PI * 2) * 300;
        canvas.y = Math.sin(angle + i / num * Math.PI * 2) * 300;
        canvas.addChild( image );
        image.setStyle("verticalCenter","0");
        image.setStyle("horizontalCenter","0");
        myAnim.play([canvas]);
        myCanvas.addChild(canvas);
    }
}
//スライダーチェンジイベント
private function onSliderChange():void{
    var pp:PerspectiveProjection = new PerspectiveProjection();
    pp.projectionCenter = new Point( pps.value , pps.value);
    pp.fieldOfView = fvs.value;
    myScene.transform.perspectiveProjection = pp;
}
]]>
</mx:Script>
<!--アニメーションセット-->
<mx:Parallel id="myAnim">
    <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="3000" repeatCount="0"/>
    <mx:Rotate angleFrom="360" angleTo="0" easingFunction="Linear.easeInOut" duration="10000" repeatCount="0"/>
</mx:Parallel>
<mx:Parallel id="myAnim2">
    <mx:AnimateProperty property="rotationY" fromValue="360" toValue="0" easingFunction="Linear.easeInOut" duration="3000" repeatCount="0"/>
</mx:Parallel>
<mx:Parallel id="myAnim3">
    <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="5000" repeatCount="0"/>
    <mx:Rotate angleFrom="360" angleTo="0" easingFunction="Linear.easeInOut" duration="5000" repeatCount="0"/>
</mx:Parallel>
<mx:Parallel id="myAnim4">
    <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="5000" repeatCount="0"/>
    <mx:Rotate angleFrom="0" angleTo="360" easingFunction="Linear.easeInOut" duration="5000" repeatCount="0"/>
</mx:Parallel>
<!--3D空間-->
<mx:Canvas id="myScene" clipContent="false" verticalCenter="0" horizontalCenter="0" scaleX="0.5" scaleY="0.5">
    <mx:Canvas width="1" height="1" clipContent="false" creationCompleteEffect="myAnim2" scaleX="0.8" scaleY="0.8">
        <mx:Image source="star.png" verticalCenter="0" horizontalCenter="0" alpha="0.8"/>
        <mx:Image source="squre.png" verticalCenter="0" horizontalCenter="0" alpha="1" blendMode="multiply"/>
        <mx:Canvas id="myCanvas" clipContent="false" width="1" height="1" alpha="0.5"/>
    </mx:Canvas>
    <mx:Canvas width="1" height="1" clipContent="false" creationCompleteEffect="myAnim4">
        <mx:Image source="circle.png" verticalCenter="0" horizontalCenter="0" alpha="0.8" blendMode="multiply"/>
    </mx:Canvas>
    <mx:Canvas width="1" height="1" clipContent="false" creationCompleteEffect="myAnim3">
        <mx:Image source="circle.png" verticalCenter="0" horizontalCenter="0" alpha="0.8" blendMode="multiply"/>
    </mx:Canvas>
</mx:Canvas>
<!--スライダー-->
<mx:Label x="10" y="10" text="遠近テスト" fontSize="26" fontWeight="bold"/>
<mx:HRule x="10" y="56" width="100%"/>
<mx:Canvas x="26" y="76" width="320" height="122" backgroundColor="#FFFFFF" cornerRadius="10" backgroundAlpha="0.51" borderStyle="solid">
    <mx:Label x="10" y="26" text="fieldOfView"/>
    <mx:Label x="10" y="74" text="centerPoint"/>
    <mx:HSlider x="108" y="74" minimum="0" maximum="{this.width}" change="onSliderChange()" liveDragging="true" snapInterval="1" allowTrackClick="true" id="pps"/>
    <mx:HSlider x="108" y="26" minimum="1" maximum="179" change="onSliderChange()" liveDragging="true" snapInterval="1" allowTrackClick="true" id="fvs"/>
</mx:Canvas>
</mx:Application>

参考リンク

Working in 3D with Flash Player 10/ActionScript 3 101

やっとこさ見つけたサイト。FlexでのPerspectiveProjection。

PerspectiveProjection

PerspectiveProjectionが持つプロパティなど

三角関数を使った円状の配置

sin,cosで円状に配置。