Tutorials — Displaying a Flash Movie (.swf) in a HTML page
This tutorial will show you how to display a Flash Movie (.swf) in a HTML
page using the <OBJECT> and <EMBED> tags.
To correctly display a Flash movie (.swf) in a browser, you should use
an HTML page instead of directly using the Flash (.swf) file. The HTML page
must contain the <OBJECT> and <EMBED> tags that reference the
Flash movie (.swf) file to be displayed. The <OBJECT> tag is used
by Internet Explorer on Windows and the <EMBED> tags are used by most
other browsers including Netscape, Mozilla, Firefox (Windows and Macintosh)
and Internet Explorer and Safari (Macintosh). So you should include both
<OBJECT> and <EMBED> tags so your Flash file can be viewed on
various browsers.
Below is a simple example of using the <OBJECT> and <EMBED>
tags. You can copy and paste the following block of HTML code into your
own HTML file. You will need to change the WIDTH and HEIGHT parameters to
the dimensions you wish to display the Flash file at. Also replace the "MyFlashMovie.swf"
with the filename of your .swf file you want to display in the HTML page.Note,
you will have to change these values in both the <OBJECT> and <EMBED>
tags.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="320" HEIGHT="240" id="MyMovieName">
<PARAM NAME=movie VALUE="MyFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<EMBED src="MyFlashMovie.swf" quality=high WIDTH="320" HEIGHT="240"
NAME="MyMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
<OBJECT> and <EMBED> Tag Attributes
Required attributes:
- CLASSID - Identifies the ActiveX control for the browser. (<OBJECT>
only).
- CODEBASE - Identifies the location of the Flash Player Active
X control so that the browser can automatically download it if it not
already installed. (<OBJECT> only).
- WIDTH - Specifies the width of the movie in either pixels or
percentage of the browser window.
- HEIGHT - Specifies the height of the movie in either pixels or
percentage of the browser window. SRC - Specifies the location (URL) of
the movie to be loaded. (<EMBED> only).
- PLUGINSPACE - Identifies the location of the Flash Player plug-in
so that the user can download it if it is not already installed. (<EMBED>
only).
- MOVIE - Specifies the location (URL) of the movie loaded. (<OBJECT>
only).
Optional attributes:
- ID - Identifies the Flash movie to the host environment so that
it can be referenced using a scripting language. (<OBJECT> only).
- NAME - Identifies the Flash movie to the host environment so
that it can be references using a scripting language. (<EMBED> only).
- PLAY - (true, false) Specifies whether the movie begins playing
immediately on loading in the browser. The default value is true if this
attributes is omitted.
- LOOP - (true, false) Specifies whether the movie repeats indefinitely
or stops when it reaches the last frame. The default value is true if
this attribute is omitted.
- MENU - (true, false) True displays the full menu, allowing the
user a variety of options to enhance or control playback. False displays
a menu that contains only the Settings option and the About Flash option.
- QUALITY - (low, high, autolow, autohigh, best)
- Low - favors playback speed over appearance and never uses
anti-aliasing
- Autolow - emphasizes speed at first but improves appearance
whenever possible. Playback begins with anti-aliasing turned off. If
the Flash Player detects that the processor can handle it, anti-aliasing
is turned on.
- Autohigh - emphasizes playback speed and appearance equally
at first but sacrifices appearance for playback speed if necessary.
Playback begins with anti-aliasing turned on. If the actual frame rate
drops below the specified frame rate, anti-aliasing is turned off to
improve playback speed
- Medium - favors appearance over playback speed and always applies
anti-aliasing. If the movie does not contain animation, bitmaps are
smoothed. If the movie has animation, bitmaps are not smoothed.
- Best - provides the best display quality and does not consider
playback speed. All output is anti-aliased and all bitmaps are smoothed.
- SCALE - (showall, noborder, exactfit)
- Default (Show all) - makes the movie visible in the specified area
without distortion, while maintaining the original aspect ratio of the
movie. Borders may appear on two sides of the movie.
- No Border - scales the movie to fill the specified area, without
distortion but possibly with some cropping, while maintaining the original
aspect ratio of the movie
- Exact Fit - makes the entire movie visible in the specified
area without trying to preserve the original aspect ratio of the movie.
Distortion may occur.
- ALIGN - (l, t, r, b)
- Default centers the movie in the browser window and crops edges if
the browser window is smaller than the movie.
- l, t, r, b (Left, Top, Right, Bottom) - aligns the movie along
the corresponding edge of the browser window and crops the remaining
three sides as needed.
- SALIGN - (l, t, r, b, tl, tr, bl, br)
- l, t, r, b - aligns the movie along the left, top, right, or
bottom edge, respectively, of the browser window and crops the remaining
three sides as needed.
- tl, tr - aligns the movie to the top left and top right corner,
respectively, of the browser window and crops the bottom and remaining
right or left side as needed.
- bl, br - aligns the movie to the bottom left and bottom right
corner, respectively, of the browser window and crops the top and remaining
right or left slide as needed.
- WMODE - (window, opaque, transparent) Sets the Window Mode property
of the Flash movie for transparency, layering, and positioning in the
browser.
- Window - movie plays in its own rectangular window on a web
page.
- Opaque - the movie hides everything on the page behind it
- Transparent - the background of the HTML page shows through
all transparent areas of the movie. This may slow animation performance.
Note, this property is not supported by all browsers and platforms.
- BGCOLOR - (#RRGGBB) Specifies the background color of the movie.
Use this attributes to override the background color settings specified
in the Flash file. This attribute does not affect the background color
of the HTML page.
- BASE - Specifies the base directory of URL used to resolve all
relative path statements in the Flash Player movie. This attribute is
helpful when your Flash Player movies are kept in a different directory
from your other files.
- FLASHVARS - Specifies a variable to pass to the Flash Player.
This requires Macromedia Flash Player 6 or higher.