Core tips: Flash AS3.0 realize a realistic fountain effect tutorial.
We will introduce the use of speed vector and reset object techniques to achieve the fountain effect. The so-called vector is the amount of direction. For example, a car from east to west at a speed of 80 kilometers per hour, then we can get the car's speed vector, which includes two elements: speed, 80 kilometers per hour, direction, from east to west.
Now let's analyze how the fountain was formed?
A fountain is a number of drops of water that are sprayed upwards and then fall back to the ground by gravity. What is the speed vector of this process and what is the specific one? It is easy to find at least two forces, one is to make the water droplets up the external force, one is to make the water drop back to the ground gravity.
The velocity vector of the external force: the speed I set to 10-20 random number, the direction is upward that must be a negative on the Y axis. The velocity vector is added to the water droplets and the water droplets are ejected upwards.
In the Enter_frame event, the Y-value of this droplet is added to a random number between 10 and 20.
The velocity vector of gravity: the speed is smaller. I set it to 0.5, and the direction is positive on the Y axis. The same is added to the Enter_frame event, so that the droplets fall back to the ground after spraying.
There is also a problem, because the speed vector is added to the Enter_frame event, the water droplets may have been the speed vector movement, away from the stage, the fountain will not know where to go.
To solve this problem, it is necessary to reposition the water droplets beyond the stage boundary to the nozzle, thus forming an uninterrupted jet.
OK, the above analysis of the effect generation method, the following to make
The first step is to draw a drop of water, create a new movie clip element, with a radial fill to draw an ellipse, the left color is white, transparency 100%, right color mark slightly gray, transparency 50%. Set the ellipse in the property panel to be 2 pixels wide and 5 pixels high. Right-click the symbol in the library, open the Connection window, (CS4 open the Properties window), set a class name, I set the pall.
Next, go back to the main scene, open the Frame action panel, and we'll write the code.
Fountain is formed by a number of water droplets, how many? I've made 500:
var count:int = 500;
Gravity velocity vector:
var zl:number = 0.5;
Put these 500 drops in an array:
var Balls:array;
Balls = new Array ();
Use a For loop to place 500 drops of water in the array:
for (var i:int = 0; i < count; i++) {
var ball:pall = new Pall ();
Position the droplet to the nozzle of the droplet:
ball.x = 260;
BALL.Y = 200;
A velocity vector is also set in the x-axis direction so that the droplets are within a certain range of the x-axis and the velocity vector is stored in the custom attribute VX for each droplet:
ball["VX"]= math.random () * 2-1;
Here is the velocity vector in the y-axis direction, which is in the custom attribute VY:
ball["VY"] = Math.random () *-10-10;
Place the drops on the stage and into the array:
AddChild (ball);
Balls.push (ball);
Next listen for the Enter_frame event to achieve the fountain effect:
AddEventListener (Event.enter_frame, onenterframe);
Onenterframe function Content:
With a For loop the droplets in the array are combined with each speed vector:
for (var i:number = 0; i < balls.length; i++) {
var ball:pall = Pall (balls);
The first choice is to add a gravitational velocity vector to the jet velocity vector, so that each frame is added with a gravity, and the jet force does not change, so gravity will gradually exceed the jet force surface to drop the drops:
ball["VY"] + = ZL;
Add the x,y axis velocity vector to the water droplets:
ball.x +=ball["VX"];
Ball.y +=ball["VY"];
Next is to see if the water is beyond the stage, if the stage is exceeded, then reposition the water droplets to the nozzle, and set the speed vector to the initial state.
if (ball.x-ball.width/2> stage.stagewidth
ball.x + BALL.WIDTH/2 < 0
BALL.Y-BALL.WIDTH/2 > Stage.stageheight
Ball.y + BALL.WIDTH/2 < 0) {
ball.x = 260;
BALL.Y = 200;
ball["VX"]= math.random () * 2-1;
ball["VY"] = Math.random () *-10-10;
Complete code:
var count:int = 500;
var zl:number = 0.5;
var Balls:array;
Balls = new Array ();
for (var i:int = 0; i < count; i++) {
var ball:pall = new Pall ();
ball.x = 260;
BALL.Y = 200;
ball["VX"]= math.random () * 2-1;
ball["VY"] = Math.random () *-10-10;
AddChild (ball);
Balls.push (ball);
}
AddEventListener (Event.enter_frame, onenterframe);
function Onenterframe (event:event): void {
for (var i:number = 0; i < balls.length; i++) {
var ball:pall = Pall (Balls[i]);
ball["VY"] + = ZL;
ball.x +=ball["VX"];
Ball.y +=ball["VY"];
if (ball.x-ball.width/2> stage.stagewidth
ball.x + BALL.WIDTH/2 < 0
BALL.Y-BALL.WIDTH/2 > Stage.stageheight
Ball.y + BALL.WIDTH/2 < 0) {
ball.x = 260;
BALL.Y = 200;
ball["VX"]= math.random () * 2-1;
ball["VY"] = Math.random () *-10-10;
}
}
}