Add Snow Flakes To Your Images Using Motion Tweening

This winter, we have received a lot of snow here the in USA, and with this wintry weather, there have been a lot of wintry-related pictures taken. As a cool effect, you can add falling snow flakes to your wintry pictures using Flash that you can post on your website. In this tutorial, I will show you how to easily add falling snow flakes to your Flash document using the method of motion tweening.


Step 1: Create New Document and Set Up Stage:

Step 1: Create new Flash document and adjust the stage width to 640 pixels and a height of 400 pixels using the Document Properties window by clicking on the “550 x 400” button on the Properties Inspector. This will be the size of the image that I will be using this tutorial; however, you may need to adjust it to do the dimensions of an alternative picture if you decide to not use the image provided with this tutorial.

Step 2: Insert Snowy Picture into Flash:

We will then need to insert the picture we will be using into the Flash environment. I am using the snowy photo from FreeFoto, but you are welcome to use your own. To insert the photo into Flash, click on the File menu, choose the Import list, click on Import into Library, select file, and then press the “Ok” button. Your file will now appear in the Library.

(If the Library does not open by default, click on the Window drop-down menu and select Library.)

To place the picture on the stage, drag the list item from the library to somewhere on the stage. To get the image centered on the stage, you can use your mouse and arrow buttons to nudge the image until it is fully centered.

Step 3: Create Your Snow Flake:

In this step, we will be creating a basic snow flake. Before we draw the snow flake, we will need to make another layer on the stage. To do this, click on the “Insert Layer” button in the Timeline section. It will look like a folding piece of paper with a plus sign. After you have created the new layer (Layer 2 by default), select the new layer.

After the new layer has been created, we are ready to make our snow flakes. To do this, we will be using the Line tool from the Toolbar. After you have the Line tool selected, click on the “Colors” box in the toolbar and choose white.

After you have the line tool and the color white selected, start to draw a snow flake in a random place on the stage. Mine will look like a cross for demonstration purposes; however, you can be more creative if you would like.

Once your snow flake is completed, we will need to group it together to make it one object. To do this, click on the “Selection Tool” from the toolbar (the black arrow), hold your shift key down, and click on each of the individual lines that you created for your snow flake. This will select all of the lines for your snow flake.

Step 4: Convert Snow Flake to Graphic Symbol:

When all of the lines have been selected (all will have black dots to show your selection), press your F8 key to open the “Convert to Symbol” window. When the “Convert to Symbol” is open, enter “Snowflake” (without quotes) in the Name field, and choose “Graphic” from the Behavior list. After these fields have been modified, press the “OK” button, and your snow flake will now be fully converted into to a graphic and appear as a new item in the library.

Step 5: Prepare Timeline for Animation:

After the snow flake has been converted to a graphic, we will need to set up the timeline for a long period of time that will allow our snow flakes to fall to the ground. To do this, select the first layer (Layer 1), click on the 60th frame within the timeline for Layer 1, and then press your F6 key to expand the current keyframe for a length of 60 frames.

After you have set the length of Layer 1 to 60 frames, you will see that Layer 2 (the snow flake) disappears. Click on the first frame in the timeline for Layer 2 and you will see it reappear again.

For a better effect of the snow falling, we will need it to appear falling from out of range. To do this, drag the snow flake above and off the stage onto the gray area.

Step 6: Animating The Snow Flake:

In this step, with the first frame of Layer 2 selected, click on the tenth keyframe of Layer 2 in the timeline and press F6 to expand the length of Layer 2 to 10 key frames. With the tenth keyframe of Layer 2 selected, drag the snow flake to directly below and off the stage as shown below.

Now we are ready to animate the snow flake. To do this, we will use a method called “Motion Tweening.” To apply motion tweening to the snow flake, click on any of the frames in the timeline between 2 and 9 for Layer 2, and in the Properties Inspector, change the value for the Tween setting to “Motion.”

In the timeline for Layer 2, you will see that there is a solid line between keyframes 1 and 10. This means that the motion tweening has been successfully applied. To see the snow flake move in action, press your Enter key and a test of your movie will be shown, and you will see the snow flake that you created falls to the ground (and off the stage).

Step 7: Adding More Snow Flakes:

To get the full effect of snow falling, you can add more snow flakes to your Flash document. To do this, create a new layer by clicking the “New Layer” button (discussed in Step 3) to create “Layer 3.” At the 11th keyframe of Layer 3, press the F6 button to create a new frame. With the 11th keyframe of Layer 3 selected, drag a new snow flake graphic from the Library off the stage to the gray area (in a different position than the first snow flake) where you would like to see the new snow flake drop.

After you have placed the second snow flake off stage, click the 21st frame for Layer 3 and then press F6 to extend the timeline from keyframe 11 to 21 for this later. With the 21st keyframe for Layer 3 selected, drag the snow flake to the bottom gray area below the stage (just like in Step 6) as shown in the image below.

To add tweening to this new flake, click on any of the frames for Layer 3 between keyframes 11 and 21 and select “Motion” from the Tween option in the Properties Inspector. You will now see the solid line between the keyframes of 11 and 21, which means that the tweening has been successfully applied.

Now that you have the hang of creating snow flakes and tweening them, please be sure to add more Layers and snow flakes to your Flash document, and stagger the snow flake tweening in different places in the timeline to get a great snow flake effect for your wintry picture. The end result will look similar to the Flash presentation that I have provided below.

Please be sure to leave any feedback or questions in this post’s comments section below.

Published
Categorized as Flash

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment