Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Misty river

10.10.2006, 15:15    Total views: 168418

Read this tutorial and see how to create misty river animation. You will also learn how to use flash filters (Blur, Bevel and Drop shadow filter) and more.

Step 1

First, download my picture.

Step 2

Create a new flash document, press Ctrl+J key (Document Properties) and set Width to 380 and Height to 285px. Frame rate set to 18 fps (Frames per Second).

Step 3

Choose File > Import > Import to Stage (Ctrl+R), and Import that picture. While your picture is still selected, open tha Align Panel (Ctrl+K) and then click on Align to stage icon, after that on Align horizontal center and Align vertical center icon, to precisely center your picture with background.

Step 4

Double click on layer 1 to rename its name into the river.

Step 5

Select the picture and press F8 on the keyboard (Convert to Symbol) to convert it into a Movie Clip.

Step 6

While your new made Movie Clip (picture), is still selected, in Properties Panel under Color choose Alpha and set it to 81%.

Step 7

Insert a new layer and name it mist.

Step 8

Lock river layer, take the Brush Tool (B), under Fill Color choose #CCCCCC, and draw a shape that will represent mist. Look at the picture below!

Step 9

While your "mist" is still selected, press F8 (Convert to Symbol) on the keyboard to convert it into a Movie Clip.

Step 10

Then, in Properties Panel (Ctrl+F3) under Filters, click on plus icon and choose Blur. See the picture below.

Step 11

Then , set this options:

Step 12

Click again on plus icon and choose Bevel.

Then, set this options:

Step 13

Click on plus icon again and choose Drop Shadow. After that set this options:

Step 14

Click on frame 750 of layer mist and press F6. Then, move your "mist" on the other side of picture (left side). See the picture below.

Test your Movie (Ctrl+Enter).

We're done!


Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 310248

2. High-tech city animation
Total views: 272836

3. Water effect
Total views: 237035

4. Photo slide show
Total views: 220337

5. Special Picture Effect
Total views: 190708

Related links