Rotating images using the Rotate class

by Peter deHaan on December 10, 2007

in Rotate

The following example shows how you can rotate an image around an arbitrary X and Y origin using the <mx:Rotate/> tag in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/10/rotating-images-using-the-rotate-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Rotate id="rotate"
            target="{img}"
            angleFrom="0"
            angleTo="360"
            duration="1000"
            originX="{imgOriginX.value}"
            originY="{imgOriginY.value}" />
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="originX:">
                <mx:NumericStepper id="imgOriginX"
                        minimum="0"
                        maximum="{img.width}"
                        value="0" />
            </mx:FormItem>
            <mx:FormItem label="originY:">
                <mx:NumericStepper id="imgOriginY"
                        minimum="0"
                        maximum="{img.height}"
                        value="0" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Rotate"
                        click="rotate.play();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Image id="img" source="@Embed('flex_logo.jpg')" />
 
</mx:Application>

View source is enabled in the following example.

{ 9 comments… read them below or add one }

1 lala October 2, 2008 at 5:37 pm

i wante to do that when i rollOver why can i do that ??? please

Reply

2 peterd October 2, 2008 at 6:50 pm

lala,

You can try setting the rollOverEffect style/effect:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Rotate id="rotate"
            target="{img}"
            angleFrom="0"
            angleTo="360"
            duration="1000"
            originX="{img.height/2}"
            originY="{img.width/2}" />

    <mx:Image id="img"
            source="fx_appicon-tn.gif"
            rollOverEffect="{rotate}" />

</mx:Application>

Peter

Reply

3 MechanisM October 15, 2009 at 2:58 am

How to set up rotate on rollOver in loop?
I mean when mouse over image its still rotating untill mouse gone out?

Reply

4 Peter deHaan October 15, 2009 at 8:31 am

@MechanisM,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Rotate id="rotatr"
            angleFrom="0"
            angleTo="360"
            repeatCount="0" />
 
    <mx:Image id="logo"
            source="flex_logo.jpg"
            mouseOver="rotatr.play([event.currentTarget]);"
            mouseOut="rotatr.stop();" />
 
</mx:Application>

Peter

Reply

5 halflife_baby December 9, 2009 at 10:24 pm

Hi,
How to rotate an image to 90 degree when the button is clicked?
If i click the button again, it should totate to 180 degree. (ie) agian it should rotate to 90 degree from the last position.
I was working with this issue for the last 3 days. Can some one help me?

Reply

6 Mafaz December 11, 2009 at 7:15 am

Hello there,
The example is a nice one. How can I control the rotation of an image with a mouseDown event? Like I want control on the rotation of the image. What am I supposed to do. Any hints please?

Reply

7 Allen February 4, 2010 at 9:37 am

Hi,

The rotation feature is good. I need to control the rotation angle by an external feed. Would you have any sample code? Thank You

Reply

8 Johnny Doe February 6, 2010 at 9:56 am

More importantly… How can I rotate an images rotateX, rotateY, and rotateZ? 3D rotation using Flex 3, without special libs or plugins… is it possible?

Reply

9 Peter deHaan February 6, 2010 at 10:17 am

@Johnny Doe,

I believe it’s possible in Flex 3 if you target Flash Player 10.

Peter

Reply

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: