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 if possible. Let's get started.
Download the latest version of SWFObject (in the green "Featured Downloads" box on the right). Unzip the ZIP file, and open the swfobject folder it creates. Inside are a number of files, but we'll only need the swfobject.js file.
Open an FTP connection to your web site and create a folder named "js" at the root of your domain. Upload swfobject.js to "js". Or if you already have a folder where you store javascript files, upload it there. This way you can use it from anywhere when necessary.
Again through your FTP client, create a folder anywhere you like in your web site directory.
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.
With your slideshow content uploaded, open the HTML document you want to embed your SWF in. Be sure to use an ASCII / HTML text editor, like Notepad, Dreamweaver, TextWrangler, etc.
Add the following before the </head> element in your HTML document:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "flashcontent", "300", "120", "9.0.0");
</script>
This code is what's used to embed the SWF. We'll edit it now to suit our needs.
First, change the src value in the first line to an absolute link. It should point to where you uploaded swfobject.js in Step Two. For example:
<script type="text/javascript" src="http://mydomain.com/js/swfobject.js"></script>
Next, 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.
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>
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 six 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>
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.
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.
