Using without Director

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.

Before you begin...

Couple of assumptions are being made here. One, you've already created an XML file and slideshow content (instructions here), the content is uploaded to your web site, and (if using SlideShowPro Player for Flash) you've assigned to its XML File Path parameter an absolute path to where the XML file is on your server. This walkthrough focuses on embedding the SWF itself, so if you haven't done the aforementioned you should do so first before continuing.

Step one: Add SWFObject library

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: Link to SWF

With either the SWF you published from Flash (containing the SlideShowPro Player component) or the SWF that comes with SlideShowPro Player SWF, upload the SWF to your web server. For example, "yoursite.com/swf/slideshow.swf". With your SWF uploaded, embed it in your HTML document by adding the following after the SWFObject library code included in Step one above:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
   var flashvars = {}
   var params = { 
	  allowfullscreen: "true"
   }              
   var attributes = {}
   swfobject.embedSWF("http://yoursite.com/swf/slideshowpro.swf", "flashcontent", "550", "400", "9.0.0", false, flashvars, params, attributes);
</script>

Step three: Create DIV for SWF

SWFObject writes the SWF to a DIV with an ID that's specified in the second embedSWF() 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>

Step four: Assign XML File Path (SlideShowPro Player SWF only)

If using SlideShowPro Player SWF, assign an xmlFilePath flashvars that points to where your XML file is. Otherwise, skip this step. For example:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
   var flashvars = {
      xmlFilePath: "http://yoursite.com/slideshow/images.xml"
   }
   var params = { 
	  allowfullscreen: "true"
   }              
   var attributes = {}
   swfobject.embedSWF("http://yoursite.com/swf/slideshowpro.swf", "flashcontent", "550", "400", "9.0.0", false, flashvars, params, attributes);
</script>

Step four: 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.