Inserting Flash (.swf) to HTML webpage

The following solutions only apply to the SWF files created by Photo Slideshow Maker with the Basic templates.

If you use Advanced templates to create the flash slideshow, please refer to this help article:

Building XML-driven dynamic flash gallery

Using the Basic flash templates, Photo Slideshow Maker will create a simple HTML document that inserts the proper tags for displaying the flash slideshow, which is actually a Flash movie with the file extension .swf.

Basic flash templates

However, it's often necessary to incorporate flash slideshows into an existing HTML document, either to insert additional content or to maintain overall site design and organization.

This document outlines three basic methods of inserting flash slideshow content into an existing HTML document. You can choose any one out of these three methods to insert SWF to HTML page.

Method 1: Using Dreamweaver to insert SWF file to webpage

Dreamweaver is a visual HTML editor with built-in objects that allow you to easily insert Flash content. The required HTML tags are automatically inserted by Dreamweaver.

  1. Copy the SWF file to the same folder as the HTML document.
  2. In Dreamweaver, select the location of the page where you wish to add the Flash content (including inside a div, table cell or frame).
  3. Click the Insert Flash button in Dreamweaver's Object palette, or choose Insert> Media > Flash. Browse to and choose the SWF file.
  4. Upload both the SWF and HTML files to your Web server, placing them in the same directory.

Method 2: Editing the PFM-created HTML page in HTML editor

Basic template creates a simple HTML document with a SWF file, the flash code has been embedded into the HTML document. You can simply use these two files and make necessary changes to the HTML document.

  1. Copy both the SWF and HTML file to the root or current working directory of your HTML editor.
  2. Open the HTML page in your HTML editor and make any desired changes to layout or format of the document.
    FrontPage users please read this Important Note
  3. Upload both the SWF and HTML files to your Web server, placing them in the same directory.

Method 3: Manually adding the proper tags to an existing web page

If you need to incorporate the flash slideshows created by Photo Slideshow Maker into an existing HTML or other type of webpage document, a better way is manually adding the proper tags to the existing page.

Web page must contain tags that reference the actual Flash movie file to be opened and played. These tags are the <OBJECT> and <EMBED> tags.

The OBJECT tag is used by Internet Explorer on Windows and the EMBED is used by Netscape Navigator (Macintosh and Windows) and Internet Explorer (Macintosh) to direct the browser to load the Macromedia Flash Player.

1. Open the PFM-created HTML document in a text or HTML editor

2. Copy the HTML code included in the <object> and <embed> tags (see example below) and paste it into the existing HTML document. This should contain the <OBJECT> and <EMBED> tags

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=",0,0,0" width="777" height="528" id="tech" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="showcase/flash/fashionshow.swf" />
<param name="quality" value="high" />
<embed src="showcase/flash/fashionshow.swf" quality="high" width="777" height="528" name="tech" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" />

In this case, showcase/flash/ is the folder directory, while the fashionshow.swf is the SWF file name.

3. Open the existing webpage page, and paste the <object> and <embed> tags into the desired location in the body of the document. This can also be pasted into a table cell or frame.

4. Edit the attributes of the tags for the movie.

Change the height and width parameters to match the height and width of the movie dimensions or use percentage values, if desired.

5. Upload the HTML and SWF files to the same folder on the Web server.

Why use these all these HTML tags? What do they do?

The OBJECT tag is for Internet Explorer 3.0 or later on Windows 9x/2000/NT/ME/XP platforms or any browser that supports the use of the Flash ActiveX control.

The "classid" must appear exactly as it does in this example.

The "codebase" attribute must also appear exactly as it does in this example; it tells the browser where to find Flash Player for automatic download. Internet Explorer 3.0 or later on Windows 9x/2000/NT/ME/XP will prompt the user with a dialog asking if they would like to auto-install the Flash Player if it's not already installed. This process can occur without the user having to restart the browser.

The EMBED tag is for Netscape Navigator 2.0 or later, or browsers that support the use of the Netscape-compatible plugin version of Flash Player.

The "pluginspage" attribute tells the browser where to direct the user to find Flash Player for download if the Player is not already installed. The user would then need to download and run the installer and restart their browser.

To ensure that the most browsers will play your Flash Player movies, you should place the EMBED tag nested within the OBJECT tag as shown in the above example. ActiveX-enabled browsers will"ignore" the EMBED tag inside the OBJECT tag. Netscape and Microsoft browsers using the Flash Plugin will not recognize the OBJECT tag and will read only the EMBED tag.

Important Note for FrontPage users

Opening and editing HTML documents that contain embedded Flash movies (SWFs) in FrontPage can cause unexpected results.

If you use FrontPage, the suggested method for inserting Flash movies into an HTML document is to copy and paste the required OBJECT and EMBED tags, as discussed above.

Also, do not double-click the Flash movie in the FrontPage WYSIWIG editor, which will cause FrontPage will replace the pasted information with proprietary tags that won't work correctly when viewed in a Web browser.

Copyright © 2005-2022 All rights reserved.