Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Project 4: Animating by Using Frames

You used the drawing tools in Project 3 to create lines and shapes. In this project, you can continue to use the drawing tools in Flash to create a character to animate, or you can use a character provided on the CD-ROM for this project. This character contains several separate symbols for each part of the character (such as head, feet, and arms), some of which have several variations you can use to animate the character. Within the project, you can read some pointers on using drawing tools for frame-by-frame animation if you make a series of drawings to animate a character.

Exercise 1: Creating or importing a character

There are a couple of ways to animate a character frame-by-frame. You might trace the character from one you''''''''ve drawn already, and then draw the frames in-between by hand using the Onion Skin feature in Flash. You might draw pieces of a character (such as an arm, leg, and head), and rotate the pieces using the Free Transform tool.

You might use this exact process if you import blended symbols from Illustrator. When Illustrator blends parts of a character, it creates several symbols that appear to be gradually changing. You then have to import these vector assets into Flash, where you might use motion tweens, shape tweens, or frame-by-frame techniques for animation.

Before you start, view the finished animation online at [www.FLAnimation.com/chapters/04].

1.
Open this project''''''''s starter file called pirate_start.fla from the CD-ROM. You can find the file on the CD-ROM at 04/start/ pirate_start.fla. Save a new version of the file as pirate.fla. Open the document and review the contents of the Library (Figure 4.5). There is a folder for the character and another for the contents of the room the character dances in.

If you have problems opening the FLA file, save a copy to your hard drive first before opening it in Flash.

The pirate has one, two, or three states for each body part that moves in the animation, such as the arms and legs. The symbol names have numbers representing what state the graphic is in. For example, the left arm has three different states, so it has three symbols for each state: leftarm-1, leftarm-2, and leftarm-3.

You can modify the symbols you find in the Library as much as you like. You can still easily follow the exercises in this chapter using your own graphics.

The size (550 by 650), frame rate (24), and background color (#333333) for this document have already been set for this project.

You should select a frame rate near the beginning of your animation, in case you choose to synch your animation to sound or other elements, where changing frame rate will affect the synchronization negatively. You might need to do some quick tests to select a good frame rate for your animation. Cartoon animations do not necessarily need a high frame rate like some effects you might make. For example, this chapter''''''''s project still looks ok (yet a bit more choppy) at a lower frame rate. Cartoon-based animation still looks nice (and can run relatively smoothly) at lower frame rates. Slowing down the frame rate does not reduce the file size of the actual graphics, but it does make the animation "longer," which reduces file size if you need to make a cartoon that lasts for a given length of time. For example, if you set your animation to 31 fps, it might be only five seconds long. However, if you set the same animation to 15 fps, it might be 10 seconds long, but it contains the same content. Therefore, that animation is twice as long but exports at the same file size. If you need to make an animation that''''''''s a certain length of time, reducing the file frame rate to make it last longer also reduces the file size of the project.

Importing Characters

If you create a character in another program, you import the character into Flash by choosing File > Import > Import to Library. Depending on the format that you import, you might see a dialog box with options for importing the character. For example, if you import an AI, Fireworks PNG, or Freehand document, you see a special import dialog box. These dialog boxes let you choose how and where to import the content (for instance, to individual layers or keyframes). You might also require QuickTime for importing some file formats, such as PSD and TIF.

2.
Click the Insert Layer button four times. When you finish, there should be five layers total on the Timeline. Rename the five layers as follows (from bottom to top): right arm, legs, body, left arm, and head. Optionally, you can put move head layer below the body layer depending on the look you prefer.

3.
Open the pirate pieces folder in the Library, and drag the following instances onto the Stage:

Drag an instance of rightarm-1 onto the right arm layer.

Drag an instance of legs-1 onto the legs layer.

Drag an instance of body-1 onto the body layer.

Drag an instance of leftarm-1 onto the left arm layer.

Drag an instance of head onto the head layer.

These instances make up the pirate character in its beginning state. To create the final animation, as you see in the final version of the file, you will either swap or modify these instances on the Timeline.

4.
Click and drag the instances using the Selection tool to arrange them on the Stage according to the following figure.

You don''''''''t need to be exact. Arrange them approximately near the middle of the Stage, as you see in the figure. When you finish these steps, save the changes you made to pirate.fla.

Exercise 2: Animating the character

Now that you have imported the character, you need to do something with all the assets to create the illusion of movement. This exercise involves creating new keyframes and swapping the instances on the Stage with new ones from the Library.

1.
Select frame 17 on each layer and press F5 to extend the frames across the Timeline. To select all those frames on each layer, use the Selection tool to highlight the frames. You can click and drag on the Timeline to select all of the frames vertically (Figure 4.7). Then press F5 after you select them to add a frame at the location.

2.
You already have a keyframe on frame 1. Insert keyframes at frames 5, 9, and 13 on each layer. Again, select all the frames vertically at the same time by using the Selection tool (Figure 4.8) or the Ctrl (Windows)/ Command (Macintosh) keys and press F6 to insert keyframes at that location. When you finish, all ayers have keyframes at frames 1, 5, 9 and 13, as shown in the following figure.

Changing the center point" earlier in this chapter for more information.

3.
Before you swap instances, you need to edit the center point of your instances. You edited the center point in Chapter 2, when you motion tweened the character along a motion path. You edited the snap ring so the character snapped to the path from a certain location. In this chapter, you rotate each piece in certain ways, but you want to rotate it using a particular part as the center rotation point.

For this exercise, place the center points according to the diagram shown in Figure 4.9. Select each instance on each keyframe by using the Free Transform tool and drag the center point to a new location.

You want the head to hinge at the bottom of the instance, so it appears to move where the neck attaches to the body. The body can remain at the middle because you don''''''''t rotate the instances in the animation. The arms hinge where the arm attaches to the body, and the legs attach near the hip. None of the hinging needs to be accurate, nor is it meant to even approach realism, although it works for this basic cartoon animation.

You need to hide the body layer to move the center point on the right arm. Click the eye icon on the Timeline for the body layer to hide it while you adjust the right arm''''''''s center point. Show the layer again when you''''''''re finished.

4.
Select frame 5 on the left arm layer; then click the leftarm-1 instance on the Stage. Open the Property inspector (Window > Properties) and click the Swap button, as shown in Figure 4.10. The Swap Symbol dialog box opens, in which you can choose a different symbol from the Library to swap the instance with. Select the leftarm-2 symbol from the list of available items in the Library and click OK.

Select frame 9 on the left arm layer and select the leftarm-1 instance on the Stage. Click Swap in the Property inspector so the Swap Symbol dialog box opens. Choose the leftarm-3 symbol from the list of available items in the Library and click OK. Select the leftarm-1 instance on frame 13 on the left arm layer and swap it with the leftarm-2 symbol in the Library.

5.
After you finish all the swapping, click and drag the playhead across the Timeline to test your changes. The arm should appear to move choppily with each symbol swap.

6.
After the new instances are on the Stage, make sure to edit the center point of each swapped instance on the left arm layer in case you need to rotate them. Select the Free Transform tool and move the center point (the white circle) of each swapped instance on the Stage from the center to near the top center of the instance, as you did in step 3.

7.
Select the rightarm-1 instance on frame 5 on the right arm layer.

Open the Property inspector (Window > Properties) and click the Swap button. Select the rightarm-2 symbol from the list of available items in the Library and click OK to swap the instances.

Select the rightarm-1 instance on frame 9 of the right arm layer. Press Backspace or Delete to remove the instance from the Stage. This part of the animation is when the body would hide the arm, so you can remove the instance from the Stage completely.

Select the rightarm-1 instance on frame 13 and then click the Swap button in the Property inspector. Select the rightarm-2 symbol from the list of available items in the Library and click OK.

You might want to lock the left arm, body, and legs layers so you don''''''''t accidentally select instances on them. Remember that you need to unlock those layers again before you edit the keyframes.

8.
After the new instances are on the Stage, make sure to edit the center point of each swapped instance on the right arm layer in case you need to rotate them. First, hide the body layer by clicking the eye symbol on the Timeline (for the body layer). After you hide the instances on this layer, you can see the entire rightarm-1 and rightarm-2 instances.

Select the Free Transform tool and move the center point (the white circle) of the rightarm-2 instance on the Stage from the center to near the top center of the instance like you did to rightarm-1 in step 3.

After you finish, click the X icon on the Timeline for the body layer to show the layer again.

9.
Select the legs-1 instance on frame 5 on the legs layer. Unlock the legs layer first, if necessary. Open the Property inspector (Window > Properties) and click the Swap button. Select the legs-2 symbol from the list of available items in the Library and click OK.

You can leave frame 9 as it is. Because there are only two states for the legs, they switch between the legs-1 and legs-2 symbols.

Select the legs-1 instance on frame 13 on the legs layer, and swap it with the legs-2 symbol in the Library. When you finish swapping, click and drag the playhead across the Timeline to test your changes. The arms and legs of the pirate should all appear to be moving.

10.
After the new instances are on the Stage, make sure to edit the center point of each swapped instance on the legs layer in case you want to rotate them. Select the Free Transform tool and move the center point (the white circle) of the legs-2 instance on the Stage from the center to near the top-center of the instance, as you did with the legs-1 instance in step 3.

11.
Similar to the legs layer, the body only has two states that it swaps between. Select the body-1 instance on frame 5 on the body layer. Unlock the body layer first, if necessary. Open the Property inspector (Window > Properties) and click the Swap button. Select the body-2 symbol from the list of available items in the Library and click OK.

You can leave frame 9 as it is. Because there are only two states for the body, they will switch between the body-1 and body-2 symbols.

Select the body-1 instance on frame 13 on the body layer and swap it with the body-2 symbol in the Library. You don''''''''t need to modify the center point for the body layer instances because you do not need to rotate this instance in the animation.

12.
There is only a single state for the head animation. Instead of having multiple graphics to represent different parts of an animation, you just rotate the single instance on the keyframes. Before you do any rotations, you need to edit the center point of the instance. Select the head instance on frame 5 using the Free Transform tool. Click the circle and drag it down to the bottom center of the instance to the same location as you did in step 4. Repeat this for frame 13 so the neck appears to rotate while "attached" to the body.

Select the instance on frame 5 with the Free Transform tool again. Move the cursor over the upper-right handle until you see a round arrow (Figure 4.11). Click and drag to rotate the head slightly, as shown in Figure 4.11.

Repeat this step (slightly rotating the head) on frame 13. When you''''''''re finished, the head will bob when you move the playhead across the Timeline.

13.
Now that you have animated the head, body, legs and arms of this character, select Control > Test Movie to test the movement in your frame-by-frame animation. Make any edits or changes as necessary to fine-tune the movements.

You should expect the animation to look choppy at this point. You make further edits in the next exercise to make the animation look "smoother" by using only frame-by-frame animation techniques. In the following exercise, you rotate some symbols for "in-between" animation using the Onion Skin feature, rotation, and the alpha property to achieve a stylized effect. Save your changes before moving on to the next exercise.

You might want to use the Onion Skin feature to make edits. If so, refer to the following section.