Visit SlideShowPro.net  Community Forums
SlideShowPro Support Wiki
  
Flash component

How to: Control externally using HTML/JS

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

Note: This will only work if you use Flash 8 (or higher), and publish your SWF to Flash Player 8 (or higher). It will not work in Flash MX 2004 or a SWF published to Flash Player 7.

Step One: Create FLA

Create a new FLA, and drag a new instance of the SlideShowPro Player 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 the component instance 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 the component, 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 the SlideShowPro Player, 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 Player for Flash download page.

Page last modified by tdominey on February 07, 2012, at 02:18 PM
© 2011 SlideShowPro. All Rights Reserved.