KB101: Integrating Character Builder with Adobe Captivate

These notes have been revised for Captivate 9.

There are three different ways to embed Character Builder animations into Captivate: as a Flash Animation, as an HTML5 Animation, or as a Widget. The three types of insertions are useful in different situations.

Insertion as a Flash Animation works with any version of Captivate, but does not support the HTML format - only the Flash format is supported, which means you need to be using Publish to Computer and not Publish to Devices. It is simple to use and allows the character animation to be locked to the Captivate timeline.

Insertion as an HTML5 Animation works with Captivate 8 and higher, but does not support the Flash format - only the HTML5 output format is supported for publishing in Captivate.

Insertion as a Widget lets you insert characters that appear to have a life of their own, i.e. they "idle", and can be triggered to play one or more of your pre-built messages based on user actions. Widgets contain both Flash and HTML5 variants, and can work in either the Flash or HTML5 Captivate output formats.

Insertion as a Flash Animation

To create a Flash SWF file that can be inserted as a Flash Animation, you create a new Character Builder project with the Flash Animation output format, and with the correct Frame Rate.

Both options are available on the Project panel. You can quickly create a project with the correct settings using File > New Project, selecting the Message type, and then on the next page of the wizard, the Flash Animation configuration.

The Frame Rate should be set to match that of Captivate, which is normally 30 frames per second. If the frame rate does not match the frame rate in Captivate, then your animation may play too fast and get cut off early.

After you Render to Flash from the Character Builder toolbar, use the Output button to view a list of output files. You can then drag the Flash file from the output directory onto your Captivate slide. The Captivate timeline for the slide should automatically be extended to match the duration of your animation. You can also use Captivate's Media > Animation... command, then navigate to the Output directory of your Character Builder project, which is normally under Documents/Character Builder Projects.

When you import a flash movie as an animation, you will normally want to check the Synchronize with Project checkbox, so the user can stop, restart, or scrub backward and forward in Captivate and the character will be updated accordingly.

If you update your movie in Character Builder, you will need to re-render it to Flash, and then right click on the animation in Captivate and select Update. In many cases you will create several different Character Builder movies for integration into a single Captivate project. To do this you can either create multiple Character Builder projects (one per output movie), or you can create a single Character Builder project file with multiple presentations or even multiple scenes, then disable all but one presentation or scene using the Disable for Render and Enable for Render commands located on the right-click (context) menu on the elements in Outline view. By enabling only what you need you can quickly render a single item at a time.

Your stage will normally be small - just large enough to contain the character and any arm actions it might use. You can include a background image, but by default the Character Builder output has a transparent background. Of course the character need not appear on each Captivate slide, or it may appear in a different location from one slide to the next. If you use it to create a software simulation, then Captivate will create many slides, frequently of very short duration. If you want a character on multiple Captivate slides, then you can either create a new Character Builder project for each slide, or you can tell Captivate to have the animation last for all remaining slides with the Timing tab's Display for Rest of Project setting.

Note that while Captivate has a growing number of options for dealing with audio, you always want a character's voice to be created within Character Builder, so that the character can lipsync the audio properly. If you already have audio files in your Captivate project, then you may be able to recover them as .wav files that are useable by Character Builder when you export your Captivate project. Sadly, it is not possible to use Text to Speech engines that come with Captivate 5 to create audio for Character Builder, nor can the Character Builder's Text to Speech addons create raw audio files for use in Captivate. Note also that Captivate's "Paul" and "Kate" voices are a lower quality voice (they have a smaller phonetic database) than the versions of Paul and Kate sold for use with the Character Builder.

Insertion as an HTML5 Animation

To create a .zip file that can be inserted as an HTML5 Animation, create a new Character Builder project with the HTML5 App output format, and with the correct Frame Rate.

After you Render to HTML5, press the Output icon in the toolbar to see the resulting output. Select all files, right click on them, and select Send to > Compressed (zipped) folder. Name the zip file the same name as your project - for example if your project is named Project1, then the zip file should be Project1.zip.

Next, use Captivate's Media > HTML5 Animation... command, then navigate to the Output directory of your Character Builder project, and select the .zip file.

If you see scrollbars around your character, you should extend the size of the animation to be equal or larger than the size of the Character Builder project.

Note that HTML5 animation objects do not have a Synchronize with Project option - the animation always triggers at the beginning of the slide. Also, as with all HTML5 animations, once the animation begins, it won't end until it comes to a natural stop. Pressing the playbar stop or pause button will not stop an HTML5 animation. As a result, HTML5 animations may be best suited for short messages, such as an introduction or an encouragement. Longer explanations might be done in the same voice, but without the character visible, using Captivate's integrated audio capabilities. As long as the same voice is used, a character need only appear on some slides in order for the user to understand that the voice belongs to the character.

If you change your Character Builder project, you will need to republish it in Character Builder, delete and re-create the zip file, then right-click on the animation in Captivate and select Update.

Insertion as a Widget

NOTE: a bug in Character Builder 5.4.3 causes Character Builder widgets to not appear when publishing to HTML5. The problem is fixed in Character Builder version 5.4.4.

In Captivate, an "interaction" is an event that causes the Captivate timeline to stop and wait for user input. An interaction can be as simple as a Continue button. With the timeline paused, you can run a complete, self-contained Character Builder app, published as a widget. This app might use buttons, slides, etc. to provide a complete experience. The character may remind the user to press Continue when they are done, to return control to the Captivate content.

You can also use a tighter integration. Consider a question slide in which you want the character to react differently if the user answers correctly or incorrectly. You can use the Character Builder to create a very minimal Character Builder app that just acts like a "puppet" that can be triggered to deliver different messages using Captivate actions.

To insert a character as a Captivate Widget, you will first create a Character Builder project containing one or more messages - one for each message the character will need to deliver. You can create a new project using File > New Project, and the Message Project type, but this time you can choose Simple Message. Then use the Output Type dropdown on the Project panel to specify Widget as your Output format.

Next, insert your widget into Captivate using the Insert > Widget... command. When the file chooser dialog comes up, navigate back to your Character Builder Projects folder and into your project's Output folder, where you will see your .wdgt file. Unlike some widgets, your Character Builder widget will not have any parameters. If you want to change your message or add new messages, you will need to go back to Character Builder, make your changes, republish them, then re-insert your updated widget into Captivate.

Before you can trigger a message, you will need to add a new user variable called msPlay. To do this, select Project > Variables... in Adobe Captivate. Press the Add New button, then enter msPlay for the Name, and finally, press Save.

Next, for each message in your project, you will want to create an Advanced Action to trigger that message. Select Project > Advanced Actions... and use a single Assign action to assign the name of your message to your new msPlay variable.

When inserted as a widget, the Character Builder-generated widget will monitor the value of the 'msPlay' variable - if it gets set to a non empty value then it will immediately clear the value and begin playing that message. By default Builder uses names of the form "Message N", but you can rename them to be more meaningful, such as "Correct", or "Hint 1".

Whenever you want to trigger a message, you can invoke your new action. To try this out, add a Continue button to pause the timeline. Then add a second Button object to your Captivate slide. For the action, choose Execute Advanced Actions and select your new action.

Captivate will run to the Continue button, then pause playback until Continue is pressed. While paused, each time you press your button, Message 2 will be triggered.

You can trigger a message wherever Captivate allows you to invoke an action. For example you can use a slide's On Enter action to trigger a message. You can even clear Initially Presenting in your Character Builder project and then add messages for use across several different slides. You could then insert the same widget file on each slide, but use Captivate's slide On Enter action to choose which opening message to play on each slide. Similarly, when creating a multiple-choice question slide in Captivate, you can assign actions for the successful and unsuccessful completion of a slide.

As a more advanced feature, Character Builder scripts can also control Captivate through the External Command action. Specifically, when embedded in Captivate as a Widget, the External Command's Command field can be set to one of cpCmndPause, cpCmndResume, and cpCmndGotoSlide. The cpCmndPause and cpCmndResume commands take an argument of 1 and will stop or resume the Captivate movie. The cpCmndGotoSlide action can be used to jump to a given slide - the Args param, in this case, should be set to the slide number to jump to.

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

Image 01