Hack 90 Center Your SWF Without Scaling

Center unscaled content in the browser window without using tables or CSS.

Although everyone knows vectors (unlike bitmaps) do not lose quality when you zoom into them, almost all commercial Flash sites use a small, nonscaling SWF centered in the browser. The reasons for this are:

• Flash performance is based on the number of pixels that change every frame. By keeping the SWF movie's area modest and forcing nonscaling, you are able to create a fast site with a more or less constant frame rate. You don't want to let the user scale the SWF up to full screen size (especially 1280 1024 and larger), because such a large area would make Flash run really slowly.

• Many commercial Flash sites use bitmaps, which don't look good scaled.

• You should also avoid scaling video. Scaling both reveals optimization artifacts and slows performance (sometimes drastically), although Sorenson-encoded video can reduce this problem significantly.

• A smaller Stage area requires fewer graphics, and that makes for smaller bandwidth requirements.

The Stage.onResize( ) listener event allows you to detect resize events and scale or reposition individual elements in a custom manner, negating the need for one-size-fits-all scaling.

One of the most commonly asked questions for new users to Flash is, "How do I generate a nonscaling SWF that is always centered in the browser?" None of the out-of-the-box templates under FileNewTemplates includes this option, and even some longtime Flash users instead use an HTML table or CSS formatting. However, the easiest way to create a centered, nonscaling SWF is using FilePublish Settings. Simply set the Horizontal and Vertical options under Flash Alignment to Center, and set the Scale option to No Scale, as shown in the Publish Settings dialog box in Figure 11-8.

Figure 11-8. The Publish Settings dialog box

However, this technique allows off-stage content to be visible. We'll address this drawback in the next hack, which uses CSS formatting [Hack #91] .