Basic flash 3D tutorial

Flash is a two-dimensional animation production software. How can we make "three-dimensional" effects? This article provides a basic discussion on this issue.

See the demo:

1. convert a three-dimensional coordinate system into a two-dimensional coordinate system

1. Two-dimensional coordinate system in flash

(1) Coordinate Conversion

In flash, the upper left corner of the scenario is (0, 0), while in mathematics, the center is (0, 0). How can we convert it into a coordinate system in mathematics? Suppose the scene width is 550, and the height is 400.

X = 550/2 + this. _ x; // shift right of x

Y = 400/2-thix. _ y; // y move down

1.

Figure 1: converted Coordinate System	Figure 2: Angle and radian Conversion

(2) angle Conversion

Angle Calculation in flash: 2

Hudu = Math. atan2 (y, x); // use the formula tg a = y/x to calculate the value of a. In flash, a is expressed in radians. We need to convert it into degrees, set the radius r of the circle to 1, and the whole arc length to 2 * pai * r, that is to say, 360 degrees is equal to 2 * pai radians, so the formula for conversion to angle is: jiaodu = Hu du * 180/Math. PI; // converts radians to degrees. The formula is: angle = radians * 180/3. 14, 3.14 is calculated if (jiaodu <0) {jiaodu = jiaodu + 360;}/* The angle after conversion ranges from-180 to 180, and from 0 to 360 in mathematics, so when the value is less than 0, add 360 */

2. 3D Coordinate System in flash

3. The z axis indicates the distance of an object from the screen. When the position of the z axis increases, the object moves farther away from the screen. When the z value of the object decreases by an hour, the object moves toward the screen.

Figure 3: 3D Coordinate System	Figure 4 relationship between two-dimensional and three-dimensional points

3. Convert 3D coordinates to 2D coordinates

4. If we know a point (x, y, z), how can we determine the position on the screen? Using the triangle similarity principle, we can draw the following conclusions:

D/(d + z) = y1/y, which is introduced as follows: y1 = d * y/(d + z, the point position in the space can be displayed on a two-dimensional plane. We can also simplify it. Proposed factor d/(d + z), expressed by ratio (ratio), this formula becomes

Ratio = d/(d + z );

Y1 = ratio * x; available in the same way

X1 = ratio * y;

Finally, I finished the first step. I took a break and went to the Empire forum for a bit of rain. Then let's take a look at the second step.

2. control attributes of an object (size, level, transparency, etc)

Through the first step of learning, we can establish some three-dimensional effects, but there are still many shortcomings, such as the size of distant objects and near objects, the layers may be different, what should we do?

1. Control the mc size

In 3D coordinates, when the z value increases, that is, when the screen is far away, the smaller the object is, the larger the reverse is. How can we express the size of a mc in flash? Do you still remember the ratio in the previous step? Now we need to use this stuff. When z increases, ratio is reduced because z is used as the denominator in ratio. Conversely, when z decreases, ratio increases. Therefore, ratio can be used to control the mc size. As follows:

Mc1. _ xscale = mc. _ xscale * ratio;

Mc1. _ yscale = mc. _ yscale * ratio;

2. control mc Layers

The z value is the largest, and the object should be at the bottom, minimum, and upper layers. Therefore, we can use a large constant minus the z value to use this value as the mc level. In flash, set the mc hierarchy to swapDepths, as shown below:

Mc. swapDepths (1000-z); // sets the mc hierarchy.

3. control mc transparency

Objects in the distance seem to be blurred, and objects near the distance are clearer. In flash, _ alpha can be used to control the objects. The method is similar to the control size. The principle is not introduced. As follows:

Mc. _ alpha = 100 * ratio;

4. Control the mc angle (rotation)

This step is the most difficult and best. After learning, you will be able to produce very cool results

Three types of rotation are available. x rotation: coordinate x unchanged, y rotation: y unchanged, and z rotation: z unchanged. Let's first deduce z rotation.

For example, convert the vertex (x, y, 0) to (x1.y1.0) and calculate the vertex (x1.y1.0)

Obtained by using the sine and Cosine formulas in Mathematics

X1 = r * cos (a + B), while cos (a + B) = sina * cosb + cosa * sinb

Release: x1 = r (cosa * cosb-sina * sinb)

And because x = r * cosa, y = r * sina

So x1 = x * cosb-y * sinb

Also available: y1 = y * cosb + x * sinb

This is the formula for z rotation. The formula of x rotation and y rotation can be introduced in the same way. Summary:

Given Point: (x, y, z) point after rotation around the x axis (x1, y1, z1) point after rotation around the y axis (x2, y2, z2) point (x3, y3, z3) after rotating around the Z axis x (x remains unchanged) x1 = x y1 = y * cosb-z * sinb z1 = z * cosb + y * sinb y rotation (y unchanged) x2 = x * cosb-z1 * sinb y2 = y1 z2 = z1 * cosb + x * sinb z rotation (z unchanged) x3 = x2 * cosb-y1 * sinb y3 = y1 * cosb + x2 * sinb z3 = z2

From the above formula, we can see that to achieve rotation in flash, the rotation point of the X axis is required first, then the rotation point of the Y axis is obtained, and finally the rotation point of the Z axis is obtained. Finally, let's use an x-rotating application.

3. Create cube with X axis rotation

1. Draw a small ball in the scenario and press F8 to convert it to mc. The instance name is qiu.

2. Add a layer named as. Next we will write as, as shown below:

_ Root. onLoad = function () {shumu = 8; // defines the number of replication balls qiu. _ x = 6000; // make the original ball disappear for (var I = 0; I <shumu; I ++) {duplicateMovieClip ("qiu", "qiu" + I, i) ;}// copy the ball, which is used 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 ); // take the coordinates of the eight vertices of the cube from the three-dimensional coordinates and save them in the array D = 200; // The distance between the observer and the screen is hutu = 0.001; // control the rotation speed. B = hutu * 180/Math. PI; // conversion of angle 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 qiu_pos_x [I] = x1 according to the formula; qiu_pos_y [I] = y1; qiu_pos_z [I] = z1; // update the array element ratio = D/(D + z1); perspective_x = x1 * ratio; perspective_y = y1 * ratio; // calculate _ root ["qiu" + I] according to the formula. _ 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; // ball size _ root ["qiu" + I]. swapDepths (10000-qiu_pos_z [I]); // level of the ball _ root ["qiu" + I]. _ alpha = 100 * ratio; // set transparency }};

3. Press CTRL + Enter to test a simple 3D Rotation.