Toxiclab.org

Rain animation

20.1.2007, 0:20
Submited in: Flash | Total Views: 135191

This tutorial will teach you how to create a rain animation in flash 8 with no Action Script. You will also learn how to create a ellipse, how to use Line Tool (N) and more...



Step 1

Open Flash and start a new project with dimension of 400 X 200, set the frame rate at 33fps (Frames per Second) and for background color choose #0E84A5. See the picture below.





Step 2


Double click on layer 1 to rename its name in background. After that, lock background layer, create a new layer and name it raindrop.



Step 3

Take the Line Tool (N), go to the Properties Panel (Ctrl+F3) below the stage and choose the following options:

1. For Line color choose #252525
2. Choose Solid as type of line, with thickness set to 1.



Then, draw a "line" and place it on the position like it is shown on the picture below.



Step 4

While the "line" (raindrop) is still selected, press F8 key (Convert to Symbol) ,to convert it into a Movie Clip Symbol.



Step 5

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip. See the picture below.



Step 6

While the "raindrop" is still selected, press F8 key again (Convert to Symbol) to convert it into a Graphic Symbol.



Step 7

Click on frame 10 and press F6 key. After that, using the mouse or by arrow keys, move the "raindrop" and place it on the position like it is shown on the picture below.



Step 8

After that, choose right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Take the Selection Tool, and double click on layer 1 to rename its name in raindrop.

Step 9

Create a new layer and name it rainywave. After that, click on frame 10 and press F6 key.

Step 10

Take the Oval Tool (O), go to the Properties Panel below the scene, and select the following options:

1. For Line color choose black
2. Choose Solid as type of line, with thickness set to 0.3



Then, draw the "ellipse" that will represent our "rainywave" and place it on the position like it is shown on the picture below.



Step 11

While the "rainywave" is still selected, press F8 key and convert it into a Movie Clip Symbol.



Step 12

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip. See the picture below.



Step 13

While the "rainywave" is still selected, press again F8 key (Convert to Symbol) to convert it into a Graphic Symbol.



Step 14

Then, click on frame 25 and press F6 key.

Step 15

While you're still on frame 25, take the Free Transform Tool (Q), and increase the "rainywave" a lot. See the picture below.



Step 16

Take the Selection Tool (V), click once on the "rainywave" to select it and go to the Properties Panel below the scene. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 17

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 18

Go back on on frame 1, take the Selection Tool (V), click once again on "rainywave" to select it, go to the Properties Panel below the scene. On the right, you will see the Color menu. Select Alpha in it and put it down to 25%.





Step 19

Take again the Selection Tool (V), select all frames (1-25), press right click and choose Copy Frames from the menu that appears.See the picture below.



Step 20

Create a new layer (layer 2), select it, click on frame 5, press F6 key, choose right click and Paste Frames from the menu that appears.



Step 21

Cretate a new layer above layer 2 (layer 3), select it, click on frame 10 and press F6 key. After that, while you're still on frame 10, choose right click and Paste in Place.



Step 22

Go back on raindrop scene, click on frame 35 of layer rainywave, and press F5 key.





Step 23

We're done with the first "raindrop". What's your job now? You must to duplicate the "raindrop" that we're created in previosu steps. Note! Every other "raindrop" must start in some other frame, from the other place by comparison with the previous "raindrop".To better understand what I mean, I will duplicate once to see how to do that.

Step 24

Click on the first frame of layer raindrop (scene - raindrop), press Ctrl+C key (Copy). After that, create a new layer above layer "rainywave" (layer 3), click on frame 5, and press F6 key. After that, press Ctrl+Shift+V key (Paste in Place).

Step 25

Using the arrow keys or by mouse, place the "raindrop" on the some other position. See the picture below.



Step 26

Click on frame 10 of layer "raindrop" and press Ctrl+C key. After that, click on frame 15 of layer 3, press F7 key and after that Ctrl+Shift+V key.

Step 27

Right-click anywhere on the gray area between frame 5 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.

Step 28

Repeat step 25.

Step 29

Click on frame 10 of layer "rainywave", and press Ctrl+C key (Copy). Then, Create a new layer above layer 3 (layer 4), select it, click on frame 15 and press F6 key. After that, press Ctrl+Shift+V key (Paste in Place).

Step 30

Using the arrow keys or by mouse, place that "rainywave" on the position where you have placed the "raindrop" in step 25. See the picture below.



Step 31

Click on frame 40 of layer 4 and press F5 key.



We're done!

I know, that this tutorial is so defficult for explain, and if you still don't understand it, please download source file (.fla)

Have a nice day!

Download source file (.fla)

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

Browse by category




Most popular tutorials


Resources Worth visiting


Friends