The Matrix Class in Flash 8

As mentioned, one good reason for knowing about matrices is that Flash 8 ActionScript embraces them so much. In fact, theres even a built-in Matrix class in Flash now. If you take a look at the Flash help files, for the flash.display.Matrix class, youll find that they are quite clear and informative. If youve understood everything up to now in this chapter, you should have no problem grasping that material. Since it is so well written, I wont waste space rehashing it all, but I will give a quick summary and a couple of examples.

A matrix is used mainly to transform (rotate, scale, and translate) a movie clip. Any movie clip now has a property called transform . This is an object that contains another property called matrix . If you create an instance of the Matrix class and assign it to this movieclip.transform.matrix property, it will alter the form, size , or position of that movie clip. Youll see some concrete examples very shortly.

Basically, the matrix in the Matrix class is a 3—3 matrix set up like so:

 a  b  tx c  d  ty u  v  w 

The u , v , and w are set to 0, 0, and 1 automatically and are used internally. They are unchangeable, so you dont have to worry about them. (More explanation on what they actually are and do appears in the help files.) You can create a new Matrix with the following syntax:

 import flash.display.Matrix; var myMatrix:Matrix = new Matrix(a, b, c, d, tx, ty); 

So what do all these letters mean? Well, tx and ty are pretty easy. These control the position of the movie clips by translating it on the x and y axis. The a , b , c , and d are a little trickier because they are so dependent on each other. If you set b and c to 0, you can use a and d to scale the movie clip on the x and y axes. If you set a and d to 1, you can use b and c to skew the movie clip on the y and x axes, respectively. Finally, you can use a , b , c , and d together in a way that Im sure youll find very familiar. In this case, they would be laid out like this:

 cos  sin  tx -sin  cos  ty   u    v   w 

Of course, you can see that this contains a rotation matrix, and it will indeed rotate the movie clip. Naturally, cos and sin in this example refer to the cosine and sine of a particular angle (in radians) that you wish to rotate the movie clip by. Lets try that one out.

File ch18_02.fla contains a movie clip on stage, with an instance name clip. You can put any content in it that you want. I put a small photo of a flower in mine. Here is the code to go on frame 1 of the timeline:

 import flash.geom.Matrix; var angle:Number = 0; onEnterFrame = function() {         angle += .05;         var cos:Number = Math.cos(angle);         var sin:Number = Math.sin(angle);         clip.transform.matrix = new Matrix(cos, sin,                                           -sin, cos,                                            270, 200); } 

Here you have an angle variable that increases on each frame. The code finds the sine and cosine of that angle and feeds them into a new Matrix object, in the way specified for rotation. Ive also applied a 270, 200 translation, which centers the clip. (I hard-coded these to the dimensions of my movie for clarity, but in a finished project, you probably want to use fractions of Stage.width and Stage.height .) The new matrix is assigned to the transform.matrix property of the clip. Test this and you have a spinning picture, which Figure 18-2 gives you some idea of.

Figure 18-2: Rotation with a matrix

Now, you may be wondering why you dont just change the _rotation property of the clip. Its true that in this simple case, that would be a much simpler solution. But there may be many cases where you are dealing with a lot of angles and radians and sines and cosines, and it will actually be much easier to just assign a matrix like this, rather than converting everything back to degrees and changing the _rotation .

But for another, far more practical demonstration, lets try skewing. Skewing means stretching something out on one axis so that one part goes one way and the other part goes the other way. Italic letters are an example of a skew. The top part of the letters goes to the right and the bottom part to the left. This is something that has always been notoriously tricky in Flash, but is incredibly easy with the Matrix class. As I said earlier, you set a and d of the matrix to 1. The b property is the amount to skew on the y axis, and the c controls the skew on the x axis. Lets try an x skew first. In ch18_03.fla , I replaced the clip contents with a dynamic text field with a bunch of text in it, set the font to Arial and embedded the font, as depicted in Figure 18-3.

Figure 18-3: Embedding the fonts before transforming a text field

Its important to embed the font if you are doing any kind of transformation on text; otherwise , the text will disappear when it is rotated , scaled, etc.

Then I put this code on frame 1:

 import flash.geom.Matrix; onEnterFrame = function() {       var skewX:Number = (_xmouse - 270) * .01;       flower.transform.matrix = new Matrix(1, 0, skewX, 1, 270, 200); } 

Here I made the skewX variable relative to the mouses x position, offset from the center of the stage. I then multiplied that by .01 to keep the skew in a manageable range, and fed that into the matrix.

Now when you test this movie, you will see how you can skew an entire movie clip, including text, as you see in Figure 18-4. While this was possible before the Matrix class, if you know anyone who has tried it, show them the preceding code, and watch them start drooling! Or, if you tried it yourself, then you already know what I mean.

Figure 18-4: Movie clip with text, skewed on the x axis

In ch18_04.fla , I did the same thing with the y axis:

 import flash.geom.Matrix; onEnterFrame = function() {       var skewX:Number = (_xmouse - 270) * .01;       var skewY:Number = (_ymouse - 200) * .01;       flower.transform.matrix = new Matrix(1, skewY, skewX, 1, 270, 200); } 

Figure 18-5 gives you a feel for how skewing a movie on two axes turns out.

Figure 18-5: Movie clip with text, skewed on both axes

Its pretty amazing to be able to do this kind of effect so easily. If you arent sure where you would use this kind of effect, Ill tell you that movie clip skewing is used quite often for pseudo-3D. As you move your mouse around in the last example, you can probably already see how it appears to have some perspective, as if the text was leaning over and spinning around. Its not particularly accurate 3D, as the letters that appear to be far away from you are actually the same size as those close to you. But it can be used for some pretty convincing effects. There are a few tutorials out there on the Web that show you how to accomplish this kind of pseudo-3D with skewing. Use of the Matrix class will probably cut the code in those examples in half.

Again, be sure to check out the help files for the Matrix class, as there are a lot of other goodies in there. Also, realize that that is not the only place Flash 8 utilizes matrices. You might want to take a look at ColorMatrixFilter , ConvolutionFilter , the various MovieClip fill and gradient methods , and the flash.geom.Transform class. Matrices galore in there!