KEYS TO CHARACTER ANIMATION

Now that the title sequence is finished, it's time to start on the animation for "The Prague Years" itself. Animation uses the mechanics of motion to create characters that come to life. Although it's impossible to teach the ins and outs of animation in this short chapter, it's still important to consider the traditional principles of lifelike character animation.

The principles of character animation include important ideas such as Squash and Stretch and Arcs and Anticipation. Developed over many years of trial and error by the animators at the Disney Studios, these principles have stood the test of time. Because developing animation for devices can be fairly limiting, it's useful to remember that these principles still apply and that following them will make for better animation.

Squash and Stretch

The key to lifelike animation is emphasizing the contraction and extension of forms. The classic example from Disney's animators is to consider a half-filled flour bag that is squashed when it's dropped on the floor and stretched when held up by two corners. The squash and stretch shown by that simple flour bag is no different than the squash and stretch shown by any nonrigid object, such as a part of the human body or a bouncing ball (see Figure 6.34).

Figure 6.34. The classic ball bouncing shows both squash when the ball hits the ground and stretch when it bounces off the ground.

Anticipation

It's important to anticipate a character's actions with a movement, a look, or some other device to prepare the audience for the action. As an example, people gather themselves and lean back slightly before they begin to run forward. When people pick up an object, they normally glance at it before moving toward it. If this kind of anticipation isn't in the animation, then the movement will appear lifeless. Using visual clues to show anticipation rather than verbal clues leads to stronger animation.

Follow Through/Overlapping Action

The key point here is that characters never stop all at once. Different parts of the body move at different speeds and stop at different times. The way a character stops also adds to the character's personality. A character can stop in a loose, relaxed way or with tight control over every part of the body. Either way of stopping shows the audience a different aspect of the character's personality.

Arcs

Character movements follow a slightly circular path. Character actions made on straight lines appear stiff and mechanical. In a walk cycle, the character's body must move up and down, rising and falling in an arc with the rhythm of each step (see Figure 6.35). Animators that rely on motion tweens for character movement usually end up with lifeless motion because tweens rely on straight lines rather than arcs.

Figure 6.35. Use arcs when animating characters to get lifelike movement.

Secondary Action

Secondary actions are actions that support the primary action of the scene. Secondary actions drive home the emotion of the primary action. If a character begins to cry quietly, then an appropriate secondary action might be to slowly wipe away one of the dripping tears.

Timing

Timing in animation, as in any other acting discipline, is crucial to the development of a scene. In animation, timing depends on the number of frames that contain drawings and how many frames each drawing stays on the screen. Film animation is normally done at 24 fps with most drawings staying on the screen for two frames, called animating on twos; although some actions such as lip synching require drawings to stay on the screen for one frame, called animating on ones. Because frame rates are well below 24 fps in Flash, it's normal to animate everything on ones, and animation timing will reflect this.

Exaggeration

Exaggerating action so that it's strong and clear, yet still believable, is one of the keys to successful animation. Exaggeration allows animation to be happy, funny, sad, or any other emotion. In general, animation benefits from slightly exaggerating all the emotions and movements in a cartoon.

Ease In, Ease Out

The idea behind ease in and ease out is that the key poses are the most important to convey in an animated sequence. The drawings on each side of these key poses create a movement that moves slowly away from that key pose. In consequence, there are only a few "in between" drawings between the two key poses that link these two poses. Because so many drawings are close to the key poses, the key poses are on screen for the longest possible time. This makes the animation appear to flow more smoothly.

Straight Ahead Animation and Pose to Pose Animation

Animators work in two distinct ways. In straight ahead animation, animators begin at the start of a scene and animate frame to frame. This keeps the animation fresh and full of action. Straight ahead animation rarely works in layouts with strong perspective because it's too easy to lose focus on the overall scene, but it does work very well for any fast, free-for-all action.

In pose to pose animation, animators create key frames to show the most important actions and then return later to fill in the frames in between these key poses with drawings (in betweening is where Flash gets the terminology for motion and shape tweening). Animating pose to pose keeps tight control over the development of scenes that need clear action because the individual poses can be worked out carefully in relation to each other.

Staging

Staging means presenting each story idea in a clear and immediate visual manner. Staging is important in the storyboard phase because it defines what kind of layout or camera shot will work best to convey the story idea. It means that every attempt is made through layout, action, and design to focus the audience's attention on the unfolding of the story.

These are the key principles that have guided character animation over the years. They have worked for feature films, television shows, and independent shorts. Although developing character animation for devices means that animation must be simplified to play back well, adhering to the basic premises of these principles will allow animation for devices to approach the quality of these other display formats.

The animation of "The Prague Years" requires two main characters, a few backgrounds, and a half dozen minor characters. Because the graphic style is simple, the number of symbols and graphics needed to create all the animation and settings is fairly small. This is useful because storage space on devices varies so widely.

In thinking about developing for device screens, the main overall decision that was made with the cartoon was to add as many close-ups as possible of the characters. Because the screen size is small, it's important to keep a tight focus on the characters to convey emotion and expression (see Figure 6.36). Another decision that affected the development of the cartoon was the choice to move forward with a close-to-web-safe color palette. The goal was to use bright colors to help the cartoon pop on the screen.

Figure 6.36. Use close-ups on the characters when possible to ensure that emotions are visible.

Movie Creation Step by Step

The following section goes through a step-by-step example of how to get "The Prague Years" storyboard into Flash, create and symbolize characters, optimize animation for playback on different devices, and then export for display on multiple devices. Files for this cartoon are available for download at the book's web site. These files include the storyboard scans, the traces of the characters, the symbols, and the storyboard. The scratch soundtrack also is provided. Use these files to follow along or put together your own cartoon.

Creating the Storyboard

The first step in creating any cartoon is to have a written script and a set of drawn characters that can be developed into a storyboard (see Figure 6.37). A storyboard is a series of illustrations that tell the action of a story in pictures. The original comic strip of "The Prague Years" was more or less created in a storyboard format so the comic strip provided the storyboard for the cartoon.

Figure 6.37. "The Prague Years" storyboard based on the original comic strip.

To create a storyboard, standard paper storyboard forms are available for purchase from animation supply houses or are simple to create and photocopy. Each storyboard page provides space for several drawings of the scene and lines for the dialogue associated with each drawing. Some animators prefer vertical storyboard forms while others prefer horizontal forms, but either format works fine to create usable storyboards. The goal with the storyboard is to place characters in a strong layout so that the animated action will be clear and strong. It's important to have a dynamic "line of action" in the individual character poses and between the characters (see Figure 6.38). To understand this, put an imaginary line through the main action of the figure. Is it a strong curve with direction? If it's impossible to decide the main line of action, then it's time to rethink the character layout.

Figure 6.38. Strong lines of action improve the dynamic quality of animation.

Beware of "twins" while laying out the storyboard (see Figure 6.39). Twins are drawings in which the character's body is presented symmetrically. Think, for example, of a character standing at attention in the military the shoulders are at the same height, the feet stick out at the same angle, and so on. Twinned characters like this have no life to them because living creatures are never so static.

Figure 6.39. Drawing symmetrical figures ("twins") creates stiff characters.

The storyboard is the point in the production process where the animation director and the storyboard artist figure out the pacing and flow of the movie. The length of scenes and the cuts that will be made internal to scenes and between scenes also are defined.

In developing for devices, many types of standard cuts used in animation have to be discarded. Standard fade ins and fade outs are possible but must be carefully tested on devices. Cross fades or dissolves are almost impossible to make work. Fancy editing effects such as using animated symbols in masks to reveal the next scene "through" the current scene are also difficult to make work. "The Prague Years" relies on straight cuts between scenes with a few fade ins and fade outs.

It's also necessary to think about how scenes will be laid out within the Flash authoring tool. In general, it's good to keep any shots with a continuous background in one Flash scene and then add another scene when the background changes. Breaking animation up into many scenes inside of Flash helps keep the animation organized and the number of layers per scene to a reasonable number. The only problem with using lots of scenes is that it can be difficult to work with long streaming sounds that go across multiple backgrounds. In that case, keep all those sections of the animation together in one Flash scene.

A good way to create a fade in or out in Flash is to place a black rectangle symbol on the top layer (see Figure 6.40). For a fade out, make it transparent in the first frame and black in the end frame. Create the color fade by adding a motion tween (see Figure 6.41). This is much simpler to do than fading all the individual symbols to black and also plays more smoothly.

Figure 6.40. Add a rectangular box symbol and make it transparent in the first frame of the fade out.

Figure 6.41. Create a motion tween to make the scene fade out.

Next, put the animation narration and dialogue in a two-line text block at the top of the frame (see Figure 6.42). This allows a quick review of the dialogue in the movie at the storyboard stage and also gives you the capability to quickly and easily create a close-captioned movie for the hearing impaired. Although this isn't something that's commonly done, it really doesn't add a whole lot of production time, and it's not only useful when reviewing the cartoon but also is considerate to all the possible fans of animation.

Figure 6.42. Add lines of dialogue to the storyboard for review and for close captioning.

The next step is to create a dialogue scratch track to place over the storyboard (see Figure 6.43). This scratch track might not even include the proper character's voices, but will give animators a sense of the cartoon's timing. With scratch track voices added, it's often possible to catch layout errors at this point rather than much later in the production.

Figure 6.43. Add a scratch track to the storyboard to review timing.

Creating the Characters

In the same way as the traced font in the title sequence, characters in Flash can be drawn freehand, traced from scans or vectorized using Trace Bitmap. In general, tracing from scans provides the smallest file size, but many animators prefer drawing straight into Flash or drawing over a reference scan. Because the line of the character is so important to the success of the cartoon, it's important to let animators draw however they prefer. Using Trace Bitmap of scanned pencil or ink drawings will get characters into Flash the quickest, but the file size will be large and the line quality really suffers.

The line width and line quality is extraordinarily important to whether a character comes to life or is mechanical and flat when animated. The way Flash deals with lines has serious ramifications on how characters are created in Flash. As mentioned before, hairlines don't change in size when symbols are resized, while larger line widths do. Using larger line widths is extremely frustrating when resizing symbols because the line weights will not match up from symbol to symbol. Because character symbols are always being resized in Flash, this is a huge problem. It's possible to get around it by making all the lines into paint fills, but hairlines are generally the best choice for Flash animation.

Another type of line to consider is the thick/thin line. Animators love the look of thick/thin lines because these lines impart motion and a sense of life to characters. In Flash, this look normally requires using the Paintbrush tool. Unfortunately, the paintbrush creates lines with huge numbers of vector points, so the file size is large and playback is slow. If the Paintbrush is used, then the lines need to be optimized as much as possible. It's also possible to create this thick/thin line effect by creating parallel lines, pulling them into curves, closing the ends, filling the resulting "line" with a paint fill and deleting the original lines. This is an extremely time-consuming process, however, and should be limited to extremely important graphic elements.

The key to creating character symbols is figuring out the least number of symbols that are necessary to create a character and then give it life through animation (see Figure 6.44). Think about how to cut up a character into the least number of pieces that will allow motion. This usually means creating a new symbol for parts of the body where there are joints, where different parts of the body can turn and twist.

Figure 6.44. The symbols for Godpy's standard perspectives allow him to be fully animated.

The standard symbols include

• a shoe or foot

• an upper and lower leg

• a waist

• a torso

• an upper and lower arm

• a hand

• fingers

• a neck

• a head

• a nose

• pupils

• eyeballs

• eyebrows

• a variety of mouths

Symbols need to be created for these parts of the body for different perspectives of the character, but symbols from one perspective can often be used on another perspective. Although there will have to be lots of other fill in symbols to make a character complete, these are the most common symbols that every character should have.

Decide on a symbol naming convention (see Figure 6.45) and set up folders in the movie library for each character. In this case there are so few characters that it's possible to start symbols with the first letter of the character's name and then add a name, point of view and number for the body part, for example, "g eye front 1" stands for the first example of Godpy's eye viewed from the front. It's common to add a number for various body parts because there may be multiple versions of the body parts created over the course of production.

Figure 6.45. The symbol naming convention helps keep the animation well organized.

Flash normally doesn't let a new symbol have the same name as a symbol that already exists. However, if a symbol is in a folder, then Flash does allow symbols to have the same name.

The length of symbol names does affect the file size of the movie, so it's important to keep them short. The names for this cartoon would normally have been made quite a bit shorter by using abbreviations, but for the sake of clarity longer names have been used. As an example of how to cut up a character and create symbols, let's make Godpy's shoe symbol.

1. Create the shoe by copying and pasting the traced shoe part of Godpy's character onto a new layer called shoe.

2. Create a new movie clip symbol called "g shoe front 1" (see Figure 6.46).

   Figure 6.46. Select the traced shoe to create a new symbol.

   

3. Fill the shoe with the intended color, in this case a general web-safe brown, and change the lines to the proper color and weight, in this case dark gray and hairline.

4. Make the graphics smaller in file size by selecting everything on the layer and select Modify, Optimize Curves (Ctrl+Alt+Shift+C).

5. Shift the slider in the Optimize Curves dialog box close to the left side and select Show Totals Message (see Figure 6.47). Selecting Use Multiple Passes will reduce points over several passes and help maintain the integrity of the graphics. In this case the shoe is so simple that it's unnecessary to use Multiple Passes.

   Figure 6.47. Optimize the finished artwork using the Optimize Curves tool.

   

6. Select OK and optimize. Flash removes points from the lines and shows how many points have been removed. File size can often be decreased by half without much loss in graphic quality by optimizing artwork in this way.

7. If the artwork loses too much quality, then choose Edit, Undo and redo the optimization with the slider moved further toward the left.

8. It's also possible to retain more control over the graphic optimization by choosing the Subselect tool, selecting lines and removing points individually.

Place the new symbol in the Characters/Godpy folder in the library. It's easier to do this as the character is created rather than when all the symbols have been created. This is because it's impossible to scroll up and down in the library when symbols are selected in Flash 5. This makes it impossible to place symbols in folders that aren't near the symbols.

As each symbol is created, it's important to add an "arc" to the end of a symbol if it's not completely enclosed with lines and will overlap with other symbols. As an example, do this in an arm symbol by dragging out the fill color into an arc at each end. When symbols are rotated to create movement, these arcs will create better "joins" between the symbols.

It would be possible to minimize the number of symbols in a movie by sharing common body parts between characters. As an example, one round circle could be used as the pupil for every character. In general, this type of sharing is not the recommended way to create symbols for characters because it may be necessary to edit a character's features after symbols have already been created. If symbols are shared across characters, then this will be a difficult change to make because it will require finding and changing every instance of the shared symbol.

It's also necessary to create a series of patches that can be used to place over symbols that don't entirely join otherwise. One of the ways to do this is to create a few symbols of different sizes that are filled black shapes. Common shapes are a circle, a square, and a lozenge shape (see Figure 6.48). Remember to delete the lines around the shapes because they're unnecessary. These patches can be used for all the characters' bodies by placing the patches where needed and then changing the symbol's tint.

Figure 6.48. Create patches to fill in holes between the character symbols.

In feature film animation, every mouth would be drawn separately, but in Flash animation, and especially in animation for devices, it's enough to have the main vowel and consonant shapes to create realistic lip-synching. Because device screens are so small, the mouths won't read as any specific pronunciation when viewed from a distance, but are crucial when viewed in close up.

Character animation in Flash uses a standard minimum set of mouth symbols the consonants are l/th, f/v, m/p/b, and one for the rest of the consonants, while the minimum mouth symbols for vowels are a/i, e/i, and o (without tongues), and a/e/i, and o/u (with tongues). There's also a standard, nonspeaking mouth plus mouths expressing emotions such as happiness and sadness. Create all the mouths at a similar size so they're easy to replace when lip-synching (see Figure 6.49).

Figure 6.49. Godpy's various mouths are created at the same size to aid in lip-synching.

The characters in "The Prague Years" are created in such a simple manner that they almost don't need all the standard mouth symbols. In Podie's case, a simple circle stretched, skewed, and rotated in various combinations can pass for almost all the mouths. Even though this is the case, all the mouth symbols are still created at the start of the project in case they're ever required.

Creating the Background

At some point in the development process, backgrounds based on the scanned storyboard must be created in Flash. This can be done at this stage of the production or it can wait until after the characters have been laid out on the storyboard. Backgrounds should definitely be completed prior to the start of animation. If they aren't completed, then it's easy to develop an animation that gets lost in the backgrounds and ruins the effect of the cartoon.

The backgrounds in "The Prague Years" are kept simple on purpose because the cartoon is aimed at the handheld market. If the backgrounds were complex line drawings of the amazingly detailed architecture in Prague, then the animation playback would drop below the intended frame rate. If detailed backgrounds are a definite stylistic requirement, then it's probably better to bring those backgrounds into Flash as raster graphics.

The backgrounds for "The Prague Years" are based on a cut-out paper graphic style and are extremely easy to produce. In some instances, the backgrounds use gradient colors to add some depth to scenes, but most are purely flat colors. It's important to minimize the amount of gradients on screen at any one time because it will cause the frame rate to drop.

One trick to creating smaller and more efficient files is to re-use one symbol of flat color multiple times. For example, a solid blue sky behind a city skyline and the gray road at the base of the city can be the same symbol. Create a movie clip symbol with a solid black rectangle and place this symbol on a bottom background layer. Tint the symbol to a blue color for the sky. Then copy and paste the same symbol to the forefront of the city and tint it gray. Creative re-use is the key to small Flash movies.

After placing the storyboard scans, quickly trace the background with the Line tool. Create symbols for various background elements if possible. In "The Prague Years," there are many buildings that are reused more than once. A set of these buildings in different colors becomes standard building blocks to create any outdoor scene in the cartoon.

Adding the Characters to the Movie

With the backgrounds and the dialogue scratch track in place, it's finally time to add the characters into the cartoon. Open the character movie and begin copying and pasting characters onto the storyboard (see Figures 6.50 and 6.51). Try to put parts of the character's body that move together onto the same layer. This will help in editing individual keyframes in the animation in the future. For example, put the hand and finger symbols on a separate layer from the other symbols. They'll almost always move together, while other parts of the body, such as the head, might not be moving. It's imperative that the mouth symbols are placed on a separate layer. Having the mouth symbols on a separate layer makes lip-synching and editing a much easier process.

Figure 6.50. The scanned storyboard before the character symbols are added on layers above it.

Figure 6.51. The storyboard after Godpy's character symbols are added to it.

When placing symbols over a storyboard to create characters, it's often helpful to use the layer outline color feature in Flash. Turn this on by clicking on the color swatch at the right of the layer or double clicking the layer symbol and selecting Outline Color (see Figure 6.52). The outline of the black box above all the layers will turn all layers into outlines. This is incredibly useful in animation because it becomes easy to see the storyboard layout underneath all the layers.

Figure 6.52. Select the Outline Color to show the lines that make up the symbols in the character.

There will undoubtedly be missing pieces, shapes, and objects after the characters have been laid onto the storyboard. New symbols will definitely need to be created, but be creative and use as many current symbols as possible. It's amazing that a character's leg symbol can easily become part of another character's hat, but it does work most of the time.

This storyboard with dialogue, some animation, and some effects added is known as an animatic. It's a useful stage for animators and the cartoon director to go back and play with the sense of timing in the cartoon. Most production studios and agencies put a lot of effort into reviewing the animatic carefully and making significant changes at this stage.

Now that the characters are placed, objects are created, and backgrounds drawn, it's time to animate. Re-using symbols to create animation is what makes Flash such a powerful tool for creating animation for the web and devices with small file sizes, but high production values. Symbols can be skewed, stretched, rotated, and flipped to create as much life in each character's motions as possible. Symbols can be made semitransparent to create the effect of blurs to add a sense of movement to quick motions (see Figure 6.53). Avoid using alpha effects too much because they can slow down the playback of the animation.

Figure 6.53. Partially transparent symbols can be used to create blurs to add to the sense of motion.

One of the ways to add real weight and proportion to animation in Flash is to give proper perspective to characters. One of the standard ways to add depth to characters is to properly foreshorten parts of the body. When the character Godpy picks up a glass in front of him, his arm needs to get shorter and broaden out slightly toward the viewer. In the same way, when

Godpy reaches away from himself, his arm needs to get thinner as it goes back in the distance. Perspective through foreshortening can be achieved in Flash by skewing symbols. Although this isn't as good as drawing each individual perspective, it will usually work fairly well and helps keep file size to a minimum.

One of the standard movements that will have to be created for most characters is a walk cycle. The basic walk cycle contains two steps. The two steps can usually be accomplished in 10 12 frames (see Figure 6.54). The quick way to create a complete walk cycle is to develop one step (see Figure 6.55) and then, after copying and pasting the sequence of frames, switch the opposing hands, arms, legs, and feet from back to front (see Figure 6.56). If the cycle starts with the left arm in back, then bring it to the front of the body and make it the right arm. Once the switch has been made, tweak the symbols a little so that the walk isn't too mechanical from step to step.

Figure 6.54. Walk cycles can usually be completed in 10 12 frames.

Figure 6.55. The first part of the step in a walk cycle can be copied.

Figure 6.56. The copy of the step can be modified to show the next step.

It's possible to change the Edit points of a symbol so that it rotates from that point rather than from the regular symbol center point (see Figure 6.57). This can be useful because most parts of a character have a natural rotation point. A human forearm moves from the elbow, while the upper leg moves from the hip. Changing the edit point like this helps because the symbols move with a more natural arc (see Figure 6.58), but it can cause problems when resizing symbols because the scaling is based on the new edit point.

Figure 6.57. Select a symbol, click on the Free Transform tool and choose the edit registration point.

Figure 6.58. Move the edit registration point to the natural joint position to aid in creating motion with arcs and rotation.

Turn the completed walk cycle into a movie clip. This allows the character's movement to be reused in many different parts of the cartoon. Analyze the characters for other standard movements that can be turned into movie clip cycles, such as running, jumping, and in the case of "The Prague Years," drinking beer at the local pub.

Adding Dialog

After the broad character movement in the cartoon has been animated, it's time to synchronize mouths to the dialogue. This is a fairly automatic process in Flash, so it's often best to keep it for the end of the animation process.

1. Be sure all the dialogue audio tracks are set to stream sound or it will be impossible to figure out the lip sync.

2. It's often easier to understand what's happening frame to frame by making the frames use Preview mode. This shows the mouth symbol that's in each frame (see Figure 6.59).

   Figure 6.59. Select Large frames and Preview to see the mouth symbol that occupies each frame.

   

3. Scrub across the dialogue soundtrack by selecting the playback head and moving across the timeline.

4. Determine the mouth symbol that is needed in each frame, in this case the standard consonant for D.

5. Set a keyframe for this new mouth symbol.

6. Select the current mouth symbol in the animation (see Figure 6.60).

   Figure 6.60. Select the mouth symbol to replace it.

   

7. On the Property Inspector, choose Swap Symbol (see Figure 6.61).

   Figure 6.61. Replace the mouth symbol in the Swap Symbol dialogue box.

   

8. Select the consonants mouth symbol and select OK.

9. The correct mouth symbol is now in place. Make sure it's the right size (see Figure 6.62) and then move on to the next position where you will need to make a keyframe.

   Figure 6.62. Review the placement of the new mouth symbol.

   

After all the mouths have been synched, play the animation back and review the synching carefully. There will undoubtedly be rough patches in the synching that require mouths to be resized, rotated, or skewed slightly.

Programmatic lip-synching is theoretically possible in Flash, but doesn't work in reality. It's possible to type in a sentence, analyze it with ActionScript, and match mouth symbols to the dialogue in Flash, but it's too processor intensive on regular computers so it doesn't stay in synch with the audio.

Adding Details

With the mouths synched, it's now time to return to the animation and add subtle details. Eyebrow movement, head shakes, and hand gestures can be timed to the dialogue more closely to add an emotion and a depth of feeling to the characters. There's nothing more useful than a raised eyebrow to drive home the point of a sarcastic comment; without it the line can easily fall flat.

Finalize the animation and move on to adding the final musical score and any final sound effects. Be sure to balance the audio levels properly between dialogue, music, and effects. If levels aren't balanced properly, then the sound becomes muddy and it can be impossible to hear important lines of dialogue.

Balancing audio can be done inside of Flash (see Figure 6.63), but it's preferable to do it outside of Flash in a dedicated audio editing program prior to importing the sound files into Flash. If it's impossible to use an outside program, then decide on a standard level for the dialogue and change the levels of the music or sound effects accordingly.

Figure 6.63. Balance audio in Flash using the Edit Envelope.

Optimizing the Movie File

Although optimization has been a key throughout the animation process described in this chapter, it's crucial to make a final pass over the cartoon to see if anything can get smaller.

The most important tools a designer or animator has in understanding what constitutes the file size in a movie are the Size Report and Bandwidth Profiler.

The Size Report shows the movie's file size in a frame-by-frame display (see Figure 6.64). It's useful to export the movie, rename the Size Report, optimize further, and then export the movie again. This gives size reports that can be compared over time to understand how the movie's file size is changing.

Figure 6.64. The Size Report shows a frame-by-frame report of the movie's file size.

Besides the frame-by-frame report, the file size of each symbol, in both shape and text bytes, is shown. Review symbol file sizes for large symbols and try to optimize these symbols.

After the symbols, each event sound is shown, with both the original size and compressed byte size displayed. Review the compression on different sounds to see if they can be lowered. Remember that most sound effects can be exported at an extremely low quality without too much loss in the overall quality of the cartoon. This is an easy way to reduce the file size of the movie.

Streaming sounds don't appear as separate items in the Size Report because they are broken into frame-by-frame packets of information. To review the file size associated with stream sounds, place all the streamed audio files into a separate movie and export as event sounds. It's sometimes possible to find large dialogue audio files that can be further compressed.

Also be sure at this time that audio files are the smallest possible files and that unused sound at the start and end of audio files has been clipped. This is best done in an external audio editing tool.

Imported raster images are shown, with the compressed size, the original size, and the quality setting displayed. Review the quality settings for graphics to see if lower quality settings would be possible to use. Also be sure that the images have been brought in at lowest possible cropped size. Sometimes images are brought into Flash and then cropped inside of Flash. This adds to the file size and should never be done. It's always better to do image editing outside of Flash and bring a graphic with the proper dimensions and resolution into Flash.

Each font family and the characters included with that font family in the movie also are shown. If there is dynamic text in the movie, be sure that only one font family is being used and that only the necessary characters are included. If the only dynamic text is numbers, then the entire font family doesn't need to be included.

The Bandwidth Profiler visually shows where the file size is located in a movie and also shows how a movie will download at various connection speeds (see Figure 6.65). Using the View/Show Streaming option, the animator can see what will happen with the cartoon at any connection speed. If the cartoon won't load on a 56K connection for 10 minutes, then the animator will sit and wait for 10 minutes by using Show Streaming. This is an important test to make at the end of the production cycle and also is useful to make throughout the process.

Figure 6.65. The Bandwidth Profiler shows how a movie will download over a variety of connections.

After the file size has been reduced as much as possible, export the cartoon and an HTML document based on the Pocket PC template. The cartoon is now ready for placement on the web for viewers to download onto a synched device or to view online.

Exporting the Movie

Now that the movie is completed and exported for the Pocket PC, it's possible to export it for other devices. There are two main ways to change the display size of the movie for the playback device in the HTML document or inside another Flash movie. The key to resizing for display is to be sure that the aspect ratio never changes or else the cartoon will look squashed or, alternatively, stretched.

If the cartoon is being loaded into another Macromedia Flash movie, then it's easiest if this loader movie contains a loadMovie command in a symbol. Because the cartoon is loaded into a symbol it's easier to target and resize than if it's loaded into a layer. Resizing the cartoon this way gives the most possible control over the sizing and placement of the cartoon for playback because display sizes can easily be tested dynamically and used to change the size of the cartoon. In contrast, it's also possible to resize the cartoon in the HTML page using the HEIGHT and WIDTH properties, but there is less control over placement and dynamic resizing.

In either case, it's crucial to make sure that the picture frame covering the work area of the cartoon matches the background color of the HTML page. This is an issue because Flash often displays hexadecimal colors at slightly different values than the browsers. The color red, as used in Flash, might display differently than the exact same color used in the HTML document. Because this is a problem, it's normally best to use black for the parts of the Flash movie, that is, the picture frame over the work area, that will touch against colors in the HTML document.