Wednesday, April 28, 2010

3D Rotation in Flex

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/ -->
<s:Application name="Spark_Rotate3D_yBy_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
     <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import spark.effects.Animate;
 
            private function playEffect(target:Animate, angle:Number):void {
                if (!target.isPlaying) {
                    rotY += angle;
                    target.play();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Number id="rotY">0</fx:Number>
        <s:Rotate3D id="fxRotate3DNeg" target="{image}" angleYTo="{rotY}" autoCenterTransform="true" />
        <s:Rotate3D id="fxRotate3DPos" target="{image}" angleYTo="{rotY}" autoCenterTransform="true" />
    </fx:Declarations>
 
    <s:VGroup id="vGroup" left="10" top="10">
        <s:Button id="fxButtonNeg"
                label="Rotate3D (angleYTo - 30)"
                autoRepeat="true"
                repeatDelay="500"
                repeatInterval="100"
                buttonDown="playEffect(fxRotate3DNeg, -30);" />
        <s:Button id="fxButtonPos"
                label="Rotate3D (angleYTo + 30)"
                autoRepeat="true"
                repeatDelay="500"
                repeatInterval="100"
                buttonDown="playEffect(fxRotate3DNeg, 30);" />
    </s:VGroup>
 
    <s:BitmapImage id="image"
            source="@Embed('assets/fx_appicon-tn.gif')"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>