Hack 72 Substitute Bitmaps for Vectors

Vectors download quickly but can take a long time to render. Use bitmaps instead of vectors to improve playback speed.

Vector images are drawn using mathematical formulas that define the shapes and fills. This means that vectors provide crisp and scalable graphics in a compact download size. However, rendering an antialiased vector shape can take more processing power than rendering a bitmap (pixel-based) image. A bitmap is simply a fixed block of data. Although this data is usually much larger than typical vector images, once it is downloaded, it can be drawn quickly. Regardless, the download filesize is reduced even further via compression when creating the SWF file. (SWF files automatically use z-lib compression, a lossless compression algorithm similar to that used by the PNG graphic format.)

Bitmaps offer a good trade-off in performance versus download size in several cases:

• When the vector image contains many points, the vector version can be larger that the equivalent bitmap. Vectors are usually better for line art whereas bitmaps are better for photographs and textures, neither of which can be easily represented using vectors.

• If you don't require scaling or antialiasing, bitmaps generally render faster.

• If running from a CD-ROM, for which download speed is not an issue, consider using bitmaps.

If you have static, vector-heavy backgrounds, using a background bitmap will usually improve rendering times. If you have complex vector drawings that use many grouped graphics, you may also see benefits by using bitmaps instead.

Example One: Bitmaps Move Faster than Do Vectors

In this example (available as tileexample_vector.fla on this book's web site), several movie clips move across the screen simulating a distance parallax effect (i.e., where depth in the z-axis is implied by objects getting both slower in movement and darker in color as the distance from the viewer increases). The movie clips used in the effect consist of faux 3D tile graphics created using only vectors, as shown in Figure 9-9.

Figure 9-9. A tile animation created with vector images

A frame rate readout is displayed at the top left of the Stage, and you can use this to see how fast Flash renders the effect. When testing this vector-based version (test it in the browser by pressing F12 for the most representative results), you will see the Flash Player slow down significantly. Although the movie's target frame rate is set to 70 fps, a reasonably fast computer renders the movie at a rate of around 20-35 fps.

The solution in this case is to replace each vector image with a similar one that uses a bitmap graphic instead. The movie clips seen in the file tileexample_bitmap.fla (also available on this book's web site) appear the same as the vector version, but they:

• Are created using bitmaps tiles rather than vector ones

• Have the "darkening with distance" color effect already applied to them via a bitmap-editing application, which frees Flash from having to apply the effect during runtime

The improved version, using bitmaps, is faster than the original. The bitmap version will operate in the region of 40-70 fps when tested under the same conditions as the vector-based version. Note that the bitmap version also has the same filesize. Furthermore, because all elements are bitmaps using straight edges (and Flash doesn't antialias moving bitmaps unless you set the highest quality setting [Hack #67] ), using low or medium quality would make the rendering process even faster. (And remember that changes in quality are difficult to see on a moving object, so even if the quality goes down, the user may find this difficult to spot!)

Example Two: Avoid Antialias Calculations

Often the most processor-intensive part of rendering vectors is the associated antialiasing. Converting the vectors to prealiased bitmaps can significantly increase performance.

Figure 9-10 shows a simple symbol on a background, with scrollable text and a few more copies of the same symbol above it. The file is available as textexample_vector.fla on this book's web site.

Figure 9-10. Symbols and a scroll text field

Moving the text via the scroll buttons results in significant drops in performance. Using a bitmap as the background would reduce the calculations Flash has to perform. Rendering a static bitmap image is faster than making Flash rerender the vector-based version each time the text scrolls.

Replacing the vector background with a bitmap (as seen in file textexample_bitmaps.fla) produces a speed gain of approximately 30%.

Final Thoughts

A bitmap image may be larger in filesize, but it has advantages. The visual information within a bitmap doesn't have to be calculated at runtime, and you can apply additional effects to a bitmap at authoring time using an application such as Photoshop, saving the need to calculate the same effect at runtime.

A vector-based image is usually (but not always) smaller in filesize. Regardless, drawing vector images can require the Flash Player to perform a large number of real-time calculations.

Although the Flash rendering engine works best with vectors, and bitmap animation is seen as the preserve of Macromedia Director, this is not always the case in practice. In a significant number of situations, bitmaps lead to a performance increase without a significant filesize increase.

If you're making a CD-ROM project and filesize isn't important (download time isn't a limitation), you can use bitmaps, unless you need to scale the content.

—Zeh Fernando