building a slideshow with flash

Inserting Flash into a web page

There are many ways to insert your Flash project into a web page. This page will cover several different methods, including using the Adobe Dreamweaver program, or doing it manually by writing out the code.

Inserting Flash into a Dreamweaver page

Inserting Flash into Dreamweaver is a pretty straightforward process. Within Dreamweaver, pull down the Insert menu and select Media, then select Flash.

menu for inserting Flash in Dreamweaver

Dreamweaver will present you with an accessibility box. Use the title field to describe your project.

Accessibility dialogue box

Inserting Flash into web pages manually with code

There are times, particularly when using a content management system, where you will have to insert some Flash media into a web page by typing out the code manually. To insert Flash onto a web page or content management system manually, you must first upload your SWF file to a web server using a protocol called FTP or through an upload form on your content management system.

Once you have the URL to your SWF file on the web, you can use the code samples below, simply swapping out somefilename.swf for your own URL, and change the width and height to the dimensions of your own Flash project. The code below can appear complex, but works for all Flash content. Here is the gist of the code:

<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

This block of code uses two primary tags. The <object> tag, and the <embed> tag. The <object> tag is the web standard for embedding content on to a web page, but the <embed> is a carry over from the days of the Netscape browser, and is not actually a valid tag in web standards. However, it is still widely used today to embed Flash content due to its wide compatibility with multiple browsers. Many popular sites like YouTube still offer embed code follows the above format.

Embedding Flash media so it validates

A much better alternative, that is standards compliant, is to include what are called comment tags that are used by Internet Explorer browsers. This method is a pseudo hack, but conforms to the W3 standard and helps to achieve a standardization across the World Wide Web.

<!--[if !IE]> -->
  <object type="application/x-shockwave-flash" data="somefilename.swf" 
width="300" height="200">
<!-- <![endif]-->
<!--[if IE]>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
width="300" height="200">
    <param name="movie" value="somefilename.swf" />
<!-->
  </object>
<!-- <![endif]-->

Note that in each of these examples, there are two locations you must swap out with the URL to your flash file. Also, don't forget to set the correct width and height (there are two locations in each of the examples above). You can also create your own web standards embed code using the Validifier Online Tool.

A third method for embedding Flash content is to use some JavaScript programming code to embed Flash content. This is generally seen as the best method, as it circumvents lots of issues and bugs with embedding Flash across multiple browsers; such as the notorious click-to-activate security features in some Internet Explorer browsers that forces the user to click on the Flash content to activate it before they can interact with it. Often, this method is not possible to do within a content management system by a user, unless the feature is built into the CMS. The code to do this is beyond the scope of this tutorial, but the more popular tools to do this is called SwfObject.

Check out this great article from A List Apart about embedding Flash while Supporting Web Standards.