Working Smart with Flash Parameters

[ LiB ]

Flash is a unique medium, offering its own special challenges and opportunities for web authors. As noted earlier, Flash movies accept a variety of parameters, some common to all media types and some unique to Flash. Most can be added using the Property Inspector; some are set automatically by Dreamweaver and don't appear anywhere in the inspector. Some must be added using the generic Parameters dialog box. Table 16.1 lists parameters for the Flash plug-in and ActiveX player, noting which parameters must be added manually.

Table 16.1. Specifications of the Parameters Accepted by the Flash Player Plug-In and ActiveX Control

Parameter Name	Value	Description
`name`	Any one-word name.	Required by the `<embed>` tag if the movie is to referred to by scripting.
`ID`	Any one-word name.	Required by the `<object>` tag if the movie is to be referred to by name.
`width`	Integer or percent value.	Specifies the horizontal space the movie will be allotted on the page. If the width assigned is different from the movie's width, the movie will be resized (see the entry for the `scale` parameter).
`height`	Integer or percent value.	Specifies the vertical space that the movie will be allotted on the page. If the height assigned is different from the movie's height, the movie will be resized (see the entry for the `scale` parameter).
`align`	`baseline` , `top` , `middle` , `absbottom` , `left` , or `right` .	Determines how the browser will align the movie when text or other page elements are placed next to it (in the same table cell or paragraph, for instance).
`bgcolor`	Choose from the palette or enter a six-digit hexadecimal number.	If the `width` and `height` values assigned are larger than the movie's dimensions, the color that will fill up the rest of the allotted space.
`vspace`	Integer (pixels).	Adds empty whitespace above and below the movie. Specify a number of pixels.
`hspace`	Integer (pixels).	Adds empty whitespace to the right and left of the movie. Specify a number of pixels.
`autoplay`	`true` or `false` .	Specifies whether the movie will start playing as soon as it loads.
`loop`	`true` or `false` .	Specifies whether the movie will repeat indefinitely or play only once. This has effect only if the movie's own internal scripting doesn't have its own looping or stopping controls.
`quality`	`low` , `medium` , `high` , `best` , `autolow` , or `autohigh` .	Determines whether Flash Player will antialias the movie as it plays. (Quality doesn't change the file size, but it can affect playback speed for processor- intensive animations.) See Table 16.2 for details.
`scale`	`show all` , `noborder` , or `exactfit` .	Determines how the movie's contents will be resized, if the `width` and `height` parameters are used to resize the movie object nonproportionally. Defaults to `show all` . See Table 16.3 for details.
^[*] `salign`	`left` , `right` , `top` , or `bottom` ( `center` and `middle` attributes are the defaults if `salign` is not present).	If the movie object has been scaled nonproportionally, determines how the movie's contents align within the object shape. See Table 16.4 for details.
^[*] `menu`	`true` or `false` .	Determines whether right-clicking on the Flash movie in the browser will cause a contextual menu to appear. Defaults to `true` .
^[*] `devicefont` (Windows only)	`true` or `false` .	Determines whether an antialiased system font replaces text when specified fonts are not available. (Note: Normal, static text is automatically embedded in Flash movies; this setting refers to dynamic text and input fields only.) Defaults to `false` .
^[*] `wmode` (IE/Windows only)	`opaque` , `window` , or `transparent` .	Determines whether the background of the Flash movie is opaque or transparent, sitting in front or in back of other layered page elements. See Table 16.5 for details.
^[**] `pluginspage`	`http://www.macromedia.com /shockwave/download/index.cgi?P1_Prod_Version= ShockwaveFlash`	Used by the embed tag. Allows users without the plug-in to link directly to Macromedia's plug-in download site.
^[**] `codebase` (part of `object` tag, not a standard param tag)	`http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0`	Used by the `object` tag. Allows IE/Windows users without the ActiveX control to automatically retrieve the control from Macromedia.

^[*] Indicates parameters that must be set using the generic Parameters dialog box

^[**] Indicates parameters that Dreamweaver handles automatically

Table 16.2. Values for the scale Attribute and Their Effects on Movie Appearance

Value	Description	Example
`show all` (default)	The movie contents are scaled proportionally, based on the smaller dimension (width or height), so that no contents are cropped away. Adding background color makes up extra space in the movie object along the larger dimension.
`noborders`	The movie contents are scaled proportionally, based on the larger dimension (width or height), causing contents to be cropped along the smaller dimension.
`exactfit`	The movie contents are scaled non-proportionally, to match the movie object's scaling.

Table 16.3. Values for the salign Attribute and their Effects on Movie Appearance

Value	Description	Example
`L`	When used with default scaling ( `show all` ), aligns the movie at the left ( `L` ) edge of any extra horizontal space. When used with `scale= noborders` , shows the left side of the movie if horizontal cropping must occur.
`R`	When used with default scaling ( `show all` ), aligns the movie at the right ( `R` ) edge of any extra space. When used with `scale="noborders"` , shows the right side of the movie if horizontal cropping must occur.
`T`	When used with default scaling ( `show all` ), aligns the movie at the top ( `T` ) edge of any extra vertical space. When used with `scale="noborders"` , shows the top part of the movie if vertical cropping must occur.
`B`	When used with default scaling ( `show all` ), aligns the movie at the bottom ( `B` ) edge of any extra vertical space. When used with `scale="noborders"` , shows the bottom part of the movie if vertical cropping must occur.
(multiple values)	To assign both horizontal and vertical `salign` parameters, enter both relevant letters as the parameter's value ( `LB` , `LT` , `RB` , or `RT` ). The resulting code will look like `salign="LT"` , and so forth.

Table 16.4. Options for Setting the quality Attribute for Flash Movies

Option	Description
`Low`	No antialiasing ( fastest playback).
^[*] `Medium`	Some antialiasing on vector graphics; none on internal bitmaps.
`High`	Smooth antialiasing on vector graphics. Internal bitmaps are antialiased unless they're animated.
^[*] `Best`	Anti-aliasing on vector and bitmap graphics, including animated bitmaps.
`Autolow`	Starts in low-quality mode and then switches to high quality if the user 's computer is fast enough.
`Autohigh`	Starts in high-quality mode and then switches to low quality if the user's computer cannot keep up.

^[*] Not available in the pop-up menumust be typed into the input field

Table 16.5. Values for the wmode Attribute, for Use by the Flash Player ActiveX Control

Value	Description
`opaque` (default)	The background is opaque, using the Flash movie's internally specified background color. Other layers can appear in front of the Flash movie.
`window`	The background is opaque. All other layers appear behind the Flash movie.
`transparent`	The background is transparent. Other layers can appear in front of the Flash movie or show through from behind it.

Because Flash is not quite like any other plug-in media, the meaning and potential uses of some of these items are not immediately obvious.

Dimensions

Scalability is one of the most liberating aspects of designing with Flash. Unlike its handling of other plug-in media, Dreamweaver is capable of determining the original dimensions of a Flash movie, and it can reset its size if the current width and height don't represent its true dimensions. Also, unlike other plug-in media, altering a Flash movie's width and height attributes actually scales the movie, not simply adjusts its cropping. Flash movies can even safely be set to percent-based dimensions, much like tables, so that they resize as the browser window resizes. To set a Flash movie to percent-based dimensions, type a number followed by the percent symbol into the Width or Height fields (see Figure 16.4).

Figure 16.4. Setting a Flash movie's dimensions to percent-based numbers .

Although any graphics created within Flash are vector-based and therefore scalable, Flash movies also can contain imported pixel images. Any pixel image inside a Flash movie has the same limitations as a pixel image outside Flash: Its presence dramatically increases the movie's file size, and if the movie is scaled, it loses image quality.

Scale

Because Flash graphics are scalable, and because you can set them to percent-based sizes that change with browser window sizes, you need to determine what will happen when the movie's onscreen dimensions aren't the same proportions as the movie's true dimensions. Table 16.2 shows the details of this parameter, its possible values, and the effect of those values on the movie's appearance. If you examine the samples shown there, you'll see why Default ( show all ) is the default setting for this parameterit's definitely the most useful.

In trying to create truly full-screen Flash, some designers mistakenly think that the noborders scale setting eliminates any page borders around the movie. As you can see from the samples shown in Table 16.2, this isn't the case. To make a Flash movie hug the browser window edges when setting dimensions to 100% x 100%, use Modify > Page Properties and set the page margins to 0.

Scale Align (salign)

Don't confuse salign with the more standard align attribute. The purpose of salign is to work with the scale attribute to determine how a proportionally scaled movie will fill a nonproportional box. Table 16.3 shows the settings for this attribute and the effect of those values on movie appearance. Note that there are no values for centering horizontally or vertically; these are the default values and needn't be specified at all.

The salign parameter does not appear anywhere in the Flash Property Inspector. To set this parameter, click the Parameters button in the inspector to access the generic Parameters dialog box (see Figure 16.5).

Figure 16.5. Setting the salign property with the Parameters dialog box.

Quality

Vector graphics such as those in Flash movies do not define pixels, but they must still be rendered by something that understands only pixels: the computer monitor. When the screen displays objects, it displays them with either aliased (jagged) or antialiased (smooth) edges. When the Flash Player plays a movie, each frame must be redrawn with either aliased or antialiased edges. How the player handles this is determined by the quality parameter. Table 16.4 lists possible values the parameter can take.

Movies playing at low quality will have jagged edges but will play quickly. Movies set to high quality will have to be translated frame by frame into antialiased graphics, and so will have smooth edges but might not play at full speed on all computers. The other quality settings are all variations on this basic setup.

The "auto" settings ( Autolow and Autohigh ) are the most flexible for dealing with a wide variety of computer speeds. Each tells the Flash Player to start out at a particular quality level and adjust the level as needed, depending on whether a particular user's computer can antialias and keep up with the frame rate. Of these two, Autolow always plays the first second or two of a Flash animation with jagged, aliased graphics, even on the fastest computer. Autohigh starts out with antialiasing turned on, so users with faster computers never have to see jagged graphics. If your Flash animation is at all complex, or if it includes a sound-track, this is the best choice.

The quality setting does not affect the Flash movie itself and, therefore, has no effect on file size or download time. Its only purpose is to instruct the Flash Player how to display the movie.

Window Mode (wmode)

Window mode is an attribute of the Flash ActiveX control only, so it takes effect only in IE/Windows. Within that environment, however, the wmode parameter enables you to control whether the Flash movie's background is transparent and how Flash movies interact with other page elements when DHTML layers are used. Table 16.5 details the various options for this attribute and shows the effects of each.

If you are accessing your Flash content through the plug-in rather than the ActiveX control, Flash movies will always have opaque backgrounds, and any layer with Flash content will always show in front of all other layers.

Exercise 16.1. Inserting a Flash Banner

The exercises in this chapter give you a chance to practice working with Flash content in Dreamweaver; they also provide a chance to examine the various ways Flash can be integrated into a site. In this first exercise, you start with a page that has an animated GIF banner and replace it with a SWF banner; you examine the pros and cons of each choice. You can find all the required files for this and the other exercises in this chapter on the book's website at www.peachpit.com in the chapter_16 folder. Before proceeding with the exercise, copy that folder to your hard drive and create a new site with that as your local root folder.

To start, from the exercise files on the book's website, find and open gecko_gifbanner.html . This sample home page includes an animated title banner made from an animated GIF. Preview the page in your browser to see how the animation works. (Figure 16.6 shows the page.) The animation is set to play only once; if you blink, you miss it!

Figure 16.6. The gecko_gifbanner.html page as viewed in a browser.
Go to File > Save As, and save a copy of the file as gecko_swfbanner.html . (You will be comparing the animated GIF with a SWF banner, so you don't want to change the original page.) Select the GIF banner and delete it.
Use the Flash object to insert gecko_banner.swf into the banner spot. Dreamweaver will size the banner automatically and set other defaults. Do you need to change any defaults to make the new banner behave just like the old one? ( Hint: How many times does the lizard run across the page?) Remember, you can preview the animation without previewing the entire page in a browser, by clicking the Play button in the Flash Property Inspector.
Open the original file ( gecko_gifbanner.html ) and compare it to the new version. You should notice right away how much smaller the file size is for the SWF animationGIF animations are made of pixels and, therefore, aren't suited to large graphics. One difference that you won't see unless you upload both pages to a web server and view them live is that the timing of the SWF is better than that of the GIF. This is because the first time any animated GIF plays through, the frames display as quickly as they download, regardless of their built-in timing. Only on the second and subsequent loops does the frame delay become consistent. Flash movies stream much more efficiently .
In gecko_swfbanner.html , the layout table is currently pixel-based and, therefore, nonflexible. Using the Table Property Inspector or Dreamweaver Layout view, change the table to a flexible table that is always 100% of the browser window's width. Then set the SWF banner so that it too has a width of 100%. Leave the scale attribute at the default so that extra space is added to make up for the excess width that could be added. Now you're taking advantage of Flash scalability. After you've done that, you might decide that the lizard animation looks silly in the middle of a big, wide page; using the generic Parameters dialog box, set the salign so that the image hugs the right side of the page. Figure 16.7 shows how both of these settings will look in the various parts of the Property Inspector.

Figure 16.7. The Flash Property Inspector and Parameters dialog box, showing the gecko banner being assigned a variable width and right-side alignment.
Preview your page in the browser to see how the banner looks and how the animation resizes as you resize the window.

Optional: Have you actually done anything with the SWF banner that can't also be done with the animated GIF? Because you have scaled the movie only horizontally, you haven't resized the graphicsyou've only given the browser permission to add extra space on either side, if needed. The same effect could be generated using the animated GIF by setting the table to be 100% wide and changing the bgcolor of the banner's table cell to match the brown of the banner. Then you could set the cell alignment to right to mimic the salign .

Exercise 16.2. Stacking Flash Content and HTML with Layers (IE/Windows Only)

In this exercise, you'll see how much fancier your page can become if you layer HTML content over a Flash moviealthough this effect will work only for visitors with Internet Explorer 4+/Windows who are using the Flash Player ActiveX control.

This exercise creates an alternate version of the home page you saw in Exercise 16.1. Begin by opening gecko_layers.html . Examine the file, and you'll see that the text and navigation bar are present, each in its own layer. This file includes an animated banner that extends under the page elements and becomes, in essence, an animated background.
You want to insert the background SWF movie on the page but not in a layer and therefore behind all other layered content. (You could insert the SWF in its own layer, stacked behind the other two layers, but because the movie will just be sitting in the background, this isn't necessary.) With the insertion point outside all layers, and using the Flash object, insert gecko_bg.swf . Leaving all the parameters at their default settings, preview the page in any browser you choose. You should get a lovely preview of the animated background, but the content layers won't show correctly, even in IE/Windows. That's because you haven't set the wmode yet.
Select the background SWF and assign whatever parameters you think are appropriate. In particular, use the generic Parameters dialog box to set the wmode to opaque (see Figure 16.8).

Figure 16.8. Setting the parameters for gecko_bg.swf in gecko_layers.html.

Change the page's bgcolor to match the background of the SWF. You want the movie to blend seamlessly with its environment so that it looks more like a background element.

To match movie color and page color, do this:

Select the SWF and click the Property Inspector's Play button to play it (so its colors show).
With the movie still playing, go to Modify > Page Properties. Click the Background Color button. When the eyedropper appears, use it to sample the SWF movie's color. (Figure 16.9 shows this happening.) Voil ! Seamless integration. (For more on color sampling in Dreamweaver, see "Working with the Color Picker," in Chapter 2, "The Dreamweaver Workspace.")

Figure 16.9. Playing a Flash movie in Dreamweaver, and sampling its color for the page background color.

Do your colors match? If your monitor is set to display thousands of colors (16-bit color depth), you might notice that it's impossible to get the Flash movie color to match your page background. This is because the Flash Player renders colors slightly differently than the browser does. The difference won't show up on 8-bit monitors (displaying 256 colors) or in 24-bit monitors (millions of colors). However, any visitor who views your page on a 16-bit monitor will see the difference. It's not because you mismatched the colors, and there's nothing you can do about it.

Preview your layered page in various browsers. In IE/Windows, you should see a complete page, as shown in Figure 16.10. In other browsers and platforms, you'll just see the background movie, or the movie and partial page contents.

Figure 16.10. The completed gecko_layers.html page as it appears in IE/Windows, with text showing on top of animated background.