Rotating images using the Rotate class

10 Responses to Rotating images using the Rotate class

1. lala says:

   October 2, 2008 at 5:37 pm

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

   Reply
2. peterd says:

   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 says:

   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
   • Peter deHaan says:

     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
4. halflife_baby says:

   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
5. Mafaz says:

   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
6. Allen says:

   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
7. Johnny Doe says:

   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
   • Peter deHaan says:

     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
8. Circass says:

   August 10, 2010 at 10:59 pm

   Hello,
   i am trying to rotate my image which is a child of my view panel.
   I wrote something like that :

   var rotate:mx.effects.Rotate = new mx.effects.Rotate();
   //var iTmp:Image = new Image();
   //iTmp = viewerPanel.getChildAt(0) as Image;
   rotate.target= viewerPanel.getChildAt(0);
   rotate.angleFrom=viewerPanel.getChildAt(0).rotation;
   rotate.angleTo=viewerPanel.getChildAt(0).rotation – 90;
   rotate.duration=1000;
   rotate.originX=viewerPanel.getChildAt(0).width/2;
   rotate.originY=viewerPanel.getChildAt(0).height/2;
   rotate.play();

   it rotates the panel from top left.

   then i wrote something like that :
   var iTmp:Image = new Image();
   iTmp = viewerPanel.getChildAt(0) as Image;
   var q:Number = 90 * Math.PI / 180 // 30 degrees in radians
   var m:Matrix = new Matrix();
   var centerX:Number = iTmp.width / 2;
   var centerY:Number = iTmp.height /2;
   m.translate(-1 * centerX, -1 * centerY);
   m.rotate(q);
   viewerPanel.removeChildAt(0);
   viewerPanel.addChild(iTmp);
   and this made the same thing.

   So How can i rotate an image which is added to a panel as a child ?
   Thank you.

   Reply