Rotate a MovieClip/DisplayObject around a point

1 Flares Twitter 0 Facebook 0 Google+ 1 Email -- Filament.io 1 Flares ×

This is something I have been looking for for a couple of hours. When I finally found out how to do it the way I needed to do it, I stepped on a blog explaining that a function actually exists for that specific need (see http://jobemakar.blogspot.com/2007/06/rotating-around-point.html)

This function is part of the fl package (comes with Flash but not the Flex SDK) and is called : rotateAroundInternalPoint.

The function is actually really simple when you understand how the Matrix.transformPoint() method actually works.
In a few lines, I’ll try to explain how the rotateAroundInternalPoint method works:

[sourcecode language=’as3′]
// get matrix object from your MovieClip (mc)
var m:Matrix = mc.transform.matrix;

// set the point around which you want to rotate your MovieClip (relative to the MovieClip position)
var point:Point = new Point(10, 10);

// get the position of the MovieClip related to its origin and the point around which it needs to be rotated
point = m.transformPoint(point);
// set it
m.translate( -point.x, -point.y);

// rotate it of 30°
m.rotate(30 * (Math.PI / 180));

// and get back to its “normal” position
m.translate(point.x, point.y);

// finally, to set the MovieClip position, use this
mc.transform.matrix = m;

// or this
mc.x = m.tx;
mc.y = m.ty;
mc.rotation += 30;
[/sourcecode]

1 Flares Twitter 0 Facebook 0 Google+ 1 Email -- Filament.io 1 Flares ×

4 Comments

  1. Paul

    Hi,

    I just stumbled upon your code and it has helped me so much… thanks a lot for publishing it – much appreciated. Paul.

  2. Hi,

    This approach has one disadvantage – the rotation is always relative to the previous rotation and after a large number of iterations rounding error is accumulated. A possible solution can be found here:

    http://itforum.webrichservices.com/viewtopic.php?f=127&t=14

    Thank you for your original posing anyway, it helped me to understand a bit better how Flash works…

  3. mhhh tkx a lot for this link

  4. Sergio

    hello, more than 2 years later and this post keeps saving lives!

    🙂 works perfectly for my aimed usage.

    have a good one thomas.

Leave a Comment

*