KB115: Adding a character to Trivantis Lectora

Character Builder projects can easily be added to Trivantis Lectora.

To add a character to a page, use Add > Object > Animation. In the resulting dialog choose Import, then From File.... Navigate to My Documents > Character Builder Projects, then to your project directory, and then the Output subdirectory. Select your .swf file (you should use the Single File Flash output mode in Character Builder).

NOTE: If you change your Character Builder project (and rerender it), then you must also update the object in Lectora. To do this, click on the Import button again and select the same file. When prompted, select the Replace button.

When you render your project, Lectora will create an HTML "div" element containing the Flash animation. In many cases you will want your character to float on top of existing content. By default the background of your Flash file will be white, and this will obscure your content, however you can easily make the background transparent.

To make the background transparent, you must set the wmode parameter to transparent, on the Parameters tab of the object, as shown above. Note that you may also want to set the Always on Top option in the General tab if you find your character appearing behind text or graphics in the final output.

NOTE: The preview mode will NOT show transparency correctly, but the published title will, so please be sure to Publish your title in order to verify that the transparency is working correctly.

You can use the animation object's Transition tab to specify a transition on the "div" element that contains the Flash, to make the character fly in, for example. If you use a transition then you may want to specify a Pause at the beginning of your script, so that the character does not begin speaking until after the transition is complete. (Exit transitions are more tricky since Lectora does not know when your Flash animation has ended. You can get around this with the Straight Flash output mode in Character Builder, however this limits your project to a single message and no interactivity.)

If you find yourself creating several Character Builder projects for each Lectora project, then here is a useful technique. You can create a single Character Builder project with multiple messages, for example one message per Lectora page. You can then insert the same Flash file on each page and then specify which message to play as an initialization parameter. The flashvars parameter specifies a list of initial flash variable values. The two key flash variables that control the animations are Focus (the name of the current message), and Presenting (which determines whether the character is presenting or "idle"). For example if you had a message called "Welcome" in Character Builder then you could trigger it by setting flashvars to the string "Focus=Welcome", as follows:

If you do not specify an initial focus then the first message in the Character Builder project is played.

You can also use Lectora Actions to control the Character Builder animation. For example you can create a Play button in Lectora and set its "on click" action to set the Presenting variable to true:

You may experience a security dialog when previewing the content, but this should disappear when publishing to a web location. Of course you could also create a Play (or Stop, or Mute) button in Character Builder, but it would then need to reside in the flash animation itself.

Finally, note that you can use the Get URL action to have the character control aspects of the Lectora content. To do this, use a URL prefixed with "javascript:". A complete list of JavaScript commands is available from the Trivantis support center. For example the URL javascript:trivNextPage() causes Lectora to advance to the next page, and javascript:objectname.actionShow() can be used to reveal an object. However if you want your character to have very precise control over your visuals then you might consider moving them into the Character Builder project, since this will make it easier to synchronize the character's delivery with the visuals using Character Builder actions such as Look, Point, and Show.

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

Image 01