Rotating over a bitmapCenter

This is the best way to rotate a bitmap over his own center?

class RotatingBitmap extends Bitmap {
// the intended location, since x and y will be changing
public var xloc:Float;
public var yloc:Float;
// the center x,y of the rotation
public var xcenter:Float;
public var ycenter:Float;

public function new(asset:Dynamic) {
// load the asset and add to the stage

public function update() {
// here’s where the magic happens

            // define the rotation parms

var mymatrix:Matrix = new Matrix();

            // create a point to represent the center

var mypoint = new flash.geom.Point(xcenter,ycenter);

            // transform into a new point

var newpoint:flash.geom.Point = mymatrix.transformPoint(mypoint);
// move the bitmap to the proper new location
this.x = xloc-newpoint.x;
this.y = yloc-newpoint.y;



Taken from:

I implented it but the result looks a little jaggy look and with a small disturbing “vibration” in HTML5 output

Any advice to achieve a better result would be appreciated.


How about adding bitmap to container, centering it and rotating container instead?

var container:Sprite = new Sprite();
bitmap.smoothing = true; //apply smoothing to bitmap
bitmap.x = -bitmap.width/2;
bitmap.y = -bitmap.height/2;
container.rotation = rotation;

It works, however does not solve the jaggy look and the vibration effect.

Thanks anyway for the response