26.4. Adding Flash to a Web Page
Flash movies are generally added to web pages using a combination of the <object> and <embed> tags with parameters and attributes for controlling display and playback. Both tags are used in order to accommodate the incompatibilities of Internet Explorer and Netscape Navigator. Internet Explorer on Windows uses the <object> tag, which enables it to automatically download the ActiveX controls for playing Flash media. Navigator (on Windows, Mac, Linux, and Solaris) and Internet Explorer on the Mac understand the <embed> element for Flash placement.
You can either generate the HTML using Flash's Publish feature or write it out by hand. This section takes a look at both methods.
26.4.1. Using Flash Publish Settings
The easiest way to get your SWF files on the Web is to let Flash do the work for you. Flash 4 introduced the "Publish" feature for exporting movies along with automatically-generated HTML for placing it in an HTML document. The built-in Publish function replaces the AfterShock utility used with previous versions of Flash.
The Publish Settings dialog box also allows you to select the export format of the movie (whether it's to be a Flash movie, Generator template, static graphic format, and so on) and control the variables of the export. For now, we'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 pre-formatted templates that generates <object> and <embed> tags tailored to specific uses. The "Flash Only (Default)" template generates bare minimum code. Other templates generate HTML code with extra functionality, including:
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 then be brought into an HTML editor or authoring tool for integration with the rest of the page or for additional manual tweaking.
26.4.2. Adding Flash to an HTML Document
To code your page so it is accessible to the maximum number of users, use a combination of the <embed> and <object> tags. Explanations of each of these options follow. Note that technologies change quickly and Macromedia revises their tagging instructions from time to time. Consult the Macromedia support pages (http://www.macromedia.com/support/director/internet.html) for updates.
22.214.171.124. The <embed> tag
The basic <embed> tag is as follows:
<EMBED SRC="path/file.swf" WIDTH=x HEIGHT=x PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_ Prod_Version=ShockwaveFlash"> </EMBED>
The width and height values are mandatory and specify the dimensions of the image or movie in pixels. Note that you can also specify the dimensions in percentages (corresponding to the percentage of the browser window the movie fills). 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.
126.96.36.199. The <object> tag
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=5,0,0,0" WIDTH=300 HEIGHT=150> <PARAM NAME="MOVIE" VALUE="moviename.swf"> </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 5 player. Other player versions and subreleases can be targeted with this method by adjusting the version number. The width and height attributes are required. The first parameter (<param>) establishes the name and location of your Shockwave Flash file.
The same additional controls as outlined for the <embed> tag (quality, loop, play, etc.) can be used with the <object> tag as well. They appear as additional parameters within the <object> tags using the following tag structure:
<PARAM NAME="PLAY" VALUE="true"> <PARAM NAME="LOOP" VALUE="false"> <PARAM NAME="SCALE" VALUE="showall"> . . .
188.8.131.52. 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 <embed> and <object> tags. It is important to keep the <embed> tag within the <object> tags so Internet Explorer users don't get two copies of your movie.
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=5,0,0,0" WIDTH=300 HEIGHT=145 NAME="animation"> <PARAM NAME="MOVIE" value="animation.swf"> <PARAM NAME="PLAY" value="true"> <PARAM NAME="LOOP" value="true"> <PARAM NAME="QUALITY" value="autohigh"> <EMBED SRC=animation.swf WIDTH=300 HEIGHT=145 PLUGINSPAGE=http://www.macromedia.com/shockwave/download/ index.cgi?P1_Prod_Version=ShockwaveFlash NAME=animation PLAY=true LOOP=true QUALITY=autohigh> </EMBED> </OBJECT>
Copyright © 2002 O'Reilly & Associates. All rights reserved.