KB121: 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.




Copyright © 2016 Media Semantics, Inc. All rights reserved.
Comments? Write webmaster@mediasemantics.com. See also our privacy policy.

Image 01