Recipe 21.1. Publishing Flash to the Browser

Problem

You want to publish an .swf file for playback in a web browser.

Solution

Select the HTML option in the Publish Settings, and publish from Flash. Optionally, add the <object> and <embed> tags to the HTML manually.

In either case, you must upload the .swf file as well as the HTML file when placing content on a web server.

Discussion

When you want Flash content to play back in a web browser, you must add the HTML code to embed the content in the HTML page. The code tells the browser to play back a specific .swf file in Flash Player. There are two Flash Player versions that can potentially be embedded within a web browser: the ActiveX player for Internet Explorer running on Windows and the Flash Player plug-in for the remaining browsers. Each player version requires different HTML code. For the ActiveX player, you must add an <object> tag, and for the plug-in, you must add an <embed> tag. Generally, you'll want HTML code that can work in every browser, so you'll need to add both the <object> and <embed> tags. Because there are two tags, and because of the potential number of attributes and parameters for each, it can be difficult to remember the necessary code in order to successfully embed Flash content within a web browser. However, Flash simplifies publishing Flash content to a browser by way of the Publish functionality provided by the IDE.

If you want to publish content to a web browser using the built-in Publish functionality within Flash, you need to set the correct Publish Settings. You can access the Publish Settings by way of the File Publish Settings menu option. From the Formats tab within the Publish Settings dialog box, make sure that both Flash and HTML are selected. That step will cause the dialog box to have two additional tabs corresponding to each of the selected options. In the Flash tab, you can select the settings specific to the SWF format that you want to publish (Flash 7, Flash 8, and so on). However, the HTML tab has the settings you'll most likely want to configure to determine how the Flash content is displayed within the browser.

From the Template menu, you'll almost always want to select the default value of Flash Only. If you are deploying content to a server using HTTPS, you can select the Flash HTTPS template. The two templates are nearly identical, except that one uses the HTTP protocol to specify the location of the download if the player isn't detected, and one uses HTTPS.

By default, the dimensions of the Flash Player instance embedded in the HTML are the same as the dimensions of the Flash document. However, you can also select Pixels or Percent from the Dimensions menu, and you can specify different values.

The HTML alignment menu lets you specify how the Flash Player instance is aligned within the HTML page. You can align it to the upper-left (Left or Default) or upper-right (Right). The behavior of the settings is up to the browser. You might expect that Top and Bottom would cause the Flash Player to be placed at the top and bottom of the page, respectively; yet it seems that no popular browsers implement that behavior.

The Scale menu options can profoundly affect how your Flash content displays within Flash Player. The default setting is "Show all," which means that as Flash Player scales, so too the content scales while maintaining the same aspect ratio. When you select the "Show all" option, the entire stage always displays within Flash Player, even if it is necessary to add borders to the right and left or top and bottom. For example, if the Flash document's dimensions are 550 x 400 and the Flash Player dimensions are 600 x 400, when the scale mode is set to "Show all," there will be a 25-pixel border on the right and left sides (assuming the content is aligned center) within Flash Player. If you never want Flash Player to display a border, you can select the "No border" option. The "No border" option also causes the content to scale with Flash Player, and it also maintains the aspect ratio. However, unlike "Show all," "No border" can cause the content to be cropped if the aspect ratio of Flash Player isn't the same as the aspect ratio of the Flash document. The "Exact fit" option causes the content to scale with Flash Player without maintaining the aspect ratio. And the "No scale" option causes the content to remain at the default dimensions regardless of whether Flash Player is scaled.

When the Flash Player and the content have the same dimensions or when the scale mode is set to "Exact fit," there's no need to control how the content aligns within Flash Player. However, when the Flash Player scales and the content either does not scale or scales in such a way that it might have added borders or be cropped, you can control how the content aligns within Flash Player. The Publish Settings dialog box enables you to select options for both horizontal and vertical alignment. By default, they are both set to Center. You can also select Left or Right for horizontal alignment and Top or Bottom for vertical alignment. If you set the scale mode to "No scale," by default the content always remains in the center of Flash Player regardless of how the player is scaled. However, the alignment options enable you to instruct the content to align differently. For example, you can apply settings of Left and Top. Then, as Flash Player scales, the content always remains aligned to the upper-left corner of the player.

From the Publish Settings dialog box, you can click the Publish button, and Flash will publish the SWF and the HTML document. Optionally, at nearly any time you can select File Publish (Shift-F12) to publish the content.

As mentioned previously, two HTML tags are required to embed Flash content in an HTML document that will work across every browser, because there are two Flash Player versions for browsers. The <object> tag is necessary for IE on Windows, and the <embed> tag is necessary for the rest. Obviously, each page request originates from just one browser, and so for any given page request, you want to display only one Flash Player versioneither the ActiveX version or the plug-in version. You could write JavaScript that determines which browser type has made the request, and you could then output only the <object> or only the <embed> tag. However, a simpler approach is possible, because each browser will effectively ignore the tag it doesn't understand if they are coded correctly. The correct way to add the <object> and <embed> tags is to nest the <embed> tag within the <object> tag. When IE makes the request, it will run the <object> tag, and because it won't understand <embed> as a valid nested tag for <object>, it will ignore it. Likewise, when a browser such as Fire-fox makes the page request, it will ignore the <object> tag, but it will not ignore the nested tags such as <embed>.

The HTML that Flash exports is minimal. It has the basic HTML structure (<html>, <body>, etc.) However, if you want to embed the Flash content within a more sophisticated HTML document, you have several options. You can export the default HTML from Flash, then copy and paste the <object> and <embed> tags from that HTML document to the more sophisticated HTML document. Optionally, you can write the <object> and <embed> tags by hand, or you can use an application such as Dreamweaver that has a UI that facilitates adding Flash content to HTML pages. Regardless, it is good to at least familiarize yourself with the basics of the <object> and <embed> tags.

The following example shows the basic code necessary to embed Flash Player in an HTML document:

	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://
	fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
	width="100%" height="100%" id="example" align="middle">
	  <param name (exp 3pod.com)="allowScriptAccess" value="sameDomain" />
	  <param name (exp 3pod.com)="movie" value="example.swf" />
	  <param name (exp 3pod.com)="quality" value="high" />
	  <param name (exp 3pod.com)="scale" value="noborder" />
	  <param name (exp 3pod.com)="bgcolor" value="#FFFFFF" />
	  <embed src="example.swf" quality="high" scale="noborder" bgcolor="#ffffff"
	width="100%" height="100%" name (exp 3pod.com)="example" align="middle"
	allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>

Notice that the <object> and <embed> tags have effectively the same data. The <object> tag uses some attributes (width, height, id, align, and so on) as well as nested <param> tags, while the <embed> tag uses attributes exclusively. The <object> tag defines a classid and a codebase attribute. Both of those attributes remain the same any time you are adding Flash 8 content. Likewise, the <embed> tag uses a pluginspage attribute and a type attribute that are always the same. The remainder of the attributes and <param> tags are generally self-explanatory. Most of the values correspond to the settings from the Publish Settings dialog box. The one exception is the allowScriptAccess attribute and <param> tag. The allowScriptAccess setting is discussed in more detail in Recipe 21.5.