Incrementally 3D rotating objects using the Spark Rotate3D effect in Flex 4

By Peter deHaan On October 25, 2008 · 16 Comments

In a previous example, “3D Rotating objects in Flex 4 using the Spark Rotate3D effect and Flash Player 10″, we saw how you could rotate objects in 3D space from 0 to 360 degrees along the X, Y, and Z axis using the Spark Rotate3D effect in the Flex 4 SDK.

The following example shows how you can rotate an image relative to its current rotation by setting the yBy property on the Spark Rotate3D instance.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

View source is enabled in the following example.

Anti-Spam Protection by WP-SpamFree