Rotating BitmapData with Actionscript 3

by James on 15th September, 2009 in ActionScript

Here’s a little snippet – rotating BitmapData (through 90 degrees) with Actionscript 3.

var matrix:Matrix = new Matrix();
matrix.translate(-bmd.width / 2, -bmd.height / 2);
matrix.rotate(90 * (Math.PI / 180));
matrix.translate(bmd.height / 2, bmd.width / 2);
var matriximage:BitmapData = new BitmapData(bmd.height, bmd.width, false, 0x00000000);
matriximage.draw(bmd, matrix);

The code above can rotate an images BitmapData, using a Matrix to transform the image when you draw the data. It’s only really designed to rotate the image in 90 degree increments though – so be aware of that.

How it actually works is to create a new Matrix object, offset the source BitmapData’s width and height (so the rotation goes from the center of the bitmap), rotate the BitmapData, move the BitmapData again (to undo the previous offset), create a new BitmapData object to draw the rotated BitmapData into, and finally draw the source BitmapData with our newly created Matrix.

Simple.

bitmapdata, Snippets

About James

James is a Senior New Media Developer at MMT Digital, and has BA(Hons) in Design for Interactive Media from the University of Gloucestershire. He loves designing and producing all sorts of website and Flash-related things, as well as prattling on about technologies.Day-to-day he works with Flash, Dreamweaver, Director, Microsoft Office Sharepoint Server 2007 (MOSS) and in his spare time he mucks about in Flex and Wordpress.Follow James on Twitter.

View all posts by James →

Connections and Related Posts

You can connect with Psyked.co.uk through other media using these links:

← An overview of Open Source Media Framework (aka. Adobe Strobe)

Link: Using Deferred instantiation in Flex →

View Comments (6)
Submit A Comment

6 Responses to “Rotating BitmapData with Actionscript 3”

Konstantin 12th September, 2010 at 9:51 am # Reply
Wow, thanks a lot. That’s exactly what I was looking for
Teo 26th December, 2010 at 11:20 pm # Reply
+1))
gray_hare 23rd February, 2011 at 9:13 pm # Reply
You’re not actually rotating BitmapData here as the tittle suggests. You’re just telling BitmapData object how pixels have to be drawn and this is not the same.
James 24th February, 2011 at 1:13 am # Reply
gray_hare – Isn’t the end result the same though? It’s not like this is a filter that’s being applied, we input one bitmapdata object, and get another, rotated version of the bitmapdata.
karl 9th May, 2011 at 9:14 am # Reply
thnx, you helped me out here..
Eric 31st July, 2011 at 4:25 pm # Reply
gray_hare – Actually he is rotating the bitmapdata when he’s drawing it into the new bitmap, and the new bitmap has a “new Matrix” which is a non rotated matrix.
Also there is a better way to do this.
Use this for 90 degree rotation:
var matrix = new Matrix(0, -1, 1, 0, 0, bmd.height / 2);
Use this for 180 degree rotation:
var matrix = new Matrix(0, -1, -1, 0, bmd.width / 2, bmd.height / 2);
Use this for 270 degree rotation:
var matrix = new Matrix(0, 1, -1, 0, bmd.width / 2, 0);
This is a lot faster and accurate.