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();
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.

24 comentarii:

Post a Comment

  • Steve : February 15, 2008 at 6:20 AM

    Thanks for the tutorial.

    I think there's a typo in line #6. Bubbles is spelled Bubbels.

  • Biochimistu : February 15, 2008 at 6:33 AM

    Yes you have right it was a typo, I fixed the misspelling.Thanks for notify me.

  • john : February 21, 2008 at 12:05 AM

    thanks for the tutorial. i followed your steps and got an error at line 11 - arrayBubble[i] = new Bubble(); apparently it's calling an undefined method. any ideas where i've went wrong? thanks!

  • Biochimistu : February 21, 2008 at 12:36 AM

    I have eating an "s". Change your line from:
    arrayBubble[i] = new Bubble() to arrayBubble[i] = new Bubbles().That should fix the problem. Please tell me if it works.

  • Anonymous : February 21, 2008 at 8:42 AM

    Hi man, nice tutorial
    everything is working fine...
    but instead of having a random effect with bubbles continously generated, I'm just creating waves of 200 bubbles at time.

  • John : February 23, 2008 at 6:34 PM

    thank you!!! that fixed it right up... you gotta love a typo... excellent tutorial... a great way to get my feet wet...

  • Ronnie : June 30, 2008 at 9:13 AM

    I followed the tutorial but I got an error message on lines 1 and 3.

    1. The class or interface 'Sprite' could not be loaded.

  • Biochimistu : July 1, 2008 at 3:01 AM

    The script it’s write in ActionScript 3(Flash CS3). Are you using ActionScript 3?

  • terrill13 : July 5, 2008 at 9:39 AM

    Brilliant - thanks so much! Minimum code with maximum bang - thank you for posting this! Worked perfect the first time!

  • Anonymous : August 26, 2008 at 11:26 PM

    var holder:Sprite = new Sprite();


    for (var i:int; i<50; i++) {

    var arrayBubble:Array = new Array();

    holder.y = 400;

    arrayBubble[i] = new Bubbles();


    arrayBubble[i].x = Math.random()*stage.stageWidth;

    arrayBubble[i].scaleX = arrayBubble[i].scaleY = Math.random();



    I keep getting a call to an undefined method on line 11. any ideas?

  • Fale : August 27, 2008 at 12:32 PM

    Hi, thanks for the tutorial, worked perfectly for me. However I have some elements on the stage and the bubbles should run behind those elements. How can I fix that?
    Thanks a lot, very much

  • Biochimistu : August 28, 2008 at 10:22 AM

    Post the error that the Flash IDE throws and not the code.
    Download the source file and take a look there and make sure that you haven’t skipped the 11 step of the tutorial.

  • Biochimistu : August 28, 2008 at 10:31 AM

    Hi Alejandro,
    Make a new layer and drag it above the bg layer and put your elements on the layer you just created.

  • Fale : October 1, 2008 at 8:46 AM

    Hi again. Just wanted to share this with you because is very weird. All the bubbles are now suddenly aligned to the left of the canvas when previewing the html where the swf is embeded. When played alone the swf looks fine. However, I created a new html page and also looks fine, so not sure why is doing this in the original html where worked just fine until today. Important: is happenning only in Firefox, Safari and Opera are ok. And I recently downloaded a new version of Firefox, so who nows. Here are the links:

    NOT OK


    Thanks again,

  • Biochimistu : October 1, 2008 at 11:29 PM

    Hi Alejandro
    I have checked your links but I don’t see any problem, the bubbles are fine. My Firefox version is 3.03.
    I see that you are not using SwfObject to embed the sfw in the html page. You should use it its the most reliable method to embed swfs into html. You can check it here: swfobject

  • Fale : October 2, 2008 at 8:09 AM

    Thanks a lot man. Have a nice day.

  • Biochimistu : October 3, 2008 at 6:04 AM

    You too.Thanks

  • Anonymous : December 1, 2008 at 11:01 AM

    Very nice. Works great!

  • Heero : June 18, 2009 at 6:08 AM

    Guys, I have a favor what if I have to put the bubbles on a certain movie clip? how would I do it? newbie me...

  • Biochimistu : June 19, 2009 at 7:56 AM

    Hi Heero,
    They are on a movie clip (a sprite actually) the holder sprite. You can replace the holder sprite with your movie clip and add the bubbles to it.

  • Heero : June 19, 2009 at 8:09 AM

    Halu guys, this Random Bubbles is made with AS 3.0, I forgot that I use Actionscript 2.0 and I run into problems with Sprite "class or interface Sprite could be loaded".
    Is there any work-around for this to work on Actionscript 2.0?

    Thanks for the reply.

  • Biochimistu : June 21, 2009 at 11:41 AM

    Hi Heero,
    Sure, this can be done in as2.If you are a beginner don’t waste time learning as2.Learning as2 and after switching to as3 it won’t help you, it will confuse you.

  • Heero : June 22, 2009 at 1:54 AM

    Halu guys, I need an animation like this to work on ActionScript 2.0. I know that it is good to use ActionScript 3 but I have to work around to this to make it work on ActionScript 2.0.

  • Biochimistu : June 23, 2009 at 5:39 AM

    Sorry Heero, I don’t use as2 anymore. Try a search on Google, you will find for sure something similar.