Most of us, sometime or the other, have had a need to manipulate the HTML page that contains the Captivate SWF file. The requirement may have been to display a custom message or change an image in the HTML page on click of a button inside the SWF. This can be achieved by sending data to the HTML file through JavaScript. The possibilities of combining Captivate and JavaScript really excited me and thought of sharing a few examples with you through this post. To get a feel of what I’m talking about, click the buttons in the SWF below and see how the message text and banner image in HTML changes. Remember, the text and image are not part of the SWF…they are outside the SWF, on the HTML page.

What am I trying to do?

In this example, I have a project with four slides that contain navigation buttons in them. These buttons let you not only navigate between the slides, but also ‘secretly’ change the message text and the banner image when you click them. Since I need two actions to be executed upon the click of a button, I have used Advanced Actions to combine the two actions — ‘Execute JavaScript’ to send the data to the HTML file and the other action to navigate to a specific slide in the project.

For example, when we click ‘Adobe Captivate’ button, a JavaScript gets executed which says button_clicked(‘Rapid eLearning Authoring’);changeImageSourceTo(‘captivate.png’). What does this mean? It means, there is a JavaScript function in the HTML called ‘button_clicked’ and we are sending the value ‘Rapid eLearning Authoring’ and another function ‘changeImageSourceTo’ and we are sending the value ‘captivate.png’. Watch the demonstration below to see how we can achieve this.

What changes should I make in the HTML file?

Now that we have our SWF ready, we will see how we can modify the HTML file for the magic to work. We need to do four steps here.

• First, add container to display the message text.
• Second, add JavaScript to get the message text data sent by SWF.
• Third, add the container to display the image
• Fourth is to add JavaScript to get the image data sent by SWF.

Of course, there are sample files attached here which contains additional CSS to make the page look good 🙂 Watch the demonstration to see how to achieve this. I’ve used Adobe Dreamweaver as HTML editor but you are free to use anything including just the Notepad. While demonstrating, I’ve used a sample code file to make the typing process faster, even that is available in the download folder.

Download the sample files here. They contain the following files.

js_example.cptx – Captivate 5.5 project file
sample_code.html – Sample Code file if you don’t want to type it again.
js_example.html – HTML file displaying SWF, Banner and Message Text
Supporting files (js_example.swf/standard.js)
Image files (captivate.jpg/default.jpg/presenter.jpg/els.jpg)

Hope you enjoyed this. Please let me know your thoughts.