Actionscript 3 Fountain
After this lesson, you'll be able to create a movie as seen above. Move your mouse up and down on the stage to see how the fountain reacts. This tutorial is pretty easy to follow, since there is only Actionscript 3.0 involved. All of the shapes and such are created using simple actionscript code :) . So let's get started!
Setting up the environment
1. Create a new document of size 300x300.
That's it. We're ready to move into actionscript.
Moving into Actionscript 3.0
Type the following.
/*
Define the gravity.
This determines how fast the balls are pulled down.
*/
var gravity:Number = 0.4;
//Create 128 balls in the for-loop (change this to whatever you want)
for (var i = 0; i < 128; i++) {
//Create a ball
var ball:MovieClip = new MovieClip();
//Call the function that draws a circle on the ball movie clip
drawGraphics (ball);
//Initial position of the ball
ball.x = stage.stageWidth / 2;
ball.y = stage.stageHeight;
//Define a random x and y speed for the ball
ball.speedX = Math.random() * 2 - 1;
ball.speedY = Math.random() * -8 - 4;
//Add the ball to the stage
addChild (ball);
//ENTER_FRAME function is responsible for animating the ball
ball.addEventListener (Event.ENTER_FRAME, moveBall);
}
/*
This function is responsible for drawing a circle
on a movie clip given as parameter
*/
function drawGraphics (mc:MovieClip):void {
//Give a random color for the circle
mc.graphics.beginFill (0xffffff * Math.random());
//Draw the cirlce
mc.graphics.drawCircle (0, 0, 3);
//End the filling
mc.graphics.endFill ();
}
This piece of code "initializes" our setup. To get the animation in your movie, type the following.
//This function is responsible for animation a ball
function moveBall (e:Event):void {
//Let's assign the ball to a local variable
var ball:MovieClip = (MovieClip)(e.target);
//Apply gravity tot the y speed
ball.speedY += gravity;
//Update the ball's postion
ball.x += ball.speedX;
ball.y += ball.speedY;
//Chech if the ball has gone under the stage
if (ball.y > stage.stageHeight) {
/*
Calculate the mouse height.
We use the mouse height to give the ball a new random y speed
*/
var mouseHeight:Number = stage.stageHeight - mouseY;
//Calculate the new y speed
var newSpeedY = Math.random() * (-mouseHeight * 0.05);
//Move the ball to the initial position
ball.x = stage.stageWidth / 2;
ball.y = stage.stageHeight;
//Assign the new calculated random speeds for the ball
ball.speedX = Math.random() * 2 - 1;
ball.speedY = newSpeedY;
}
}
That's it, test your movie!
