PLANNING, ORGANIZING, AND OPTIMIZATION

To understand the best approaches to creating animation and motion graphics for handhelds and other devices, it's important to realize the current limitations of devices, as well as how these limitations will affect current content and new content.

Character Animation and Motion Graphics for Devices

Animation in Flash falls into two distinct categories motion graphics and character animation. Each type of animation relies on techniques that can be problematic on many devices and platforms.

Great motion graphics design often contains intense motion tweening applied to fonts and photographic elements, while also using a mixture of transparency and color effects (see Figure 6.3). Character animation relies on nuanced acting to convey story and emotion. It's created using keyframed drawings placed in front of rich, stylized backgrounds. When combined with music, dialogue, and sound effects, both types of animation are brought to life.

Figure 6.3. Using alphas and motion tweens with large photos can cause problems during playback on devices.

Unfortunately, all the mentioned animation elements cause problems because of the limitations of current embedded platforms. Devices have variable playback performance, file size limitations, and hardware capabilities. In many cases, processor speeds are low, so animation frame rates drop on playback, graphic refresh is slow, file sizes need to be small because storage is limited, MP3 sound isn't always supported, and display sizes are so different that one movie can't fit all of them.

Currently the limitations of these devices and displaying animation and motion graphics are fairly severe so it's important to define a lowest common denominator and adhere to it during the production process. The main specifications to define are

• The target processor speed

• Storage capacity

• Sound playback capability

• Screen size

• Player version implementation (Flash 3, 4, or 5)

• The connectivity of the device

Once these aspects are taken into account, it's amazing to be able to create cartoons and motion graphics that people can watch on any device capable of displaying Flash content.

Repurposing Content

Many animators and companies already have Flash animation or motion graphics developed for the web. This material can be repurposed for alternative devices or the same content can be modified with device limitations in mind. Repurposing or modifying content is the quickest way to get content on devices, but must be done carefully to ensure proper playback.

The key points to consider whether repurposed content will look good on devices are

• Is the frame rate too high to play well on devices?

• Are there lots of complex vector lines in the movie? If yes, will the lines overwhelm the visuals when played back at a smaller size or will they slow playback on devices?

• Will the graphics look okay when played back on small screen sizes? Is there too much detail that will be lost on smaller screens to make the content unintelligible?

• Is the file size too large to fit on devices' smaller hard drives or memory cards (see Figure 6.4)?

  Figure 6.4. This digital photo album of Alaska would not be a good project to repurpose because it contains 18M worth of photos, much too large a file size for the average handheld user.

  

• Does the content rely on long shots, close ups, or both? If the screen for playback is small, will viewers understand what is happening?

• What player version does the movie require and will the target device support it?

• Does the content require a persistent connection from a device? If so, do target devices have the capability to have a persistent connection?

• If it does require a persistent connection and the device doesn't realistically support this, can the content be changed to play locally?

After questions like these have been answered, it's possible to decide whether it's worth the time to repurpose content from the web to devices. The simplest possible way to repurpose content is to output it in a compatible version of Flash, change the movie dimensions in the HTML page, and play the files on a device. Although this works at times, it's often necessary to open the file, further optimize symbols, and simplify animation so that files play back at the proper frame rate.

Animation and Motion Graphics Styles that Work on Devices

Due to the variety of device capabilities, the best styles of animation and motion graphics for devices are ones that use strong, simple elements without too much complex movement or applied color/transparency effects.

Animation with simple characters and backgrounds, animated comic books, and animation relying on a few characters delivering short, punchy lines work best. The display size of devices really works against creating dramatic atmosphere or developing great depth in emotional feelings. It's difficult to get drawn completely into a story that's only a couple of inches square when normally it would be seen on a monitor, a television, or a film screen. Screen size does affect what people will enjoy watching.

Animation styles that work extremely well are cut paper animation like South Park or Blue's Clues. Photographs can also work well for stop motion-style animation, but it's easy to end up with large files due to the raster images. Photos also don't scale up or down well, so it's important to bring the photos in at the size they'll normally be shown at in the movie.

Because screens are small, cartoons with lots of close-ups on characters' faces will deliver the story better because the character's emotion will register visually the best (see Figure 6.5). Strong character movement also works better than subtle movement because of the screen size. One way to think about character movement at this size is that if the animation wouldn't be strong and understandable if done in silhouette, then it won't work when lines and color are added.

Figure 6.5. Cartoons with close-ups work extremely well for handhelds that support Flash, such as the Pocket PC.

Character animation styles that don't work nearly as well are ones with complex lifelike motion and ones that contain characters with lots of vector lines and details (see Figure 6.6). Complex lifelike motion requires so many drawings and symbols that it doesn't play back well. In testing a complex character's walk cycle, playback on devices fell to 1 2fps from a set rate of 10fps. Because the character wasn't even walking in front of a background, playback within a cartoon would have been even slower.

Figure 6.6. Complex line drawings won't animate well in Flash.

Although handheld devices that support the Flash player will undoubtedly become more powerful over time, with faster processors, more memory, and better screens, the developer needs to target current playback reality for the target audience. As the target audience device improves, designers will be able to use more complex animation and effects.

Camera moves like zooms, pans, and trucks, as well as editing effects such as cross-fades don't work well on devices due to processor limitations and graphic refresh problems. Frame rates can decline by 50 75% when these kinds of techniques are used in movies. If they absolutely have to be used, then try to ensure that backgrounds and symbols are as simple as possible. As an example, panning with a simple character running in front of a complex city background plays back well below the set frame rate, but the same sequence with the camera's point of view repositioned to show the character running against the sky plays back at the correct frame rate.

In common with character animation, motion graphics styles that rely on strong, powerful movement and images work best on devices. Panoramic effects, subtle motion, small fonts, and minor graphic effects get lost at the reduced screen size of devices (see Figure 6.7). In addition, using lots of transparency effects, full screen motion, large text blocks moving at the same time and lots of color effects will cause the frame rate to decline or cause the movie to drop frames in playback to keep up to the set frame rate. It's also important to keep motion limited to the movie display area because any motion occurring outside the display area will affect the processor and thus the movie playback.

Figure 6.7. Panoramic photos shot at a distance may display too small on handhelds or other devices to effectively convey meaning.

Although more complex styles of animation will play back better as devices improve over time, it's useful to always think about the lowest common denominator in terms of playback and the small screen size to make great animation for devices.

THE REALITIES OF DEVELOPING FOR DEVICES AND PLATFORMS

A variety of issues affect developing animation and motion graphics for handhelds and other devices. The four main areas that developers need to face and that will be discussed in the following section are

• Processor speed

• Sound compression

• File size: connectivity and storage space

• Displays

The Limits of Processor Speed and How It Affects You

A device's processor speed affects the playback of the Flash movie because the processor mainly determines whether the device can keep up with the movie's defined frame rate. The processor has to maintain the graphic refresh rate of the device's screen at a speed equal to the set movie frame rate. If the processor can't do that, then the Flash movie will play back at a lower frame rate or begin dropping frames when sound is set to stream. Slow frame rates ruin the effect of motion graphics and character animation, so it's important to keep in mind what can be done to minimize these problems.

Flash redraws graphics based on a bounding box that surrounds the area on the screen where movement occurs (see Figure 6.8). To decrease the load on the processor, it's possible to develop a storyboard with movement that keeps the area of the screen that has to be redrawn at any one time to a minimum (see Figure 6.9). When this is done, it's possible to create more complex movements and effects because less of the processor is being used to redraw the background and other unnecessary graphics.

Figure 6.8. The bounding box that contains motion can include the whole screen.

Figure 6.9. The bounding box can become much smaller if thought is given to the layout.

Techniques and items that take up too much of your device's processor speed and therefore cause your Flash movie to creep along include the following:

• Pans, zooms, and cross-fades

• The use of alpha and gradient effects

• The complexity and size of the vector shapes animating at any specific time

• The number of symbols animating concurrently

• Shape tweening

• The number of changes (color, size, rotation, and so on) applied to symbols

• The number and complexity of motion tweens

• The use of complex, animated masks

• The use of complex lines, especially the nonstandard lines such as ragged, dashed, and dotted

• The motion of fonts, especially resizing and scrolling large text blocks

• Intense use of ActionScript that controls MCs or creates complex visual effects

• Combining many of these techniques makes things even worse

By minimizing the use of these techniques and items, animators and designers gain greater control over the frame rate playback of movies. Using too many of these techniques will ensure that movies play back poorly on current devices (see Figure 6.10).

Figure 6.10. Alphas, photos, complex fonts, and scrolling large blocks of text slow down Flash movie playback.

Sound Compression

Audio, whether music, dialogue, or sound effects, is crucial to the success of any cartoon or motion graphic because audio brings visuals to life. Without audio, most visuals are stiff and dull.

Adaptive Differential Pulse Code Modulation (ADPCM) compresses sounds by recording only the difference between samples rather than the entire sample. MP3 stands for MPEG (audio layer 3) and compresses sounds in a more sophisticated manner that creates much smaller audio files. MP3 uses perceptual audio coding and psychoacoustic compression to discard all audio information that the human ear can't hear.

The new multimedia-focused devices are configured to provide high-quality sound playback using MP3 audio. Because Flash 4 and above support MP3 it seems automatic to use this type of sound compression. MP3 provides smaller file sizes, greater audio clarity, and higher audio fidelity; but sometimes it makes sense to resist using this audio technique when deploying content to devices, for the same reason certain graphic techniques should be avoided.

The problem is that MP3 sound compression dedicates a lot of a device's processor to decom-press and play the audio. Because MP3 audio uses so much of the processor, it can negatively affect the playback of the animation. Frames are either dropped to keep up with the sound or the playback frame rate declines dramatically. As a result, developers must reconsider using ADPCM, Flash's other audio compression format, because it is much less processor intensive.

It's important to test animations using both formats on different devices to see if MP3 compression ruins the animation. If it does, then it's possible to deliver movies that use ADPCM audio (see Figure 6.11). Unfortunately these files will be much larger than the same files with MP3 sound and the audio won't sound as clear, but the animation will play properly.

Figure 6.11. Some sounds can be compressed using ADPCM to improve animation playback by lessening the audio's use of the processor.

Using a mixture of both formats is often the best solution in these cases. ADPCM can be used where the audio affects the animation and MP3 can be used where it doesn't. Animations can be storyboarded with this sound problem in mind from the start of the project so that bad sound doesn't ruin the movie.

Another sound issue to keep in mind is that the speaker quality on most devices is poor. This will undoubtedly change in the future, but getting the best possible audio quality requires a viewer to use headphones. Without headphones, a lot of the audio on devices sounds as if it's being played through old car speakers from a static-filled AM radio that doesn't get any stations very clearly. Because this is the case, be sure audio levels are set extremely well or else the dialogue will get lost in background music and sound effects.

File Sizes: Connectivity and Storage Space

Devices and handhelds have file size limitation issues because both storage space and connection speeds affect what people can download and view.

Many connection options available for handhelds and devices are fairly slow. Speeds for wireless connections can be slower than 14.4kbps. Fast connections are still fairly rare so it's important to keep movies as small as possible. A 1M cartoon could take 10 minutes or more to download over a slow connection. It's difficult to imagine people waiting that long to download an animation that they may or may not enjoy. Although future wireless network technology may alleviate this problem, that appears to be in the distant future.

It's almost as if handhelds and embedded devices return developers to the beginning of the web when connection speeds averaged under 14.4. Because this is the problem that Flash was created to solve, it's the perfect tool for developing content for devices.

Many devices are not connected directly to the web and instead get files by synching with a personal computer. Because users are downloading files over a network or modem connection, storage space is what limits file size the most on these devices. The problem is that most devices don't have a lot of storage space.

Many handhelds only have 8 64 megabytes of built-in storage space, so there isn't too much room for big files. A lot of handheld owners own expansion cards that allow them to carry more files with them, but this is by no means universal. Because many viewers only have a few megabytes of storage space for noncrucial files, they might not want to download and store large animations. This immediately limits the audience, so it's important to take every opportunity to decrease the file size.

If vector graphics are used for the artwork, then it's usually dialogue and music that have the largest impact on the file size of an animation. Because sound is so crucial for the success of any animation, it's important not to cut back too much in this area, but a few things can be done to reduce the file size of the movie. If at all possible use small looping sound clips under the animation and insert shorter musical effects for specific emphasis.

Given all the uncertainties of built-in memory sizes, expansion cards, and connection speeds, it's best to keep animation files around 500 kilobytes for cartoons and less than 100 kilobytes for motion graphics projects. Each project will be different, but these are reasonable rules of thumb. If these file sizes are going to be exceeded, then it's important to consider whether a viewer is going to be willing to wait for the file to download.

Developing for Different Displays

Devices have different aspect ratios, screen sizes, display resolutions, and color display settings. These differences provide one of the greatest challenges in developing for multiple devices. Movies have to be created with all the possible future platforms for deployment firmly kept in mind.

Because the goal is to develop content that is "create once, tinker with a bit, and play everywhere," it's imperative to decide at the earliest possible stage of the production process what the movie size should be and how that will affect its display on different devices. Important animation and titles have to be kept within the smallest display size-safe area. To accomplish this, place a simple rectangular frame template that defines the smallest display size on a layer over the movie work area in the Flash authoring environment (see Figure 6.12). Referring to this template during production will keep crucial animation within the safe area.

Figure 6.12. Adding a rectangular frame template inside Flash will help define where the animation safe area is for the smallest display size.

For more information about device screen size, see Appendix B, " Flash Device Matrix."

The aspect ratio of a screen defines the rectangularity of the screen as it compares the horizontal image dimension to the vertical dimension. The traditional aspect ratio is rectangular, for example television screens are normally 4:3 (or more commonly shown 1.33:1).

The aspect ratio and display size of devices vary widely. While the standard aspect ratio for computers and televisions is around 4:3 in a landscape mode, many devices have an almost square or even slightly vertical display size in a portrait mode. The actual display sizes of devices vary from the television displays of set top boxes at 640x480 (1.33:1) to Pocket PCs at 240x260 (1:1.083). This means that movies need to be resized and possibly rotated.

It's possible to create movies at a horizontal aspect ratio and then play them back on vertical displays like those of the Pocket PC devices. The trick is to create a Flash movie in a horizontal aspect ratio and then load it into a movie with a vertical aspect ratio. The loaded movie is then rotated 90 degrees to display in the handheld screen area. This technique requires the viewer to turn the device, but this shouldn't be a problem for viewers with handhelds and it's certainly much easier than reformatting a horizontal movie into a vertical aspect ratio.

Vectors are useful in creating content for multiple display sizes because they usually look good when resized. To make vectors that resize well, it's best to create movies at the smallest targeted display size and then increase the final size movie in the HTML code or by loading it inside another Flash movie. This is because vectors scale better going up then going down. Sometimes the anti-aliased edges on vector lines will overlap when scaled down. If a movie is created at the smallest display size and then scaled up to larger display sizes, it won't have these problems.

Photos aren't nearly as good for this "create once, play everywhere" philosophy because they don't scale up or down very well. If photographs are used, then it's best to create the movie at the largest intended display size and then scale downward. This decreases pixelation in the photographs, but photos that are shown at anything other than their exact size often look bad in Flash. Creating at the largest possible size also increases file size significantly. When using photos, it's often better to create content for specific device display sizes.

Besides sizes and aspect ratios, displays also provide a wide range of color and resolution options. Television displays have very low resolution and text needs to be large to be clear. Thin lines often jiggle nauseatingly during playback on televisions. This is a problem because hairlines work best in Flash for animation. Handhelds have higher resolution and are sharper for reading text, but small display sizes means that text needs to be fairly large to be readable for these devices.

To find out more about developing Flash applications for televised display, see Chapter 11, " Flash Content for Television." Additionally, you can learn about using fonts on devices by reading Chapter 4, " Typography in Flash for Devices."

Colors on displays can range from 256 colors to thousands of colors. The web-safe color palette, which is the standard palette when opening the Flash authoring tool, is generally acceptable for use, but it's incredibly limiting to creative expression in animation. Television displays provide a separate challenge because colors such as reds blow out and bleed over lines. However, the TV-safe color palette can be used for animation that will be viewed on television displays to avoid these problems.