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.
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!
That looks very good. I can’t find ANY place to download actionscript2. Will someone please give me a link? Thanks.
Great website, very readable clean content. You may want to try adding more pictures, but either way nice site.
Nice
How do I change so the bubbles come from above?
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
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
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
hey thanks dude,
it flies perfectly.
I tried something similar earlier wonder why it didn’t work.
Great job
The bubbles are awesome!
Thank you (-:
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
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
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 ^_-.
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…)
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
Great tutorial Dude, i’ve one question how do you delimite where the bubbles are shown? thx
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.
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??
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
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.
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
This seems did not work on Flash CS4.. Can you update the tutorial so that it should also work well with CS4?
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
Great! I was looking for a way to do that, but is there any chance of you updateing it to AS3?
I think this can work in AS3.