This tutorial will teach you how to create an amazing image effect such as Flash bubbles. Step by step you will learn how to draw such bubbles, how to create movie clips and symbols and how to set everything in motion. This Flash lession will be perfect for beginners, but hoping, Flash gurus will also find something useful.
Good luck!

1. Let’s start from some preparations. First of all take a suitable image, it will be our background. I found this image, added some effects to it using Photoshop and that’s it! My background is ready.

2. Now open Flash and create scene with the same dimensions as your picture. In my case the dimensions are: 410 X 455, and set 30 frames per second. It will be enough.

3. After that we should import our background on a new layer, aligh it and then name the layer “bg”.

4. Now it’s time to create a new symbol in the library [Ctrl + 8]. Let’s call it “bubble”.

5. Now is the most creative part of our tutorial – drawing a bubble. As our basic color will be white and its tints, then for convenience it would be better to change the color of the workingspace to dark one.
First we draw a circle about 10 px wide and high, a bit stretched-out below, without contour line and with gradient fill.

Align the bubble according to origin of coordinates and set gradient.

Inside this symbol you may create an additional layer and draw something like patch of light.

The buble is ready!

6. Our next step is to create new symbol [Crtl + F8]. Select the symbol type “Movie Clip” and call it “bubbleMC”:

Make sure you checked “Export for ActionScript” for further work with this movie clip using AS.

7. In this movie clip we have to create one layer named “path” and then draw a curve.

As you see on the screenshot below, the curve should start approximately at the origin of coordinates of this movie clip (measurement accuracy is not a principle). The curve form should be zigzagging at the bottom, and its height should not be more than 350 px.
To make it more smoothly, choose the “Smooth” Pencil Mode.

8. Create a new layer with the name “bubble” and move it under the layer “path”. Drag a symbol “Bubble” from the library to this layer. By mouse right clicking set the layer “path” to “Guide”.

Make sure the layer “path” is the main one in regards to the “bubble” layer. For this move it under “path” layer.

9. On the “bubble” layer create a Motion Tween. Choose the 50 frame and create a keyframe. [F6]. On the “path” layer also choose frame 50 and prolong our curve’s “life” [F5]:

10. Now we are working with the Bubble object. Choose the frame 1 and verify that its properties are set right. Make sure “Sync” and “Snap” are checked.

Now choose the bubble and drag it to the beginning of our curve (the lowest point). Then choose the last frame 50, and drag the bubble at the end of the curve (the highest point). After that choose frame 8 and create keyframe [F6]. Drag this keyframe to the frame 15.

In this frame set Ease to -100:

After that set Transform settings for a bubble. Bubble scale should be 50%.

Then go to the first frame and set bubble scale – 10%.

11. Now create a new layer above the “path” layer and call it “actions”. On this layer choose the frame 51 and create an empty keyframe [F6]. Write the follwoing scrept in this frame:
removeMovieClip(this);

The bubble creation has been completed.

12. And now we go back to the scene where there is only one layer with the background. Create a new layer named “actions” and write the follwoing code for it:

this.createEmptyMovieClip(“holderMC”, this.getNextHighestDepth());
holderMC.onEnterFrame = function() {

var bubbleName:String = “bubble” + random(1000);

var bubbleX:Number = random(Stage.width);
var bubbleY:Number = random(Stage.height);

var bubbleScale:Number = random(6) * 10 + 50;

var bub:MovieClip = this.attachMovie(“bubbleMC”, bubbleName, random(1000), {_x:bubbleX, _y:bubbleY, _xscale:bubbleScale, _yscale:bubbleScale});
}

And now the most complicated part of the tutorial – press [Ctrl + Enter].
And enjoy the result!

Good luck!
Download source files

* * *

Thanks to mute_Max for this great lesson.