Section 35.4. Adding Flash to a Web Page

35.4. Adding Flash to a Web Page

Flash movies are exported by the Flash authoring environment using a combination of the object and embed elements with parameters and attributes for controlling display and playback. Both elements are used in order to accommodate the incompatibilities of the various web browsers while still providing as many player attribute settings as possible.

Internet Explorer on Windows uses the object element, which also enables it to automatically download the ActiveX controls for playing Flash media. Netscape on PC and Mac, and Internet Explorer and Safari on Mac, do not support ActiveX, so they use embedding information provided by the embed element. Note, the embed element is not standards-compliant and doubles much, if not all, of the information found in the object element.

You can generate the HTML using Flash's Publish feature, write it out by hand, or add a Flash element to a page using a What You See Is What You Get (WYSIWYG) editor such as Macromedia Dreamweaver MX 2004. The following sections take a look at the first two methods.

35.4.1. Using Flash Publish Settings

The easiest way to get your SWF files on the Web is to let the Flash authoring tool do the work for you. Flash 4 introduced the Publish feature for exporting movies along with automatically generated HTML for placing the Flash (.swf) file in an HTML document.

The Publish Settings dialog box also allows you to select the export format of the movie (whether it's to be a Flash movie, Standalone Projector, static graphic format, and so on) and control the variables of the export. For now, I'll focus on the HTML settings that are relevant to placing an SWF movie on a page.

The most welcomed feature of the HTML Publish Settings is the collection of preformatted templates that generate object and embed elements tailored to specific uses. The Flash Only (Default) template generates bare minimum code. Other templates generate HTML code with extra functionality, including:

• Flash for Pocket PC 2003

• Flash HTTPS

• Flash Only

• Flash with AICC Tracking

• Flash with FSCommand

• Flash with Named Anchors

• Flash with SCORM 1.2 Tracking

• Flash with SCORM 2004 Tracking

• Image Map

• QuickTime

The HTML Publish Settings also allow you to fine-tune various parameters and attributes in the code with simple checkbox and menu options. Upon export, the resulting HTML file can be brought into an HTML editor or authoring tool for integration with the rest of the page or for additional manual tweaking.

35.4.2. Using object and embed

To mark up your page so it is accessible to the maximum number of users, use a combination of the object and embed elements. The attributes for both elements are described below. Note that the embed element duplicates much of the parameters of the parent object element. Both tags are included for browsers that are unable to read the object element successfully (for more detail about which browsers, read the "Adding Flash to a Web Page" section). The embed element itself is not standards compliant, but is still the norm for Flash objects so I included it next.

Flash's Templates now use XHTML-compliant code. Note that technologies change quickly and Macromedia revises their markup instructions from time to time. Consult the Macromedia support pages (www.macromedia.com/support/flash/) for updates.

35.4.2.1. The object element

The object element tells Internet Explorer (3.0 and later) to download and install the particular ActiveX player for Flash files and allows you to set many of the attributes for the Flash movie. The following is an example of the basic object element:

 <object class codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=8,0,0,0" width="550" height="400"  align="middle">     <param name="allowScriptAccess" value="sameDomain" />     <param name="movie" value="path/file.swf" />     <param name="quality" value="high" />     <param name="bgcolor" value="#ffffff" /> </object> 

The classid parameter identifies the Flash ActiveX control, and codebase provides the browser with its location for downloading. The value of the classid attribute should appear in your HTML file exactly as it is shown above and applies to all Flash versions. Notice that the codebase attribute points to the Version 8 player. Other player versions and subreleases can be targeted with this method by adjusting the version number.

The width and height attributes are required. Note that you can also specify the dimensions in percentages (corresponding to the percentage of the browser window the movie fills).

By default, standard id and align attributes are exported as well from the authoring tool (for more information about publishing with Flash, see the earlier section "Using Flash Publish Settings").

There are a number of parameters (param), which can be added as child nodes to the object element.

param name="allowScriptAccess" value="always|never|sameDomain"

This attribute controls the Flash movie's ability to access JavaScript or VBScript on the HTML page containing the Flash movie. Flash can call JavaScript or VBScript using functions using fscommand( ) or getURL( ) calls within the Flash movie. A value of sameDomain allows the Flash movie to access any script on the page as long as the HTML and .swf files reside on the same domain. A value of always allows the Flash movie to access any script on the page regardless of the domain, and a value of never prevents the Flash movie from accessing any scripts.

param name="movie" value="path/file.swf"

The movie parameter is probably the most significant attribute in that you need this to tell the Flash Player what file to play. Otherwise, you'll get nothing but a colored rectangle on the screen.

param name="quality" value="low|autolow|autohigh|high|medium|best"

This attribute controls the anti-aliasing quality. autolow starts the animation at low quality (aliased) and switches to high quality (anti-aliased) if the user's computer is fast enough. Conversely, autohigh starts the animation in high-quality mode and reverts to normal quality if the computer is too slow. high anti-aliases the animation regardless of computer speed. medium (new starting with Flash 5) displays more smoothly than low, but not as well as high. best goes further than high by also anti-aliasing all bitmaps. It is the most processor-intensive option.

param name="bgcolor" value="#rrggbb"

Use this setting to override the background color of the Flash movie frame, for instance, to make it match the background color of a web page. The value is a hexadecimal RGB value. (See Appendix D for an explanation of specifying RGB colors in HTML.)

param name="play" value="true|false"

If play is set to true, the movie will begin playing automatically. A setting of false requires the user to initiate the movie. The default is TRue.

param name="loop" value="true|false"

Specifies whether the movie plays in a continuous loop. The default is true.

param name="menu" value="true|false"

Right-clicking in Windows or Control-clicking on a Mac on a Flash movie brings up a pop-up menu of playback controls. Setting menu to false reduces the choices in the pop-up right-click menu to "About Flash Player," eliminating the playback settings of zoom, quality, play, loop, rewind, forward, back, and print.

param name="scale" value="showall|noborder|exactfit"

This is used in conjunction with percentage width and height values for defining how the animation fits in the player frame. showall (the default) fits the movie into the frame while maintaining the image proportion (the frame background may be visible along one or two edges of the movie). noborder scales the movie to fill the frame while maintaining the aspect ratio of the movie (one or two edges might get cut off). exactfit fits the image into the frame exactly but may result in image distortion if the scale described and the scale of the movie are inconsistent.

param name="salign" value="l|t|r|b"

This attribute positions the movie within the frame and is used in conjunction with the scale attribute. The letters l, r, t, and b correspond to left, right, top, and bottom, respectively. You can use any combination of l or r with t or b; for example, lt aligns the movie to the top-left corner of the browser window. If the showall attribute is selected, the leftover space appears below and to the right of the movie.

param name="wmode" value="window|opaque|transparent"

This attribute allows you to set the transparency of the background color layer of the Flash movie. The default value of window will have a solid color background the color of the Stage in the Flash movie or the value of the bgcolor parameter. The value of opaque allows you to have DHTML layers ride over the Flash movie without it covering that layer, and TRansparent allows you to hide the background so that you can see other HTML content beneath your animations. Note, this feature works only in IE 3 or higher for all Flash Players, but works in most other browsers with the 6.045 or higher Flash Player.

param name="devicefont" value="true|false"

This attribute specifies whether or not to use device fonts for all embedded text in the Flash movie. Note, embedded fonts cannot have some effects applied to them in the Flash authoring environment, and this feature works only with Windows machines. The default is false.

param name="flashvars" value="name=value"

This attribute allows you to pass variables into the Flash movie. Similar to passing variables on a URL string, you can pass name/value pairs here, which will be available on the root Timeline of the Flash movie.

The same additional controls as outlined for the object tag (quality, loop, play, etc.) can be used with the embed tag as well. Again, the embed tag is not standards compliant but still recommended to provide the most functionality to the widest offering of browsers. If you want to try to deliver a Flash movie that is entirely standards compliant by excluding the embed tag, it is recommended that you read this article: http://alistapart.com/articles/flashsatay/, which describes the success and difficulties of eliminating the embed tag for Flash movie playback.

35.4.2.2. The embed element

The basic embed tag is as follows:

 <embed src="/books/4/439/1/html/2/path/file.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="file" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/getflashplayer" /> 

The src attribute tells the Flash Player where the file to load is located, similar to the movie parameter of the object tag. The width and height tags again specify the dimensions of the image or movie in pixels. The pluginspage attribute provides a URL to the page where the user can download the Flash Player if it is not found on the user's computer (use the exact URL shown in the example code). It is a recommended attribute, but not mandatory.

There are a number of attributes (some Flash-specific) in total that can be added within the embed tag. The following list details all the attributes available. Note, many of these attributes are duplicates of the parameters found in the object tag. If no explanation for the attribute is given here, please refer to its counterpart for the object tag written previous to this text:

src="/books/4/439/1/html/2/path/file.swf" quality="low|autolow|autohigh|high|medium|best" or name=" text"

The name attribute assigns a name to the movie, which is necessary if it is going to be called from a JavaScript or within a form. It is general practice to use the same name as the .swf file with the suffix omitted.

bgcolor="# rrggbb"

width="(number of pixels)"

height="(number of pixels)"

align ="left|right|top|bottom|middle"

The align attribute lets you determine where to position the Flash Player within its boundaries. The default is middle and it's generally considered better to allow a TD tag to determine this setting.

allowScriptAccess="always|never|sameDomain"

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"

loop="true|false"

play="true|false"

menu="true|false"

align="left|right|top|bottom"

scale="showall|noborder|exactfit"

salign="l|r|t|b"

base = " url"

base sets the base URL and directory that is used for relative pathnames within the Flash movie.

swLiveConnect="true|false"

This tag enables Netscape's LiveConnect feature, which allows plug-ins and Java applets to communicate with JavaScript. Set this attribute to true when you have FSCommands in your movie; otherwise, it is best set to false (the default), because it can cause a delay in display.

scale="showall|noborder|exactfit"

wmode="window|opaque|transparent"

devicefont="true|false"

35.4.2.3. Putting it together for all browsers

To make your Flash content available to the maximum number of users, it is recommended that you use both the object and embed elements. It is important to keep the embed element within the object elements so Internet Explorer users don't get two copies of your movie.

To place an anti-aliased Flash 8 animation on the page with a width of 550 and a height of 400, that plays and loops automatically, you could use code like this:

 <object class codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=8,0,0,0" width="550" height="400"  align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="animation.swf" /> <param name="quality" value="autohigh" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="bgcolor" value="#ffffff" /> <embed src="/books/4/439/1/html/2/test.swf" quality="autohigh" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" play="true" loop="true" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>