Embed using SWFObject

SWFObject is an open source JavaScript library built for not only embedding SWFs, but detecting the Flash Player plugin and allowing you to provide alternate content easily. It's quickly become the industry standard for embedding SWFs, and is what we recommend using. Let's get started.

Step One: Add SWFObject

Open your HTML document and add the following before the </head> element:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

This will embed the latest version of the script in your page.

Step Two: Upload slideshow content

Launch your FTP client and create a folder anywhere you like in your web site directory for your slideshow

If you coded your own XML file and created your own images/videos (as demonstrated in the Quick Start instructions), upload to this folder the SWF file Flash published, your XML document, and the folders containing the images and/or videos your slideshow is loading.

If you are loading a Media RSS feed or content from SlideShowPro Director, you only need to upload the SWF file.

In either case, you should not upload the FLA. It is not necessary for viewing online and should be kept on your local machine.

Step Three: Edit <head> with SWFObject content

Add the following after <script> code you included in Step One above:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
   swfobject.embedSWF("test.swf", "flashcontent", "300", "120", "9.0.0");
</script>

Edit the embedSWF method parameters with information about your movie. The first parameter is the location of your SWF (edit to an absolute URL), the second is the ID of the DIV you want to write the SWF to (more on that in a minute), the third is the width of the SWF (edit to your SWF's Stage width), the fourth is the height of the SWF (edit to your SWF's Stage height), and the fifth is the minimum version of the Flash Player that is acceptable.

Step Four: Add base parameter

Note: If you are loading data from a Media RSS feed or SlideShowPro Director, this step is unnecessary and may be skipped. Continue to Step Five.

If your XML was coded with relative instead of absolute links (difference explained here) you need to modify the SWFObject code to include a base parameter, which makes all links relative to the directory location of the SWF (not the parent HTML document).

Modify the JavaScript in step five above like so:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
   var flashvars = {}
   var params = { 
      base: "."
   }              
   var attributes = {}
   swfobject.embedSWF("test.swf", "flashcontent", "300", "120", "9.0.0", false, flashvars, params, attributes);
</script>

Step Five (optional): Add full screen parameter

If you would like your slideshow to support full screen mode when viewing, you will need to add a allowfullscreen parameter. Using the code from Step Four above, add it to the params variable like so:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
   var flashvars = {}
   var params = { 
      base: ".",
	  allowfullscreen: "true"
   }              
   var attributes = {}
   swfobject.embedSWF("test.swf", "flashcontent", "300", "120", "9.0.0", false, flashvars, params, attributes);
</script>

Note: If you don't need the base parameter, simply delete that line.

Step Six: Create DIV for SWF

SWFObject writes the SWF to a DIV with an ID that's specified in the second parameter noted above. With that, create a DIV with an ID of "flashcontent" anywhere inside the body area of your HTML document. For example:

<div id="flashcontent">
   <!-- Insert non-Flash content here -->
</div>

The comments inside the DIV are a reminder to insert non-Flash content (image, text, etc) that will be displayed for users without the Flash Player.

Step Seven: Save and load

Save your HTML document and open it in your web browser. If all went well you should now see your slideshow in your own HTML document.

Page last modified by tdominey on April 17, 2010, at 05:39 AM