SWF speaks to HTML page… through JavaScript!

December 19, 2011
Followers: 0 people
9

SWF speaks to HTML page… through JavaScript!

Followers: 0 people
December 19, 2011

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.

Comments (9)
2013-09-16 21:20:00
2013-09-16 21:20:00

Missing presentation above

Like
2012-05-18 01:49:00
2012-05-18 01:49:00

Does anyone know something like this that can replace swf’s instead of jpg’s?

Like
(1)
>
Anonymous
's comment
2012-05-28 09:26:00
2012-05-28 09:26:00
>
Anonymous
's comment

It should replace it if it is not the parent swf. Are you trying to replace some other SWF in the page?

Like
2012-04-30 00:26:00
2012-04-30 00:26:00

This is great. Thanks!

that typing sound effect is so bad though. captivate should do something about it. makes the software seem old school

Like
2012-02-08 01:49:00
2012-02-08 01:49:00

This is great information and a real help. Can we have a copy of the cptx file so that we can follow the next-to-last video?

Like
2012-01-08 10:11:00
2012-01-08 10:11:00

this is freaking cool has anyone used this? it calls javascript without writing any.
http://code.google.com/p/loungejs/

Like
2011-12-19 16:34:00
2011-12-19 16:34:00

Awesome Post. I was looking for Delhi Properties and finally landed on this post.

Like
2011-12-19 14:35:00
2011-12-19 14:35:00

very nice post…………I like it.

Like
2011-12-19 14:05:51
2011-12-19 14:05:51

[…] Read this article: SWF speaks to HTML page… through JavaScript! […]

Like
Add your comment