Interacting with Captivate 5.5 using Flash AS3

Adobe Captivate is a great eLearning development program, but there are some things it can’t do.  In the past few years, they have made substantial progress in expanding the possibilities by including widgets.  Widgets can be purchased (sometimes free), downloaded and used within Captivate to do something more powerful or interactive.  However, if you are working in a corporate or restricted environment, downloading and installing widgets can sometimes range from a policy violation to being totally blocked.  In those situations, it is helpful to know a bit about Flash and write your own Flash files that can be included in Captivate (Insert >> Animation).  While they don’t have the same flexibility as true widgets, these mini-swfs can do things Captivate can’t on it’s own (and get you started with widget development, if that’s the route you want to go. 

Nested?

A swf that you include in a Captivate module as an animation works similarly to a nested movie clip.  Think of the Captivate timeline as the United States.  The state is a holder movieclip, and the city is the swf you have created in Flash.  As such, interacting with the Captivate timeline requires going two levels into the parent – Moveclip(parent.parent).

What can I do there?

Short answer – anything.  Captivate outputs Flash modules.  As such, anything you can do in Flash, you can pretty much do in Captivate.  If you want to do typical Captivate commands like advancing slides or pausing the playhead, check out this post from CPGuru that details all the system variables you can manipulate (like rdcmdPause and rdcmdNextSlide).

Those commands are actually variables, so from your Flash timeline, you need to move two levels up and set them to 1:

Movieclip(parent.parent).rdcmdNextSlide = 1;

***Update***
For Captivate 5.5 and Captivate 6, the following code works, as opposed to the parent.parent method: MovieClip(this.parent.root).rdcmndNextSlide = 1;

In addition to setting the Captivate system variables and triggers, you can also manipulate variables that were originally established in Captivate.  For example, if you have a Flash swf on one page, but want to display different subsequent slides based on the score earned, you could do the following:

Create a passedScore variable in Captivate

In Flash, at the conclusion of your interaction, set:
Movieclip(parent.parent).passedScore = Math.round(intCorrect*100/intTotal);
Captivate 5.5/6: MovieClip(this.parent.root).passedScore = Math.round(intCorrect*100/intTotal);

In Captivate, work with the variable through actions or display it using $$passedScore$$.

Quick example

Recently, I leverages Flash AS3 commands to manipulate a Captivate module when a colleague with no Flash experience needed to create a module that included a drag and drop interaction.  I build the Flash interaction to her design specifications.  Once the learner completes the interaction, the score is passed back to the Captivate module and a button is shown in the Flash module.  Clicking on the button triggers the nextSlide command in Captivate and advances the module that the learner can’t otherwise do.

While it’s a simple use, it allowed for easy division of work and enabled us to provide the module desired to our customer.  We were able to include interactions that aren’t available in Captivate off the shelf.  Drag and drop interactions are fairly straightforward to build in Flash, but creating the remainder of the 30-page module is a task much more rapidly completed in Captivate.  Leveraging the strengths of the two applications allowed us to create the module as quickly as possible.

Size Matters: Resizing Captivate Output

Have you ever opened a module only to be met with a vertical (or worse, horizontal) scrollbar?  While scrolling is acceptable if you are reading text on a screen or navigating a PDF, when it comes to interactive content, it is not. 

You know how obnoxious it is as a learner, so why not design for it when you start your module?  The process is simple enough: figure out what resolution people use who access your module and design for the lowest common denominator.  Unfortunately, that would leave you with a stage size of 800x600 (probably less if you have to deal with areas and frames that incorporate the SCORM functionality) and plenty of learners using nearly quadruple that resolution, leaving your content as a tiny quarter window in a sea of white.

Fortunately, there is a way to accommodate both the typical resolution as well as those smaller ones.  The key is creating an html page that holds a scalable swf object.  That way, if someone opens your content with a smaller resolution, they will see it scaled for their viewing area.  Unfortunately, swf objects leveraging percentage size will also scale your content up for people using a larger resolution.  Herein lies the problem: scaling up the content causes raster issues, leaving your content looking jagged.

Essentially, you want to create a page that will scale the content down, but not scale the content up.  People with large resolution monitors will have already adapted to looking at content that doesn’t fully utilize their available space, so it is a much less problematic issue than having content too large for small resolutions and requiring scroll bars. 

While the information below can be included into a single html file, breaking it out into the following files makes things simpler to understand.  When you first publish your Captivate module (with the correct SCORM settings, if necessary), you will have the file needed for the large resolution version.  You will make modifications to that file to create the small resolution version.  Finally, you will make a simple javascript html file that will serve as the landing and decision page for the module. 

Module_decision.htm

This is the simplest of the files needed for this process.  This file serves as the landing page, capturing the screen resolution and deciding which version of the module html to serve.  The height and width you select should be based on the typical setup on your learners’ machines.  Additionally, your original Captivate resolution settings should have been determined by these same numbers in order to create a full-resolution version that is suitable for most learners.

In the <body>, enter the following code:

<SCRIPT language="JavaScript">

if ((screen.width>=1024) && (screen.height>=768))
{
 window.location="module_full.htm";
}
else
{
  window.location="module_small.htm";
}
</SCRIPT>

It’s really that simple!  The code above will make the decision, based on the viewer’s resolution, to serve either the _full or the _small version of the module.

Module_full.htm

This file itself is pretty complex.  However, the good news is that it is totally created by Captivate.  For this file, all you do it rename the Captivate-generated file to _full.htm so that it isn’t renamed when Captivate re-publishes (because you know you are going to have to publish numerous times throughout the process).

Modue_small.htm

For this file, you start with the Module_full.htm file and duplicate it.  There are then two areas that need modification: the <head> requires a simple sizing addition and the <body> requires an object size modification.

In the <head>, add the following code:

html, body {
          height: 100%;
}

This code wasn’t previously required (think IE7), however with modern browsers, they don’t always assume that the stage has the availability to use the whole browser window.  If you complete the rest of the code without this, it will create a tiny module window at the top of the page – you’ll know you need to add something to make the percentages work.

In the <body>, you are modifying the code created by Captivate to hold the SWFObject.  To find this portion of the code (it’s near the bottom in Captivate 5.5), you can search for “SWFObject” or look for some code that includes resolutions that are the same dimensions you set up in Captivate (or your imported PowerPoint).

You will make the following modifications:
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "960", "720", "9.0.28", "#CCCCCC");
becomes
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "90%", "90%", "9.0.28", "#CCCCCC");

Basically, all you are doing is replacing the pixel size with percentages.  In the above example, 90% was used because the page used in the LMS contains frames that take up a portion of the screen.  Additionally, edge-to-edge content can sometimes appear distracting if it is uncomfortably close to the edge of the screen.                               

Additional Thoughts

A couple of notes about these three files:

1.) You will have to include them into your zipped package each time as they are essentially overwriting the htm files that are automatically created.  To do this, be sure they use unique file names so Captivate doesn’t automatically overwrite them as it tends to do to files in the same folder used for publication.

2.) If your LMS doesn’t recognize SCORM commands from non-launch pages, you’ll have to combine the above information into a single file.  That shouldn’t be too problematic as you’ll just include the stage scaling info in the head and include the swf object twice at both points of the decision code as opposed to the web pages you elected to load above.

Admittedly, this is a bit more work on the developer’s end.  However, it provides a substantially better experience for the learner.  A learner having a negative technical experience will not be mentally available to digest the content from the module you labored over for so long.