Flash Bubbles with ActionScript 3

March 16, 2009 by: smonte
Flash Random Bubbles

Learn how to randomly generate bubbles that interact with the mouse movement! We use ActionScript 3 as you may have guessed.

Setting up the environment

1. Create a new Flash document of size 400×300.

2. Draw a circle on the stage without any stroke. Make it of size 32×32.

3. Apply a radial fill for the circle. Use the following settings.

Shape Radial Fill

4. You should now have a similar looking circle.

Flash Bubble

5. Convert the circle to a movie clip. Name it Bubble and set the registration point to the center.

6. Linkage the movie clip to a class named “Bubble” (right click the movie clip in the library and select “Linkage” (CS3) or “Properties” (CS4)).

7. Remove the movie clip from the stage.

Moving to ActionScript 3

8. In the first frame of your Flash movie, type the following.

//The number of bubbles we will have on the stage
const NUMBER_OF_BUBBLES:uint = 60;
 
//Save the stage width and height
var stageWidth:Number = stage.stageWidth;
var stageHeight:Number = stage.stageHeight;
 
//This array will contain all the bubbles
var bubbles:Array = new Array();
 
//This loop creates and positions the bubbles to random locations
for (var i:uint = 0; i < NUMBER_OF_BUBBLES; i++) {
 
        //Create a new bubble
        var bubble:Bubble = new Bubble();
 
        //Assign a random y coordinate (from 0 to 300)
        bubble.y = Math.random() * stageHeight;
 
        //Calculate the horizontal distance from the mouse cursor to the center of the stage
        var distanceFromCenter:Number = mouseX - stageWidth / 2;
 
        //Calculate the x coordinate (from -400 to 800)
        bubble.x = Math.random()*stageWidth-Math.random()*distanceFromCenter*2;
 
        //Assign a random scale
        bubble.scaleX = bubble.scaleY = Math.random() + 0.3;
 
        //Assign a random alpha
        bubble.alpha = Math.random() + 0.5;
 
        //Assign a random current angle for the bubble
        bubble.currentAngle = Math.random() * Math.PI * 2;
 
        //Assign a random angle speed
        bubble.angleSpeed = Math.random() * 0.1;
 
        //Assign a random radius for the bubble
        bubble.radius = Math.random() * 5;
 
        //Assign a random y speed
        bubble.ySpeed =  -  Math.random() * 0.5;
 
        //Assign a random y acceleration speed
        bubble.acceleration =  -  Math.random() * 0.2;
 
        //Add the bubble to the bubbles array
        bubbles.push(bubble);
 
        //Add the bubble to the stage
        addChild(bubble);
}
 
//Add ENTER_FRAME listener for animating the bubbles
addEventListener(Event.ENTER_FRAME, moveBubbles);
 
//This function is called in each frame
function moveBubbles(e:Event):void {
 
        //Calculate the horizontal distance from the mouse cursor to the center of the stage
        var distanceFromCenter:Number = mouseX - stageWidth / 2;
 
        //Calculate a new x speed for the bubbles
        var xSpeed:Number = distanceFromCenter / 32;
 
        //Loop through the bubbles array
        for (var i:uint = 0; i < bubbles.length; i++) {
 
                //Save the bubble to a local variable
                var bubble:Bubble = (Bubble)(bubbles[i]);
 
                //Update the ySpeed of the bubble (accelerate)
                bubble.ySpeed += bubble.acceleration;
 
                //Update the y coorinate
                bubble.y+=bubble.ySpeed;
 
                //Update the current angle of the bubble
                bubble.currentAngle+=bubble.angleSpeed;
 
                //Update the x coordinate
                bubble.x+=Math.sin(bubble.currentAngle)*bubble.radius+xSpeed;
 
                //Check if the bubble is over the top of the stage
                if (bubble.y<0) {
 
                        //Assign a new random x coordinate
                        bubble.y=stageHeight;
                        bubble.x=Math.random()*stageWidth-Math.random()*distanceFromCenter*2;
 
                        //Assign a new random current angle
                        bubble.currentAngle=Math.random()*Math.PI*2;
 
                        //Assign a new random ySpeed
                        bubble.ySpeed= -Math.random()*0.5;
                }
        }
}

9. You are done, test your movie! Hope you enjoyed this tutorial and found it useful.

Download .fla

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

Comments

6 Responses to “Flash Bubbles with ActionScript 3”
  1. crila says:

    Awesome tutorial!

    @stephen D - You are looking in the wrong place. You need to look at this line

    //Add the bubble to the stage
    addChild(bubble);

    One possible solution would be to make a movie clip named background (preferably a vector or something the size of your background), put it on the stage, and give it an instance name of something like “holder”. Then in your code on that addChild line type holder.addChild(bubble);. That will add the bubbles to your holder movie clip instead of directly onto the stage. (not sure if that will work, but its where you should start).

    @bobby - The creator of this tutorial has commented almost every line of the code. How much more explaining could you need?!

    Reply
  2. Stephen D says:

    I want the bubbles to fly in the background of my project.. how do you achieve that effect..

    I’ve attempted manipulating this line;

    //Check if the bubble is over the top of the stage
    if (bubble.y<0) {

    Reply
  3. Kevin says:

    Helpful tut man, great job.

    @ austin, Vink Export for actionscript and Export in first frame. Goto Class en type in “Bubble” It should automaticly do.

    Reply
  4. bobby says:

    you dont explain enough. thanks for nothing

    Reply
  5. austin says:

    after i click on Linkage what do i do before i remove from stage

    Reply
  6. Orion says:

    Can you please use actionscript 2…
    i dont have CS3 or CS4

    Reply