Animation best practices

When creating animations in Flash Lite for playback on mobile devices, there are several best practices to keep in mind. These may seem almost archaic when compared to the power of the desktop Flash Player, but you need to keep in mind the limited power of the mobile device your animation is playing on. So much of the success of mobile Flash applications relies on the user experience (even more than usual, because a bad user experience can kill any application), so you need to be very strict and make sure there's a good reason for every single thing you put into the Flash project that will either add file size or consume processing power.

Incorporating a bitmap element

Gradients created in Flash can be extremely processor-intensive because they are complex vectors. Animation is also processor-intensive and, if combined with a vector gradient, can take a lot of processing power. If you are going to use vectors and animation together, it is a best practice to create the gradients in an external tool and then import that bitmap into Flash. You can use the dithering features of a product such as Adobe Photoshop to avoid banding.

Close-up is better

For animations, focus on close-ups while avoiding panoramic views and pans. A lot of detail will be lost on the small screen. As great as your animation may look on your desktop computer, if users cannot see it on the mobile phone, they will not appreciate it.

Simpler is better

The same principle holds true for the artwork itself—the simpler the better. Stylized, "cartoonish" characters will come across much better than realistic looking ones; the details will be lost in translation. The more you try to squeeze onto the small screen, the more you'll lose. Instead, focus on what is really important and leave out space fillers.

Don't have too many things going on at the same time. Avoid performance killers such as alpha transparencies and gradients. They create a better-looking animation, but they also affect performance. Besides, on a small phone display, much of the effect is lost anyway; it may even look worse. Simpler graphics often look better and perform better on small screens.

Hand-tune your animations

Hand-tuning refers to the process of manually adjusting your animation keyframe by keyframe. A lot of motion in real life doesn't happen in even increments, nor does it follow an easing curve. Even if it does, it often is not perceived that way. You need to trick the human eye, so the animation appears where the eye expects it to be, not where it should be placed according to some mathematically correct calculations.

Believe it or not, we often don't see what's really there. Filmmakers, and in particular cartoon artists, have exploited this phenomenon for over a century. When an object doesn't move fast enough to fool your sensory systems into believing that you are seeing continuous motion, you need to exploit the phenomenon commonly known as persistence of vision and present your eyes with what they expect to be there.

In the case of motion graphics, this translates into the following: Start with tweens as you usually would, then hand-tune your animation, frame by frame, to get the result you want the user to experience. This is a lot of work, but it's well worth it to conserve every bit of processing power on the handset.

Avoid overlapping tweens

When Flash draws a region, it does so by defining a rectangular bounding box around the area. You can optimize this drawing by getting that rectangle as small as possible. This means that, if you can, you should avoid overlapping tweens; otherwise Flash will see the merged area as a single rectangle, resulting in a larger total region. Use the Flash 8 show redraw region feature within the player to optimize your tweens.

Start your project with a frame rate of 10 to 15 frames per second (fps)

Apart from making it easier for the Flash Lite player to keep up, a lower frame rate also leads to a smaller file size. Remember, each keyframe of a symbol adds 12 bytes to a SWF file. This may not sound like much but it sure can add up, especially in the case of animations.

Place your artwork in symbols

Optimize the symbols by selecting Modify > Shape > Optimize or, by hand, with the subselection tool. Remove unnecessary points, as well as any hidden shapes and symbols. This can be tedious work but it'll make your content look and perform better. It will also reduce the SWF file size.

Avoid pans and alpha fades

Short (five-frame) fades over a static background may work just fine. If possible, work only with shapes and remove lines, including outlines around shapes. Lines are more complex to render for Flash, and thus slower. Create outlines using shapes instead, if needed.

Page 2 of 5

Previous Page

Next Page