Table of Contents |
Hack 67 Hide Low-Quality Settings
Increase performance and maintain visual appearance by hiding the effects of a reduction in rendering quality. There is an inherent trade-off between rendering quality and performance, and Flash offers several rendering modes. Understanding the issues at hand can help you to both make the appropriate choice and work around some of the limitations of the built-in rendering options. The Flash rendering engine optionally uses antialiasing to smooth out vector edges and increase apparent quality by hiding aliasing errors (a.k.a. "staircasing" or "jaggies"). Antialiasing tends to hide sharp edges between contrasting areas by blending in pixels of intervening shades. In Figure 9-4, the curve on the left exhibits aliasing errors that show up as jagged edges caused by our pixels being too large to faithfully reproduce the curve. The one on the right is antialiased and looks smoother. Figure 9-4. An aliased curve (left) and an antialiased curve (right)Note that antialiasing doesn't fix aliasing errors but rather hides them from the human eye by using similar colors to smooth the transition between adjacent, contrasting colors. Antialiasing can be processor-intensive, and you may prefer to turn it off to get the benefit of increased performance. You can turn antialiasing off globally (i.e., for all content seen in the Flash Player) with the following line: _quality = "LOW"; You can also set the rendering quality to Low under FilePublish SettingsHTMLQuality. Note that the MovieClip._quality, Button._quality, and TextField._quality properties are merely synonyms for the global _quality property and therefore affect antialiasing globally. Quality cannot be set on a per-instance basis. In addition to "LOW", you can set the _quality property to "AUTOLOW", "MEDIUM", "AUTOHIGH", "HIGH", or "BEST". In the higher quality settings, text, bitmaps, and vectors are antialiased. At the lowest quality setting, none are antialiased. The exact details of each level of quality can be found in the Help panel (HelpHelp or F1) if you search for "_quality." In practical terms, use the highest quality that your content and target audience's machines allow. This generally means using "BEST" for largely static sites, "HIGH" or "MEDIUM" for most general content, and "LOW" where speed is a priority, such as in games. You can also make Flash selectively turn antialiasing off via the Auto High and Auto Low quality settings. At those settings, the Flash Player automatically switches between antialiased and aliased rendering depending on the playback performance of the machine on which it is running. The Auto High setting starts with antialiasing on and turns it off if overall performance suffers (i.e., the frame rate slows down unacceptably), whereas the Auto Low setting starts with antialiasing off but turns it on if the target frame rate is achieved. The Auto quality settings are not often used because the change from high to low quality is usually very obvious and disconcerting to the user. For best performance, the trick is to permanently set the quality to Low and then try to hide, as far as possible, the resulting low-quality rendering. Use Noncontrasting ColorsGiven that antialiasing is needed most when contrasting colors are adjacent to each other, one solution is to use noncontrasting colors to begin with. In Figure 9-5, the aliased line (on the left) should look less blocky than in Figure 9-4 because the black curve is similar in color to the gray background (the difference is more apparent on screen than in print). Of course, by definition, reducing the contrast makes the curve harder to distinguish from the background, so don't make the background too similar in color. If necessary, you can improve contrast by making the line thicker or darker. Figure 9-5. Aliased (left) and antialiased (right) curves on a low-contrast backgroundWhen attempting to improve apparent quality by using noncontrasting colors, you should avoid some color combinations:
Use Horizontal/Vertical and Fast-Moving ShapesOther ways to hide low-quality (aliased) vectors include making sure your Flash movie assets, whenever possible, use rectangular fills, are moving quickly, or consist of horizontal and vertical lines only. Horizontal and vertical lines, including the edges of rectangles, do not need antialiasing, and you simply can't see the aliasing on something that is moving quickly. The latter point can be used in Flash video games. When you are at the title screen or game instructions, a quality setting of High or Best can be used without compromising performance, but once you get into the game, fast graphics become important, so you will be more likely to switch to Low quality. Additionally, if your game is moving fast enough (and you have only horizontal- and vertical-shaped static graphics, such as the Pacman maze), the user may not even notice the switch in quality. Some caveats, however: if designing output for video, avoid 1-pixel horizontal lines. Because video for broadcast TV is interlaced, lines should be at least 2 pixels thick to avoid flickering. Even for online video playback, certain compression schemes have trouble with extremely thin lines. So perform tests before committing to your final design. Also, even perfectly horizontal and vertical edges can benefit from aliasing to soften their edges. This is especially true for vibrant colors (particularly the primary colors when shown on a white background), which appear to bleed when given a hard edge. Use Pixel FontsTurning on text antialiasing (which occurs to varying degrees when using any quality setting except Low), especially for large amounts of text or moving text, can really tax the processor. On the other hand, using aliased text in fonts designed for printing can result in poor onscreen appearance. Conversely, antialiasing can make text harder to read at small point sizes (below, say, 8-point text, depending on the font). If using a lot of text or small text, you should use pixel fonts, which are fonts designed for onscreen that look better without antialiasing, as shown in Figure 9-6. Figure 9-6. Pixel fonts and small fonts look better without antialiasingFor general information on pixel fonts, see the Web Page Design for Designers site's pixel font FAQ (http://www.wpdfd.com/pffaq.htm) and primer on pixel font typography (http://www.wpdfd.com/wpdtypo3a.htm). There are a number of free resources dedicated to Flash-specific pixel fonts, including:
Final ThoughtsAs you will realize when trying to create complex animations with Flash, there are limits to how fast Flash can render vectors. Reducing the image quality by turning off antialiasing (using a quality setting of Low) is one of the quickest ways to improve performance, but it seriously affects those crisp vector edges for which Flash is famous. As we have seen here, you have several options to minimize or hide the effects of this loss of quality. You might even incorporate the aliasing into your design to give it a retro feel. Of course, changing the rendering quality isn't your only option. The remaining hacks in this chapter present other ways to optimize performance. |
Table of Contents |