Rotating flex graphic object around center - actionscript-3

Question

I tried to create a rotating animation of an arc. Even after trying all those examples, I am not able to rotate it around the center. It is getting rotated around the top left corner.
private function init():void
{
var hgroup:Group=new Group();
this.addElement(hgroup);
arc1=new Graphic();
arc1.graphics.lineStyle(12,0xff0000,1,false,"normal",CapsStyle.SQUARE);
draw_arc(arc1,CENTER,CENTER,70,14,288,1);
hgroup.addElement(arc1);
var matrix:Matrix = arc1.transform.matrix;
var rect:Rectangle = arc1.getBounds(arc1.parent);
matrix.translate(- (rect.left + (rect.width/2)), - (rect.top + (rect.height/2)));
matrix.rotate((90/180)*Math.PI);
matrix.translate(rect.left + (rect.width/2), rect.top + (rect.height/2));
var rot:Rotate = new Rotate();
rot.angleBy = 360;
rot.duration = 1000;
rot.target = arc1;
rot.play();
}
public function draw_arc(movieclip:Sprite,center_x:Number,center_y:Number,radius:Number,angle_from:Number,angle_to:Number,precision:Number):void {
var angle_diff:Number=angle_to-angle_from;
var steps:Number=Math.round(angle_diff*precision);
var angle:Number=angle_from;
var px:Number=center_x+radius*Math.cos(angle*deg_to_rad);
var py:Number=center_y+radius*Math.sin(angle*deg_to_rad);
movieclip.graphics.moveTo(px,py);
for (var i:Number=1; i<=steps; i++) {
angle=angle_from+angle_diff/steps*i;
movieclip.graphics.lineTo(center_x+radius*Math.cos(angle*deg_to_rad),center_y+radius*Math.sin(angle*deg_to_rad));
}
}

Answer 1

you need this property:
rot.autoCenterTransform="true"
see the example at the bottom of the documentation: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Rotate.html

Answer 2

I had a similar issue (with a rotating arrow) and I fixed it like this:
<s:Group width="0" height="0" verticalCenter="0" right="14">
<s:Graphic id="arrow" rotation="90" rotation.selectedStates="0">
<s:Path data="M 0 0 L 5 5 L 0 10 Z" left="-2.5" top="-5">
<s:fill>
<s:SolidColor id="arrowFill"/>
</s:fill>
</s:Path>
</s:Graphic>
</s:Group>
The container Group has its size set to 0 as it serves only as an anchor point for the graphic it contains. The position of this Group is the rotating center point. The Path in the Graphic is positioned so that its anchor point is in its center (i.e. it's 5px wide and 10px heigh, so it's repositioned 2.5px to the left and 5px to the top).
The actual rotation is done through States and Transformations here, but an Effect does the same thing.

Answer 3

I've used this solution before; it works well and is very simple:
http://www.chadupton.com/blog/2008/02/rotate-on-center-in-adobe-flex/

Answer 4

To rotate image at the center you have to specify this properties
rot.autoCenterTransform="true";
rot.applyChangesPostLayout = false;