# Flash Sequence Animation by Sequence Matrix Transformation

This Flash ActionScript tutorial of Matrix Transformation shows how to do an interesting flash animation by sequence matrix transformation.

## Flash Tutorial Content:

You can make some interesting flash animation easily with a series of Matrix Transformation. This series of Matrix Transformation is called Sequence Matrix Transformation. This flash tutorial will show you how to do it.

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 Timer object and store it in a variable called myClock.

//The timer will trigger every 100 milliseconds (0.1 seconds)

//1000 milliseconds = 1 second

//The repeatCount is 180, i.e. timer will trigger 180 times

//Summary:

//Create a Timer instance that will trigger every 0.1 seconds for 180 times

var myClock:Timer = new Timer(100, 180);

//Timer object created will not start automatically

//You have to start it

myClock.start();

//Start the time at -80 (hide at beginning)

var time:Number = -80;

//Declare a number to be used later

var newA:Number;

//Add an event listener to the timer object (myClock)

//The event that listen is called TIMER which will be trigger every 0.1 seconds

//Every time the TIMER event is triggered, it will call the transformSquare function

myClock.addEventListener(TimerEvent.TIMER, transformSquare);

function transformSquare (evt:TimerEvent):void {

time += 3;

/*

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 (time), y-position (150)

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 time means move MovieClip according to value of time

y-position equal 150 means move MovieClip to y-150

*/

var wishMatrix:Matrix = new Matrix(

0, 1,

time, 150

//Set the Transform.matrix value of the MovieClip (square_mc)

//to the new Matrix

square_mc.transform.matrix = wishMatrix;

//Display message

output_txt.text = "Now doing x-position(tx) transformation." + "\n\n" + "Value of tx: " + wishMatrix.tx;

} else if (myClock.currentCount == 101) {

time = 1;

}else if( (myClock.currentCount >101) && (myClock.currentCount <140)){

time += .01;

/*

Create another new Matrix for the transformation.

The Matrix is as below:

x-scale (time), y-skew (0),

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

x-position (square_mc.x), y-position (150)

Explanation:

x-scale equal time means scale MovieClip according to value of time 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 square_mc.x means stayed MovieClip at current location

y-position equal 150 means stayed MovieClip at y-150

*/

var wishMatrix2:Matrix = new Matrix(

0, 1,

square_mc.x, 150

//Set the Transform.matrix value of the MovieClip (square_mc)

//to the new Matrix

square_mc.transform.matrix = wishMatrix2;

//Keep track with the a value (x-scale) of wishMatrix2

newA = wishMatrix2.a;

//Display message

output_txt.text = "Now doing x-scale(a) transformation." + "\n\n" + "Value of a: " + wishMatrix2.a;

} else if (myClock.currentCount == 140) {

time = 0;

} else if ( (myClock.currentCount>140) && (myClock.currentCount<180) ){

time += .01;

/*

Create another new Matrix for the transformation.

The Matrix is as below:

x-scale (newA), y-skew (0),

x-skew (time), y-scale (1),

x-position (square_mc.x), y-position (150)

Explanation:

x-scale equal newA means keep the same scale value as previous transformation

y-skew equal 0 means no skew along y-axis

x-skew equal time means skew according to time value along x-axis

y-scale equal 1 means no scale MovieClip along y-axis

x-position equal square_mc.x means stayed MovieClip at current location

y-position equal 150 means stayed MovieClip at y-150

*/

var wishMatrix3:Matrix = new Matrix(

time, 1,

square_mc.x, 150

//trace(wishMatrix3);

//Set the Transform.matrix value of the MovieClip (square_mc)

//to the new Matrix

square_mc.transform.matrix = wishMatrix3;

//Display message

output_txt.text = "Now doing x-skew(c) transformation." + "\n\n" + "Value of c: " + wishMatrix3.c;

} else if (myClock.currentCount == 180) {

myClock.removeEventListener(TimerEvent.TIMER, transformSquare);

//Display message to user

output_txt.text = "TRANSFORMATION FINISHED!"

}

## Download Flash Source File:

**Remarks:**

This Flash ActionScript Matrix Transformation tutorial shows how to create a flash sequence animation by sequence Matrix Transformation.