Learn about Flash 3D tutorials from the beginning

Tutorial

　　Effect Demo: ( Drag the following object directly with the mouse )

Click here to download the source file

We all know that three-dimensional points have 3 coordinates, but the flash only has two-dimensional coordinates, so in flash to achieve "three-dimensional" effect, you need to the point of the coordinate transformation, simply said, is how to transform the three-dimensional coordinates into two-dimensional coordinates. (In fact, this is not really three-dimensional, but a visual deception, it looks like three-dimensional is the case.) So the above three-dimensional quotes. ）

　　One or three-D coordinate system transformed into two-dimensional coordinate system

　　(1), the transformation of coordinates

Flash in the upper-left corner of the scene (0,0), and in mathematics is the scene Center for (0,0), how to turn it into a mathematical coordinate system?

　　coordinate view in 1.FLASH

X=STAGE.WIDTH/2; Stage.width is the width of the scene;

Y=STAGE.HEIGHT/2; Stage.height is the height of the scene;

This moves the origin of the original coordinates, the center point of the scene, but the y-axis or downward, is positive. (This should be noted when doing a spin in the back.) ）

　　(2), Angle of conversion

In Flash, the parameters in the math function are used in radians, so the conversion between the angle and the radian needs to be known.

In Flash as, we can convert by using an expression like this:

hudu=jiaodu*math.pi/180; //convert angle to radians, formula: radians = angle *3.14/180,3.14 to Pai
Jiaodu=hudu*180/math.pi; //convert radians to angles, the formula is: Angle = Radian *180/3.14,3.14 for Pai
(if (jiaodu<0) {jiaodu = jiaodu+360;} /* Conversion angle range from 180 to 180, mathematical angle from 0 to 360, so less than 0 o'clock plus 360 * *

　　2. Three-dimensional coordinate system in flash

As the figure 3,z axis indicates the distance of an object from the screen, when the object's z-axis position increases, the object moves away from the screen, and when the object's Z value decreases, the object moves toward the direction of the screen.

Figure 3: Three-dimensional coordinate system

Figure 4: The relationship between two-dimensional and three-dimensional points

　　3, three-dimensional coordinate transformation into two-dimensional coordinates

As shown in Fig. 4, a point (X,y,z) is known, using the principle of similarity of triangles, the following conclusions can be drawn:

D/(D+z) =y1/y, launched: y1=d*y/(d+z), can be on the two-dimensional plane to represent the location of the point on the space. To simplify it further. A factor d/(D+Z) is presented, which is represented by the ratio (ratio), and the formula becomes
Ratio=d/(D+Z);
Y1=ratio*y; The same can be introduced
X1=ratio*x;

　　Second, control the object's properties (size, level, transparency, etc.)

　　1, control the size of the MC

In three-dimensional coordinates, when the z value increases, that is, away from the screen, the object should be smaller, the greater the opposite.

We can use the full ratio, when z increases, the ratio decreases, because in ratio, z is the denominator. Conversely, when z decreases, ratio increases. So the ratio can be used to control the size of the MC. As follows:

Mc1._xscale=mc._xscale*ratio;
Mc1._yscale=mc._yscale*ratio;

　　2, control the level of MC

The z-value is the largest, the object should be at the bottom, the smallest, at the top,

So the level of the MC can have z composition, you can use a large number of Z, can also let z divided by negative, and so on, here the method is more flexible, but also do the "three-dimensional" effect of the key, mainly in the debugging to determine the appropriate design methods. In Flash, the level of the MC is set with Swapdepths, as follows:

Mc.swapdepths (1000-Z)//Set the level of MC
Mc.swapdepths (z/-4);

　　3, control the transparency of MC

Distant objects look blurry, near the object clearer, in Flash, can be controlled by _alpha, method and control size similar, not introduction principle. As follows:

Mc._alpha=100*ratio;

　　4, control the angle of MC (rotation)

This step is the hardest, and the best stuff. After you learn, you will be able to produce a very cool effect
There are three kinds of rotation, x rotation: coordinate x unchanged, y rotation: y unchanged, z rotation: Z invariant, we first deduce Z rotation.
The following figure: Go from Point (x,y,0) to (x1.y1.0), point (x1.y1.0)

Using the sine and cosine formulas in mathematics, we can get

X1=r*cos (a+b), while cos (a+b) =sina*cosb+cosa*sinb
Launch: X1=r (COSA*COSB-SINA*SINB)
And because of X=r*cosa,y=r*sina
So X1=X*COSB-Y*SINB
Also launched: Y1=Y*COSB+X*SINB

This is the formula for z rotation. The same method can be used to introduce the x rotation, y rotation formula. Summarized as follows:

To point: (X,y,z)
Point after rotation around x-axis (X1,Y1,Z1)
Point after rotation around y-axis (X2,Y2,Z2)
Point after rotation around the z axis (x3,y3,z3)

x rotation (x does not change)
X1=x
Y1=y*cosb-z*sinb
Z1=z*cosb+y*sinb

Note: X rotation to note that in Flash x1=x

Y1=y*cosb+z*sinb
Z1=z*cosb-y*sinb

is first plus and then minus, because the y axis in Flash is reversed and the arrow is down.

Y rotation (y invariant)
X2=x*cosb-z1*sinb
Y2=y1
Z2=z1*cosb+x*sinb
Z rotation (Z invariant)
X3=x2*cosb-y1*sinb
Y3=y1*cosb+x2*sinb
Z3=z2

From the above formula can be seen in the flash to achieve rotation, the first requirement of the x-axis rotation point, and then the y-axis rotation point, and finally find the z axis of rotation point. Finally, we'll have an X-rotation application.

　　Third, the production of x-axis rotation of the cube

1, in the scene to draw a small ball, and press F8 converted to MC, the instance named Qiu.

2, add a layer, named as, then we will write as, as follows:

_root.onload = function () {
Shumu = 8;
Define the number of copied balls
qiu._x = 6000;
Let the original ball disappear.
for (var i = 0; i<shumu; i++) {
Duplicatemovieclip ("Qiu", "Qiu" +i, i);
}
Copy the ball as the eight vertices of the cube
qiu_pos_x = new Array (100, 0, 0, 100, 100, 0, 0, 100);
qiu_pos_y = new Array (100, 100, 100, 100, 0, 0, 0, 0);
Qiu_pos_z = new Array (50, 50,-50,-50, 50, 50,-50,-50);
To take the coordinates of the 8 vertices of the cube from the three-dimensional coordinates, and save them in the array
D = 200;
The distance between the viewer and the screen
Hutu = 0.001;
Control the speed of rotation
b = Hutu*180/math.pi;
Conversion of angles and radians
};
_root.onenterframe = function () {
for (var i = 0; i<shumu; i++) {
x1 = Qiu_pos_x[i];
Y1 = Qiu_pos_y[i]*math.cos (b)-qiu_pos_z[i]*math.sin (b);
Z1 = Qiu_pos_z[i]*math.cos (b) +qiu_pos_y[i]*math.sin (b);
Calculate by formula
Qiu_pos_x[i] = x1;
Qiu_pos_y[i] = y1;
Qiu_pos_z[i] = z1;
Update array elements
Ratio = d/(D+Z1);
perspective_x = X1*ratio;
perspective_y = Y1*ratio;
Calculate by formula
_root["Qiu" +i]._x = 275+perspective_x;
_root["Qiu" +i]._y = 200-perspective_y;
/Set the coordinates of the ball
_root["Qiu" +i]._xscale = _root["Qiu" +i]._yscale=50*ratio;
The size of the ball
_root["Qiu" +i].swapdepths (10000-qiu_pos_z[i);
The level of the ball
_root["Qiu" +i]._alpha=100*ratio;//set transparency
}
};

3, according to the Ctrl+enter test, a simple 3D rotation is formed.

(So far, the above section of the tutorial is largely reference to the Flash 3D Basic tutorial (Author: zjs35 article source: Flashempire update Time: 2004-4-7), I only made a small part of the modification, mainly because this article on the Flash_ The basic theory of 3D effect is really well written. The modified part, is I in the study, oneself in practice practice found some need to pay attention to place. ）

Next will be for everyone to parse a piece of the cube of a person to write the rotation of the flash_as, the prawn is written with pure as, as long as the code all copied to the first frame can be. I'll do a detailed parsing!!!

Assign values first, and prepare for subsequent edits
Plane = [0, [0, 1, 2, 3, 4], [0, 5, 6, 7, 8], [0, 1, 2, 6, 5], [0, 2, 3, 7, 6], [0, 4, 3, 7, 8], [0, 1, 4, 8, 5]]; Mark the 8 points of the cube, here the definition of the array is 6 sides of the cube, each of the 4 points, the number above is which four points to form a surface, each group in front of more than 0, is to do the following circular call is convenient, the cycle can start from I=1. Everyone can be based on the array above. Draw a three-dimensional figure in three-dimensional coordinates. Another, the first "0", is actually [0,0,0,0,0].
DX = [0, 1,-1,-1, 1, 1,-1,-1, 1]; Here is to 8 points in three-dimensional coordinates of the definition of an array, vertical look, no line is a point coordinate (x,y,z), the other group in front of more than 0, is to do the following circular call is convenient, the cycle can start from I=1.
DY = [0, 1, 1, 1, 1,-1,-1,-1,-1]; //
DZ = [0, 1, 1,-1,-1, 1, 1,-1,-1]; //
COLOUR=0X4499FF//Defined here is the color of the cube, in fact, to 6 faces, each side of the color is different, the colour definition of the array can be. The same reason for the above is to add a 0 to the front.
COLOUR=[0,0X4499FF,0X6F13EC,0XF1F00E,0X6CE31C,0X26D9A3,0X808080];
trans = math.pi/180; The following radians and angles are converted using the
Cube_width = 100; Used to set the length of a cube's edges
D = 400; The distance between the viewer and the screen
Num_planes = plane.length-1; Num_planes=6
Num_nodes = dx.length-1; Num_nodes=8
Num_nodes_per_plane = plane[1].length-1;//num_nodes_per_plane=4
Xz_angle_inc = 0; The following 4 definitions are related to the speed with which the mouse controls the rotation.
Yz_angle_inc = 0;
Angle_inc_factor =. 1;
Angle_dec_factor =. 9;
o_x = STAGE.WIDTH/2; Move the coordinate origin to the center of the screen.
O_y = STAGE.HEIGHT/2;
node = new Array (); To define a new array
P_node = new Array ();
Side-Length Adjustment ... The main is to find 8 points in the set edge length, the case of the coordinates
For (I=1 i<=num_nodes; i++) {
Node[i] = new Object ();
node[i].x = dx[i]* (CUBE_WIDTH/2);
Node[i].y = dy[i]* (CUBE_WIDTH/2);
Node[i].z = dz[i]* (CUBE_WIDTH/2);
}
For (I=1 i<=num_planes; i++) {//create 6 blank movie clips, mainly used for daily movie clips, draw a cube face.
_root.createemptymovieclip ("Plane" +i, i);
}
Layout of the adjustments below the _root.onenterframe will call here to draw the cube
Do not understand here, look at appendix I of the Code!
function Create_planes () {
for (var i = 1; i<=num_planes; i++) {
depth = 0; Set depth Initial value
MC = _root["plane" +i]; Each movie clip draws a face of a cube
Mc.clear (); Clear the last painting face, do not use this sentence, you can see the continuous rotation of the plane is what trajectory, how the program is painted. But it's hard to see.
Mc.beginfill (colour, 100); Set the color of the cube surface, colour can be variable group Colour[i], so that each surface can be painted, different colors.
Mc.linestyle (3,0xff0000,100);//Set the color of the edges of the cube
Mc.moveto (p_node[plane[i][1]].x, P_NODE[PLANE[I][1]].Y);//here set each square face and start the starting point when you draw.
For (J=num_nodes_per_plane j>=1; j--) {//Here is a continuous read 4 points, draw a square
Mc.lineto (p_node[plane[i][j]].x, P_NODE[PLANE[I][J]].Y);
depth + = node[plane[i][j]].z; After 4 points on each surface of the rotation, 4 points of depth change, and add
}
Depth/=-num_nodes_per_plane;//attention divided by negative numbers, so that the depth of flash changes in the distance
Mc.swapdepths (depth); A bit of depth changes to control the level of the plane changes, if not this sentence, you can see a cube in the rotation is 6 of the level of chaos.
Amount = depth/50*100+15;//with depth changes in the transfer value, this parameter is mainly used for the following statement, the following statement, for the cube in rotation, the surface brightness adjustment, in line with a certain lighting effect.
New Color (MC). SetTransform ({ra:amount, Ga:amount, ba:amount}); This statement can be found by looking at the Flash_as syntax reference. The main color is the setting.
}
}
Mouse excitation
_root.onmousedown = function () {
Mouse_down = true;
};
_root.onmouseup = function () {
Mouse_down = false;
};
_root.onenterframe = function () {
if (Mouse_down) {//judge, mouse situation, the addition of the distance to the mouse, if, no "+ +" and use "=", so that every time the mouse, the image will jump back to the original state. You can look at the results of their own experiments, to compare.
Xz_angle_inc + = (_xmouse-old_mx) *angle_inc_factor;
Yz_angle_inc + = (_ymouse-old_my) *angle_inc_factor;
}
For (I=1 i<=num_nodes; i++) {
SIN_XZ = Math.sin (Xz_angle_inc*trans); The conversion formula for radians and angles.
COS_XZ = Math.Cos (Xz_angle_inc*trans);
Sin_yz = Math.sin (Yz_angle_inc*trans);
Cos_yz = Math.Cos (Yz_angle_inc*trans);
Rx1 = cos_xz*node[i].x-sin_xz*node[i].z; This is the above coordinate conversion formula, first in the Y axis rotation, and then the X axis rotation.
Ry1 = NODE[I].Y;
RZ1 = cos_xz*node[i].z+sin_xz*node[i].x;
rx2 = RX1;
Ry2 = COS_YZ*RY1+SIN_YZ*RZ1;
RZ2 = Cos_yz*rz1-sin_yz*ry1;
node[i].x = rx2; Here is to save the first coordinates after each rotation, in the variable.
Node[i].y = Ry2;
Node[i].z = RZ2;
P_ratio = d/(d+node[i].z); This is the top d/(d+z)
P_node[i] = new Object ();
p_node[i].x = O_x+node[i].x*p_ratio; Determine where the dots are on the screen
P_node[i].y = O_y-node[i].y*p_ratio;
}
Xz_angle_inc *= Angle_dec_factor; This speeds up the rotation of the mouse control
Yz_angle_inc *= Angle_dec_factor;
OLD_MX = _xmouse; Get the mouse coordinates at the beginning of the movie
Old_my = _ymouse;
Create_planes (); Call the above function and draw the cube
};
Comments: I only choose this example to parse, mainly because the drawing of cubes, is a very common example, is also a basic painting in 3D. Another, this example of the code is very concise, concise, plus the code of the first part of the definition of some values, to facilitate the development of other projects in the future, you can change this program into a class, suitable for their own later, to draw a cube call. At the same time, can be further developed on the basis of this program! For example, to fold several cubes, put the picture on the face of the cube, do some rotating stereo buttons and so on, are OK.
Appendix I:
/*function Create_planes () {
depth=0;
Plane1.clear ();
Plane1.beginfill (0xab548b,100);
Plane1.linestyle (3,0xff0000,100);
Plane1.moveto (P_NODE[5].X,P_NODE[5].Y);
Plane1.lineto (P_NODE[8].X,P_NODE[8].Y);
Plane1.lineto (P_NODE[7].X,P_NODE[7].Y);
Plane1.lineto (P_NODE[6].X,P_NODE[6].Y);
Plane1.lineto (P_NODE[5].X,P_NODE[5].Y);
Depth=node[8].z+node[7].z+node[6].z+node[5].z;
depth=depth/(-4);
Plane1.swapdepths (depth);
amount=depth/50*100+15;
New Color (PLANE1). SetTransform ({ra:amount,ga:amount,ba:amount,aa:amount});
New Color (PLANE1). SetTransform ({ra:amount,ga:amount,ba:amount});
depth=0;
Plane2.clear ();
Plane2.beginfill (0x808080,100);
Plane2.linestyle (3,0xff0000,100);
Plane2.moveto (P_NODE[1].X,P_NODE[1].Y);
Plane2.lineto (P_NODE[2].X,P_NODE[2].Y);
Plane2.lineto (P_NODE[3].X,P_NODE[3].Y);
Plane2.lineto (P_NODE[4].X,P_NODE[4].Y);
Plane2.lineto (P_NODE[1].X,P_NODE[1].Y);
Depth=depth+node[4].z+node[3].z+node[2].z+node[1].z;
depth=depth/(-4);
Plane2.swapdepths (depth);
amount=depth/50*100+15;
New Color (Plane2). SetTransform ({ra:amount,ga:amount,ba:amount});
depth=0;
Plane3.clear ();
Plane3.beginfill (0x8a0ff0,100);
Plane3.linestyle (3,0xff0000,100);
Plane3.moveto (P_NODE[1].X,P_NODE[1].Y);
Plane3.lineto (P_NODE[2].X,P_NODE[2].Y);
Plane3.lineto (P_NODE[6].X,P_NODE[6].Y);
Plane3.lineto (P_NODE[5].X,P_NODE[5].Y);
Plane3.lineto (P_NODE[1].X,P_NODE[1].Y);
Depth=depth+node[1].z+node[2].z+node[6].z+node[5].z;
depth=depth/(-4);
Plane3.swapdepths (depth);
amount=depth/50*100+15;
New Color (Plane3). SetTransform ({ra:amount,ga:amount,ba:amount});
depth=0;
Plane4.clear ();
Plane4.beginfill (0xe61a48,100);
Plane4.linestyle (3,0xff0000,100);
Plane4.moveto (P_NODE[2].X,P_NODE[2].Y);
Plane4.lineto (P_NODE[3].X,P_NODE[3].Y);
Plane4.lineto (P_NODE[7].X,P_NODE[7].Y);
Plane4.lineto (P_NODE[6].X,P_NODE[6].Y);
Plane4.lineto (P_NODE[2].X,P_NODE[2].Y);
Depth=depth+node[2].z+node[3].z+node[7].z+node[6].z;
depth=depth/(-4);
Plane4.swapdepths (depth);
amount=depth/50*100+15;
New Color (plane4). SetTransform ({ra:amount,ga:amount,ba:amount});
depth=0;
Plane5.clear ();
Plane5.beginfill (0x49b667,100);
Plane5.linestyle (3,0xff0000,100);
Plane5.moveto (P_NODE[4].X,P_NODE[4].Y);
Plane5.lineto (P_NODE[3].X,P_NODE[3].Y);
Plane5.lineto (P_NODE[7].X,P_NODE[7].Y);
Plane5.lineto (P_NODE[8].X,P_NODE[8].Y);
Plane5.lineto (P_NODE[4].X,P_NODE[4].Y);
Depth=depth+node[4].z+node[3].z+node[7].z+node[8].z;
depth=depth/(-4);
Plane5.swapdepths (depth);
amount=depth/50*100+15;
New Color (Plane5). SetTransform ({ra:amount,ga:amount,ba:amount});
depth=0;
Plane6.clear ();
Plane6.beginfill (0xdeb321,100);
Plane6.linestyle (3,0xff0000,100);
Plane6.moveto (P_NODE[1].X,P_NODE[1].Y);
Plane6.lineto (P_NODE[5].X,P_NODE[5].Y);
Plane6.lineto (P_NODE[8].X,P_NODE[8].Y);
Plane6.lineto (P_NODE[4].X,P_NODE[4].Y);
Plane6.lineto (P_NODE[1].X,P_NODE[1].Y);
Depth=depth+node[1].z+node[5].z+node[8].z+node[4].z;
depth=depth/(-4);
Plane6.swapdepths (depth);
amount=depth/50*100+15;
New Color (Plane6). SetTransform ({ra:amount,ga:amount,ba:amount});

}*/