Tips for animators and designers

Here are some useful do's and don'ts that will make your work easier.

Avoid using complex graphics

Refrain from using complex graphic effects—for example, alpha values, motion tweened images, and gradient effects. They can create significant performance problems on devices with slow speeds. Alpha values, gradient effects, and complex vector images take up more space too.

Avoid using simultaneous tweens

Avoid tweening too many objects simultaneously (see Figure 4). This can affect the performance of your SWF file, even if they are simple and small tweens.

Figure 4. Rabbit hunting game with too many simultaneous tweens

In my initial game design, a number of rabbit characters with different motions appeared at the same time when the game ended. This affected game performance detrimentally, so I made an adjustment by minimizing the number of rabbits' motions in the game.

Use vector and bitmap images wisely

People tend to choose vectors over bitmaps in Flash because vectors are smaller. Because you have to consider performance in Flash Lite as well, you should use either image type wisely.

Table 2 shows actual playback frame rates for an animation using both vectors and bitmaps on the iRiver U10 compared to a desktop computer. The desktop PC plays back both types at the intended 20 frames per second (fps), whereas the U10 plays back the bitmap images at a faster frame rate because bitmaps are less processor-intensive.

Table 2. Speed comparison between a vector image and bitmap image

	Chicken image (vector) SWF file size : 6K 20 fps	Chicken image (bitmap) SWF file size : 7K 20 fps
PC
U10

I tested the speed of the motion where a chicken flaps its wings. According to the results, the SWF file size of a bitmap image is slightly larger than that of a vector image. On desktops, performance between the vector and bitmap seemed to be the same, while on the U10 the motion tweened vector image was significantly slower.

Regarding a big or dynamic image that includes a rotational effect, a bitmap image is larger than a vector image, and may result in a broken image. In terms of performance, however, I did not notice any difference (see Table 3).

Table 3. Speed comparison between a vector image and bitmap image

	Arm image (vector) SWF file size : 16K 20 fps	Arm image (bitmap) SWF file size : 20K 20 fps
U10

Therefore, there are few differences depending on the production or environment. I recommend using the following guidelines:

• For animated or big images, use vectors
• For complex images or icons, use bitmaps
• Optimize your vector images by selecting Modify > Shape > Optimize (see Figures 6–8)

Figure 6. Selecting Modify > Shape > Optimize

Figure 7. Specifying the scope of smoothing

Figure 8. Optimized result

Use integers for image coordinates

Avoid using decimals in your images' coordinates (see Figure 9).

Figure 9. Optimizing coordinates

Page 3 of 4

Previous Page

Next Page