Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ActionScript Matrix Transformation: Animation by Clone and Concatenate Matrix

This Flash ActionScript tutorial of Matrix Transformation shows how to do a simple flash translation animation by Cloning a Matrix and Concatenate a Matrix.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

Cloning a Matrix - returns a new Matrix object that is a clone of this matrix, with an exact copy of the contained object.

Concatenate a Matrix - Concatenates a matrix with the current matrix, effectively combining the geometric effects of the two.

The complete Flash Movie is shown as above, you may try how it works before you start this tutorial.

Flash ActionScript Codes:

//import this class if used in custom class
//import flash.geom.Matrix;

 

/*
Some information of Matrix:

A matrix is used to store datas used in calculation.
The calculation can be used in the following classes:
- flash.geom.Matrix,
- flash.filters.ColorMatrixFilter
- flash.filters.ConvolutionFilter.

Here's an example of a 3 x 3 matrix. Each value (e.g.
a, b, c, d, e, f, g, h, i) is used in calculation.

a, b, c,
d, e, f
g, h, i

This is Matrix with no any effect:
(This is called Identity Matrix)

1, 0, 0
0, 1, 0
0, 0, 1

For Transformation Matrix, each value of the matrix
that serve specific calculation as shown below:

x-scale, y-skew, 0
x-skew, y-scale, 0
x-position, y-position, 1

For example:
x-scale is used to scale a MovieClip in x-axis,
Note: A value of 1 means 100% of scale.
x-position is used to set the x-axis location of a MovieClip
x-skew is used to skew a MovieClip in x-axis
Note:
A value of 0 means no skew, while
A value of 1 means a skew with an amount equal to the width or
height of a MovieClip.

For Transformation Matrix, it only uses a 2 x 3 Matrix
as shown below because other will use default values.

x-scale (a), y-skew (b),
x-skew (c), y-scale (d),
x-position (tx), y-position (ty)

*/


/*
Create a new Matrix for the transformation.
The Matrix is as below:

x-scale (1), y-skew (0),
x-skew (0), y-scale (1),
x-position (4), y-position (0)

Explanation:
x-scale equal 1 means no scale MovieClip along x-axis
y-skew equal 0 means no skew along y-axis
x-skew equal 0 means no skew along x-axis
y-scale equal 1 means no scale MovieClip along y-axis
x-position equal 4 means move MovieClip to 4 along x-axis
y-position equal 0 means no move MovieClip along y-axis
*/


var wishMatrix:Matrix = new Matrix (

1, 0,
0, 1,
4, 0
);

function moveFootball(evt:Event){
//Returns a new Matrix object that is a clone of this matrix,
//with an exact copy of the contained object.
//Create another Matrix for the transformation
//Use the same Matrix as the wishMatrix
var moveMore:Matrix = wishMatrix.clone();

//Concatenates the elements specified in the parameters
//with the elements in an array and creates a new array.
//If the parameters specify an array, the elements of that
//array are concatenated.
//Concatenates a matrix with the current matrix, effectively
//combining the geometric effects of the two.
moveMore.concat(football_mc.transform.matrix);

//Set the Transform.matrix value of the MovieClip
//(football_mc) to the new Matrix
football_mc.transform.matrix = moveMore;

//Dispay the tx (x-position)
//Notice the concatenate of tx value
output_txt.text = "Value of tx in Matrix: " + String(moveMore.tx);

}

//Start the movement of square when the movie start
addEventListener(Event.ENTER_FRAME, moveFootball);

Download Flash Source File:

Flash Source File transformation-matrix-4.fla

Remarks:

This Flash ActionScript Matrix Transformation tutorial shows how to create a flash translation animation by Cloning a Matrix and Concatenate a Matrix.