Comments on: Rotating images using the Matrix class

By: Anonymous

Anonymous — Tue, 19 Aug 2008 09:51:21 +0000

private function transformImage(img:Image, x:Number, y:Number, angle:Number):void {

var offsetWidth:Number = img.contentWidth / 2 ;
var offsetHeight:Number = img.contentHeight / 2 ;

var sin=Math.sin(angle);
var cos=Math.cos(angle);

var tempMatrix:Matrix = new Matrix();

tempMatrix.a = cos;
tempMatrix.b = -sin;
tempMatrix.c = sin;
tempMatrix.d = cos;

tempMatrix.tx = x - cos * offsetWidth - sin * offsetHeight + offsetWidth;
tempMatrix.ty = y + sin * offsetWidth - cos * offsetHeight + offsetHeight;

img.transform.matrix = tempMatrix;

By: Adam

Adam — Sat, 19 Apr 2008 07:37:37 +0000

Can someone please explain to why the image needs to be in a VBox? This makes no sense to me.

By: Karl Garske

Karl Garske — Sun, 02 Mar 2008 23:10:12 +0000

Man, I got worked trying to integrate this into my own application. If the the Image is not the only thing included in the VBox, this example no longer behaves as advertised. Seems that the matrix is relative to whatever container the Image resides in, not the Image itself. Just making sure this is clear to others who are still new to this stuff.

By: Alexander Rose

Alexander Rose — Mon, 31 Dec 2007 01:02:44 +0000

Is it okay to use this on my own site? I’m happy to link back to you from my new site which I hope to have running by the end of January. Happy New Year to you, I hope it’s a good one!

By: Rob Cannon

Rob Cannon — Thu, 06 Dec 2007 22:37:30 +0000

If you examine the example carefully, it doesn't rotate consistently around the exact center of the image. And then, if you go through an entire 360 degrees, the image position will be about 10 pixels or so below where it started. Using absolute positioning, try this function below instead. You have to pass the original x and y of the image control, don't use the .x or .y properties since they change when the image is transformed.

private function transformImage(img:Image, x:Number, y:Number, angle:Number):void {				
	
	var offsetWidth:Number = img.contentWidth / 2 ;
	var offsetHeight:Number = img.contentHeight / 2 ;
	
	var sin=Math.sin(angle);
	var cos=Math.cos(angle);
	
	var tempMatrix:Matrix = new Matrix();
	
	tempMatrix.a = cos;
	tempMatrix.b = -sin;
	tempMatrix.c = sin;
	tempMatrix.d = cos;
	
	tempMatrix.tx = x - cos * offsetWidth - sin * offsetHeight \+ offsetWidth;
	tempMatrix.ty = y \+ sin * offsetWidth - cos * offsetHeight \+ offsetHeight;
	
	img.transform.matrix = tempMatrix;
	
}

By: chas

chas — Mon, 12 Nov 2007 20:52:41 +0000

beautiful! thank you, thank you, searched entire web for this and this is the only working example in all of googleland. thanks!

By: Ravindra Nath Chowdary

Ravindra Nath Chowdary — Tue, 30 Oct 2007 10:20:35 +0000

This is fine

By: Joe Corner Reeve

Joe Corner Reeve — Thu, 20 Sep 2007 20:10:51 +0000

Hello I have Problem :(

I want to leave this image on the position. an image will to rotate automacally.
I see that mxml, why do you not use with ? I am ztying with problem of rotating image. :(

Thanks Joe Corner Reeve

By: peterd

peterd — Fri, 14 Sep 2007 23:06:22 +0000

Flanture,

Thanks, good catch! Another case of me forgetting to web-friendly the MXML code after posting it in the Interwebs.

Example updated above and should hopefully work now. I’ll try and get View Source-able SWFs posted later this evening.

Peter

By: Flanture

Flanture — Fri, 14 Sep 2007 23:01:41 +0000

This line doesn’t work for me:
°

But this does:
{String.fromCharCode(176)}

Good example.