Aquatic bubble animation

24.7.2008, 0:5
Submited in: Flash | Total Views: 53797

Using this thoroughly explained, detailed lesson, you will see how to create very useful and realistic aquatic bubble animation using a Motion Guide. You don't have to use action script code to make this lesson. Using this lesson, you will also learn:

1. How to design aquatic bubble,
2. How to animate it,
3. How to use Color Mixer Panel and much more!

Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select #64CDFF color as background color. Set your Flash movie's frame rate to 28 and click ok.

Step 2

Take now the Oval Tool (O) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options.

1. Enter #021E3E for the stroke color
2. Enter any color for the fill color.
3. Select Solid as the type of outline, with the line thickness set to 1.

Then, draw a circle about 20x20 px. See the picture below!

Step 3

Take now the Selection Tool (V) and select only the Fill Color. While the fill coloris still selected, open the Color Mixer Panel (Window > Color Mixer) and choose the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Linear as Type.
3. Click on the small color rectangle that is on the left sidet and set its color to #FFFFFF. Alpha property set to 30 %
4. Click on the second rectangle from the right side and set its color to #0066CC, but change its alpha property to 0% (completely transparent).

Now, you get this:

Step 4

Using now the flash tools for drawing, draw a shape like it is shown on the picture below within a bubble.

Step 5

Select now the all bubble and press F8 key (Convert to Symbol) to convert this bubble into a Graphic Symbol.

Step 6

Take now the Selection Tool (V) and double click on layer 1 to rename its name into a bubble.

Step 7

Select now bubble layer, press right click on mouse and choose Add Motion Guide. See the picture below.

Step 8

Select now Guide layer, take the Pencil Tool (Y) and draw a route which bubble will follow. See the picture below.

Step 9

Click now on frame 150 of layer guide and press F5 key.

Step 10

Go back now on the first frame of layer bubble and place the bubble on the position like it is shown on the picture below.

Step 11

Click now on frame 150 and press F6 key. Then, move the bubble on this position:

Step 12

Right-click anywhere on the gray area between frame 1 and frame 150 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.

Now, we're done with the first bubble. Now, create a lot bubbles on the same way like we have created the first bubble. You can also if you like, import some picture for background to make this lesson more realistic.

Have a nice day!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials