December 19, 2011

SWF speaks to HTML page… through JavaScript!

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.

Posted by Vish11:52 AM
  • Pingback: SWF speaks to HTML page… through JavaScript!()

  • peter jackson

    very nice post…………I like it.

  • Raj

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

  • Jmcluvin

    this is freaking cool has anyone used this? it calls javascript without writing any.

  • Brendan Downey

    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?

  • Antsworking

    This is great. Thanks!

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

  • Mharshaw12

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

    • Vish

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

  • David Karasek

    Missing presentation above

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Dev Agrawal_1987: Any solution for import 3D models into InDesign?
    • Anil Pan: I am a programmer. What tool(s) can I use to create an ebook that will allow me to embed code (Java, python...
    • zaman seo: Adobe photoshop, Is Awesome , Nice post and wonderful photoshop brushes collection with details describe...
    • Mahmud hasan: I agree with you Allen, as I actually have continually tried to bring humor into learning things I...
    • Su: I would like to change the play button position in the middle of forward and backward button. How can i do that?
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV