According to the official Adobe docs, Captivate provides the following controls:
- go previous slide
- go to next slide
- resume (play/un-pause)
- rewind to beginning and stop
- rewind to beginning and play
- go to a specific frame
- display the information window
I’ve determined there are additional unpublished parameters that can be accessed. A complete list (including the variable name) is located here.
Build a simple example
Step 1: Create the HTML file and embed the Captivate SWF
For this example, we’ll use bare-bones HTML, with SWFObject handling the embed:
Make sure the SWF you’re embedding is a SWF created using Adobe Captivate, and was published without the “border” property in the Skin settings. My example SWF is named “captivate.swf”; you should replace “captivate.swf” with your Captivate SWF’s filename.
rdcmndRewindAndPlay), so give the link the text “Click here to rewind and play.” Since this is a fake link, the href value should just contain a hash (
<body> <p><a href="#">Click here to rewind and play</a></p> <div id="captivateSample"></div> </body>Code language: HTML, XML (xml)
Add a corresponding
onclick event to the link in the
<body> <p><a href="#" onclick="rewindAndPlay(); return false;">Click here to rewind and play</a></p> <div id="captivateSample"></div> </body>Code language: HTML, XML (xml)
Save and test your page; the link should control the Captivate SWF.
How it works
When we embedded the SWF, we assigned it an ID of “captivateSample”. This means we can use
Note: You may find old documentation warning you not to use document.getElementById to get a SWF; in my testing, document.getElementById works fine in all major browsers, including Firefox 2 & 3 (Mac & PC), Internet Explorer 6 & 7, Safari 2, Safari 3 (Mac & PC), and Opera 9.5 (Mac). Also note that I used SWFObject to embed the SWFs in all of my tests, which could have an impact on test results.
In this example, we’re setting the value of the Captivate variable
1 (boolean, meaning true).
The onclick event
If you’re not familiar with onclick events, all that’s happening is the function
rewindAndPlay(); is being invoked when the link gets clicked. The extra code
return false; simply instructs the browser to ignore whatever is contained in the
href attribute, effectively preventing the browser from following the link. Remember to include the semicolons!
<p><a href="#" onclick="rewindAndPlay(); return false;">Click here to rewind and play</a></p>Code language: HTML, XML (xml)
When a Captivate file is published with the border option enabled, Captivate is actually publishing two SWFs: a skin SWF and the Captivate SWF itself. The skin SWF loads the Captivate SWF into a movieclip named cpSkinLoader_mc. This means we need to dig one level deeper to get to the Captivate SWF. This can be accomplished by appending the prefix
cpSkinLoader_mc to the variable name. Here’s an example:
Expanding the functionality
My older examples (example one, example two) used a custom function that was designed to make controlling Captivate easier. This demonstrated how the developer could create shortcuts that prevented writing the same code over and over, while also providing a way to use simpler syntax, such as ‘pause’ instead of ‘rdcmndPause’. Here’s a really quick overview of my example function:
This function accepts three parameters:
swfName (the ID of the Captivate SWF, which is assigned when embedding the SWF),
command (what we’re telling the SWF to do), and
usesSkin (boolean indicating whether or not this Captivate file uses a skin).
If the SWF doesn’t use a skin:
<a href="#" onclick="return control('captivateSample', 'pause');">Pause</a>Code language: HTML, XML (xml)
If the SWF does use a skin:
<a href="#" onclick="return control('captivateSample', 'pause', true);">Pause</a>Code language: HTML, XML (xml)
As I just mentioned, this function allows us to use simpler command names. A switch statement is used to match the simpler command name with the official command name. SetVariable does its thing, then the function returns false, which prevents the browser from following the link in the href attribute.
Everything but the kitchen sink