The 2d rotation matrix
operator can be used to rotate a point
or set of points in 2 dimensional space. When
the rotation matrix is multiplied by a vector
it has the effect of changing the direction
of the vector but not changing its magnitude.
Rotation About the z axis (yaw)
In flash the 2d rotation
matrix can best be thought of as a 3x3 matrix with
the following elements:
Where q is the angle
of roation about
the z axis (in radians) and x and y are the
coordinates of a point in 2d space (x,y).

This simplifies to the same equation for coordinates
rotation as derived from trigonometric rotation about the z axis. Again
this shows how matrices are ultimately used in coordinates transformation,
they organize multiple operations and linear calculations into a clear
and easy to manage format.

To learn more
about how to rotate 2d points using trigonometry
see: [Point Rotation Trigonometry Knowledgebase].
Note: The
rotation matrix operator used in this example
could be simplified to a 2x2 matrix by removing
all the zeros and ones. This would further simplify
the multiplication however I have used an extended
3x3 matrix to show this operation as it ties
in more consistently with the 3x3 transformation
matrix used in flash.
In Flash there are two
main ways to use rotation matrices to manipulate
movie clips using a modified transformation matrix
or using the rotation transformation "method".
Method I: Modified Transformation
matrix (movie
clip)
import flash.geom.Matrix;
var angle:Number = 0;
onEnterFrame = function{
angle +=5;
var cos:Number = Math.cos(angle);
var sin:Number = Math.sin(angle);
my_mc.transform.matrix
= new Matrix(cos, sin, -sin, cos, Stage.width/2,
Stage.height/2);
}
import flash.geom.Matrix;
this imports the flash matrix geometry class into the movie form the flash.geom
package. The geom.Matrix class holds all the instructions that control the
transformation matrix. The trans formation matrix determines how to change
the coordinates of a movie clip or bitmap object so that they geometrically
transform the object in 2d space. In this case we will be rotating a movie
clip object by using the transformation matrix to rotate the 2d coordinates
of the object in 2d space.
my_mc.transform.matrix = new Matrix(cos, sin, -sin,
cos, Stage.width/2, Stage.height/2);
This constructs a new object (ie transformation matrix) to manipulate the
properties of the movie clip "my_mc". The values of the elements
a, b, c, and d are
set to cos, sin, -sin and cos respectively.
Then the value of tx and ty are set to half
the stage with and half the stage height centralizing the movie clip in the
middle of the stage.
Note: Only The values
a,b,c,d , tx and ty can be set in the bult in translation matrix in flash
8. The other terms u, v and w are automatically set to 0,0 and 1 as the
matrix class can only operate in 2 dimensional space.
To learn more about the transformation matrix see [The
Transformation Matrix Knowledgebase].
Method II: Using a specific
matrix transformation method (movie clip)
import flash.geom.Matrix;
var angle:Number = 0;
onEnterFrame = function{
angle +=5;
my_rotmatrix = new Matrix()
my_mc.my_rotmatrix.rotate(angle);
}
2D Rotation of a Point (about the
z axis)
var q = 30*(Math.PI/180);
my_point_matrix = new Array (20,150);
z_rot_matrix = new Array (cos(q),cos(q), -sin(q),cos(q));
matrix_mult (my_point_matrix, z_rot_matrix);
matrix_mult (matrixA:Array, martrixB:Array):Array {
var result_coords:Array = new Array();
result_coords[0] = matrixA[0]*martrixB[0] + matrixA[1]*martrixB[2];
result_coords[1] = matrixA[0]*martrixB[1] + matrixA[1]*martrixB[3];
return result_coords;
}
2D Roation of Multiple Points (about
the z axis)
This example has four 2d points stored in the array "my
point_matrix" these are multiplied by the rotation matrix
"z_rot_matrix" using the function "matrix_mult". The
resulting array of values is then returned to the array
"result_coords". Each one of the 2d points is rotated
by the angle q about the z axis to create a new set of
points.
var q = 30*(Math.PI/180);
my_point_matrix = new Array (20,150, 80,60, 95,130, 220,110);
z_rot_matrix = new Array (cos(q),cos(q), -sin(q),cos(q));
matrix_mult (my_point_matrix, z_rot_matrix);
matrix_mult (matrixA:Array, martrixB:Array):Array {
var result_coords:Array = new Array();
result_coords[0] = matrixA[0]*martrixB[0] + matrixA[1]*martrixB[3];
result_coords[1] = matrixA[0]*martrixB[1] + matrixA[1]*martrixB[4];
result_coords[2] = matrixA[2]*martrixB[0] + matrixA[3]*martrixB[3];
result_coords[3] = matrixA[2]*martrixB[1] + matrixA[3]*martrixB[4];
result_coords[4] = matrixA[4]*martrixB[0] + matrixA[5]*martrixB[3];
result_coords[5] = matrixA[4]*martrixB[1] + matrixA[5]*martrixB[4];
result_coords[6] = matrixA[6]*martrixB[0] + matrixA[7]*martrixB[3];
result_coords[7] = matrixA[6]*martrixB[1] + matrixA[7]*martrixB[4];
return result_coords;
}
To learn how to create a matrix coordinate
rotation of 3d points see [3D
Matrix Rotations Knowledgebase].
When manipulating a point
or a set of multiple points in flash it is usefull
to use matrix transformations as they can act help
simplify and organize actionscript making it more
elegant and easier to read or edit.
However there can be some
notable performance drawbacks. For each matrix
multiplication flash must complete a series of
calculations to determine the value of each element
of the resulting matrix each time. Even if in
most cases the value the results of a majority
of those calculations are trivial (equal to zero)
the calculation still requires processor time
and memory. If you are performing a simple transformation
on a large number of points, using matrix operations
is a cumbersome and simple set of linear equations
would be less taxing for the processor. With
all this said if you were to perform multiple transitions on
a large number of points such
as a transformation, distortion, and a rotation
(at the same time) custom matrix multiplications
are an efficient and elegant way to structure
and manipulate code in actionsctipt as there
would be no redundant ablutions because few
if any terms in the transformation matrix would
be equal to zero.
To learn more about matrices
in flash see the [Matrices
Knowledgebase].