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:
-
Plug-in version detection (Ad 3 Banner, Ad 4 Banner, Ad 5 Banner, and Ad Any Banner)
-
Integration with JavaScript (Flash with FSCommand)
-
Integration with Generator 2 (Generator Ad Any Banner, Generator Image Output, Generator Only (Default), and Generator QuickTime)
-
Creation of a static image for use as an imagemap (Image Map)
-
Java Player targeting (Java Player)
-
Display of QuickTime Flash movies (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 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.
26.4.2.1. 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.
There are a number of attributes (some Flash-specific) that can be added within the <embed> tag:
- ID=text or
- NAME=text
-
This 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.
- QUALITY=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 in 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.
- PLAY=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.
- MENU=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.
- BGCOLOR=#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 Chapter 16, "Specifying Color in HTML" for an explanation of specifying RGB colors in HTML).
- ALIGN=left|right|top|bottom
-
This attribute controls the alignment of the movie in the HTML document, much like the align attribute in an image tag (<img>). It may not have any effect within a table cell (<td>) or a DHTML layer (<div> or <layer>).
- SCALE=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.
- SALIGN=l|r|t|b
-
This attribute positions the movie within the frame and is used in conjunction with the scale attribute. The letters l, r, t, 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.
- BASE=url
-
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.
26.4.2.2. The <object> tag
The <object> tag tells Internet Explorer (3.0 and later) to download and install the particular ActiveX player for Flash files. The following is an example of the basic <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"> . . .
26.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 <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.
TIP
Do not use quotation marks within the <embed> tag when it is placed within an <object> tag. The quotation marks may cause the <object> tag to choke.
The following sample code places an anti-aliased animation on the page that plays and loops automatically:
<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> |  |  |
| 26.3. Creating Flash Movies |  | 26.5. Integrating Flash with Other Technologies |
Copyright © 2002 O'Reilly & Associates. All rights reserved.