Random Bubbles made with ActionScript 3.0

This is my first tutorial in witch I will explain how to make random bubbles with ActionScript 3.0. It’s a really nice effect.This is how our effect will look: Let’s start.

• 1.Go to File – New – and make a new document
• 2.On the new document rename the first layer to bg (from background) and make a new layer and name it actions. Lock the actions layer.
• 3.Go to the tools palette select the rectangle tool and on the bg layer draw a rectangle that will cover the work area. Select the rectangle go to Windows-color .In the color palette select the fill ,set the gradient type to linear.For the first color type: #33CCFF and for the second #0033FF.

Ok now we have the background finished.

• 4.Go to insert and select New Symbol. Set the name to bubbles and type to MovieClip and click ok.
• 5.From the tools palette select the oval tool set the stroke to none and for the fill color pick a light blue, then draw a circle. Select the circle and in the Properties panel type 40 for the width and 40 for the height. With the circle selected go to Align panel and select align horizontal center and align vertical center to center the circle in the middle of the stage.
• 6.Now let’s make our circle to look like a bubble. Select the circle go to Window-Color. In the color palette for the gradient select the radial type and type the colors:first color: #FFFFFF ; second: #00CCFF and third: #0099FF.
• 7.Select the circle hit F8 to convert the circle to a MovieClip and set it’s name to bubble and click ok.
• 8.In the timeline select frame 15 and hit F6 to insert a new keyframe. With frame 15 still selected ,on the stage select the bubble and in the properties panel type – 250 for y .On the same panel set the alpha to 0.
• 9.Select first frame ,right clik and select Create motion tween.
• 10.Go back to Scene1
• 11.Go to Window- Library select the bubbles movieClip, right click ,select Linkage, select Export for ActionScript and in the class field type Bubbles.

Now let’s write some code.

• 12.On scene1 select frame 1 on actions layer and hit F9 to open ActionScript panel.
• 13.Select the code and paste in ActionScript panel.

var holder:Sprite = new Sprite();
addChild(holder);
holder.y = 400;
var arrayBubble:Array = [];
for (var i:int; i<200; i++) { arrayBubble[i]= new Bubbles(); holder.addChild(arrayBubble[i]); arrayBubble[i].x = Math.random() * stage.stageWidth; arrayBubble[i].scaleX = arrayBubble[i].scaleY = Math.random(); arrayBubble[i].gotoAndPlay(Math.ceil(Math.random()*15)); }

That is all. Hit Ctrl + enter to test your file(don't forget to remove the numbers before every line of code).It should work fine.

Let’s look at the code. We created the container(line 1) for our bubbles and added to the DisplayList(line 2). After we setup a for loop in witch we will loop 200 times (make 200 bubbles)in line 3. Setup an array that will hold our bubbles(line 4), position the holder that is the container for our arrayBubbles(line 5), populate the arrayBubbles with our bubbles(line 6) and add the arrayBubbles to our holder(line 7). In line 8 we position the bubbles on the x axis.The bubbles will have a random x between 0 and stageWidth. In line 9 we scale our bubbles And finally in line 10 we instruct the bubble to go an play one frame from our 15 frames animation. That is all.

If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.I will see you on next tutorial. You can download the source file from here: Random bubbles.