Actionscript 3 Fountain
February 6, 2009 by: smonteAfter 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!