Lab: Adobe Captivate
Captivate Controller JavaScript Utility
Read the journal entry introducing the Captivate Controller JavaScript utility.
Examples
Download
The JavaScript file can be downloaded from the downloads page. The utility is currently at version 1.0 and weighs 1.8kb.
The utility function
The pipwerks.captivate.control utility takes the following arguments, wraped in a JavaScript object.
| Argument name | Type | Notes | Required? |
|---|---|---|---|
| id | string | The ID of the <object> or <embed> element containing your Captivate SWF. | yes |
| command | string | The command you'd like to invoke. See list of available commands at the bottom of this page. | yes |
| usesSkin | boolean | Defaults to false. | Only when Captivate SWF is published with a skin file. |
| frameNumber | number | Only when gotoFrameAndStop or gotoFrameAndPlay is used. | |
| slideNumber | number | Only when gotoSlideAndStop or gotoSlideAndPlay is used. |
Syntax
There are many ways to write JavaScript. Here are two ways to specify the arguments when using pipwerks.captivate.control.
Inline object syntax
//Example for Captivate SWF using a skin
pipwerks.captivate.control({
id: "captivateSample",
usesSkin: true,
command: "gotoSlideAndPlay",
slideNumber: 7
});
External object syntax
//Example for Captivate SWF using a skin
var mysettings = {};
mysettings.id = "captivateSample";
mysettings.usesSkin = true;
mysettings.command = "gotoSlideAndPlay";
mysettings.slideNumber = 7;
pipwerks.captivate.control(mySettings);
Simple text link example
Here is a simple example of how you can create text-based links that can control a Captivate SWF.
1. Add the pipwerks.captivate.control.js to the <head> of your document.
<script type="text/javascript" src="pipwerks.captivate.control.js"></script>
2. Add an empty JavaScript onclick event to your code where appropriate. For this example, we'll just use a plain text link. Note that "return false" prevents the browser from following the dummy text link ("#").
<a href="#" onclick="return false;">Click here to pause the SWF</a>
3. Add the pipwerks.captivate.control statement to the onclick event, passing the ID of the embedded Captivate SWF and the name of the command you wish to use. If your Captivate file uses a skin, be sure to set usesSkin to true. As mentioned in the syntax section, there are multiple ways to handle this code; the first method is completely inline code, which can be very long and dificult to read.
<a href="#" onclick="pipwerks.captivate.control({id: "captivateSample", command: 'pause'}); return false;">Click here to pause the SWF</a>
If you plan to use multiple commands, you might want to wrap the pipwerks.captivate.control function in a smaller function contained in the <head> of the document, like so:
<script type="text/javascript">
function control(cmnd, num){
pipwerks.captivate.control({
id: "captivateSample",
usesSkin: false,
command: cmnd,
frameNumber: num,
slideNumber: num
});
return false;
}
</script>
This wrapper function has several benefits: it contains a 'return false' statement, allowing you to call the Captivate controller from links much more easily, and makes your code easier to maintain by eliminating repetition -- the ID of your SWF and the usesSkin boolean are specified just once. You can now use something as simple as:
<a href="#" onclick="return control('pause');">Click here to pause the SWF</a>
<a href="#" onclick="return control('gotoSlideAndPlay', 5);">Click here to go to slide 5</a>
See the examples (linked above) to see this code in action.
Available commands
| Command name | Original rdcmnd equivalent | Arguments |
|---|---|---|
| pause | rdcmndPause = 1 | none |
| resume | rdcmndResume = 1 | none |
| next | rdcmndNextSlide = 1 | none |
| previous | rdcmndPrevious = 1 | none |
| rewindAndStop | rdcmndRewindAndStop = 1 | none |
| rewindAndPlay | rdcmndRewindAndPlay = 1 | none |
| gotoSlideAndStop | rdcmndGotoSlide = n | slide number |
| gotoSlideAndPlay | rdcmndGotoSlide = n & rdcmndResume = 1 | slide number |
| gotoFrameAndStop | rdcmndGotoFrame = n | frame number |
| gotoFrameAndPlay | rdcmndPause = 1 & rdcmndGotoFrameAndResume = n | frame number |
| mute | rdcmndMute = 1 | none |
| unmute | rdcmndMute = 0 | none |
| showCaptions | rdcmndCC = 1 | none |
| hideCaptions | rdcmndCC = 0 | none |
| muteWithCaptions | rdcmndMute = 1 & rdcmndCC = 1 | none |
| unmuteWithCaptions | rdcmndMute = 0 & rdcmndCC = 0 | none |
| hidePlaybar | rdcmndHidePlaybar = 1 | none |
| showPlaybar (note: doesn't seem to work with JavaScript) |
rdcmndHidePlaybar = 0 | none |
| exit (note: doesn't seem to work with JavaScript) |
rdcmndExit = 1 | none |
| info | rdcmndInfo = 1 | none |