Circles

Adding Guide Layers to Place Artwork

Now we will introduce you to guide layers , which allow you to line up several pieces of artwork on the Stage. Artwork that is placed on the guide layer becomes the actual guide. In the following paragraphs, we'll create a diagonal upon which we will animate several circles. The circles will grow along this line. Let's begin by creating a new Flash document ( File > New , or CTRL / COMMAND + N ). On Layer 1, draw a diagonal line with the Line tool, starting in the upper left and ending in the lower right. Rename Layer 1 to diagonal guide

Next, select frame 40 in the Timeline window, and press the F5 key. This will add thirty-nine frames to the diagonal guide layer, and forty frames will be the length of this Flash movie (see figure 3.9). At 12 fps, our movie will play for 3.3 seconds (40 frames divided by 12 equals 3.3).

Create a new layer by pressing the Insert Layer button in the Timeline window. New layers are always added above the currently selected layer and will have as many frames as the longest layer in the Timeline window. As such, this new layer will also have forty frames. Now we will move the new layer beneath the diagonal guide layer. Select the new layer (Layer 2) by clicking its name-don't double-click it yet. Once the layer is selected, drag it beneath the diagonal guide layer. Rename Layer 2 to circle 1 , as this is the layer where we will place our first circle

Now, draw a circle with the Oval tool, making sure that the circle 1 layer is selected. You can draw this circle anywhere on the Stage. Once you have drawn it, select the stroke surrounding the circle, and delete it by pressing the BACKSPACE / DELETE key. Lock the diagonal guide layer by clicking the black dot under the Lock column, to the right of the layer name. Locking a layer prevents you from accidentally changing the artwork on that layer. In this example, we don't want to accidentally select and move the diagonal guide.

Select the circle with the Arrow tool, and drag the circle from its center point. The tricky part here is to find the center of the circle, which will not be marked or indicated. Before you try to drag the circle, move the Arrow icon over the center of the center of the circle. Then, click and drag the circle. You should see a smaller circle graphic appear next to the mouse arrow as you drag. This indicates that you are dragging from a fixed point, like the center. You will also see these circle graphics when you drag from points or edges of shapes. Once you have started to drag the circle, snap the circle to the upper-left edge of the diagonal line, as shown in figure 3.11.

Circle 1 will be the first circle to display on the Stage and will stay on the Stage throughout the movie. Next, we will create another layer, and name it circle 2 . On this new layer, place a keyframe on frame 5 by selecting frame 5 in the Timeline window and pressing the F6 key. On frame 5, draw a new circle, without a stroke. Use a size and color different from the previous circle. Snap circle 2 to the diagonal line, just a bit further down from circle 1 (see figure 3.12).

Now, we'll show you how to use Copy and Paste to speed up the creation of circles. Create a new layer, and name it circle 3 . Add a new keyframe on frame 10 of this layer. Select the circle from the circle 2 layer, and select Edit > Copy ( CTRL / COMMAND + C ). Then, select frame 10 of the circle 3 layer. Select Edit > Paste ( CTRL / COMMAND + V ). Whenever you use the Paste command, Flash will paste the copied contents to the center of the currently viewed area. With the Arrow tool, drag the new circle below and to the right of circle 2. Using the Paint Bucket tool, fill circle 3 with a new color. You can also resize the circle using the Arrow tool and the scale modifiers. Note that you may need to redrag the circle's center to snap to the diagonal guide (see figure 3.13).

Repeat the copy-and-paste procedure across five more layers, for circles 4 through 8. As with previous layers, start each new layer five frames further down the Timeline. Meaning, circle 4's first keyframe would be at frame 15, circle 5 at frame 20, circle 6 at frame 25, circle 7 at frame 30, and circle 8 at frame 35. Vary the color and size of these circles. When you are finished, your Timeline and Stage should resemble those shown in figure 3.14.

Let's take a moment to preview our Flash animation. There are several ways to watch our circles unfold. First, you can drag the Timeline indicator (that is, the pink overlay box located in the numbered-frame portion of the Timeline window). Click and drag the Timeline indicator across the forty frames. The Stage will update to show you the circles as you placed them on the Stage. You can also play the Flash movie: Select Control > Play , or press the ENTER / RETURN key. Flash MX will automatically play the movie from the current position of the Timeline indicator. When it reaches the end (frame 40), it will stop. To replay the movie from the beginning, simply press the ENTER / RETURN key again.

Currently, the diagonal guide layer is a layer just like every other layer. This means that we'll see the line artwork in our actual Flash movie. Right now, we'll quickly introduce you to the Test Movie command. Select Control > Test Movie ( CTRL / COMMAND + ENTER / RETURN ). Your Flash movie will then be exported as an .swf file and be displayed in a separate window. What do you see? You'll see the circles animate across the movie's Stage, but you'll also see the diagonal line. Close the Test Movie window, and go back to the Timeline window. Now, we'll change the diagonal guide layer to an actual guide layer. A guide layer appears only within the authoring space of Flash MX. It will not export with the final Flash movie (.swf file). To convert a layer to a guide layer, double-click the layer icon to the left of the layer's name. In the Layer Properties dialog box (figure 3.15), select the Guide option button for the Type , and click OK .

Fig. 3.15. Layer Properties dialog box

Now you'll see a new icon to the left of the layer's name. The T-square icon indicates a guide layer

When you test your Flash movie with this new guide layer, you will not see the diagonal line. Guide layers will not be exported to the final Flash movie (.swf file) for your Flash movie. Go ahead and test the movie by selecting Control > Test Movie to see this effect. When you're finished viewing the new movie, close the Test Movie window. Let's save your Flash movie: Click File > Save (or press CTRL / COMMAND + S ), type circle_animation.fla in the Save File dialog box, and then press OK (Windows) or Save (Mac). In the next section, we'll introduce you to scenes, and we'll show you how to test a Flash movie as a Web-ready .swf file.

Chapter 4

Creating Multiple Scenes, and Testing Movies

Now that you know how to use frames, keyframes, and layers, we'll move on to scenes. So far, we've been doing all of our work in Scene 1. The scene name appears in the upper-left corner of the document window. Just as plays and feature films have scenes to provide transitions between parts of a story, Flash documents can be broken up into several scenes. Perhaps a more appropriate comparison would be to standard HTML Web pages. Most Web sites sport navigation bars that allow you to jump to the content you want to access. For example, a news Web site may have Current Events , Classifieds , Lifestyle , and Business sections. If you wanted to replicate these categories in a Flash document, then you might want to create a scene for each of these sections.

In this chapter, we'll create a second scene for the circle_animation.fla movie we created in the last chapter. For simplicity' sake, we'll treat our animating circles as an introduction to the overall Flash movie. We'll add Scene 2 to store the welcome message for the movie, and provide some general information.

Open circle_animation.fla , which you created in the last chapter. Let's take a look now at the Scene panel. Select Window > Scene . You should see a panel that resembles figure 3.17, showing our first scene, Scene 1.

Fig. 3.17. Scene panel, Scene 1

Now we'll add another scene to the Flash document. Click the Add Scene ( + ) button in the lower-right corner of the Scene panel, just to the left of the trash can icon. You should now see a new Scene 2 appear in the Scene panel, and the Timeline window will show an empty Timeline with a blank Stage. Don't worry! Your original scene (Scene 1) is still available-you haven't lost it. Go ahead and click Scene 1 in the Scene panel to see your first scene. Let's rename Scene 1 to something more descriptive. Double-click the Scene 1 text in the panel. The pointer will then look like an I-beam, indicating that you can click inside the text field and modify the contents. Replace the text Scene 1 with the word Intro or Introduction , as shown in figure 3.18.

Fig. 3.18. Renaming

Then, double-click the Scene 2 text in the Scene panel. Rename this scene to Welcome . This scene will show a welcome heading and text message. We'll stay in this scene for the remainder of the lesson. Note that if you ever want to reorder your scenes, you can click and drag the names above or below other names within the Scene panel. Unless you add some ActionScript to your movies, scenes will automatically play one after another, in a top-down order as displayed in the Scene panel. Notice as well that the new scene names also appear at the upper-left corner of the Timeline window.

In the Welcome scene, we'll use the Text tool to add some words to the Flash movie. Rename Layer 1 of the Welcome scene to header (see figure 3.19). On this layer, select the Text tool, and type the words Welcome to Acme Paints . For our example, we used the 36-point ITC Officina Sans Book font. (Use the Character panel to change your font settings.) If you don't have this font, then use one of the favorite fonts installed on your computer. Next, we'll draw a line under the header. Select the Line tool, and draw a straight line (holding down the SHIFT key) underneath the welcome header.

Finally, create a new layer, and name it message . Place this layer beneath the header layer. On this layer, add the following text using the Text tool: At Acme Paints, we strive to provide the best-quality paints at an affordable price. Whether it's for your home or business, we can create just about any color you desire in any quantity you need. For this example, we used the same font (Officina Sans Book) but at a smaller size: 18 point. Center the text block using the Align panel

Save your Flash document ( File > Save ), and try testing the scenes. Select Control > Test Movie , and you should see your Intro scene play (just as it did before). When that scene finishes, the Welcome scene should appear. However, it will display for only a split second and then will start to play the Intro scene again. This is known as looping . Let's go ahead and add a simple stop action to our Flash movie to prevent it from looping.