Actionscript 3 Fountain

February 6, 2009 by: smonte

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 300×300.

That’s it. We’re ready to move into actionscript.

Moving into Actionscript 3.0

2. 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!

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx