Getting to Know Flash Pro

One of the major problems encountered by early animators was the "flatness" of animated movies. To give the movies depth, they placed layers of glass in stacks. Each glass layer would contain a different set of images, depending on the image's depth (position) relative to other images in the movie. Eventually, by placing the drawings on cellophane (called a cel), animators were able to move characters in front of or behind one another without having to combine images, and the entire process of creating animated movies was greatly simplified. This technique gave animated movies greater depth and realism.

In Flash, layers work the same way as they do in traditional animation. Each layer can contain different content, depending on that content's position relative to the other images in the movie. When you're animating images in Flash, however, only a single object is tweened in any layer. When objects on the same layer need to be moved independently, you can insert keyframes for each change. However, rather than going though all the work of manually redrawing independently in individual frames, Flash developers and designers typically place all images that need to be changed or moved on separate layers. Although this is not an exact parallel to the traditional layer method on glass panels, it's far more efficient.

The sine qua non of Flash is tweening. As noted earlier, tweening is the automated process of filling in the changes between keyframes. The following simple project will help you to see and understand the process. Follow these steps to create a basic shape tween:

1. Open a new Flash document and click Frame 30 to select it.

2. Press the F6 key or choose Insert, Timeline, Keyframe from the menu to insert a frame. Frames are added from Frame 1–29 and a keyframe is inserted in Frame 30.

3. Click Frame 1 and then click the Oval tool in the Tools panel.

4. Draw a circle in the upper-left corner of the Stage, as shown:

   

   Figure 1.5  Circle created with Oval tool.

5. Click Frame 30 and select the Rectangle tool in the Tools panel.

6. Draw a rectangle in the lower-right corner of the Stage, as shown in Figure 1.6.

7. Click Frame 1. In the Property Inspector, select Shape from the Tween drop-down menu, as shown in Figure 1.7. An arrow with a green background appears in the frames shown in Figure 1.8.

Figure 1.6   Rectangle created with Rectangle tool.

Figure 1.7  Setting a Shape tween.

Figure 1.8   Shape tween arrow.

    8. Select Control, Enable Live Preview. (If Enable Live Preview is already checked, just leave it alone.)

   9. Click the first frame and press the Enter key to view the live preview. The circle morphs into a rectangle and moves from the upper-left corner to the lower-right corner.

To understand this process, drag the playhead from left to right to see the different Stages of change that the shape goes through. Each of the frames between the keyframes has a slightly different position and shape. Figure 1.9 shows one of the shapes and positions between the keyframes.

Figure 1.9  Shape tween between keyframes.

As noted, if you select any of the frames between the keyframes in the tween, the image cannot be edited. However, if you select a tweened frame and insert a keyframe (F6), the image in the frame can be edited. Chapter 2, "The Flash Pro Interface," provides more details about working with tweening.

Because Flash is set up to have addressable independent objects on the same Timeline and/or different Timelines, understanding levels and Timelines is fundamental to being able to work effectively in Flash. All renderings on the same Timeline change at the rate of that Timeline, whereas objects on different Timelines change at different rates depending on the length of the Timeline and how the objects on that Timeline are set. Figure 1.10 is a rough illustration of how to envision the difference between levels and Timelines in Flash.

Figure 1.10   Levels and Timelines.