Flex/ActionScript – rotate Sprite around its center

actionscript-3apache-flexflash

I have created a Sprite in Actionscript and rendered it to a Flex Canvas. Suppose:

var fooShape:Sprite = new FooSpriteSubclass();

fooCanvas.rawChildren.addChild(myshape);

//Sprite shape renders on screen

fooShape.rotation = fooNumber;

This will rotate my shape, but seems to rotate it around the upper-left
point of its parent container(the canvas).

How can I force the Sprite to rotate about is own center point? I could obviously
write code to calculate the rotation, and then have it re-render, but I think there
must be a built-in way to do this, and certainly do not want to 'reinvent the wheel'
if possible.

I am using FlexBuilder, and therefore do not have access to the full Flash API.

Thank you much!

Best Answer

The following steps are required to rotate objects based on a reference point (using Matrix object and getBounds):

Matrix translation (moving to the reference point)
Matrix rotation
Matrix translation (back to original position)

For example to rotate an object 90 degrees around its center:

// Get the matrix of the object  
var matrix:Matrix = myObject.transform.matrix; 

// Get the rect of the object (to know the dimension) 
var rect:Rectangle = myObject.getBounds(parentOfMyObject); 

// Translating the desired reference point (in this case, center)
matrix.translate(- (rect.left + (rect.width/2)), - (rect.top + (rect.height/2))); 

// Rotation (note: the parameter is in radian) 
matrix.rotate((90/180)*Math.PI); 

// Translating the object back to the original position.
matrix.translate(rect.left + (rect.width/2), rect.top + (rect.height/2));

Key methods used:

Related Solutions

Apache – Extending Sprite Using Flex

Are apps that just extend Sprite (used in the FlexBuilder IDE, for instance) a viable way of doing an application, or are they just for HelloWorlds?

In Flex you have the option of extending the Sprite class or implementing the IUIComponent class. There are differences though.

Under what conditions would you not bother to use the Flash IDE?

Do you need dataservices? In that case, I am not too sure how easy it is to work with the Flash IDE.

Can MXML files be used with apps that just extend Sprite?

Not too sure what you mean by apps. However, AS3 components work just fine with MXML. Sprites will have to be wrapped up in some sort of a IUIComponent if you are using it with MXML. MXML is syntactic sugar. It is compiled into AS3 and as such may not be as efficient if you were to code them up.

This blogpost may be of interest to you.

Actionscript 3.0 Rotating a sprite around its center point

fix the function to this

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

The 45 in your code is the degrees that you want to rotate by, just change that value.

Best Answer

Related Solutions

Apache – Extending Sprite Using Flex

Actionscript 3.0 Rotating a sprite around its center point

Related Topic