XtremeSkill.com

 origionally hosted at : http://the-dude.co.uk

                              flash tutorial on creating- andom animated bubbles

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!

xtremeskill.com free video tutorials .learners community