Wednesday 7 December 2011

Tutorials — Displaying a Flash Movie (.swf) in a HTML page

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.

No comments:

Post a Comment