Introduction
Macromedia has given flash developers many new features in the latest release Flash 8. On such feature is the flash.geom.Matrix class which gives actionscript the ability to control movie clips and bitmap-data. By setting the properties of a Matrix object and applying it to a MovieClip or BitmapData object you can perform translations, rotations, scaling and skewing.
These transformations are all affine transformations that preserve the straightness of lines while transforming, and keep parallel lines parallel.
The matrix used in Flash is a 3x3 matrix but since the flash environment only supports 2-D space only certain properties of it are editable while the others stay constant below is
a picture of how the transformation matrix looks in flash.
Note u,v,w are constants and can never be modified.
The Basics of the Matrix class
To use the matrix class the first thing you have to do is import it or reference it when you are creating instantiating it:
import flash.geom.Matrix;
//instantiate the Matrix
var m:Matrix = new Matrix();
OR
var m:flash.geom.Matrix = new flash.geom.Matrix(); //does the same as above.
Once you define an instance of a Matrix class you can start applying values to the properties of the matrix. The matrix class has 6 properties which you can access, a, b, c, d, tx and ty. Each value has different effects and you can enter them all into the constructor when instantiating the Matrix. The following is a list of the property and it's effect.
- a: affects the positioning of pixels along the x axis when scaling or rotating an image.
- b: affects the positioning of pixels along the y axis when rotating or skewing an image.
- c: affects the positioning of pixels along the x axis when rotating or skewing an image.
- d: affects the positioning of pixels along the y axis when scaling or rotating an image.
- tx: The distance by which to translate each point along the x axis.
- ty: The distance by which to translate each point along the y axis.
You can see the affects these properties can have on a movie clip when they are changed below to reset the values simply create an identity matrix by pressing the identity button (the identity matrix is the default matrix returned):
Setting these properties in actionscript below:
//create an instance of the matrix called m
var m:flash.geom.Matrix = new flash.geom.Matrix();
//set the values of the matrix
m.a = numA.value;
m.b = numB.value;
m.c = numC.value;
m.d = numD.value;
m.tx = numTX.value;
m.ty = numTY.value;
//assign the matrix to the movie clip to apply the transformation
my_mc.transform.matrix = m;
As you can see this can be a bit tedious when trying to combine certain properties to provide a rotation or scale effect so luckily the Matrix class has some built in methods for completing more of the common tasks which include:
| Matrix Modifying Methods | |
|---|---|
| rotate(q): | Rotates the image by an angle q, which is measured in radians. |
| scale(sx,sy): | Resizes the image, multiplying the location of each pixel by sx on the x axis and sy on the y axis. |
| translate(tx,ty): | Moves the image tx pixels to the right and ty pixels down. |
Skewing or shearing |
Note: There is no function available for this you must use the b and c values. Progressively slides the image in a direction parallel to the x or y axis. The value b acts as a multiplier controlling the sliding distance along the x axis; c controls the sliding distance along the y axis. |
Note: when using any of the above functions your tx and ty may change therefore moving your item off screen so if you want to perform an operation in the same place you can do something like:
var matrix:Matrix = new Matrix();
..............
var position = new flash.geom.Point(matrix.tx, matrix.ty);
matrix.scale(x, y);
matrix.tx = position.x;
matrix.ty = position.y;
//now apply matrix
Using Matrices to Synchronize Movie Clips
Now that you see how a matrix can work you are probably wondering why would i want to use them. I can rotate using the _rotate, I can translate using the _x & _y properties and I can scale using the _xscale & _yscale, the only thing i can't do is skew but I can do that in the design view.
Good question, but there are a lot of reasons why you would choose to use matrices one of which being the ability to apply the same matrix to multiple movie clips. Take the following ferris wheel simulation for example.
What you see above (besides a pretty dangerous looking ferris wheel) is a single matrix controlling all of the animation. The red carts show the effect that you would get without having the matrix applied to them and the black carts have the matrix applied to them. The result is a natural looking ferris wheel where the carts are reacting to the animation of the wheel. This is accomplished by taking the point on the wheel where you want to attach the cart and transforming it using the matrix for rotation. Then using this newly found transformation point we can apply those values to the cart.
//set the tx and ty so that the wheel stays in its original position on the stage.
//when matrix rotation is used the points tx and ty are effected. so we must keep them
//the same to rotate around the
rotMat.tx = wheelPos.x;
rotMat.ty = wheelPos.y;
rotMat.rotate(Math.PI/180);
//appies the rotation to the wheel.
wheel_mc.transform.matrix = rotMat;
for (i=0; i<4; i++) {
var cartMat:Matrix = new Matrix();
//creates a point to a spot on the wheel to place the buggie
var hingePoint:Point = new Point(wheel_mc["hinge"+i]._x, wheel_mc["hinge"+i]._y);
//creates another reference to the cart.
var cart:MovieClip = _root["cart"+i];
/**transforms the hingePoint to refelct any changes made by the matrix**/
var cartPoint:Point = rotMat.transformPoint(hingePoint);
//moves the cart to the newly created point.
cart._x=cartPoint.x;
cart._y=cartPoint.y;
}
As you can see Matrices are very handy to use because they allow you to do things more dynamically and make animation dependence vary easy to code.
