AS2.0 wonderful bitmap effects of the waves
Related Tags:
Elliptic parameter equation, animation programming is a very popular technology, can make a lot of practical effects, such as the effect of waves the banner, in this case with the movement of the mouse, as a banner bitmap wind waves.
Below we learn how to use this technology.
1. On the relevant parameters
First produced this example to understand ellipse parameters of the equation used to his below for a simple algorithm analysis.
1. Single mc (video clip) in the oval on the campaign approach
Figure 1
Mc said a black spots, radian said that the arc in mathematics from the x is Semiaxle, beginning with the anti-clockwise rotation of 2 π week, and through the arc of the ellipse parameters mc equation to calculate the coordinates, as shown in Figure 1, that specific Methods (Note: the * code by): mc._x = a * Math.cos (radian);
Mc._y = b * Math.sin (radian);
A, b are oval in the x, y coordinate axis containing distance, representatives oval the size of the increase can be realized radian mc coordinates changes in the oval on the mc campaign. Elliptic the center coordinates (0,0). Translation oval to the mc coordinates with the center coordinates (cen_x, cen_y), said that specific methods:
Mc._x = a * Math.cos (radian) cen_x;
Mc._y = b * Math.sin (radian) cen_y;
2, mc distributed in a number of ways of handling on the Ellipse
Figure 2
If it is more than in the Oval mc distribution, the situation would be different, as shown in Figure 2. In a uniform distribution on the oval for example, a circle of p = 2 π, and there is num = 4 mc, mc arc as shown below:
Mc mc1 mc2 mc3 mc4 value of π radians / 2 π-π 3 / 0 or 2 π calculation of P / 4 P * 1 / 4 * 2 P / 4 * 3 P / 4 * 4
From the second line forms can be seen, the Spacing is 4 mc p / 4 = π / 2. The third line is that these curvature is calculated as follows: on the pitch by a numerical value. Replaced by num 4, instead of using a numerical variable j can be calculated num-mc value of the arc, and then the coordinates obtained mc. As follows:
For (var j = 1; j <= num; j) (
Var radian = p / j * num; / / The distance between the two mc boarded j arc that each mc
This [ "mc" j]. _x = A * Math.sin (radian);
This [ "mc" j]. _y = B * Math.cos (radian); / / through the arc of the coordinates of each mc
)
If distributed in the half ellipse, or a certain pitch in the oval part of the distribution, as long as the two mc change the spacing arc.
3, mc attribute configuration
In order to comply with the law perspective, it is necessary to set up mc attributes: transparency and depth of Figure 2 mc1 the transparency of the smallest mc2 and mc4 followed mc3 most of the other attributes of the same changes in the law and transparency. These are along the elliptical motion mc, mc So according to the real-time location to set mc attributes. The simplest way is to use mc y coordinate it with the changes of the above characteristics. Mc can also use the x coordinates, and the arc mc, mc from the center of the oval, however, must be converted. Below x coordinate to mc example:
Figure 3, 4
Figure 3, cosine function calculated by the x coordinate of a positive there is a negative, and the transparency of mc impossible for the negative, so when x is negative, it is necessary to convert, or from anti-from absolute. When mc located at the Bottom of the x-axis (π-2π), now know from Figure 4 y <0, x coordinates than a large, x = 2 * a-Math.abs (x). List of before and after conversion are as follows:
Mc arc 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
X coordinate of this 0-2 in a constant cycle between conversion of the following:
X = (y <0)? 2 * a-Math.abs (x): Math.abs (x);
4. Production category
Algorithm clearly and bring it into categories for later use. Categories are as follows:
(Class Move
Private var p = 2 * Math.PI; / / 2 π in Mathematics
Private var c_x, c_y, c_a, c_b, nu, time: Number;
/ / Followed by center coordinates (c_x, c_y)
Intercept (c_a, c_b), nu mc for the number of incremental time for Radian
Private var obj: MovieClip; / / constructor function
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 reproduction function
)
/ / Set up by Radian and the initial increment
Public function get timer (): Number (
Return time;
)
Public function set timer (t: Number): Void (
Time = t;
)
/ / Set up and be the center of elliptic coordinates x
Public function get cen_x (): Number (
Return c_x;
)
Public function set cen_x (x: Number): Void (
C_x = x;
)
/ / Set up by elliptical and y coordinates of the center of
Public function get cen_y (): Number (
Return c_y;
)
Public function set cen_y (y: Number): Void (
C_y = y;
)
/ / Get and set oval in the x axis intercept
Public function get cen_a (): Number (
Return c_a;
)
Public function set cen_a (a: Number): Void (
C_a = a;
)
/ / Get and set oval in the y axis intercept
Public function get cen_b (): Number (
Return c_b;
)
Public function set cen_b (b: Number): Void (
C_b = b;
)
/ / Get on the oval and set the number of mc
Public function get num (): Number (
Return nu;
)
Public function set num (n: Number): Void (
Nu = n;
)
/ / Set up the x coordinate mc
Public function set_x (radian: Number): Number (
Return Math.cos (radian) * c_a c_x;
)
/ / Y coordinate settings mc
Public function set_y (radian: Number): Number (
Return Math.sin (radian) * c_b c_y;
)
/ / Copy, a num-mc, and uniform distribution
Public function duplicate (obj: MovieClip) (
Var j: Number = 1 while (j <= num) (
Obj.duplicateMovieClip ( "a" j, j);
_root [ "A" j]. N = p / j * num;
/ / Mc each of the initial curvature
_root [ "A" j]. GotoAndStop (j) / / mc Skip to the corresponding frame
_root [ "A" j]. _x = Set_x (p / j * num);
_root [ "A" j]. _y = Set_y (p / num * j) / / calculate coordinates
J;
)
)
/ / Mc campaign
Public function myMove (obj: MovieClip): Void (
Obj._x = set_x (obj.n time);
Obj._y = set_y (obj.n time); / / mc each Radian Radian initial value equivalent to incremental increases
_xmouse Time time => c_x? Time 0.005: time-0.005;
/ / Mouse Position determined in accordance with the direction of rotation, rotation speed of 0.005
)
/ / Coordinate conversion
Public function trans_x (obj: MovieClip): Number (
Var x: Number = obj._x-c_x;
Var y: Number = obj._y-c_y;
/ / Obtain the coordinates of mc
X = (y <0)? 2 * c_a-Math.abs (x): Math.abs (x) / / conversion
Return x; / / conversion value
)
/ / Set the transparency and depth mc
Public function set_alpha (obj: MovieClip): Void (
Obj._alpha = trans_x (obj) / c_a * 40 20; / / 20-100
Obj.swapDepths (trans_x (obj ));// depth settings
)
/ / Mc set the direction of the x zoom
Public function set_xscale (obj: MovieClip): Void (
Obj._xscale = trans_x (obj) / c_a * 100-100; / / -100 to 100
Obj.swapDepths (trans_x (obj));
)
)
Move.as for preservation, should be emphasized that the type in the phrase:
_root [ "A" j]. GotoAndStop (j);
It is used for bitmap cut.
2. Examples production methods
1, animation production Cover
A new film editing, film editing in the first tier of the establishment of the red rectangle and the second placed bitmap, a registered plans reign at the centre point. In section and a rectangular bitmap Left alignment, in the last one, rectangular bitmap and the far right alignment, the first layer to create animation, and as a mask. Figure 5 below. Making good film clips of the scenes drag, called myMc examples.
2, the preparation process
New floor in the first frame, type:
Var myMove: Move = new Move (200, 150, 10, 2, 40, 3, myMc);
/ / Examples myMove built, the center coordinates (200,150),
/ / Intercept 10 and the number of 2,40 for mc, mc 3 for the initial increment
In myMc add:
OnClipEvent (mouseMove) (
_parent.myMove.myMove (This); / / mc campaign
_parent.myMove.set_alpha (This); / / mc transparency
)
And saving the file to the same directory Move.as test. We can modify examples of the various parameters, and deepen the understanding of the process.
Other such applications: 3-D menus, text surround, bitmap effects of the cylinder-shaped oval, and other relevant courseware. We can stretch of the imagination to add some of the properties and methods, to produce more results.
Enjoy:
ZJS35 site: http://zjs35.edujh.cn
Source File Download
- Div + css ? ? ?
- Div ?asp.net ? ?
- Flash effects of the scanning optical character effects
- On the hidden div
- CSS + DIV website effects appreciate: very cool angle BANNER
- DIV and Layer
- Firework production of wood effects
- CSS generated special effects
- DRAG the DIV
- What is DIV?
- CSS: ? ? ? ?div ? ?
- Fillet div
- DIV center
- Div attribute
- Fireworks strokes effects
- Div borders
- Div effects of the use of achieving IFrame
- DIV
- Div ? ? ? ¨°
- Div layer
