# How to center a rotation in AS3

**URL:** <https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852>\
**Category:** flash\
**Created:** [July 13, 2008, 6:13pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852 "2008-07-13T18:13:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kitsunegari](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kitsunegari](https://forum.kirupa.com/u/kitsunegari)\
**Post date:** [July 13, 2008, 6:13pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/1 "2008-07-13T18:13:18Z")

</div>

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

```auto
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

---

<div class="post-metadata">

**Author:** ![yaim0310](https://avatars.discourse-cdn.com/v4/letter/y/85e7bf/32.png) [@yaim0310](https://forum.kirupa.com/u/yaim0310)\
**Post date:** [July 13, 2008, 7:58pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/2 "2008-07-13T19:58:09Z")

</div>

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

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![kitsunegari](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kitsunegari](https://forum.kirupa.com/u/kitsunegari)\
**Post date:** [July 13, 2008, 9:34pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/3 "2008-07-13T21:34:59Z")

</div>

thanks I’ll test it

---

<div class="post-metadata">

**Author:** ![kitsunegari](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kitsunegari](https://forum.kirupa.com/u/kitsunegari)\
**Post date:** [July 13, 2008, 9:56pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/4 "2008-07-13T21:56:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yaim0310](https://avatars.discourse-cdn.com/v4/letter/y/85e7bf/32.png) [@yaim0310](https://forum.kirupa.com/u/yaim0310)\
**Post date:** [July 13, 2008, 10:17pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/5 "2008-07-13T22:17:20Z")

</div>

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.

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![kitsunegari](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kitsunegari](https://forum.kirupa.com/u/kitsunegari)\
**Post date:** [July 13, 2008, 10:22pm UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/6 "2008-07-13T22:22:33Z")

</div>

my mistake, I get it, thanks

---

<div class="post-metadata">

**Author:** ![kitsunegari](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kitsunegari](https://forum.kirupa.com/u/kitsunegari)\
**Post date:** [July 14, 2008, 10:24am UTC](https://forum.kirupa.com/t/how-to-center-a-rotation-in-as3/265852/7 "2008-07-14T10:24:36Z")

</div>

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

```auto
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](http://board.flashkit.com/board/showthread.php?t=736502&highlight=center+point)