How to center a rotation in AS3

[kitsunegari]

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

Code: [Select]

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

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

[Ronald Wernecke]

rotate means - rotate around your registration point.

If the registration point is in the center, rotation is ok.

[kitsunegari]

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

Code: [Select]

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

[jsliu111]

You can do it in this way:

Code: [Select]

var aroundPoint:Point = resetCenterPoint(displayObj, displayObj.width/2, displayObj.height/2);
(displayObj as DisplayObject).addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent):void
{
rotate(displayObj, 45, aroundPoint.x, aroundPoint.y);
}

function resetCenterPoint(obj:DisplayObject, orgX:Number, orgY:Number):Point
{
var m:Matrix = obj.transform.matrix;

var orgXY:Point = m.deltaTransformPoint(new Point(orgX, orgY));
orgXY.x += m.tx;
orgXY.y += m.ty;
return orgXY;
}

function rotate(obj:DisplayObject, angle:Number, aroundX:Number, aroundY:Number):void
{
var m:Matrix = obj.transform.matrix;

//var orgXY:Point = resetCenterPoint(obj, obj.width/2, obj.height/2);

var cm:Matrix = new Matrix(1, 0, 0, 1, -aroundX, -aroundY);
m.concat(cm);

m.rotate(Math.PI * angle / 180);

var rcm:Matrix = new Matrix(1, 0, 0, 1, aroundX, aroundY);
m.concat(rcm);

 obj.transform.matrix = m;
}

You also can check my blog: Flash Flex Rotate Around a Point by Matrix