Flex Examples » FxRotate3D http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Incrementally 3D rotating objects using the Spark Rotate3D effect in Flex 4 http://blog.flexexamples.com/2008/10/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/ http://blog.flexexamples.com/2008/10/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/#comments Sun, 26 Oct 2008 06:48:28 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/ 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 [...]]]> 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.