This walkthrough will show you how to setup SlideShowPro for Flash, and the HTML document embedding your movie, so that hyperlinks in your HTML can be used to interact with SlideShowPro for Flash. By the end of the walkthrough we’ll create one HTML link that calls SlideShowPro for Flash’s toggleDisplayMode() method to control playback.

Step One: Create FLA

Create a new FLA, and drag a new instance of SlideShowPro for Flash onto the Stage. Position it accordingly, and give it an instance name. For the purposes of this walkthrough we’ll name it my_ssp.

Step Two: Add ActionScript to FLA

Create a new timeline layer above the one containing SlideShowPro and click in the first empty keyframe. If using the ActionScript 2 version of SlideShowPro, add the following:

import flash.external.*;
ExternalInterface.addCallback("sspToggleDisplayMode", null, sspToggleDisplayMode);
function sspToggleDisplayMode() {
   my_ssp.toggleDisplayMode();
}

If using the ActionScript 3 version of SlideShowPro, add this instead:

import flash.external.*;
ExternalInterface.addCallback("sspToggleDisplayMode", sspToggleDisplayMode);
function sspToggleDisplayMode(value:String) {
   my_ssp.toggleDisplayMode(null);
}

This little bit of ActionScript will setup your SWF so that Javascript can communicate with it.

Step Three: Add JavaScript to HTML

In the HTML document embedding your SWF, add the following anywhere before the closing </head> element:

<script type="text/javascript">
   function sspToggleDisplayMode() {
      thisMovie("ssp").sspToggleDisplayMode(null);
   }
   function thisMovie(movieName) {
      if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName]
      } else {
         return document[movieName]
      }
   }
</script>

This is what we'll call from our hyperlinks to communicate with the SWF that has been assigned an ID of ssp. Flash automatically creates the ID for you as part of your player embed code using the title of your SWF (minus the ".swf"). If you're using the code Flash publishes to embed your movie, check to see what this ID is. Or if you're using a third party embedding script (like SWFObject), name the ID yourself. Doesn't matter what ID is assigned, as long as Javascript knows what it is.

Note: If you do choose to use SWFObject you will need to modify the thisMovie function to this:

function thisMovie(movieName) {
   return swfobject.getObjectById(movieName);
}

Step Four: Add hyperlink

Now for the final piece of the puzzle: a hyperlink. Anywhere in your HTML document, add the following:

<a href="#" title="Toggle Display Mode" onclick="sspToggleDisplayMode();">
   Toggle Display Mode
</a>

Step Five: Test it out

Open the HTML document in your browser, wait for an album to load in SlideShowPro for Flash, then click on the hyperlink. You should now be controlling playback from your text link!

Troubleshooting

Link not working? Check the ID of your SWF against the one you entered in the Javascript. They must match exactly. Check to make sure Javascript is turned on in your browser. Hyperlinking like this only works in Flash Player 8 or higher. Check to make sure you're publishing to at least that.

Demo

A working demo of this walkthrough is also available on the SlideShowPro for Flash download page.