Reverse engineering Captivate for HTML5 widgets
10 years ago
Adobe Captivate is pretty horrible, especially the HTML5 output. I feel like I’m banging my head against a wall every time I use it. The HTML5 output is riddled with bugs and most of the features simply don’t work. If there is one upside to the HTML5 publishing though (and there aren’t many), it’s the ability to access almost anything in the Captivate movie due to the openness of JavaScript and work around its frustrations. I thought I would document a couple issues I faced which could potentially help someone else out. If you’re trying to figure out how to create a HTML5 widget then see my post on Creating HTML5 widgets for Adobe Captivate 6/7.
Problem 1: Create a custom slide index widget
This is pretty much impossible in the Flash publish. I needed a widget that would automatically get all the slide labels and generate an index. After a bit of digging thanks to Chrome’s dev tools, I discovered that most slide information can be found in the ‘toc’ global object on main Captivate window.
Below is a snippet of code that can be used in the HTML5 widget to get all slide names:
var mainWindow = window.parent; // get captivate main window, widgets are loaded into an iframe
// get list of slides
var slides = mainWindow.toc.mainMovie.stage.slides;
// get slide labels
var i = 0, lgt = slides.length;
for (i; i < lgt; ++i){
// log all slide labels to the console, you could add them to your custom menu
console.log( mainWindow.toc.movieProperties[slides[i]].lb );
}Problem 2: Setting variables doesn’t work properly
Another bug I found in Captivate HTML5 widgets was sometimes setting a variable on the varHandle object doesn’t trigger a change in the movie, such as the cpCmndGotoSlide variable, which tells the movie to go to a particular slide. I found the following snippet to work more reliably:
// use the main movie's executeAction to set the variable
mainWindow.toc.mainMovie.executeAction("cpCmndGotoSlide = 2"]); // go to slide 3I hope someone else will find this useful.
