How to center a rotation in AS3

programming flash
1

Hi
I have searched for hours for the solution on google and forums and I still can’t figure out how to center a rotation on movieclip in AS3.
As you can see in my code, I’m trying to adjust on the fly the x and y properties so that the movieclip gives the impression to rotate from its center and not from its corner at 0,0

var myclip:MovieClip = new MovieClip();
myclip.buttonMode = true;
myclip.graphics.beginFill(0);
myclip.graphics.drawRect(150, 150, 100, 100);
addChild(myclip);
myclip.addEventListener(MouseEvent.CLICK,rotate);
function rotate(e:Event){
 myclip.rotation += 2;
 myclip.x = (stage.width/2) - (myclip.width/2);
 myclip.y = (stage.height/2) - (myclip.height/2);
}

but it doesn’t work and the clip does not rotate well :confused:
Please help me if you have any readymade snippet to make a clip rotate from its center or have any idea of what I should modify in my code. I’m kind of lost
Thanks

2

or you can just offset it when you create it so it’s 0,0 is in the center

var myclip:MovieClip = new MovieClip();
myclip.buttonMode = true;
myclip.graphics.beginFill(0);
myclip.graphics.drawRect(-50, -50, 100, 100); // offset x and y -50 on 100x100 square
myclip.graphics.endFill();
myclip.x = stage.stageWidth/2;
myclip.y = stage.stageHeight/2;
addChild(myclip);
myclip.addEventListener(MouseEvent.CLICK,rotate);
function rotate(e:Event){
 myclip.rotation += 2;
}
3

thanks I’ll test it

4

yaim,
I just tested your code and I finally get the same problem if I don’t fill myclip with a graphic object but with an image instead
Then the clip rotate once again from the upper left corner

How can I make it so that it rotate from center no matter what is the width and height of myclip?

thanks

5

if you are putting an image from your library you can do the same thing and go in and change the x and y to offset. but if you are loading an external image with loader, the only way i can think of off the top of my head is to cheat and put it in another object with an offset x and y and rotate that object.

var myclip:MovieClip = new MovieClip();
var myrotation:MovieClip = new MovieClip();
myclip.graphics.beginFill(0);
myclip.graphics.drawRect(0, 0, 100, 100);
myclip.graphics.endFill();

addChild(myrotation);
myrotation.addChild(myclip);

myclip.x = -myclip.width/2;
myclip.y = -myclip.height/2;
myrotation.x = stage.stageWidth/2;
myrotation.y = stage.stageHeight/2;
myrotation.addEventListener(MouseEvent.CLICK,rotate);
function rotate(e:Event){
	 myrotation.rotation += 2;
}
6

my mistake, I get it, thanks

7

guys, for your information, the following code works perfectly well too (with no need to “trick” the rotation center with a container clip)

var myspr=new Sprite();
myspr.x=100;
myspr.y=100;
addChild (myspr);
var point:Point=new Point(myspr.x+myspr.width/2, myspr.y+myspr.height/2);
rotateAroundCenter(myspr,45);

function rotateAroundCenter (ob:*, angleDegrees) {
    var m:Matrix=ob.transform.matrix;
    m.tx -= point.x;
    m.ty -= point.y;
    m.rotate (angleDegrees*(Math.PI/180));
    m.tx += point.x;
    m.ty += point.y;
    ob.transform.matrix=m;
}

In my opinion, this is the best solution in AS3 so far

Found here: http://board.flashkit.com/board/showthread.php?t=736502&highlight=center+point