AS2.0 the bitmap of the wonderful effects

Flare | special effects

Elliptic parametric equation, is a very commonly used in animation programming technology, can make a lot of practical effects, such as the effect of the banner, in this case, with the mouse movement, the bitmap is like a banner with the wind fluttering.

Here we will learn how to use this technique.

A Related parameter explanation

To make this example, we must first understand the use of the elliptic parametric equation, and then make a simple analysis of its algorithm.

1. A method of handling the motion of a single MC (movie clip) on the ellipse

Figure 1

Black dots represent a mc,radian that represents the radian in mathematics, starting with the X positive half axis, rotate counterclockwise for one week as 2π, and compute the MC coordinates by radians and elliptic parametric equations, as shown in Figure 1, the concrete representation method (Note: * Represents the multiplication in the code): Mc._x=a*math.cos ( Radian);
Mc._y=b*math.sin (Radian);

A, B is the ellipse on the x, Y axis of the load distance, representing the size of the ellipse, Radian continuously increase can realize the change of MC coordinates, so that the MC in the Oval movement. The center coordinates of the ellipse are (0,0). To translate the ellipse, add the coordinates of the MC to the central coordinates (cen_x,cen_y), and specify the method:

Mc._x=a*math.cos (Radian) +cen_x;
Mc._y=b*math.sin (Radian) +cen_y;

2. How to handle multiple MC distributions on Ellipse

Figure 2

If more than one MC is distributed over the ellipse, the situation will be different, as shown in Figure 2. In order to evenly distribute the ellipse as an example, a circumference is p=2π, and there is a num=4 MC, these MC radians are shown in the following table:

Mc	Mc1	Mc2	Mc3	Mc4
Radian Value	Π/2	Pi	3π/2	2π or 0
Calculation method	P/4*1	P/4*2	P/4*3	P/4*4

As you can see from the second row of the table, the spacing of the four MC is P/4=Π/2. The third line is how these radians are calculated: Spacing by the previous number. With Num instead of 4, with a variable J instead of the value, you can calculate the number of num MC radian Value, and then find the coordinates of the MC. As shown below:

for (Var j=1;j<=num;j++) {
var radian= p/num*j; Two MC spacing multiplied by J that is the radian of each MC
This["MC" +j]._x=a*math.sin (Radian);
This["MC" +j]._y=b*math.cos (Radian);//calculate the coordinates of each MC by Radian value
}

If you want to distribute in half an ellipse, or a certain amount of space distribution in the ellipse part, as long as the change of two MC pitch radians.

3, the method of setting up the MC property

To conform to the perspective of the law, to set the properties of the MC: transparency, depth, etc., such as the MC1 in Figure 2, the minimum transparency, MC2 and MC4 second, MC3 the largest, the other properties of the same change in the law and transparency. But these MC all is along the ellipse movement, therefore must according to the MC real-time position to set up the MC the attribute. The simplest method is to use the y-coordinate of MC, and its change rule accords with the above characteristic. Also available in the MC's X-coordinate, the MC Radian, the MC to the Ellipse center distance and so on, but must convert. The following is an example of the X coordinate of the MC:

Figure 3, Figure 4

As shown in Figure 3, the X coordinates computed by the cosine function have positive negative, while the transparency of the MC cannot be negative, so when X is negative, it is converted, reversed, or taken absolute value. When the MC is below the x-axis (π-2π), it is known from Figure 4 that the y<0,x coordinates should be larger than a, so X=2*a-math.abs (x). The list before and after the conversion is as follows:

The Radian of the MC	0-π/2	π/2-π	Π-3π/2	3π/2-0
X coordinates	a-0	0--a	-a-0	0-a
Math.Abs (x)	a-0	0-a	a-0	0-a
2*a-math.abs (x)	a-0	0-a	a-2a	2a-a

This allows the x coordinates to circulate between 0 and 2a, as follows:
x = (Y < 0)? 2*a-math.abs (x): Math.Abs (x);

4. Making class

After the algorithm is clear, write it as a class to facilitate later use. The classes are as follows:

Class Move {
private var p = 2π in Mathematics of 2*math.pi;//
Private Var c_x, c_y, C_a, C_b, Nu, Time:number;
Central coordinates in turn (c_x, c_y),
Intercept (C_a, c_b), Nu is the number of MC, time is radians increment
private Var Obj:movieclip; Constructors
Public function Move (x, Y, a, B, N, T:number, O:movieclip) {
c_x = x;
c_y = y;
C_a = A;
C_b = b;
Nu = n;
Time = t;
Duplicate (O);//Call copy function
}
Get and set the starting increment of radians
Public function Get Timer (): number {
return time;
}
Public Function set Timer (t:number): Void {
Time = t;
}
Gets and sets the center x-coordinate of the ellipse
Public function Get Cen_x (): number {
return c_x;
}
Public function set Cen_x (x:number): Void {
c_x = x;
}
Gets and sets the center y-coordinate of the ellipse
Public function Get Cen_y (): number {
return c_y;
}
Public function set Cen_y (y:number): Void {
c_y = y;
}
Gets and sets the intercept of the ellipse on the x axis
Public function Get Cen_a (): number {
return c_a;
}
Public function set Cen_a (a:number): Void {
C_a = A;
}
Gets and sets the intercept of the ellipse on the Y axis
Public function Get Cen_b (): number {
return c_b;
}
Public function set Cen_b (b:number): Void {
C_b = b;
}
Gets and sets the number of MC on the ellipse
Public function Get num (): number {
Return nu;
}
Public function set num (n:number): Void {
Nu = n;
}
Set the X coordinate of the MC
Public Function set_x (radian:number): number {
Return Math.Cos (radian) *c_a+c_x;
}
Set the y-coordinate of the MC
Public Function set_y (radian:number): number {
Return Math.sin (radian) *c_b+c_y;
}
Copy, Generate num MC, and distribute evenly
Public function Duplicate (obj:movieclip) {
var j:number = 1; while (J<=num) {
Obj.duplicatemovieclip ("A" +j, j);
_root["a" +J].N = P/num*j;
Starting Radian value for each MC
_root["A" +j].gotoandstop (j);//MC jumps to the corresponding frame
_root["a" +j]._x = set_x (p/num*j);
_root["a" +j]._y = Set_y (P/NUM*J);//COMPUTE coordinates
j + +;
}
}
The movement of MC
Public Function Mymove (obj:movieclip): Void {
obj._x = set_x (obj.n+time);
obj._y = set_y (obj.n+time);//per MC radians equal to the starting Radian value plus increment
Time = _xmouse>c_x? time+0.005:time-0.005;
According to the mouse position to determine the direction of rotation, 0.005 is the rotational speed
}
Transformation of coordinates
Public Function Trans_x (obj:movieclip): number {
var x:number = obj._x-c_x;
var y:number = obj._y-c_y;
Get the coordinates of the MC
x = (y<0)? 2*c_a-math.abs (x): Math.Abs (x);//Conversion
Return x;//returns the converted value
}
Set the transparency and depth of the MC
Public Function Set_alpha (obj:movieclip): Void {
Obj._alpha = trans_x (obj)/c_a*40+20;//from 20 to 100
Obj.swapdepths (trans_x (obj));//Depth setting
}
Set the X-direction scaling of the MC
Public Function Set_xscale (obj:movieclip): Void {
Obj._xscale = trans_x (obj)/c_a*100-100;//from-100 to 100
Obj.swapdepths (trans_x (obj));
}
}

Save As Move.as, you need to emphasize the statement in the class:
_root["A" +j].gotoandstop (j);
It is used for bitmap cutting.

Two Instance Making method

1. Make Mask Animation

Create a new movie clip, create a red rectangle in the first layer of the movie clip, place a bitmap in the second layer, and register the center of the map. In the 1th frame bitmap and rectangular left aligned, at the last frame, the bitmap and the right side of the rectangle aligned, the first layer to create the animation, and set as a mask. As shown in Figure 5. Drag the made movie clip to the scene, with the instance named MYMC.

2. Write the program

Create a new layer and enter in the first frame:

var mymove:move = new Move (2, 3, MYMC);
Example Mymove, center coordinates (200,150),
Intercept 10 and 2,40 are the number of MC, 3 is the starting increment of MC

Add on the MYMC:
Onclipevent (MouseMove) {
_parent.mymove.mymove (this);//MC movement
_parent.mymove.set_alpha (this);//MC transparency
}

Save the file to the same directory as move.as and test it. We can modify the parameters of the example to deepen the understanding of the program.

Other applications of this type: 3D menu, text wrapping, bitmap barrel effect, ellipse related courseware, etc. You can use your imagination to add some attributes and methods to your class to create more results.

Appreciate:

ZJS35 's website: http://zjs35.edujh.cn
source File Download