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

by Peter deHaan on August 2, 2008

in BitmapImage (Spark), beta2

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.

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?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/halo">
    <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"
                        width="180"
                        snapInterval="2"
                        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"
                        width="180"
                        snapInterval="2"
                        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"
                        width="180"
                        snapInterval="2"
                        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('Fx.png')"
            width="100" height="100"
            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.

{ 8 comments… read them below or add one }

1 Steve Walker August 2, 2008 at 11:48 am

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

Reply

2 Raul Riera August 2, 2008 at 12:41 pm

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?

Reply

3 Jeds Gonzales August 18, 2008 at 10:20 pm

As with Raul Riera, I was wondering too.

Reply

4 Hannes November 21, 2008 at 12:39 pm

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

Reply

5 Karthik December 2, 2008 at 1:29 am

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

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

Reply

6 Peter deHaan November 20, 2009 at 7:46 pm

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

Reply

7 ganta November 19, 2009 at 9:55 pm

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

Reply

8 Peter deHaan November 20, 2009 at 7:33 pm

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: