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 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/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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

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

  1. Steve Walker says:

    That is too cool. I am installing the SDK now. Thank you.

  2. Raul Riera says:

    I dont understand the properties, why is the X spinning the icon like that? shouldnt the Y and the X properties be the other way around?

  3. Jeds Gonzales says:

    As with Raul Riera, I was wondering too.

  4. Hannes says:

    The Names of Properties, mean a rotation around the X, Y or Z-axis in the Three dimensional co-ordinate system.

    - x-axis
    | y-axis
    / z-axis

    look here: http://www.actionscript.org/resources/content_images/76/images/rotation_around_axis.gif

  5. Karthik says:

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

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

    • Peter deHaan says:

      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

  6. ganta says:

    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.”

  7. Tom says:

    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

  8. James says:

    is there any way to make this rotate automatically on its own or maybe set it to random?
    that would be sweet!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree