This Animate Flash ActionScript tutorial of Matrix Transformation shows how to do an interesting flash animation by sequence matrix transformation, i.e. a series of Matrix Transformation.
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.
Animate 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 {
if (myClock.currentCount < 100) {
//Increase value of time by 3 for each trigger
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(
1, 0,
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) {
//Reset the value of time to 1 and ready for next transformation
time = 1;
}else if( (myClock.currentCount >101) && (myClock.currentCount <140)){
//Increase time value by .01 for 2nd transformation
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(
time, 0,
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) {
//Reset time value to zero
time = 0;
} else if ( (myClock.currentCount>140) && (myClock.currentCount<180) ){
//Increase time value by .01 for 3rd transformation
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(
newA, 0,
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) {
//Remove listener that no longer in use
myClock.removeEventListener(TimerEvent.TIMER, transformSquare);
//Display message to user
output_txt.text = "TRANSFORMATION FINISHED!"
}
}
Leave a Reply