Each DisplayObject, in particular each Bitmap or Sprite, has a property called 'transform': DisplayObject.transform. DisplayObject.transform is an Object, an instance of the Transform class. One of the properties of the Transform class is the 'matrix' property. The value of the matrix property is an instance of the Matrix class. To make a long story short, for each display object, say myBitmap (or mySprite), we have an object associated with it, stored in myBitmap.transform.matrix. This object is indeed a 3 by 3 matrix that determines all possible geometric transformations of myBitmap. These include: x and y scaling, x and y translations, x and y skewing, and rotations. For simplicity, let's call a given value of transform.matrix property of a display object 'a transform matrix' or 'a transformation matrix'.
A Transform Matrix
A transform matrix (or any instance of the Matrix class in flash.geom package) is a 3 by 3 matrix of the following form:
You can create a new transform matrix for a display object, say myBitmap, directly, with the values a, b, c, d, tx, and ty chosen by you. You assign a new transform matrix as a value of myBitmap.transform.matrix property as follows:
myBitmap.transform.matrix=new Matrix(a,b,c,d,tx,ty);
You can also access and set the values of the coefficients a, b, c, d, tx, and ty one at a time. We show on the next page how to do it.
The question is how to control the coefficients of the transform matrix in order to obtain the transformations that you want. This is not completely straightforward. The 3 by 3 matrix pictured above corresponds to an affine mapping from xy-space to xy-space. The 2 by 2 part of the matrix highlighted in pink represents the linear part of the transformation: a rotation, x and/or y scaling, x and/or y skewing, or any other linear transformation. The part highlighted in yellow represents a translation by [tx,ty]. If tx=0 and ty=0, and you apply the transformation given by the matrix above to a point [x0,y0], you will obtain a point with the coordinates [x1,y1] given by:
x1=ax0+cy0, y1=bx0+dy0.
Mathematically, the formulas correspond to the linear transformation defined by multiplying a row vector [x0,y0] from the right by the 2 by 2 pink matrix. The result is a row vector [x1,y1] with coordinates given above. This linear portion of the transformation matrix, when tx=ty=0, is the only part of the transformation matrix that has simple interpretation in terms of multiplication of matrices and composing operations. Hence, we recommend that you keep tx=ty=0, perform all linear transformations that you wish, and then, at the very end, do the translation by a desired vector [tx,ty]. We give examples of this approach on the next page.
Let's mention a few simple configurations of the coefficients a, b, c, and d which produce some common transformations. The coefficients 'a' and 'd' can be used to control x and y scaling. The matrix:
will produce scaling in the x direction by the factor sx, and scaling in the y direction by the factor of sy.
To produce clockwise rotation by the angle 'q' (in radians), use the matrix:
The coefficient 'b' can be used to produce skewing in y, that is, vertical skewing; the coefficient 'c' to produce skewing in x, that is, horizontal skewing. For example, if you wish to skew your object vertically by the angle alpha (in radians), you set b=tan(alpha). The following assignment:
myBitmap.transform.matrix=new Matrix(1,1,0,1,0,0);
will give you the vertical skew by pi/4 (or 45 degrees) as tan(pi/4)=1. Note, that the transform matrix with a=1, b=0, c=0, d=1, tx=0, ty=0, corresponds to the identity transformation. Hence, in the above assignment you are adding the skewing factor to the identity transformation.
This is all simple especially if you perform one transformation at a time and leave the [tx,ty] affine shift for the end. We show a reliable method of transforming display objects on the next page.
