Particle Fountain with ActionScript
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!
Related tutorials:
Comments
3 Responses to “Particle Fountain with ActionScript”Leave a Reply
You must be logged in to post a comment.
Very very nice tutorial !!!
Where was hiden this site ?
I wonder particles scripts.
Fantastic effect like the others – is it possible to restrict the range of colors to random within a certain range of the color palet, eg, random shades of green? (instead of totally random)
@LON if u just figure out the % numerical value range you want them to be colored with then use
var beginRange:Number= //lowerrange value
var theRange:Number= //size of range
mc.graphics.beginFill(0xfffff * ( (Math.random()*theRange)+beginRange)
wouldnt that work