Flash Bubbles with ActionScript 3

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.

4. You should now have a similar looking circle.

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