home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Book HomeWeb Design in a NutshellSearch this book

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.

LOOP=true|false

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

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.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.