Particle Fountain with ActionScript

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

Related tutorials:

  1. Physics with ActionScript 3
  2. Advanced Animation with Drawing API
  3. Snowfall Effect
  4. Dragging Methods with ActionScript 3
  5. Creating Fireworks with ActionScript 3

Comments

3 Responses to “Particle Fountain with ActionScript”
  1. drbel says:

    Very very nice tutorial !!!

    Where was hiden this site ?

    I wonder particles scripts.

    Log in to Reply
  2. LON says:

    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)

    Log in to Reply
    • Anwarhahj says:

      @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

      Log in to Reply

Leave a Reply

You must be logged in to post a comment.