Wednesday, August 18, 2010

Transformations in Actionscript 3: Part 2

Today we will learn about scaling, skewing and moving an object on the stage using Matrix object.

Flash.geom.Matrix class includes 6 properties - a, b, c, d, tx, and ty. a and d properties define scaling value of the object horizonally and vertically, just like you would do with the scale tool in Flash (not just flash though, all graphic softwares have this tool).

b and c define the skewing value. When skewing a picture, a certain fixed point is created. All the pixels to the one side of the point move to one direction, while the pixels to the other side of the point - to the opposite direction. b property defines skewing on the y axis, while c - on the x axis.

tx and ty - moving the object on the x and y axises. Just like you would use the x and y properties of the objects.

The default values of the properties are: a=1, b=0, c=0, c=1, tx=0 and ty=0.

Applying a matrix transformation to an object is quite easy:

myObject.transform.matrix = new Matrix(1, 0, 0, 1, 0, 0);

Here's a little utility I made. Play around with it, change the numbers to see how the object (rectangle) transforms.


Now, why would this ever be useful? I can move the object by simply setting x and y properties, I can scale it too!

Say, you want to create a simple graphic designing program in Flash and you need to make a transformation tool, which allows the user to stretch, skew and move an object around. This would probably be the easiest way to do it. Also, it is the only way to skew objects (the only easy way) using AS3. It takes just one line to do all the work you need!

Thanks for reading.

Related:

Transformations in Actionscript 3: Part 1
Transformations in Actionscript 3: Part 3

No comments:

Post a Comment