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

Learning About Traditional Animation

There are several principles of traditional animation that were developed many years ago by artists at animation studios such as Disney. These principles helped animators make drawings look lifelike and natural, despite being drawn by hand on a 2D surface. You can apply these principles to the drawings you make to animate in Flash. There are many resources available about traditional animation, and many of the techniques used in traditional animation can help you with frame-by-frame animation.

Let''''''''s look at the fundamental process of traditional animation. This process varies greatly depending on the medium used (ranging from ink to 3D), and the people involved. A broad overview of animation might include the following steps:

Planning.
Think about the scene and how it progresses. Then sketch thumbnails that outline the scene and its contents. Draw thumbnails for each major change in content, such as a sudden movement (Figure 4.1).

Revisions.
Take the thumbnails you create and make sure that you solved any problems with the animation. Make any revisions, alterations, or changes at this stage. Don''''''''t move on to the animation before you work out the major ideas, including length. If you think you might want to change the story, do it at this pointnot while you are animating. Try to foresee any problems you might encounter and deal with them using thumbnails. It''''''''s much more difficult to change a finished or full-size animation.

Animation.
Digitize (scan) your thumbnails if necessary, and make them full size or import them into Flash. Space out each thumbnail on frames across the Timeline, as necessary. Trace the thumbnails using tools, delete the thumbnails, and then animate all the frames in-between each thumbnail. At this point in the process, you deal with the dialog, characterization, spacing, and timing.

Chapter 5.

This process might resemble your existing process if you practice a traditional form of animation with Flash. The most important thing you can do, regardless of your project, is to plan it out before you actually begin to draw. Use a pen and paper, brainstorm, and sketch your ideas. Know what the beginning, middle, and end of your animation will be like. Before you even start Flash to begin working, think about the climax of your story or any special movements your character might make. Frame-by-frame animation has a lot of overhead when you workmistakes take a longer time to remedy than when you work with motion or shape tweens in Flash.

About frame-by-frame animation

You might have created or seen frame-by-frame animation in grade school or at a science center. An example of this is a flipbook, which causes drawings on each page to animate when you rapidly flip through pages in a book. You see the animation because of the rapid progression of images. Another form you might have seen shows multiple images drawn inside a wheel that''''''''s placed horizontally on a table (originally called a zoetrope). When you spin the wheel and look at the images inside, they appear to animate. Both of these forms are largely the same as frame-by-frame animation in Flash, except you draw them on each keyframe on the Timeline instead of drawing images individually on pieces of paper. For more information on zoetropes, search "zoetrope" at [http://whatis.techtarget.com] which includes a thorough definition and links.

Frame-by-frame animation is a tedious process. So why do it at all? Because this form of animation lets you add details you wouldn''''''''t otherwise be able to add.

Frame-by-frame animation is very different from the "automated" tweening you did in earlier projects. This frame-by-frame format is the "manual" way of creating animation. You don''''''''t use the tween features in Flash to create the movement for you. Instead, you create the movement yourself, sometimes just as you would if you were drawing on paper. Frame-by-frame animation is not as easy or as quick, but it can help you make awesome, creative, and amazing effects that motion tweens don''''''''t let you create. Or frame-by-frame animation could help you when you need additional control over your animations. Often, using a combination of motion tweens and frame-by-frame animation helps you create a finished animation. You commonly use this form of animation in conjunction with motion tweens to produce a finished effect. For example, an animator might create a walk cycle and need special control over the arm and leg movements. He might use motion tweens for much of the leg movement, but in a particular spot of the animation (perhaps where the leg and foot meet the ground), he could use frame-by-frame animation to achieve the precise effect required for the animation.

In addition to the time involved, frame-by-frame animation typically leads to larger file sizes because you replicate and modify the content in nearly every frame.

There are several different ways to use frame-by-frame animation in Flash. You might have finished symbols that you either duplicate or modify for a particular frame''''''''s content. Or, you might draw on each frame and use the Onion Skin tool to help create the animation. Frame-by-frame animation doesn''''''''t mean having a keyframe on every frame. You might use the technique in only a couple of choice spots in an animation that primarily uses motion tweens (Figure 4.2). In this project, you primarily use frame-by-frame animation simply to learn about moving, modifying, and placing graphics to form a slightly crude animation.

Chapter 5.

Chapter 5. The chapter covers how to make a character speak and move using motion and shape tweens. In this chapter, you focus on how manual changes in an animation can be made to create the illusion of movement.

Changing the center point

By editing the center point (or snap ring), you change the location where the instance snaps to other items (such as a path), or the center of rotation. You did this in Chapter 2 when you changed the snap ring, which affects where the instance snaps to the motion path. You can use the Free Transform tool to edit the center point.

Select the Free Transform tool, and try to rotate the instance. Hover the mouse over a corner handle until you see a round arrow, and then click and drag to rotate the instance. Notice that the instance rotates around the center point (Figure 4.3 on the left). Then click and drag the circle from the center of the instance to a new location. Try to rotate the instance again; this time, it rotates around the new position of the circle (Figure 4.3 on the right).

You want to change the center point before you animate any instances that use rotation. This is particularly important when you create motion tweens. If you change the center point after you begin to tween, your earlier tweens change to reflect the instance''''''''s new center point, which can ruin your animation. Therefore, change the center point to the point where you want the instance to rotate around right after you add the instance to the Stage.

About rotoscoping

Rotoscoping is a fun technique to try. It uses frame-by-frame animation to create the effect of animation, except you use an existing source such as video footage. The basic principle of rotoscoping (in this context) is to create animation by tracing the footage. You can trace the footage in any number of ways by using the drawing tools. For example, you might use the Brush tool to draw around people or animals in the video. Or, you might use the shape tools to copy the basic shapes of buildings panning across the Stage. If you are uncomfortable animating or if want to replicate a specific effect easily, rotoscoping could be the perfect technique for you.

Chapter 8 for details on how to import video (such as how to specify quality settings and change FPSwhich is set as a ratio).

There isn''''''''t room in this book to show a project using rotoscoping, but it''''''''s very easy to try. Import a video into a new FLA file (File > Import > Import to Stage and select a video on your hard drive). Import the video at a lower FPS rate, such as 15, and a size that fits on the Stage. Import the video using 100% quality because the file size doesn''''''''t matter (you delete the video before you export the SWF file).

"Fading" the video partially transparent makes the footage easier to trace.

Place the imported video on Layer 1. Insert a new layer above the video, and place a semitransparent square over the video. This "fades" the video out, so it''''''''s easier to trace. Lock these two layers.

On a new (third) layer, you can then animate frame-by-frame by tracing the video. Trace the video in the first frame, and remove any subsequent empty frames. Then select and press F6 in the next frame that you want to trace, and modify the lines, draw new ones, or remove existing lines as necessary (Figure 4.4). You might want to trace every frame of video, or perhaps every second frameit depends on how smooth you want the animation to be or if you are concerned about the file size. It is almost necessary to have a graphics tablet (such as a Wacom tablet) for tracing video, to speed up the process and improve the look of the result. Drawing by hand can be very time consuming.

Because drawing every frame uses up a lot of file size, it''''''''s a good idea to draw only one image every few frames (or more). You should be conscious of how many details you add to the animation because more details ultimately means a higher file size.

Hide the video layer and test the animation for how smooth or accurate it appears. When you finish, delete the video and "fade" layer; you are left with an animation in a movie clip. As great as this technique can be, there is one large drawback. Rotoscoping typically generates very large file sizes. If you rotoscope by tracing each frame by hand, as with any drawing, you want to optimize the lines you create (select a line and select Modify > Shape > Optimize). There is more information on optimizing lines later in this chapter.

After you finish tracing the video, delete the layer from the Timeline and remove the video footage from your Library. You''''''''re left with a great lifelike animation.