Viral videos from Unruly Media

Unruly Media creates viral campaigns for the world's top brands. The video is then distributed worldwide via Unruly Media's ad distribution network. See some of the videos here:

 








Creating random animated bubbles!

view all »


Ever wondered how to create an under-water bubble effect in Flash? Well wonder no more! With a few simple steps, you’ll have a nice editable file like this:

And you can easily set the volume, speed and size of the bubbles to suit your needs!

Well lets get started.

STEP 1

Create a new Actionscript 2 file and set the framerate to 30. Rename layer 1 to ‘water’. On this layer, draw a large square to fit the stage, then give it a nice linear gradient like this:

Next, select the shape on stage then select the Gradient Transform tool in your tool bar.

Grab the corner, and rotate the gradient so it is darker at the top, then select the central square on the line and close in on the stage, to ensure you get the full gradient. Once completed, your stage should look like this:

Yep, just a gradient. Nothing fancy but this will do for our example!

STEP 2

Next we need to creat the bubble. Create a new layer called bubble, then select the circle tool and draw a perfect circle on the stage about 10px x 10px (hold shift to keep aspect ratio). Select this circle, then hit f8 to convert to a movieClip named MC_bubble_main.

Select this movieClip, then hit f8 again to place it INSIDE another movieclip, so name this one MC_bubble. This will allow us to add effects to MC_bubble_main, which will remain when we duplicate MC_bubble using the actionscript.

STEP 3

We now need to make our bubble look more, well, bubbly. From the main timeline, double click MC_bubble to enter its timeline. Select MC_bubble_main, then in the filters tab at the bottom of the screen set a bevel filter with the following settings:

This should give your bubble a similar effect to this:

Now in the library panel (window > library) right click on MC_bubble, and select ‘linkage’. Tick ‘export for actionscript’ then give it a linkage name of ‘bubble’.

This will allow you to call more copies of the movieClip to the stage using Actionscript. Speaking of which…

STEP 4

Lock the bubble layer, we no longer need to alter anything, it’s pure actionscript from here on in! Create a new layer called actions. Select frame 1 and hit f9 to open the actions layer, then create the following variables:
amount = 30;
mWidth = Stage.width;
mHeight = Stage.height;

All fairly straight forward, ‘amount’ is the number of instances of the movieclip pulled onto the stage, ‘mWidth’ and ‘hWidth’ get the dimensions of the stage.

Next we need to create a loop:
for (var i = 0; i<amount; i++) {
this declares variable i at 0, then checks if i is less than the ‘amount’ variable, and if it is will add 1 to ‘i’ and run the containing code, which is:
thisBubble = this.attachMovie("bubble", "bubble"+i, i);
with (thisBubble) {
_x = Math.random()*mWidth;
_y = Math.random()*mHeight;
_xscale = _yscale=_alpha=40+Math.random()*60;
}

The first line gets the movieclip ‘bubble’ (our linkage identifier) and brings an instance to the stage naming it bubble(+i), so if i = 1, this will be called ‘bubble1′, and the last ‘i’ sets the depth of the movieClip. Whe next few lines set the scales of the bubbles, making each one different based on a random number.

Beneath this put the following code:
thisBubble.yspeed = Math.random()*2+.2;
thisBubble.onEnterFrame = function() {
this._y -= this.yspeed;
if (this._y<= 0) {
this._y = 400;
this._x = 10+Math.random()*mWidth;
}
if (this._x>=mWidth || this._x<=0) {
this._y = 400;
this._x = 10+Math.random()*mWidth;
}
};
}

This code generates a random number for the _y speed of the bubble, followed by two ‘if’ statements. These check the bubble movie clips are on the stage, and if not will reset them to a random _x position, and a y position off the stage.

Your final code should look like this:
amount = 30;
mWidth = Stage.width;
mHeight = Stage.height;
for (var i = 0; i<amount; i++) {
thisBubble= this.attachMovie("bubble", "bubble"+i, i);
with (thisBubble) {
_x = Math.random()*mWidth;
_y = Math.random()*mHeight;
_xscale = _yscale=_alpha=40+Math.random()*60;
}
thisBubble.yspeed = Math.random()*2+.2;
thisBubble.onEnterFrame = function() {
this._y -= this.yspeed;
if (this._y<= 0) {
this._y = 400;
this._x = 10+Math.random()*mWidth;
}
if (this._x>=mWidth || this._x<=0) {
this._y = 400;
this._x = 10+Math.random()*mWidth;
}
}
}

Hit CTRL & enter and watch your bubbles rise!

You can play around with the amount variable and the maths on the yspeed to create different effects, have fun!

The Dude

Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!

Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.

Vote in HexoSearch Help me out by voting for this tutorial

Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!

If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!

56 Responses to “Creating random animated bubbles!”

  1. drummaster01

    That looks very good. I can’t find ANY place to download actionscript2. Will someone please give me a link? Thanks.


  2. Great website, very readable clean content. You may want to try adding more pictures, but either way nice site.

  3. opettersson

    Nice :-)
    How do I change so the bubbles come from above?


  4. You need to change the if statement, replace it with this:

    if (this._y>=mHeight) {
    this._y = -10;
    this._x = -10+Math.random()*mWidth;
    }
    if (this._x>=mWidth || this._x<=0) {
    this._y = -10;
    this._x = -10+Math.random()*mWidth;
    }

    The Dude

  5. Fran

    Hello nice work, I would like to have more than one type of bubble or another movie clip but when I create another one, only one shows.

    How do I have more than one type of bubble on stage. Thanks


  6. Hi Fran,

    You need to duplicate a part of the code, and give the second clip a different instance name, halve the ‘amount’ value, and on the additional block of code change the ‘i’ values to add the amount. EG:

    amount=15

    thisBubble2= this.attachMovie(”bubble2″, “bubble2″+(i+15), i+15);
    with (thisBubble2) {
    _x = Math.random()*mWidth;
    _y = Math.random()*mHeight;
    _xscale = _yscale=_alpha=40+Math.random()*60;
    }
    thisBubble2.yspeed = Math.random()*2+.2;
    thisBubble2.onEnterFrame = function() {
    this._y -= this.yspeed;
    if (this._y< = 0) {
    this._y = 400;
    this._x = 10+Math.random()*mWidth;
    }
    if (this._x>=mWidth || this._x<=0) {
    this._y = 400;
    this._x = 10+Math.random()*mWidth;
    }

    This will use both clips with the total amount still being 30.

    The Dude

  7. Fran

    hey thanks dude,

    it flies perfectly.

    I tried something similar earlier wonder why it didn’t work.

    Great job

  8. jamii

    The bubbles are awesome!

    Thank you (-:

  9. jamii

    Hello there Dude (-:

    I want to place an object on the stage then I want the bubbles to float up behind it. How can I do this?

    Cheers
    Jamii

  10. Jay

    Hi Dude,

    Thanks so explaining so nicely and in detail. I have question here… how to go about if i want these to fade out before they reach the top.

    Jay


  11. This tutorial might be old but I found it to be really useful! Thank you very much! I’m a happy camper.

    It would be great to see the AS 3.0 version of this ^_-.


  12. Hey, Great tutorial…Written clearly and great outcome…b-e-autiful

    @jamii - Put the object you want to be in front of the bubbles on a higher layer than the bubbles…It should work

    @Jay - make a layer above the bubbles layer and add a white-to-black gradient to it…then right click the layer name and choose “mask”…this will create a layer-mask (where its white the layer being masked will be visible…)

  13. loganv

    Hi nice tutorial… but i have one question… im doing one intro where i have a book in that one very small fish image is there… from which some bubbles will start floating upwards and scatter… so i want all the bubbles to start from one point (from the fish image) and float upwards and scatter… i have no idea how i can make it possible and im running out of time to finish it… please anyone who can help me out with this please :(

  14. Pepe

    Great tutorial Dude, i’ve one question how do you delimite where the bubbles are shown? thx

  15. J

    I tried using the action script as shown on your website. I am receiving the following error message. Does this work with CS3?

    scene 1 layers “action” frame 1
    1151: A conflict exists with definition i in namespace internal.

  16. J

    I made a mistake with the code. I got it to work (cool) - the original bubble that was made stands still - it doesn’t float??


  17. Hey J,

    Glad it’s sorted :) Just move the original bubble off stage, or even delete it. All of the animated ones are imported from the library so the original is not needed :)

    The Dude

  18. mag

    This is awesome, I am wondering how to remove all bubbles with a click, I tried to use removeMovieClip() on a button, but it does not work.

  19. Brendan

    Hi Dude
    Awesome tutorial.
    Exactly what Im looking for.
    I need it to do one more thing though.

    I have pictures of glass pipes,their alpha levels dropped.
    I want the bubbles to only be visible behind the pipes.
    Is there any way that I could do this?

    Thanks

  20. Akmal

    This seems did not work on Flash CS4.. Can you update the tutorial so that it should also work well with CS4?

  21. jose

    hey dude
    please i need some urget help
    i have a guy on my top layer that shoots a bullet with the this.attachmovie method
    and i have
    a enemmy in my second layer who shoots another bullet the same
    way
    but only the enemy shoots now
    But when i switch the layers the good guy shoots and the enemy doesn’t
    please urgent asap help


  22. Great! I was looking for a way to do that, but is there any chance of you updateing it to AS3?


  23. I think this can work in AS3.


  24. [...] Creating random animated bubbles in Flash [...]

  25. Maxim

    Thank you very much, Dude. Very clear and easy to read code.

  26. azur

    Excelente amigo gracias!!!

  27. JP

    Just what I was looking for - thanks!!


  28. [...] more here:  Creating random animated bubbles! | FREE flash tutorials | The Dude [...]

  29. dc

    great stuff….it’s a pitty that the if statemet replacement has just no effect…not in cs4 as 2…all seems locigal, the scrpt runs well but no effect.

  30. Julia

    amaizing…
    I tried to add another type of bubble or another movie clip and i follow the instruction you gave to Fran but still can not have the result !!
    please help i wont to have this sooo much

  31. Mac

    Nicely done.

    Im trying to help my sister out who is currently learning flash.
    She has no programming skills however.
    I do but do not own flash =/

    Is it possible to save this actionscript as a movie so she can just drag and drop it on a layer somewhere?
    If yes, would somebody, who has used and generated this demo, be so kind to mail it to me as an exported movie? (or something usable for her) or perhaps post it here as a link or.. well you know what i mean.

    That would be really really appreciated.

    m.rheenen82@chello.nl

    Higest regards,

    Mac

  32. Regulus

    For those working with AS3 here is the modified code that will do the same thing.

    Enjoy:

    import flash.events.Event;

    var amount:uint = 30;
    var mWidth:uint = stage.stageWidth;
    var mHeight:uint = stage.stageHeight;
    var thisBubble:Object;

    for (var i = 0; i<amount; i++) {
    thisBubble = this.addChild(new mc_bubble());
    thisBubble.addEventListener(Event.ENTER_FRAME, displace);
    thisBubble.yspeed = Math.random() * 2 + .2;

    with (thisBubble) {
    x = Math.random() * mWidth;
    y = Math.random() * mHeight;
    width = height = 1 + Math.random() * 20;
    alpha = Math.random();
    }
    }

    function displace(e:Event):void{
    e.target.y -= e.target.yspeed;

    if (e.target.y = mWidth || e.target.x <= 0){
    e.target.y = 400;
    e.target.x = 10 + Math.random() * mWidth;
    }
    }

  33. Frederic

    Very nice tutorial and it works!

    what would you do make the bubbles only come in one part of the stage?

    I want to have some fish on the left side but bubbles are on the whole stage.

    thank you in advance

    Frederic

  34. Regulus

    I don’t know how this happened but there is a chunk of code missing in the above so use this one instead.

    Of course, you need to make your bubble as indicated at the top of this page and name it mc_bubble.

    import flash.events.Event;

    var amount:uint = 70;
    var mWidth:uint = stage.stageWidth;
    var mHeight:uint = stage.stageHeight;
    var thisBubble:Object;

    for (var i = 0; i < amount; i++) {
    thisBubble = this.addChild(new mc_bubble());
    thisBubble.addEventListener(Event.ENTER_FRAME, displace);
    thisBubble.yspeed = Math.random() * 2 + .2;

    with (thisBubble) {
    x = Math.random() * mWidth;
    y = Math.random() * mHeight;
    width = height = 1 + Math.random() * 20;
    alpha = Math.random();
    }
    }

    function displace(e:Event):void{
    e.target.y -= e.target.yspeed;

    if (e.target.y = mWidth || e.target.x <= 0){
    e.target.y = 400;
    e.target.x = 10 + Math.random() * mWidth;
    }
    }

  35. Regulus

    Still not good. When I post it the bottom part of the code gets truncated. To get around this, here is the missing chunk of code only.
    Just replace the ‘displace’ function with this one.

    function displace(e:Event):void{
    e.target.y -= e.target.yspeed;

    if (e.target.y = mWidth || e.target.x <= 0){
    e.target.y = 400;
    e.target.x = 10 + Math.random() * mWidth;
    }
    }

  36. Col

    Hopefully someone can help!
    Was wondering how i can get the script to stop on a certain frame? Im new to flash and when i try to put a stop command where i want it to stop it says ‘current selection cannot have actions applied to it’ :(


  37. hey, that’s work! thanks for the tutorial ^^

  38. petar

    hey this works great, but any idea how to get a mask in there? or an object to show infront of the bubbles???
    been trying for hours , i cant get it!
    thanks

  39. olzki

    Great tutorial - bubbles look and work great - reduced alpha of original bubble as wasn’t sure if deleting it would mess up all the other bubbles.

    Would love to be able to place a mask over the bubble effect (so the bubbles could “fill” shapes or letters) but placing the mask on any of the layers has no effect - sure there must be a way but I can’t see it yet?!?

    Any help gratefully received.

  40. James

    Yeah i have a 800 x 600 pixel screen and instead of the bubbles going on the entire screen. i would like them just to rise up between 300 x 600 can anyone help???


  41. Hey Dude,
    Thanks for the bubble code.

    How would one stop all the bubbles in place at some time?
    With an array that keeps track of the instance names.
    Remove onEnter Frame. Thinks me.
    Have you tried this? If you could help me out I will give you a bubble. :)
    Ld

  42. Shaun

    Is there somewhere I can download the .fla file for this tutorial?

  43. Luis Lopez

    Hi man!!
    Excellent tutorial, I have only one question, How can i do to get the bubbles moving randomly like if there was a wind pushing them, I mean they dont go up in a straight line.

    Thanks


  44. Excelente tutorial, mis felicitaciones!
    Como todos implemente en mi presentación las burbujas pero ocurrieron 2 problemas:
    1- como puedo colocarlas dentro de una mascara?
    2- necesito que esten en cierta parte de la animación, como las descargo?

    Muchas gracias!


  45. hye… it is great tutorial for flash beginner like me..

    how i create timer in this action script.. erm.. i want create the timer first second the animation will play.. after the 20 second animation disappear from stage and after 30 second they animation (bubbles)appear?

    pls help me..

    im sorry my english is very bad.:(

  46. Error:

    hey…Nice script.But i got the error messge
    Error: A ‘with’ action failed because the specified object did not exist.
    How can i rectify it?can any body help me on this error?
    ..bh@v@n!

  47. JacRima

    Thanks, very useful tutorial..

  48. begFlash

    Can someone help me please, there is an error whenever i play my movieclip, the error message is trying to close my scene. I only see it whenever i put a check on the “Linkage” something. Please help, really cool tutorial.. thanks ^_^

  49. Sean

    Hey, brilliant instructions and dissection of code.
    However, i have a really tall piece, 1100px but the bubbles start all over the stage but then they stop and only recur at the top third of the stage :(
    help?

  50. Sean

    No problemo fixed it all by myself :D
    your code dissection really helps.
    thisBubble.yspeed = Math.random()*2+.2;
    thisBubble.onEnterFrame = function() {
    this._y -= this.yspeed;
    if (this._y=mWidth || this._x<=0) {
    this._y = 400;
    this._x = 10+Math.random()*mWidth;
    }
    };
    }

    where y = 400 this ‘400′ is the stage height, so change it to the height of your stage :D

  51. leng

    Can anyone help me? I have 4 scenes in my flash movies. I created the bubble in the 2nd scene. It works well. But the problem is everytime when i navigated from 2nd scene to other scene, the bubbles keeps playing. How can I stop it to appear in other scenes each time i navigated from 2nd scene?

    Thank you in advance

  52. David

    do you know or can you point me in the right direction…

    I want to use this effect with about 50 different images. The images are the same word in different languages. With the bubbles in the background I’d like to have these words float up just like the bubbles. But only one instance of each word at a time on the stage while having the randomness of size and speed.

    Any ideas? - Thanks in advance.

  53. futo

    how do i change the code to work in only one scene?

  54. Pavan

    i tried this on adobe flash pro cs5 while debuging the flash player is not responding

    thank you

  55. scott

    Same question as David with the multiple images. Tried Fran’s code for adding a second MC but had all kinds of errors..


  56. Hello Dude,

    at first thanks for this nice tutorial. I have a question. When i add a top layer i realize that the bubbles still on top. How can i set the layer where the bubbles shout appear?
    That could be nice for a more realistic animation with different bubble sizes.

    Thank you, Michael

Leave a Reply