Quantunet.com

My Account

Joins Us
Flash 8 Actionscript 2.0 Knowledgebase
The Translation Matrix  

The translation matrix operator acts to change the position of an object in space.

This translation matrix is designed to move the position of a cordinate or set of cirdinates by the amount tx in the direction of the x axis.

x translation matrix

When the operator is multiplied but the coordinates or set of coordinates the resulting transformation returns the new coordinate or set of cooordinates of the object.

x translation matrix

This matrix operator can translate the coordinates of an object in the direction of the y axis.

y translation matrix

When the operator is multiplied by a coordinate or set of coordinates a constant value ty is added to the y coordintate of the object resulting in a translation of the amount ty in the direction of the y axis.

y translation matrix

Translations in the x and y diredction can be done independently or they can be performed at the same time to create a diagonal translation in the position of the object. Using this operator the object can be translated by the amount tx in the direction of the x axis and the amount y in the direction of the y axis.

x and y translation matrix

When the 2d translation matrix operator is multipled by a coordinate it adds the tx to the x coordinate and ty to the y coordinate.

x and y translation matrix

The 3x3 transformation matrix which can transkate ab object in 2 dimentions can also be extended to create a 4x4 matrix which can translated a point or set of points described in three dimentions.

x y and z translation matrix

Translation of a 3D point in the x, y and z direction:

xyz translation matrix

This row vector is multiplied by a 4x4 translation matrix resulting in the term tx being added to x, ty being added to y and tz added to z.

This can be further expanded to tranform multiple points using the sample matrix operator.

Translation of multiple 3D point in the x,y and z direction

xyz translation of multiple 3d points

The matrix operator adds the value of tx to the x coordinate value ty to the y coordiante value and tz to the z coordiante value for each point (x1,y1,z1) , (x2,y2,z2) and (x3,y3,z3).

The Transformation Matrix
In flash matrix translation of a movie clip can be achieved using the transformation matrix. The values tx and ty can be set to produce horizontal and vertical translations.

translation transformation matrix operator

To learn more about the transformation matrix in the flash see [Transformation Matrix Knowledgebase].

Matrix Translation Using Actionscript (movie clips)
In flash there are two ways to use matrices to translate a movie clip in actionscript: using a modified transformation matrix or using the the transform method.

Method I: Modified Tranformation matrix (x and y translation)

import flash.geom.Matrix;
var xpos:Number = 0;
var ypos:Number = 0;

onEnterFrame = function{
xpos +=5;
ypos +=7;

my_mc.transform.matrix = new Matrix(1,0,xpos,0,1,ypos,0,0,1);
}

Method II: Using a specific matrix transformation method (x and y translation)

import flash.geom.Matrix;
var xpos:Number = 0;
var ypos:Number = 0;

onEnterFrame = function{
xpos +=5;
ypos +=7;

my_matrix = new Matrix()
my_mc.my_matrix.translate(xpos,ypos);
}

Matrix Translation Using Actionscript (coordinate matrices)

2D translation of a 2D point using a custom transformation matrix (1 2d point)
In this example a single 2d point is horizontally and vertically translated using a simplified 2x2 translation operator. Each "matrix" is actually a simple one dimentional array. The values of th x and y coordinates of the point (20, 150) are stored in the array "my_point_matrix" and the values for the rotation matrix operator are stored in "y_trans_matrix". The function "matrix_mult" is called which takes the arrays "my_point_matrix_ and "y_trans_matrix" as arguments. The function is defined to take the first array and multiply it by the second as though they were both structured as a matrix and multiplied togther. It then takes the results of this matrix multiplication and returns a single array called "results_coords".

var tx = 20;
var ty = 45;

my_point_matrix = new Array (20,150);
y_trans_matrix = new Array (1,tx, 0,ty);

matrix_mult (my_point_matrix, y_trans_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 transalation of multiple 2D points using a custom transformation matrix (4 2d points)
This can be extended to enclude multiple 2d points.

var tx = 20;
var ty = 45;

my_point_matrix = new Array (20,150, 80,60, 95,130, 220,110);
y_trans_matrix = new Array (1,tx, 0,ty);

matrix_mult (my_point_matrix, y_trans_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;
}

This can then be expanded to include 3d points see [Translation 3D knowledgebase].

When manipulating points or sets of points in flash it is usefull to use matrix transformations as they can act help simplify and organize actionscript making it more elegant and easyer to read or edit.


However there can be some noteable performance drawbacks. For each matrix multiplication flash must complete a series of calculattions to determin 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 perfroming a simple transformation on a large number of points, using matrix operations is a cumberome and simple set of linear equations would be less taxing for the proecssor. 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 calcutions 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].

© 2008 Quantunet LLC All Rights Reserved | Intellectual Property | Terms of Use | Privacy
Home | About Quantunet | FAQ's | Contact Us