Drawing with Flash

To begin , create a new document and save it with a name like "snowscene.fla". The default size of 550 pixels wide by 400 pixels high should be fine.

First, we will change the name of Layer 1 to "Sky". Next, draw a rectangle that fills a little more than the top half of your document, similar to the image below. Be sure the Stroke feature is off because we do not need an outline for our sky.

Next, select the Paint Tool and set the fill pattern to a linear gradient by selecting the linear gradient option in the bottom left corner of the color palette:

The Color Mixer panel on the right should display a default white-to-black linear gradient along with other editing functions to allow you to modify your gradient. If the Color Mixer is not visible, select Window > Design Panels > Color Mixer.

Select a gradient type from the Fill Style pop-up menu in the center of the Color Mixer:

Linear Gradient creates a gradient that shades from the starting point to the end point in a straight line.

Radial Gradient creates a gradient that shades from the starting point to the end point in a circular pattern.

The gradient definition bar appears in place of the color bar in the Color Mixer, with pointers below the bar indicating each color in the gradient.

To change a color in the gradient, click one of the pointers below the gradient definition bar and click in the color space that appears directly below the gradient bar in the expanded Color Mixer. Drag the Brightness control to adjust the lightness of the color.

To add a pointer to the gradient, click on or below the gradient definition bar. Select a color for the new pointer as described in step 6.

To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. Drag a pointer down and off of the gradient definition bar to remove it.

To save the gradient, click the triangle in the upper right corner of the Color Mixer and select Add Swatch from the pop-up menu. The gradient is added to the Color Swatches panel for the current document.

Next, create a new layer and name it "Snow". Select the Rectangle tool again and set the fill to a linear gradient and the stroke style to 3 pixels wide and one of the 'rougher' line styles:

Modify your gradient so the black is more of a medium to light gray and slide the white pointer to the right about halfway.

Lastly, select the Selection Tool and move the cursor over the top boundary of the snow rectangle until a small circular arc appears below the cursor. This means you can click and drag the object border and stretch it to modify its curvature. We will click and drag the upper boundary of the snow object to give the snow a small hill effect. The gradient serves to give the hill a slightly shaded appearance. Your scene should then resemble:

Next, we will draw a christmas tree using multipoint splines. First, we will just draw half a tree, duplicate and mirror it, and join the two halves together to form a complete tree.

To do this, first create a new layer and name it "Tree". Select the Pen Tool from the Tools palette. Select a green color for the stroke and no fill yet. Click a series of points to resemble the polygon below:

Try not to click and drag when drawing these points. We will add some curvature to the tree in a minute. When you have created a tree object similar to the image above, select the Selection Tool and double click the tree object to select its entirety. Then select "Duplicate" from the Edit menu or hit Control-D to make a copy of this object. Then select "Flip Horizontal" from the Modify>>Transform submenu to create a mirror image of the tree-half. Then move this mirrored half into position to form a complete tree. You can either use the arrow keys to move the object or you can click and drag it with the mouse. Your tree should then resemble:

We then need to fill the tree with a green color, but in order to do this, our tree polygon must be completely closed. If your top and bottom control points of your polylines do not overlap, you may make them overlap by using the Subselection Tool from the Tools palette to select and modify individual control points. You may need to zoom in a bit to make fine adjustments. Your control points may snap to eachother to make it easier to adjust them correctly.

Once you have closed your tree polygon, select the Paint tool, select a green color, and click inside the tree polygon to fill it green. You might even want to give the tree a light-green to dark-green gradient fill if you want to add a slightly more realistic appearance.

To create a tree trunk, we can use either the Rectangle Tool to draw a rectangle with a brownish gradient fill and brown stroke or we can use the Pen Tool to create a polygon with a brownish gradient fill. Create the tree trunk in a new layer, and once you have created your tree trunk, drag the layer below the "Tree" layer so the tree trunk object appears to be behind the tree object. As you work on each new object, it may be helpful to lock the layers containing objects you have completed so you do not accidentally make any changes to those completed objects.

To put the finishing touches on the tree, we can bend the strokes with the Selection Tool similarly to how we created the hill with the snow object, resulting in the following scene:

Our last task is to create a snowman using the Oval Tool and circular gradients.

First, select the Oval Tool from the Tools Palette and create a simple circular gradient from white to light gray. Click and drag the mouse on the Stage to create the first of three ovals for a traditional snowman. Depending on how big you draw your first oval, you may need to adjust the gradient using the Fill Transform Tool. Select the Fill Transform Tool and click on the oval. You should see four control handles appear that will allow you to move, rotate, scale, and adjust the vertical and horizontal sizes independently.

Click and drag each of these handles to explore what they do, and use the Undo feature if you make changes you do not wish to retain.

To create the other two ovals for the snowman's midsection and head, you may either draw new ovals, or duplicate and scale the first one you created. Either way, hopefully your snowman will appear similar to the image below:

Lastly, you may use the knowledge you have acquired from this lesson to add a hat, eyes, nose, and mouth to your snowman, so it may result in something similar to:

Extra Challenge: Create a Dancing Snowman

Can you create a dancing snowman like the one in the animation below?:

Download the file for this animation: snowman-dancing.fla

Add An MP3 File for Background Music

The easiest way to add an mp3 file to your animation is to simply import it to the Library and drag it to the Stage. When you play your animation, the sound will automatically begin playing. However you have no easy way of stopping the sound while allowing the animation to continue. For this, you will need some interactivity.

When you want to add interactivity to your document with ActionScript, you can often rely on behaviors to add the ActionScript for you. You'll use a sound behavior to play an MP3 file from the library.

The first step is to download the following file to your computer:

http://education.sdsc.edu/teachertech/flash101/lessonfiles/xmastime.mp3

Import this file into the library of your current snowman animation (don't worry if you did not make the snowman dance) by selecting Import>>Import to Library from the File menu.

Next, add a new layer to your Timeline and name it "Buttons". You will need to add a play and a stop button to start and stop the music. In the Window menu, select Common Libraries>>Buttons. A Buttons panel should appear on the right. Locate the same buttons you used in Lessons 1 or 3 (classic buttons>>Playback folder). With the Buttons layer selected, drag a button for Play and a button for Stop to your Stage. Name the instance of the Play button "playsound" and name the instance of the Stop button "stopsound".

In the Library panel, right-click xmastime.mp3 and select Linkage from the context menu.

In the Linkage Properties dialog box, select Export for ActionScript and verify that Export in First Frame is selected.

Verify that xmastime.mp3 appears in the Identifier text box, and click OK.

On the Stage, select the playsound button instance.

In the Behaviors panel (Window > Development Panels > Behaviors), click the Add (+) button and select Sound > Load Sound from Library.

In the linkage ID text box, enter xmastime.mp3 , and in the Name text box below, enter xmastime. Then click OK.

On the Stage, select the stopsound button instance.

In the Behaviors panel (Window > Development Panels > Behaviors), click the Add (+) button and select Sound > Stop All Sounds.

Save your file and test your movie.Click the play button to play your sound and the stop button to stop it.

Try adjusting the frame rate of your animation so the snowman dances with the beat of the music. Your final animation should resemble the animation below:

That completes Lesson 4. Good job!!

Jeff Sale