Rotating a Sprite around any point
Click once to activate, then click anywhere to move the registration point. Use SPACE to change the object or any other key to change the direction of the rotation.
This time I want to share a simple solution to a relatively simple, but annoying problem.
The problem: the Sprite.rotation property rotates the object always around the registration point of the Sprite. If you need to rotate it around some other point, it's not automatic.
One way to achieve this is to move the content inside the Sprite in order to change its position in relation to the registration point. It works, but it's not elegant and not very handy if the Sprite has many children - you would need to move all of them.
Another way is to wrap your Sprite into another Sprite and rotate the parent. This solution is a bit better, but still has lots of shortcomings. And what about if you need to change the registration point of the object during rotation?
Solution: the Rotator class can be used as a replacement for the default Sprite.rotation property. This class uses a combination of trigonometric functions to rotate an object around a point along with the rotation property itself to create a correct circular movement. It allows you to have a proper rotation no matter if the point is placed inside the rotated object or outside of it. And, what's most fun, you can change the registration point at any moment. Play with the demo above to see it in action.
Source. Check out the source of the class here, or just grab a ZIP with the complete demo here.
Example. It can be used either directly, in an 'ENTER_FRAME' animation, or in combination with Tweener or other similar libraries. It works not only with a Sprite, but also with any class that extends the DisplayObject.
Use it like this:
-
var s:Sprite = new Sprite();
-
var r:Rotator = new Rotator(s, new Point(10,10);
-
r.rotation = 45;
or like this:
-
import caurina.transitions.Tweener;
-
-
var s:Sprite = new Sprite();
-
var r:Rotator = new Rotator(s, new Point(10,10);
-
Tweener.addTween(r, { rotation:45, time:1, transition:"linear"} );
This is a handy class, however you should look into the MatrixTransformer class so that you don’t need to mess with x and y coords of the target object
the relevant methods are rotateAroundExternalPoint() and rotateAroundInternalPoint()
[code]
import fl.motion.MatrixTransformer;
this.addEventListener ( Event.ENTER_FRAME, draw );
var xPoint:int = 200;
var yPoint:int = 200;
var angle:int = 5;
this.stage.addEventListener ( MouseEvent.MOUSE_DOWN, changeRotationPoint );
function changeRotationPoint ( evt:MouseEvent ):void
{
xPoint = this.stage.mouseX;
yPoint = this.stage.mouseY;
}
function draw ( evt:Event ):void
{
var matrix:Matrix = clip.transform.matrix;
MatrixTransformer.rotateAroundExternalPoint(matrix, xPoint, yPoint, angle );
clip.transform.matrix = matrix;
}
[/code]
cheers,
A.
Hi, That’s a pretty nice class this MatrixTransformer, and somehow I missed it, and have literally reinvented the wheel here :)
However this one also needs to be wrapped into a class with a getter/setter function, so it can be used with Tweener, so I will take a look at that. Thanks for the tip, Andrew!
Hi Bartek
There is even a much simpler solution,
just define the Sprite, using negative left upper corner coordinate
like this:
// Define and create the inner rectangle:
innerRect.graphics.lineStyle(1, 0x00FF00, 1);
innerRect.graphics.beginFill(0xFFFFFF);
innerRect.graphics.drawRect(-100,-50,200, 100);
innerRect.graphics.endFill();
innerRect.alpha = 0.6;
addChild (innerRect);
innerRectRotationAngle = -180;
innerRect.x = 300;
innerRect.y = 200;
This rectangle of w 200 h 100
will now rotate around its center!
Saw this in another sample somewhere on the web.
Now, why didn’t i think of this before?
Regards
of course this is less flexible
@Ted yes, this would be less flexible. If you need to move the center only once – your solution is the simplest and probably the best one for such a case. The one above was designed to change the registration point many times and still keep a fluid movement.
I’d serch in google for a few hour and finnaly finded you genial post :) This is so simply to rotate sprite around self center.
Ted F.A. – I LIKE YOUR’s solution.
Regards.
a simpler solution might be to place the sprite into a container sprite, modify both their x&y properties, and then rotate the container sprite.
opps, didn’t read the 4th paragraph
Thank you, u saved my life!
thank you for this class. i just needed quick and working solution and here it is!
Hi!
i want to use this technique with caurina tweener and tween classes….but i’m a beginner and i found some difficulties. i want to reproduce a linear scaling animation from right to left(right side of my moveclip stay fixed and the left side contract or expand). how can i change the code?
thank a lot!!!!