#3 Flash Animation – Misty River

You are to create a mist to creep up the river.

Part One     Step 1

Use the image provided of take a landscape picture and re-size it to be 5.5 inches x 4 inches, 72 dpi.


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.

Step 15

At the bottom of the screen select Motion Tween in the Properties

The movement needs to be set by creating a motion Tween for the mist. Right click on the first place the motion begins. Move the “mist to the last cell and press F6.


Test your Movie (Ctrl+Enter).

Part Two        Take one of your own original pictures –  landscape, steaming teapot, person standing in foggy alley – an image that would do well with some mist slowly passing over it and resize it to be about 5.5 inches x 4 inches, 72 dpi. You can adjust the size in Properties. Follow the directions above again, making adjustments – steam from teapot would flow up, smoke out geyser would flow up, etc. Complete and export you movie as a Flash movie and load on to your web page.

Grading rubric:

1. Complete Part One/2nd Flash animation as directed in tutorial and load on to your web page as a .mov

2. Complete Part Two/2nd Flash animation as directed and load on to web page as a .mov

Leave a Reply