Embed using Flash CS3 code

The following instructions explain how to embed a SWF published by Flash CS3 using the player embed code in the HTML document Flash published alongside your SWF. Let's get started.

Step One: Upload content

Open an FTP connection to your web site and 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 walkthrough), upload to this folder the SWF and AC_RunActiveContent.js 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 and AC_RunActiveContent.js 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 Two: Open new HTML document

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.

Step Three: Edit <head> with Javascript link

The aforementioned "AC_RunActiveContent.js" file is a Javascript file loaded by the HTML document Flash publishes when embedding the SWF, so we need to link your HTML document to it as well. Open the HTML document Flash published and look for this in the <head>:

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

Select both of these lines, copy, paste it into the <head> of the other HTML document, and modify the src value of "AC_RunActiveContent.js" with an absolute path to where you uploaded the file. For example:

<script src="http://mydomain.com/slideshow/AC_RunActiveContent.js" language="javascript"></script>

Note: If you plan on embedding more than one SWF at your site, you can upload AC_RunActiveContent.js to a separate folder (like mydomain.com/js/) then reference the same file whenever you need to repeat these instructions. The same .js file can be used over and over.

Step Four: Edit <body> with player embed code

Return to the HTML document Flash published and copy all of the code between <body> and </body>. Paste this wherever you like inside of your other HTML document.

Step Five: Edit SWF links

Now we need to edit the body code you just pasted so it points to the SWF you uploaded. Look for this in the player embed code:

<param name="movie" value="slideshow.swf" />

And a little bit after that, find this:

<embed src="slideshowpro.swf"

Edit both of these with an absolute path to the SWF in the �slideshow� folder. For example:

<param name="movie" value="http://mydomain.com/slideshow/slideshow.swf" />

<embed src="http://mydomain.com/slideshow/slideshow.swf"
      quality="best" scale="noborder"
      bgcolor="#666666" width="550" height="400" name="slideshow"
      align="middle" allowScriptAccess="sameDomain"
      type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer" />

With the non-Javascript code taken care of, look above that for a long list of Javascript code starting with AC_FL_RunContent. This is a Javascript method that's used if the browser to embed the SWF if it has Javascript enabled (which nearly all of them do). Look for the following line:

'movie', 'slideshow',

Modify this with an absolute path, but without the ".swf" file extension of your SWF. Like so:

'movie', 'http://mydomain.com/slideshow/slideshow',

Step Six: 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 Seven.

If your XML was coded with relative instead of absolute links (difference explained here) you need to make one additional modification. Add the following alongside the other existing <param> elements in your HTML document:

<param name="base" value="." />

Then add the following anywhere inside your existing <embed> element:

base="."

Your embed element should then look similar to this:

<embed base="." src="http://mydomain.com/slideshow/slideshow.swf"
      quality="best" scale="noborder"
      bgcolor="#666666" width="550" height="400" name="slideshow"
      align="middle" allowScriptAccess="sameDomain"
      type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer" />

Now we need to edit the Javascript with a base parameter. Return to the AC_FL_RunContent area you edited in Step Five (above), and before the closing parenthesis add this:

'base', '.'

Adding a base parameter with a value of "." signifies to the Flash Player that all relative links should be relative to where the SWF is, not where the HTML document is (the default setting). Without this the SWF wouldn't be able to find "images.xml" and related content.

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.

Troubleshooting

If however the slideshow doesn�t appear, go back over these instructions to ensure that you copied/modified everything correctly.

If your XML file was constructed using relative paths, and you�re linking to your SWF using a relative path from your HTML document, consider switching all your links to absolute. This includes the link to the SWF from your HTML document, the path to the XML file that SlideShowPro for Flash loads (assigned through XML File Path), as well as the image links in the XML file. More on coding your XML file with absolute links here.

If you are trying to embed your SWF in an HTML document that�s under a different domain than where your XML file and images live, then the Flash Player may be denying you from loading the content because it didn�t receive permission to do so. How do you grant permission? See the "Can't load XML data from a different domain" troubleshooting document.

Page last modified by tdominey on December 30, 2008, at 02:02 PM