How to rotate a sprite in actionscript on its center

Question

Okay, so ive read lots of stuff on this, and its gotten repetitive, but none of it fixes my problem or its too hard for me to understand. I am trying to get a sprite of a man, looking at him from the top down, to stare at the mouse wherever it goes in the page. However, instead of rotating where his head is, ath the center of the symbol, he rotates at the top left corner of his sprite. Any help?

stage.addEventListener("mouseMove", eyesFollow);

function eyesFollow(e:MouseEvent):void {
     var a = mouseY - man_walking.y;
     var b = mouseX - man_walking.x;
     var radians = Math.atan2(a,b);
     var degrees = ((180/Math.PI)*radians)+90;
     man_walking.rotation = (degrees);
}

note: the one post on this that most fits mine has a solution that is just a broken link, so i cant access it.

Answer 1

Assuming the (x, y) position of a sprite is in the upper-left corner, the general process in high-level Lua-ish psuedo-code (sorry, I'm not quite fluent in Actionscript) would be such as:

function rotate()
  -- ...find how much you want to rotate...

  -- Translate the middle point to (0, 0)
  man.translate(-(man.x + man.width/2), -(man.y + man.height/2))

  -- Rotate it there.
  man.rotate(someTranslation)

  -- Lastly, move it back to where it was
  man.translate((man.x + man.width/2), (man.y + man.height/2))

end

If your library uses a different method of calculating position and origin, you'll need to adjust the ammount you'll need to translate, but the point stands none the less: first translate the image so that it's middle is at (0,0), rotate it, and then move it back.

I hope this helps! :)

Answer 2

Within Flash Pro, you could simply position the symbol so that the 0,0 coordinate is the point you wish to rotate:

Yahoo Astra has a Dynamic Registration class for things like rotating around a point.

This could be implemented as the following, rotating around 100,100:

DynamicRegistration.rotate(man_walking, new Point(100, 100), degrees);

Yahoo Astra DynamicRegistration class:

/*
Copyright (c) 2008 Yahoo! Inc.  All rights reserved.  
The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license
*/
package com.yahoo.astra.utils
{
        import flash.geom.Point;
        import flash.display.DisplayObject;

        /**
         * Allows you to manipulate display objects based on a registration point other
         * than the standard (0,0).
         * 
         * @author Josh Tynjala
         */
        public class DynamicRegistration
        {
                /**
                 * Moves a <code>DisplayObject</code> to a new position (x,y) based on a registration point. The
                 * true position of the object will be (x - registration.x, y - registration.y).
                 * 
                 * @param       target                          the DisplayObject to move
                 * @param       registration            the registration point of the DisplayObject
                 * @param       x                                       the new x position, in pixels
                 * @param       y                                       the new y position, in pixels
                 */
                public static function move(target:DisplayObject, registration:Point, x:Number = 0, y:Number = 0):void
                {
                        //generate the location of the registration point in the parent
                        registration = target.localToGlobal(registration);
                        registration = target.parent.globalToLocal(registration);

                        //move the target and offset by the registration point
                        target.x += x - registration.x;
                        target.y += y - registration.y;
                }

                /**
                 * Rotates a <code>DisplayObject</code> based on a registration point. 
                 * 
                 * @param       target                          the DisplayObject to move
                 * @param       registration            the registration point of the DisplayObject
                 * @param       rotation                        the new rotation angle
                 */
                public static function rotate(target:DisplayObject, registration:Point, degrees:Number = 0):void
                {
                        changePropertyOnRegistrationPoint(target, registration, "rotation", degrees);
                }

                /**
                 * Scales a <code>DisplayObject</code> based on a registration point. 
                 * 
                 * @param       target                          the DisplayObject to move
                 * @param       registration            the registration point of the DisplayObject
                 * @param       scaleX                          the new x scaling factor
                 * @param       scaleY                          the new y scaling factor
                 */
                public static function scale(target:DisplayObject, registration:Point, scaleX:Number = 0, scaleY:Number = 0):void
                {
                        changePropertyOnRegistrationPoint(target, registration, "scaleX", scaleX);
                        changePropertyOnRegistrationPoint(target, registration, "scaleY", scaleY);
                }

                /**
                 * @private
                 * Alters an arbitary property based on the registration point.
                 * 
                 * @param       target                          the DisplayObject to move
                 * @param       registration            the registration point of the DisplayObject
                 * @param       propertyName            the property to change
                 * @param       value                           the new value of the property to change
                 */
                private static function changePropertyOnRegistrationPoint(target:DisplayObject, registration:Point, propertyName:String, value:Number):void
                {
                        //generate the location of the registration point in the parent
                        var a:Point = registration.clone();
                        a = target.localToGlobal(a);
                        a = target.parent.globalToLocal(a);

                        target[propertyName] = value;

                        //after the property change, regenerate the location of the registration
                        //point in the parent
                        var b:Point = registration.clone();
                        b = target.localToGlobal(b);
                        b = target.parent.globalToLocal(b);

                        //move the target based on the difference to make it appear the change
                        //happened based on the registration point
                        target.x -= b.x - a.x;
                        target.y -= b.y - a.y;
                }

        }
}

Answer 3

try this?

stage.addEventListener("mouseMove", eyesFollow);
var cw:Number = man_walking.width/2,
            ch:Number = man_walking.height/2;

function eyesFollow(e:MouseEvent):void {
    var a = mouseY - man_walking.y;
    var b = mouseX - man_walking.x;
    var radians = Math.atan2(a,b);
    var degrees = ((180/Math.PI)*radians)+90;
    var A:Point=man_walking.parent.globalToLocal(man_walking.localToGlobal(new Point(cw,ch)));
    man_walking.rotation = (degrees);
    var B:Point=man_walking.parent.globalToLocal(man_walking.localToGlobal(new Point(cw,ch)));
    man_walking.y+=A.y - B.y;
    man_walking.x+=A.x - B.x;
}