In this lesson you will learn to draw and animate an object. We will first draw a circle (and learn a little about vector objects in Flash), and then we will make it move across the screen. We will then show the power of nesting animations within animations using Flash. This portion of the Lesson Supplement is appropriate for introductory Lesson 1 in the course text.

The remainder of this Lesson Supplement helps you learn how to create interactivity by adding buttons and scripts to make the animation play, pause, and rewind. This portion is appropriate for the intermediate Lesson 5 in the course text.

This lesson was created using Flash MX 2004, but all of the basic features are similar enough for our purposes. All files are provided and should be able to be opened in Flash 8 and Flash CS3.

To begin, give your file an appropriate name such as "lessonsupp1.fla" and click "Save". If you show your desktop, you should see your workshop folder, and if you open it you should find your newly saved file. Remember to save your file frequently. There are evil cosmic rays constantly trying to destroy all of your unsaved work with no warning!!

We will now draw a circle on our stage. First, select the Oval Tool from the Tools palette on the left.

Next, from the Properties panel along the bottom, select a stroke color (color box next to the pencil icon) and a fill color (color box next to the paint bucket).

When you click the color box, a color palette opens.

You may select any of the displayed colors or you may click the "no stroke" icon in the upper right if you choose to not use a stroke around the circle, however be sure to use a stroke for the purposes of this lesson. You may also click the color wheel icon to open a color wheel that provides a wider selection of colors. Be the colors you choose may be clearly seen on the white background. Note also there is a slight difference between the fill color palette and the stroke color palette. The fill color palette includes an additional row of selections along the bottom for gradients. We will learn more about gradients later.

Once you have selected your colors, draw your circle by clicking and dragging the mouse somewhere on the left side of the Stage (white area) and create a circle about the size of a quarter or half dollar. Hold the shift-key down before you click and drag to lock the height and width of the oval to a perfect circle. Always remember you have 100 'undos' to use if you make mistakes. Also, remember to save your file periodically so you won't lose valuable work. Your circle should look something like this:

The first interesting thing to note about Flash objects is that their strokes and their fills are two separate objects depending on how one edits them. To better understand this, choose the Selection Tool from the Tools palette ...

... and click and drag the center of the circle to some other location on the Stage. Notice that the stroke around the fill remains behind. Click the Undo icon on the Main Toolbar to put the fill back inside the stroke where it was. Now, double-click the circle to select both the fill and the stroke and then drag them both. It is important to be aware of this feature of drawing objects in Flash. It can sometimes cause confusion and problems if you do not anticipate it in when creating complex graphics.

Next, we will animate this circle so it moves from left to right across the Stage using the Flash Tween feature. To do this, we will work with the Timeline above the Stage. In Layer one of the Timeline, right-click once in Frame 1 and select "Create Motion Tween":

The circle should now have a blue rectangle around it, signifying that it is now a Movie Clip symbol. We will learn more about Movie Clips in a subsequent lesson.

Next, right click frame 20 in Layer 1 and a popup menu should appear. Select "Insert Keyframe", then click and drag the circle from the left to the right side of the Stage. If you hold the Shift-key down before you click and drag, you will drag the circle in a perfectly horizontal line.

If you now click and drag the Timeline playhead back and forth between frames 1 and 20, the circle should move back and forth across the stage, similar to the animation below:

Download the file for this animation: circleanim1.fla

Create a Nested Animation

Next, we will modify the circle to contain a second animation nested within it.

Be sure your Timeline playhead is in either frame 1 or 20. These frames are the only ones with keyframes in them and therefore are the only ones that allow you to select and modify objects in Layer 1.

Double-click the circle. A change in the Stage will occur that is not immediately obvious. Let's look closely at the areas highlighted in red in the image below.

The first rectangle highlights the object hierarchy of selected objects. When we created our tweened animation in the previous step, Flash automatically converted our circle to a Symbol and named it "Tween 1" by default. We can confirm this by opening our Library panel.

To view the Library panel, select Window > Library. The Library panel should appear on the right. There should be one symbol in the Library named "Tween 1". This is our simple animation.

Note: Flash also contains libraries of buttons and sounds that you can use in your document. To view these libraries, after taking this lesson, select Window > Other Panels > Common Libraries and select the Buttons or Sounds library.

Return to the Stage so we can create a nested animation within our "Tween 1" object. First, we will rename Layer 1 or our Tween 1 object. Double-click the text "Layer 1" and type "Circle". Next, we will insert another layer above this layer by clicking the Insert Layer icon along the bottom of the Timeline.

A new layer should appear above the Circle layer. Rename this layer "Star". Select frame 10 for both layers, right-click the selected frames and choose "Insert Frames". Your timeline should resemble the image below.

You will draw a polygon object in the Star layer, but first you may want to lock the Circle layer to avoid any confusion between the two layers. Next, in the Tools palette, click and hold the Rectangle Tool until a submenu appears. From this submenu select the Poly Star Tool.

With the Star layer selected, draw a Polystar inside your circle (the default shape is a pentagon, but you may choose your own shape in the Parameters panel) by clicking and dragging out from the center of the circle. A polygon should appear and it will scale and rotate with your cursor movements. Make the polygon a little smaller than the circle. If you do not position the polygon so it is centered with the circle, you should be able to double-click the polygon to select both its fill and stroke and drag it where it will be centered with the circle. Your polygon in a circle should look something like ...

Next, we will rotate the polygon using the tween feature again. First, right-click in the Star layer between frames 1 and 10 and select "Create Motion Tween". Right-click in the last frame of the animation, frame 10, and select "Insert Keyframe". From the Tools palette, select the Free Transform Tool.

Your polygon should now appear to have small black squares around it. These are 'handles' that allow you to resize and rotate objects.

Move the cursor near one of the black squares on a corner until you see the cursor change from an arrow to a small arrow on a circular arc.

Click and drag so the polygon rotates around just far enough for one point to overlap an adjacent point, then back it off just a bit and release the mouse button. Now, click the "Scene 1" link just above the Timeline to exit the editing mode of the Tween 1 object. Play your animation. It should look something like the animation below.

Download the file for this animation: circleanim3.fla

Adjusting the rotation so the circle appears to be a wheel rolling along takes a bit of experimentation. You can try selecting the last frame of Layer 1 and dragging it one way or another to see how that affects the look of the rolling wheel. Remember you can undo, and the best way to know how much to rotate is to experiment.

This nested animation feature can have useful applications in areas such as cell biology, anatomy, physiology, physics, and mechanical engineering.

Create a path tween

Now we will make our rotating circle appear to be rolling down a hill by associating it with a Motion Guide. To do this, continue with the same file, being sure to save periodically, or save with a different name.

Right-click on Layer 1 in the Timeline and select "Add Motion Guide". A new layer should appear above Layer 1 called "Guide: Layer 1". Select this Guide layer. With the Pencil tool, and draw a curved line from the upper left corner to the lower right corner of the Stage (see the image below to get an idea what is meant by these instructions).

Next, choose the Selection Tool and click the Snap icon in the Tool Palette. Select the first keyframe in Layer 1 (frame 1) and click and drag the circle object to the upper left of the guide path you drew.

Next, select the last keyframe in Layer 1 (frame 60 in this example), and click and drag the circle object to the lower right end point of the guide path. Hide your Guide layer and play your movie. It should resemble the animation below.

Download the file for this animation: circleanim3path.fla

Extra challenge: Create a third level of nested animations

Can you create a third level of nested animations like the example below?:

Download the file for this extra challenge: circleanim4.fla

Add Buttons to Control the Animation

The final task will be to add three buttons and the necessary ActionScript to control the playback of your animation. We will use buttons already created and provided by Flash to simplify the process a bit.

We will continue with the same rolling circle animation. Create a new layer in the Timeline for our buttons. You can name this layer "Buttons". From the Window>>Other Panels>>Common Libraries submenu, select "Buttons". This should open a new Library panel on the right containing a variety of pre-made buttons.

You will see a list of folders containing the button objects. I recommend the "Playback" folder of buttons, and either the green gel or blue steel designs. We will be adding the gel Right (Play), gel Pause, and gel Stop buttons to keep things simple. With the Buttons layer selected, click and drag each of these buttons one at a time to the Stage (the lower left corner is a good spot).

Next, select the Play button and open the ActionScript panel if it is not already open. Click the blue "+" symbol to add a script to your button, and select Global Functions>>Movie Clip Control>>on or hit the Escape, o, and n keys in sequence.

Another menu will appear, where you will select 'release':

Next, click to position the text cursor at the end of line 1 and hit RETURN to add a blank indented line to the script. Then click the blue "+" and select Global Functions>>Timeline Control>>Play or hit the Escape, p, and l keys in sequence.

Your script should appear similar to:

on (release) {
    play();
}

Do the same for the Stop and Pause buttons, but select the Pause() option for the Pause button and the gotoAndStop(1) option for the Stop button so the playback returns to the beginning (frame 1).

To stop your animation from playing immediately when it is loaded into a browser, you may add a Timeline script to stop the playback at first. To do this, add a new layer to your time line and click in Frame 1. In the ActionScript panel, type:

Stop();

Save your file and play your animation. It should resemble the following:

Download the file: circleanim5buttons.fla

That's it for this Lesson Supplement.

Jeff Sale