Rotating an image along its x-axis, y-axis, and z-axis in Flex 4 and Flash Player 10

The following example shows how you can rotate a Flex Image control along its x-axis, y-axis, and z-axis using the new rotationX, rotationY, and rotationZ properties in Flash Player 10 and Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/ -->
<s:Application name="Spark_BitmapImage_rotationX_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="rotationX:" direction="horizontal">
                <s:HSlider id="rXSlider"
                        minimum="-360" maximum="360"
                        value="0"
                        snapInterval="2"
                        width="180"
                        change="img.rotationX = rXSlider.value;" />
                <s:Label text="{rXSlider.value}" width="30" />
            </mx:FormItem>
            <mx:FormItem label="rotationY:" direction="horizontal">
                <s:HSlider id="rYSlider"
                        minimum="-360" maximum="360"
                        value="0"
                        snapInterval="2"
                        width="180"
                        change="img.rotationY = rYSlider.value;" />
                <s:Label text="{rYSlider.value}" width="30" />
            </mx:FormItem>
            <mx:FormItem label="rotationZ:" direction="horizontal">
                <s:HSlider id="rZSlider"
                        minimum="-360" maximum="360"
                        value="0"
                        snapInterval="2"
                        width="180"
                        change="img.rotationZ = rZSlider.value;" />
                <s:Label text="{rZSlider.value}" width="30" />
            </mx:FormItem>
        </mx:Form>
        <s:Button label="Reset" click="reset();" height="100%" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            private function reset():void {
                rXSlider.value = 0;
                rYSlider.value = 0;
                rZSlider.value = 0;
                img.rotationX = 0;
                img.rotationY = 0;
                img.rotationZ = 0;
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage id="img"
            source="@Embed('assets/Fx.jpg')"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

10 thoughts on “Rotating an image along its x-axis, y-axis, and z-axis in Flex 4 and Flash Player 10

  1. I’m getting ‘Could not resolve <HSlider> to a component implementation’ error.

    What am i doing error? I followed the steps as mentioned.

    1. Sorry, the example was quite out of date with API renames and whatnot.
      I updated the example to work with Flex 4.0.0.12025 (not that you care, I just noticed you sent this about 11 months ago so I’m assuming you have stopped checking for a response).

      Peter

  2. I haven’t found anything yet that lets you change the axis of rotation. (Except for a Rotate3D effect) Do you know if there is a way to have the y axis be in the middle of the image, causing it to rotate around its center when rotate Y is changed? In the Documentation, it says the rotate Y is transformed “relative to the 3D parent container.”

  3. For a good understanding: Its not the SDK! Flash 10 provides 3D, not Flex 4, you can also have the same with Flex 3 ….

    Any idea to rotate from the center?? (Except using a Canvas Wrapper) …

    Cheers

Comments are closed.