KB110: Working with Articulate Storyline

This article provides tips for working with Articulate Storyline. Storyline already has built-in capabilities for using static character images. With the Character Builder you can draw users in even further, with characters that move and talk.

There are two options for embedding Character Builder output in Storyline, namely insertion as a Flash Video or as a Web Object.

A storyline project consists of several slides, and each slide contains a timeline. Typically the timeline will play to the end and stop, and the user will advance to the next slide using the Next button on the Player frame. To achieve a tight integration with Storyline you will want to import your Character Builder output as a movie that is placed on this timeline, typically occupying its entire length. This is similar to adding an audio track to a timeline. (In fact your Flash movie will typically contain an audio track.) By default your Character Builder project will have a transparent background, so your character can appear in front of other objects on the slide. You can make objects appear or disappear in a manner that is synchronized with your presentation by adjusting where they appear on the timeline.

If, instead, you are using Character Builder's capabilities to create a complete Flash or HTML5 Applet, then you can embed the entire applet as a Web Object within a slide. The slide's timeline may be very short, and the user may not even be aware of the timeline, as the timeline control may not be shown on the Storyline player. When the user is done interacting with your web object, they would typically press the Next button to continue.

Note that Storyline also supports HTML5 and iPad viewer formats, but neither of these formats supports Flash SWF Videos. All Storyline formats support Web Objects, but you must be sure to set your Character Builder output to HTML5 to create your Web Object, when publishing to these formats.

Insertion as a Flash Video

To create a Flash SWF file that integrates into the Storyline timeline, you must create a new Character Builder project with the Flash Animation output format. Be sure to match the frame rate of Storyline, which is 30 fps.

You can insert the resulting file using Storyline's Insert Video button OR the Insert Flash button - either will work.

Note that the Storyline documentation incorrectly states that there is a difference between inserting your Flash SWF file as a Video or a Flash Object. In fact, both ways of inserting the video result in a flash object that is synchronized with the timeline, and both require that you create your SWF files with the Flash Animation setting.

The animation will stretch your timeline to match the length of your animation.

While it is simplest to synchronize your video with the timeline, you can also use the Properties ribbon to tell the video to NOT start automatically. This will allow you to use triggers to start or stop the video.

Insertion as a Web Object

You can also use the Character Builder's Flash Applet or HTML5 Applet output modes to create a character applet. This could be a simple character interaction or a complete multi-slide presentation. After rendering, use the following steps to insert the output into Storyline:

1. In the Output subdirectory of your project, rename the html file to index.html

2. In Storyline, press the Insert Web Object button. Press the folder icon, and navigate to the Output folder

3. Use the defaults and press Ok.

You can resize the bounding rectangle of the web object. To avoid scrollbars you will need to make it larger than the size of your Character Builder scene. The web object will load after a slight delay.

Your web object may not load correctly when you view it directly from a file system URL. Due to security restrictions, you may need to view it through an http url, such as http://localhost, or by deploying it to your website.

In many cases your Builder project will consist of a single auto-starting character animation, such as a welcoming message or an explanation. In this case, no synchronization with Storyline is necessary - the animation simply starts when the slide loads.

It is also possible to have Storyline control your published Character Builder project. For example you can have a Builder project with several different messages, and you can play one message or another based on Storyline triggers.

For example you can create a Storyline button, and use the Triggers panel to add a JavaScript trigger:

Let's say you wanted this button to trigger a message named "Message 2" in your Builder project. The JavaScript for this in the Builder-generated sample html file would be

msGotoAndStart('Movie1','Message 2')

But here we are running the file (renamed to index.html) as a web object, that is to say, in an HTML iframe inside your Captivate-generated content. Because communication between different HTML pages is carefully controlled, you need to use the following code in your JavaScript trigger to send the command to the Builder-generated content.

msGotoAndStart("Message 2");
function msGotoAndStart(msg) {
  var action = "msGotoAndStart('Movie1','" + msg + "')";
  // broadcast action to all web objects
  var a = document.getElementsByClassName("webobject");
  for (var i = 0; i < a.length; i++) 
    a[i].firstChild.contentWindow.postMessage('{"action":"' + action + '"}', "*");
}

This works because, as of version 5.4.9, the Builder output includes a message listener, and messages with the action field will result in that field being evaluated. This article describes how you can add functions to a custom .js file that you link to in your story.html file, so you don't need to copy the msGotoAndStart() cover function each time you use it in a JavaScript trigger.

You can also listen to events from your Builder project. To do so, you need to add a JavaScript trigger for when your slide starts:

For the JavaScript, you can use:

window.addEventListener('message', function(message) {
 data = JSON.parse(message.data); 
 alert(data.command + " " + data.args);
})

Now, in your Character Builder project, you can insert an External Command action (), with arbitrary Command and Args parameters. When this action is encountered in a message, an event is posted to your Storyline trigger. You can replace the alert() function with arbitrary code to deal with the event, but in practice, just about the only actions available to JavaScript in Storyline is to set a Storyline variable. Assuming you have declared a Storyline variable called "Slide1", the following JavaScript will set Slide1 to the Args value passed out of Character Builder.

GetPlayer().SetVar("Slide1", data.args);

This is fine for passing back a score for example, but to actually trigger changes in Storyline, such as advancing the slideshow, you need to use a second trigger that triggers when your variable has changed.