Enter the matrix function in Flash

Source: Internet
Author: User
Tags constant cos sin
Function

Because of the busy work, so long did not come out to write a tutorial. Today to write a current Flash 8 provided by the new function, in the Chinese website has not seen, this should be relatively new

See the title may be a lot of math or nap in high school friends will feel disgusted, but at ease is here The matrix has simplified a lot of trivial steps, and do not take a piece of paper desperately to do calculations. To want to make a game of friends is also must learn the distance, so the general understanding of the use of ideas can be said to master the skills.

The explanation in the dictionary is not enough for everyone to understand, so we should repeat it at the beginning. Matrix matrices are like arrays, arranged in columns and rows. In Flash 8, the 3 x 3 matrix is provided, and the 3x3 matrix can define a 3D calculation, but in Flash 8 it is for 2D only, that is, X and Y, so let's take a look at the definition of this matrix.


Each of these letters has its own meaning, respectively:

A = control the width of X
b = Control the tilt of Y

c = Control the tilt of X

D = Control the height of Y

tx = Control X Coordinate position

Ty = control Y-coordinate position
The next step is how to define in the matrix function, which is actually very simple. First you import the Matrix's packet, and then you can begin to define
Import Flash.geom.Matrix; //Import Class Pack
var Mymatrix:matrix = new Matrix (A, B, C, D, TX, Ty); //Start defining matrix class

A, B, C, D, TX, Ty can be defined directly. Let's take this to the example to prove and help to understand the application of the above parameters.

Step 1: Create a MC on the scene, that is, draw a square and press F8 to select MovieClip (movie), and define an instance named MC
Step 2: start our code in the first frame of the scene

Matrix must cooperate with Transform in order to achieve the defined effect , do not say more to start looking at the code

Import Flash.geom.Matrix; //Import Matrix class package
Import Flash.geom.Transform; //To transform class package

var Mymatrix:matrix = new Matrix (1,0,0,1,100,100); //parameter is defined as width ratio 1, without any inclination, height proportional 1,xy coordinate

var mytransform:transform = new Transform (MC); //transform object for the MC on the scene

Mytransform.matrix = Mymatrix; //Give transform the matrix function for the Mymatrix class we set

Then the next test will be able to see the results, do not see what effect?? Then I'll change the parameters of the matrix into

var Mymatrix:matrix = new Matrix (1,1,0,1,100,100); //The second parameter is changed to 1

Does this test see that our B affects the shape of the MC?? This is how the matrix is used, is it simple?? So many things do not think very difficult, in fact, are very simple.

Again we have to go a little deeper, to understand the matrix calculation, Chichi half is also unable to properly grasp the use of. The matrix calculation is actually very simple, there are only two lines of the formula:

X ' = a*x + c*y + tx;
Y ' = b*x + d*y + ty; That means

new Coordinates x = a * existing x coordinate + c * existing y-coordinate + constant TX;
New Coordinate y = b * existing x coordinate + D * existing y-coordinate + constant ty;

Let's take this example into a formula.

A = 2, b = 0, c = 0, d = 1, tx = 0, ty = 0

X ' = 2x + 0y + 0;
Y ' = 0x + 1y + 0;

X ' = 2x;

y ' = y;
You can see that the next new X value will be the current X twice times, and y stays the same, and in the beginning it says that a change affects width, and that the shape is twice times as wide as it is now.

There are a few basic functions in the matrix that can be controlled, so you can not always redefine the Matrix class, which is

Matrix.scale (a,d);
matrix.translate (TX1, ty2); //The TX1 and ty1 here are the values to increment or decrement the original TX and Ty

matrix.rotate (Radian); //Radian is (angle/180) * Math.PI

Basically, you can get an answer just by substituting the formula, so I'm just going to show you how the Rotate function is calculated

Math.rotate ((50/180) *math.pi)//This is required to rotate 50 degrees

The formula is:

X ' = cos (a) *x + sin (c) *y + tx;
Y ' =-sin (b) *x + cos (d) *y + ty;
X ' = cos (m) *x + sin (m) *y + tx;
Y ' =-sin (m) *x + cos (m) *y + ty;

X ' = 0.64*x + 0.76*y + tx;

Y ' = -0.76*x + 0.64*y + ty;

We can get the new coordinates by substituting the existing coordinates x and Y.
So let's verify that the value of the a,b,c,d is correct, open a new scene, and enter it on the frame.

Import Flash.geom.Matrix;
var Mymatrix:matrix = new Matrix ();

Mymatrix.rotate ((50/180) *math.pi);

Trace (mymatrix.tostring ()); //See if the a,b,c,d is the same value?

All right.. The final part of the tutorial can be completed, the most important point is also a lot of people baisibuxie the problem is:
To find an X and Y, why is it possible for the component to rotate? This is just a coordinate??   At most, just control the coordinates point, how so magical?? This is the convenience of flash, in fact, why need to cooperate with transform is the key to this, transform specified the component will be 4 corners of the coordinates.   So we use the Transform.matrix function to let transform put the matrix's formula into the coordinates of each corner. Therefore, the X and Y in the formula are the coordinates of each corner, and the coordinates are taken directly to obtain the new coordinate value and achieve the function of rotational deformation. Is this a lot simpler??   It's always better to define the function yourself than in previous versions. All right.. This tutorial concludes. wish to reprint a friend attached to the author's name, thank you.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.