• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Drawing Frame-by-Frame Animat... > Using Tools to Edit and Test the Ani...

Using Tools to Edit and Test the Animation

If you drew this chapter's pirate animation by hand, the frames you added in the previous exercise would be the major changes in your animation (what you might create thumbnails for). Then, whether you draw the animation or use instances like this project, you need to create the “in-between” frames by modifying existing drawings or creating new ones. For the sake of simplicity, you modify the movie clips you already imported by placing them in-between the major changes in the animation and making changes to their appearance.

Onion skin settings and preferences

The Onion Skin tools, which are very important for frame-by-frame animation, are features that stem from traditional animation. When traditional animators draw, they use transparent layers to draw subtle changes in the animation. For example, if the animator draws a character for frame 1, then she overlays tracing paper and draws a subtle change on frame 2 to create the appearance of motion while using the drawing on frame 1 as a reference because it can be seen through the transparent paper.

Figure 4.12. You create movement by drawing subtle changes from the previous frame. Overlaying tracing paper helps an animator refer to the previous frame. In this figure, Onion Skin with Outlines is active so you can see the outline of previous frames.


Onion skinning lets you work in a similar way. You can draw or place items on the Stage on a particular frame while you see a number of surrounding frames before and after the current frame that are “dimmed” (faded out). With pirate.fla open, select frame 9 and then click the Onion Skin button on the Timeline (Figure 4.13). You see dimmed frames surrounding the currently selected frame.

Figure 4.13. Surrounding frames are “dimmed” when you turn on the Onion Skin feature.


Make sure that you unlock the layers you want to see as “dimmed” frames. Locked layers won't appear as dimmed when you use the Onion Skin tools.


You can reposition the start and end frames for the onion skin by dragging the markers further away from the playhead, or closer to it. You can also modify the properties of the marker. Click the Modify Onion Markers button (Figure 4.13) and select an option from the pop-up menu. You can choose to display a certain number of dimmed frames around the playhead or all frames (Onion 2, Onion 5, or Onion All), or lock the current position of the onion skin markers (Anchor Onion).

You can edit only the current frame (where the playhead sits). You cannot edit the onion-skinned (dimmed) frames unless you select the Edit Multiple Frames button.


There are two other options for onion skinning. You can enable the Onion Skin Outlines feature or the Edit Multiple Frames feature.

Onion Skin Outlines displays dimmed frames as outlines instead of faded graphics. If you choose the Edit Multiple Frames feature, you can edit the dimmed frames as well as the current frame (unlike the regular Onion Skin feature). This is particularly useful after you create an animation and need to fine-tune your drawings in relation to each other.

Changing Frame Views

When the Timeline grows in length with your animations, you might want to change the way you view frames. You can change the appearance of the frames in several different ways by selecting the Frame View pop-up menu in the upper-right corner of the Timeline. None of these options actually affect the animation or application you create. You can choose from the following options:

  • Tiny to large: Changes the size of the frames on the Timeline. Larger sizes make the frames wider (horizontally), which is useful when you have a lot of frames in your animation. If you have a lot of frames on the Timeline, choose Tiny or Small.

  • Short: Makes the frames shorter vertically, which is useful when you have a lot of layers.

  • Preview: Lets you see your animation on the Timeline without having to scrub through it.

  • Preview in context: Shows the frame content on the Timeline in correct proportions (or context).


Exercise 3: Testing and editing your animation

The animation might seem a bit clunky if you test it in its current state. You can add frames in-between the existing ones to create smoother animation. If you are working with a drawn cartoon, you might have thumbnails for each keyframe and then draw the transition between the thumbnails using the Onion Skin feature (which you use in this exercise). You will copy and paste existing frames and modify instances on the Timeline, using onion skins for reference.

If you want to modify the graphics inside one of the instances on the Stage in the FLA, make sure that you duplicate the instance on the Stage first (Modify > Symbol > Duplicate Symbol). If you modify the instance on the Stage, it changes every instance of that symbol on the Stage.


1.
Select the left arm layer and click the Insert Layer button. Rename the layer left arm - fade. Then select the right arm layer and click the Insert Layer button. Rename the new layer right arm - fade. Then select the legs layer and click the Insert Layer button. Rename the new layer legs - fade.

2.
Each new layer should extend to frame 17 on the Timeline. Select frame 3 on each of these three layers, and press F6 to insert a keyframe. Then select frame 7 on each of these three layers and press F6 to insert a keyframe. Finally, select frame 11 on all three layers and press F6 to insert a keyframe. Then select frame 15 of the left arm—fade layer and press F6 to insert a keyframe. When you're finished, the Timeline should resemble the following figure.

Figure 4.14. Add empty keyframes on the Timeline. You will paste frames at these locations.


3.
Click the Onion Skin button on the Timeline. Make sure that you unlock the layers on the Timeline, so you can see the dimmed frames around the current position of the playhead. Now click the Onion Skin Outlines button, which shows the outline of each frame instead of the dimmed frames. This helps you see the other frames of the animation easier in this particular animation, which uses alpha to create a sense of movement (much like the dimmed Onion Skin frames).

Press Ctrl (Windows) or Command (Macintosh) and click each individual frame to select them at the same time.


4.
The rest of the animation does not need to be exact. Right-click (Windows) or Control-click (Macintosh) frame 1 of the left arm layer, and select Copy Frames from the context menu. Then click frame 3 of the left arm - fade layer and right-click or Control-click the frame and select Paste Frames from the context menu. This command pastes an exact replica of frame 1 on frame 3.

If you have difficulty selecting the instance on the fade layer, lock the left-arm layer first.


Click the instance you just pasted with the Free Transform tool. Because the Onion Skin button is active, you can see the position of the two arm states on either side of the current frame. Move the center point of the instance to the upper region of the arm (as you did in the previous example).

Rotate the instance on frame 3 until it is approximately between the two drawn arm states (Figure 4.15). The instance should rotate with the top of the graphic as the center because you changed the center point of the instance.

Figure 4.15. Rotate the instance in-between the states on frames 1 and 5.


After you finish rotating the instance, make sure that it is still selected and select Alpha from the Color pop-up menu in the Property inspector. Change the Alpha value to approximately 40%, as shown in the following figure.

Figure 4.16. Change the alpha value to 40%.


Select frame 5 on the left arm layer and copy the frame. Paste the frame on frame 7 of the left arm - fade layer. Select the Free Transform tool and move the center point of the instance to the upper region of the arm (as you did in the previous example). Then rotate and change the alpha level of the instance. Repeat this step with frame 9 on the left arm layer, and paste it on frame 11 of the left arm - fade layer. With the Onion Skin button selected, you see the dimmed frames around the key frame that you need to modify. When you finish, all the frames on the left arm - fade layer should be semitransparent and rotated. Then, the keyframe at frame 15 (though 17) should remain empty—this is when the arm doesn't appear in the animation.

If you cannot see the difference between the two surrounding instance positions, extend the onion skin markers. You can move them by clicking a handle and dragging it toward or away from the playhead.


5.
Right-click (Windows) or Control-click (Macintosh) frame 1 of the right arm layer, and select Copy Frames from the context menu. Then click frame 3 of the right arm - fade layer and right-click or Control-click the frame and select Paste Frames from the context menu.

Select the Free Transform tool and click the instance you just pasted. Move the center point to the upper-right corner of the instance, as you did in the earlier example. Then rotate the instance between the visible right arm instance and the pirate body, and change the instance's alpha to 40%.

Figure 4.17. Rotate the instance in-between the visible right arm and the body after you move the center point.


Repeat this step with frame 5 on the right arm layer and paste it on frame 7 of the right arm - fade layer. Leave the other frames on the right arm - fade layer empty. When you finish, all the frames on the right arm - fade layer should be semitransparent and rotated.

6.
Right-click (Windows) or Control-click (Macintosh) frame 1 of the legs layer, and select Copy Frames from the context menu. Then click frame 3 of the legs - fade layer, and right-click or Control-click the frame and select Paste Frames from the context menu.

Select the Free Transform tool and click the instance you just pasted. Change the center point of the instance, and rotate the instance so it appears in relation to the other state of the leg graphic, as shown in Figure 4.18. Select the instance and change the Alpha value in the Property inspector to 40%.

Figure 4.18. Rotate the legs so they appear in-between the other two graphics on the Stage.


Repeat select frame 5 of the legs layer, and copy and paste this frame onto frame 7 of the legs - fade layer. Rotate and change the alpha value of the instance to 40%.

Select frame 3 on the legs - fade layer, and right-click (Windows) or Control-click (Macintosh) the layer. Select Copy Frames from the context menu; then click frame 11 of the same layer. Right-click or Control-click again, and select Paste Frames from the context menu. Because this instance changes between two different states, this “in-between” state can look the same as the earlier position.

Now your Timeline will look similar to the following figure.

Figure 4.19. Your Timeline will look similar to this figure when you finish adding the “in-between” graphics.


Test the animation and make any modifications as you see fit. When you finish modifying, deselect the Onion Skin button. You might want to add some additional frames or graphics to the Timeline, and you should notice that the animation looks a lot smoother than it did earlier because you had added additional graphics and frames to the animation to fill in areas where there was previously no movement.

You might also notice that the animation loops at the end, and the pirate appears to dance because the graphics change from a beginning position to a finished position and then back toward the beginning position. Therefore, the dancing appears to go back and forth between two positions in a looping fashion. Save your changes before moving on to the next exercise.

Exercise 4: Creating and animating the room

The room contains text and a floor graphic that lights up using motion tweens. The floor contains only five different symbols: one for each color on the dance floor. And each of these symbols contains a nested movie clip to create the motion tween “glow.” Each main symbol has many instances on the Stage, which are modified to have a unique shape. The five symbols (containing nested symbols) are already in the start file's Library. Double-click the blue symbol in the dancefloor folder and take a look at the motion tween (Figure 4.20).

Figure 4.20. You use a motion tween to create the glowing dance floor squares.


The motion tween starts on frame 1 and ends on frame 50. Easing is applied in the Property inspector, so the color has a softer transition as it fades in and out. Double-click the other symbols in the dancefloor folder. Notice that each symbol's motion tween is a different length or starts at a different frame. Thus, the instances creating the dance floor do not tween at the same time: They start and finish the tween at varying times, so the animation is not uniform.

Double-click the grid symbol in the Library. The symbol includes the grid pattern that creates an outline for each color on the dance floor and a gradient that covers the grid pattern to create the appearance of depth. The grid was created in Illustrator using the grid tool, and the gradient was created in Flash using the outer edge of the grid as an outline and filled with a linear gradient of varying alpha levels as shown in the following figure.

Creating the Gradient

A gradient fill was added over the grid graphic you added to the Stage. The gradient helps add a feeling of depth and dimension to the floor. To create it, a shape without a fill was drawn that matches the outer edges of the floor's grid pattern. A linear gradient fill that transitions from a transparent black to almost clear was applied to the outline (using the Color Mixer panel). To replicate this gradient effect, select Linear from the Fill style pop-up menu in the Color Mixer panel. Click the left color pointer under the gradient definition bar and select black from the color control near the top of the panel. Then click the Alpha text field and enter 50%. Repeat this step for the right color pointer under the gradient definition bar, except choose 22% for the alpha level. Now the gradient transitions between two transparent black values.

Do not use many gradients in your animations because they take a lot of processor power to render. Detailed calculations must be made for each pixel in the gradient, which can potentially slow down how fast the SWF file plays.


In the following exercise, you add and modify the dancefloor instances. If you double-clicked a symbol to look at its contents, make sure that you click Scene 1 to return to the main Timeline.

1.
Select the bottom layer (right arm) and then click Insert Layer to add a new layer near the bottom of the Timeline. Click and drag the new layer underneath right arm so it's the bottom layer. Rename the new layer floor.

2.
Open the Library (Window > Library) and drag the grid graphic symbol to the floor layer, and position the graphic so it resembles Figure 4.21 or matches the following coordinates: X:-178, Y:565.

Figure 4.21. A grid pattern and gradient for the dance floor.


3.
Select the grid graphic, and press F8 to convert it into a movie clip. Name this symbol floor. You nest many movie clip instances inside of this instance in upcoming steps. Double-click the movie clip to edit it in place.

4.
Inside the movie clip, lock Layer 1 with the grid graphic on it. Then click Insert Layer to create a new layer. Rename the new layer color squares, and then drag it below the grid layer (Figure 4.22).

Figure 4.22. Drag the new color squares layer beneath the grid.


5.
Double-click the dancefloor folder inside the Library to open the folder. Each symbol inside the color squares folder has been prepared for you. Each of the five movie clips has motion tweens that fade in and out at different intervals. These fade the square graphic in and out, starting and ending on different frames. Therefore, when you place all the instances on the Stage they fade at different times.

You can also rotate the instance using the Free Transform tool. After you drag the instance to the Stage, rotate the instance so the upper left corners of the instance and the grid match. Then resize and skew the instance so it matches the shape on the grid.


6.
Drag the green symbol instance to the Stage and select the Free Transform tool. Click the instance so handles surround the instance. Move the green instance under one of the grid squares (click and drag the center of the instance to move it). Now use the skew and resize tool to shape the colored square so it matches one of the squares.

Hover over the top of the square until you see the skew icon (Figure 4.23, left). Click and drag to skew the square. You can also use the corner handles to resize the instance (Figure 4.23, right). These two tools are what you use to shape the squares like the floor.

Figure 4.23. Use the skew (left) and resize (right) tools to shape the colored squares like each square of the grid. To access these tools, click an instance by using the Free Transform tool.


7.
Place approximately three or four more yellow symbols on the Stage and resize them to match randomly chosen squares on the grid.

8.
Repeat steps 6 and 7 for each color, until there is approximately an even number of each instance, and you fill each square on the grid. You need to place, resize, and skew three or four instances of each color on the Stage to fill the floor (Figure 4.21).

9.
After you finish adding the colored instances to the Stage, click Scene 1 on the Edit Bar to return to the main Stage. Then select Control > Test Movie to test the SWF file.

Blinking Effect

You might notice that many Flash websites use blinking effects. Perhaps a movie clip fades in and blinks rapidly, or a character's eye blinks. This is frequently accomplished by using frame-by-frame animation. If you use frame-by-frame animation, you can take a keyframe with the instance and paste it on a later keyframe; however, you leave the frames between these keyframes empty. So, if you have an eye instance on frame 1, select frame 3 of the same layer and press F6 to copy the keyframe. Then select frame 5 and press F6 again. Select frames 2 and 4, and right-click or Control-click and select Clear Frames. Frame 2 and 4 are now empty, but the instance appears on frames 1, 3, and 5.

When you test the SWF file, the instance appears to blink. How fast the instance blinks depends on the number of frames that separate those instances and also the frame rate. So to slow down or speed up the blinking, either change the frame rate in the Property inspector or insert more frames (or remove frames) between the keyframes. To insert frames, select an empty frame and press F5. To remove frames, select the frame and right-click or Control-click, and select Remove Frames from the context menu.

You can create a blinking effect on the Timeline by using frame-by-frame animation.


10.
Select the floor layer, and click Insert Layer from the Timeline. Rename the new layer wall. Click and drag the wall layer beneath the floor layer so it is the bottom layer on the Timeline.

11.
Select the Rectangle tool in the Tools panel. Click the pencil icon next to the stroke color control and click the No Color button. Then select the Fill color control type #222222 in the text field above the palette. Draw a rectangle so the left edge that runs vertically from the upper-right corner of the grid floor, as shown in Figure 4.25. Make sure that the rectangle covers the entire area of the Stage to the right of that upper-right corner of the floor.

Figure 4.25. Create a rectangle that covers the right side of the Stage, starting at the upper-right corner of the grid floor.


After you create the wall, select the shape and press F8 to convert it into a graphic symbol. Type in a name for the new symbol (such as wall).

12.
Find discopirate.png in the Library. This graphic was created in Illustrator, and can optionally be placed on the Stage. Select the topmost layer on the Timeline and click Insert Layer. Rename the new layer text. Then drag an instance of this graphic onto this layer, and position it in the upper-left corner (see the introductory figures at the beginning of this chapter for reference).

Now you have made the finishing touches to the animation. Test the animation again and save your changes before moving on.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint