Userguide

Media Semantics Character Builder Version 3.0

Copyright © 2000-2007 Media Semantics, Inc. All rights reserved. Information contained in this document is subject to change without notice, and does not represent a commitment on the part of Media Semantics. The product described in this User’s Guide is provided under the terms of a license agreement. The license agreement specifies the terms and conditions for its lawful use. No part of this document may be reproduced or transmitted in any form, or by any means, without the express written permission of Media Semantics.

Contents Getting Started ................................................................................................................................. 4 Overview...................................................................................................................................... 4 Requirements ............................................................................................................................... 4 Documentation............................................................................................................................. 4 Installation ................................................................................................................................... 5 A quick tour ................................................................................................................................. 5 Obtaining technical support ......................................................................................................... 6 Slideshow Tutorial........................................................................................................................... 7 Creating the scene........................................................................................................................ 7 Creating an opening slide ............................................................................................................ 9 Adding a presentation ................................................................................................................ 10 Understanding animation actions............................................................................................... 12 Adding a second slide ................................................................................................................ 13 Sequences and Dialogs Tutorial .................................................................................................... 15 Creating a sequence ................................................................................................................... 15 Understanding automatic actions............................................................................................... 16 Navigation with sequences ........................................................................................................ 17 Creating a dialog........................................................................................................................ 18 Quiz Tutorial.................................................................................................................................. 19 Building a multiple-choice slide ................................................................................................ 19 Prompts and reactions................................................................................................................ 19 A second interaction .................................................................................................................. 21 Web Greeter Tutorial ..................................................................................................................... 23 Adding a character to your web page ........................................................................................ 23 Triggering presentations from links........................................................................................... 23 Synchronizing events with your presentations .......................................................................... 24 When to consider dynamic flash generation.............................................................................. 25 Embedded Movie Tutorial ............................................................................................................. 26 Creating the Screen Capture ...................................................................................................... 26 Setting up your Scene ................................................................................................................ 26 Sequence considerations ............................................................................................................ 27 Movie control............................................................................................................................. 28 Flash Integration Tutorial .............................................................................................................. 29 Loading a movie into an empty clip .......................................................................................... 29 Controlling the movie from Flash.............................................................................................. 29 Monitoring the movie ................................................................................................................ 30 Database Generation Tutorial ........................................................................................................ 32 Calling the Server from WSH.................................................................................................... 32 Calling the Server from IIS........................................................................................................ 32 AIML Tutorial ............................................................................................................................... 33 Getting started............................................................................................................................ 33 Editing rules............................................................................................................................... 33 Testing your rules ...................................................................................................................... 34

2

Appendix A – XML Application Model........................................................................................ 35 Include expansion ...................................................................................................................... 35 Entity expansion ........................................................................................................................ 35 Template expansion ................................................................................................................... 36 Identifiers ................................................................................................................................... 38 File references............................................................................................................................ 38 Expressions ................................................................................................................................ 38 Constants.................................................................................................................................... 39 Operators.................................................................................................................................... 39 Functions.................................................................................................................................... 40 Variables .................................................................................................................................... 40 Visual primitives........................................................................................................................ 40 Interaction primitives................................................................................................................. 40 Coordinates and positioning ...................................................................................................... 41 Text frames ................................................................................................................................ 41 The Loader................................................................................................................................. 41 Scenes ........................................................................................................................................ 41 Slideshows ................................................................................................................................. 42 Grids .......................................................................................................................................... 42 Actions and scripts..................................................................................................................... 42 Character actions........................................................................................................................ 43 Layout actions............................................................................................................................ 43 Branching................................................................................................................................... 43 Presentations .............................................................................................................................. 43 Dialogs....................................................................................................................................... 44 Events Scripts ............................................................................................................................ 44 AIML ......................................................................................................................................... 44

3

Getting Started Overview The Character Builder lets you create animated characters that present information and interact with users, without requiring you to be a programmer or an animator. You can use the Builder to create Flash SWF files for standalone use, or for insertion into a growing number of applications that support the embedding of Flash movies. The Macromedia Flash SWF format is the de facto industry-standard for web-based animation. Flash files will run on most computers without the need for any additional downloads, due to the ubiquitous nature of Macromedia’s Flash plugin. You can also use the Builder to create video files for delivery to an even broader range of devices. AVI is the native Windows video format, and is readily imported into video editing and compression software, for deployment to DVDs and even cell-phones. At the heart of the Character Builder is an animation engine that can synthesize specially-prepared vector and bitmap art into a complete character presentation. A “character” is a library of images that the software can draw upon to produce high-level actions, such as “look”, “point”, or “say”. The Builder comes with a number of “stock” characters, and other characters can be downloaded from the Media Semantics site. You can specify content in a visual manner using the Builder’s Outline, Design, and Script Views. These Views are merely graphic representations of a rich underlying markup language, which can also be edited directly in an optional XML View. Markup tags are based on existing standards where possible, including HTML and SVG. The underlying XML tag set forms a high-level application model, and programmers can leverage this application model with the optional Character Server product to create solutions involving dynamic content. Many projects consist of the character itself, with few, if any, additional visuals. But the Character Builder is not just about Characters, but about Characters interacting with Content. Characters can control (and be controlled-by) a wide range of supporting objects, including images, movies, buttons, navigation bars, and more. Supporting visuals can be placed in Scenes and Slides. A navigation system allows end-users to navigate within the content. The Builder’s media library includes several stock objects, such as quiz buttons for use in online-learning applications, and entry panels for use in question-answering applications. Though you may begin by using the Builder purely as a means of creating character animation for use within another application, we also hope that you will grow to appreciate the rich standalone applications that can be built using these mechanisms.

Requirements The Character Builder requires Windows 98/ME, Windows 2000, or Windows XP. The optional Character Server requires Windows 2000 (Pro), Windows XP (Pro), or Windows Server 2003. Some advanced tutorials in this guide provide information on using the Builder with Macromedia Flash and the Character Server. Neither product is required to use the Character Builder.

Documentation This User’s Guide contains a series of tutorials designed to introduce you to the Character Builder, the Character Server, and the underlying application model. The product also contains the Builder Reference, with information on the Character Builder, the Syntax Reference, with information on the underlying XML syntax, and the Runtime Reference, with information on all runtime API. The Builder Reference is available as help files from the Builder’s Help menu. The remaining help files are located in the Character Builder/Doc directory.

4

Installation To install the Character Builder, please run the associated installer program. Please visit http://www.mediasemantics.com/kb/kb100.htm periodically to check for updates. To install an updated version of the software, you must first uninstall the existing version, and then run the installer for the new version. The Builder will install by default under “C:\Program Files\Character Builder”. You will find tutorial files in the “Tutorials” sub-folders. Your project files can be located anywhere on your machine, but by default the File > New Project command will create projects in your “My Documents\Character Builder Projects” folder.

A quick tour The Builder lets you work with content files, image files, and audio files.

The Builder is divided into four different areas, or panes: Editor Pane

The top-right pane lets you edit files. Several files can be open at a time, and you can switch between open files by clicking on the appropriate file tab.

Project Pane

The top-left pane contains a list of the content files used by the project, and is closed by default. You can open it using the View > Show Project Pane command.

Property Pane The middle pane is used to view an object’s properties. Message Pane

The bottom pane is used to display error and status messages. You can open it using View > Show Message Pane command.

The Editor Pane lets you view files in a number of different views. You can switch between views using the view buttons at the bottom of the Editor Pane. Outline View

The Outline View lets you view and manipulate the hierarchical structure of your project.

Design View

The Design View lets you directly place and size objects in scenes and slides.

Script View

The Script View lets you edit a character’s words and actions, and access the Builder’s voice recording, lip-syncing, audio cleanup, and compression features.

Preview View

The Preview View lets you view your content as it would appear in a web browser.

5

XML View

The XML View lets you edit the markup tags that make up your project. All changes made through the Outline, Design, and Script views will result in changes to the markup, and you can always view and edit this markup directly in XML View. The XML View is turned off by default, but can be turned on through Project > Options (General tab).

Query View

Query View is useful when building character applications involving AIML Question Answering, and is only available when the Character Server is installed. Query View is turned off by default, but can be turned from Project > Options (General tab).

You create a new project by invoking File > New Project. The New Project wizard will ask you a series of questions, and then create a new project consisting of a project (.mpr) file, and a content (.xml) file. The content file contains the actual markup for your project. The project file simply contains user-specific editing settings. You can open a project with the Character Builder by double-clicking on the project file from any Windows folder. By default, new projects are created in a “Character Builder Projects” folder beneath your “My Documents” folder. After opening a project, you can browse through the files using the Editor pane and the Property pane. A project consists of a hierarchy of “navigation” objects, such as Scenes, Slides, and Steps. Scenes can contain characters, navigation elements, “props” and other visual elements. Slides can be used to organize a sequence of visuals into a slideshow. Steps let you break a longer presentation into a series of smaller ones. Scenes and slides may contain visual objects, including characters, images, text, and more. Scenes and slides also contain Presentations, which are discrete sequences of actions that a character can perform. Presentations are edited in Script View. You can also use the Preview View to test your content. You can use the Project > Render to Macromedia Flash (SWF) option to create a Flash SWF implementation of your project. The generated files are located in the Output subdirectory of your project file. They will include an HTML file (.html), an SWF file (.swf) and, optionally, a directory (.dir) file as well as secondary SWF files for the scenes, slides, and presentations in your project. You can deploy these files to any web server or distribute them with your standalone application. You can also use the Project > Render to Video option to create a video representation of your project. Projects designed for video output should have the Project’s Output Type selector set to “Video”, and should consist of a single presentation with no navigation or interaction elements.

Obtaining technical support Registered users of the Character Builder may access technical support by email at [email protected]. Before contacting technical support, please be sure to visit our support area, at http://www.mediasemantics.com/support.htm. Here you will also find a link to our support board. When emailing, please be sure to include any sample project (.mpr) and content (.xml) files.

6

Slideshow Tutorial This tutorial steps you through the creation of a simple slideshow presented by a character. Along the way we’ll introduce various aspects of the Character Builder. We’ll create the project in a series of steps. We encourage you to complete these steps yourself. You can also see the final results by examining the files in the “Tutorials\Slideshow” directory located in the Builder installation directory, normally “C:\Program Files\Character Builder”.

Creating the scene To begin, select File > New Project and enter a name for your project (e.g. “Slideshow”). For this tutorial, please start with the “Empty Project” selection. The result will be an empty project in the “My Documents\Character Builder Projects\Slideshow” folder.

The “Slideshow” file should be open for editing in the Editor Pane. Multiple files can be open for editing, and you can switch between files using the tabs near the top of the pane. Each file can have one or more different views – you can switch between views by clicking on the tabs at the bottom of the pane. The Property Pane shows the properties for the currently-selected object, in this case the Project object. The Outline View shows three objects in a hierarchy: the Project contains a Stage, which contains a Scene. The Project object almost always contains a single visual element – the Stage. The Stage contains one or more Scenes, only one of which will be visible at any given time. The Stage always occupies the entire output surface. The Stage does not have any appearance of its own, as the current Scene takes up the entire Stage area. Switching between scenes is somewhat like switching between pages in an HTML browser. Let’s now add a visual element to our scene. Click on the Design tab to switch to Design View. Then click on the Add Library Art button ( ). Select “Lecture Hall Props” from the category dropdown, and then “Lecture Hall Background” from the list – a simple two-color background will appear. Repeat and add the object named “Platform” and the object named “Whiteboard”. You will find that some objects will be placed and sized automatically, while others require you to specify a position. If a position is required, then the Add button will remain down and the cursor will change to a crosshair shape. To place the object, just click where the upper-left corner of the object is to appear. Some objects needs both a size and a position: when you click to place such an object, keep the button down and drag out the rectangle corresponding to its size.

7

You can select an object directly, or by clicking on its entry in the Layer panel on the right-hand side of the view.

You can drag the selected object to reposition it, or, if the object is resizable, drag the handles to resize it. The properties of the selected object are shown in the Property Pane. There you can specify coordinates numerically, or alter other properties of an object, such as its name.

Objects are positioned on the scene by specifying the x and y positions of the upper-left corner of that object. The coordinates are always specified in pixels, with the origin being the upper-left corner of the Scene or Slide, and with positive y coordinates going downward. You can use the keyboard arrow keys to “nudge” an object, that is move it one pixel at a time. You can also hold down the Shift key to nudge an object in increments of 10 pixels at a time. Each object is conceptually on its own “layer” (layers work like a stack of transparencies, with one object on each transparency). You can use the Layers panel to hide or lock these layers, making them invisible, or inaccessible for selection, respectively. This can be important when you have a busy scene or slide, where many objects are initially hidden, but are revealed by the character as part of a presentation. The Hidden and Locked state of an object in the palette has no effect on how your slide or scene actually runs, and is not to be confused with the “Starts Hidden” checkbox available on the property panel for each object. You can reorder the layers (i.e. move a “transparency” forward or backward in the stack) using the Move Forward and Move Backward buttons. Another useful feature when dealing with complex slides is the ability to select multiple objects and drag them together as a unit. We still need to add a Slideshow object to act as a container for our slides. Like the Stage, the Slideshow object has no appearance of its own, since its entire area is covered by the current slide. Use the Add Slideshow button ( ) to add a slideshow. The slideshow will appear as a gray rectangle in Design View. The Slideshow and the whiteboard prop are completely independent objects – you can use one or the other, or both. Both the Slideshow and the whiteboard can be resized. To complete our scene, we’ll need a character. Click on Add Character ( ) and then choose “John” from the list of characters. Adjust his position so that he appears to stand on the platform, with the whiteboard to his right. If you now switch to the Preview Pane, your scene should look something like this:

8

Creating an opening slide Next we’ll create a slide for John to present. Switch to Outline View, select the Slideshow object, and click the Add Slide button ( ).

Note that all objects are given a default name – you can change the name in the property pane. To edit the contents of this slide, return to Design View and, if necessary, select the first slide from the drop-down selector on the toolbar. Note that you can quickly view a given slide in Design View by doubleclicking on it in Outline View. Now add a title by clicking on the Add Text button ( ). You can either click-and-release at the location where the text should start, or you can click and drag out a rectangle that the text will flow into. In the first case you give the text frame no size, and it simply resizes to conform to the text. In the second case you give it a size, so it wraps the text over multiple lines to conform to this width. When you create a Text object you can immediately begin typing. When you are done typing, press Esc or click outside of the text object. You can return to “edit mode” on a text object by double-clicking on it. When a Text object is selected you will see the text formatting controls become active in the toolbar. You can use these controls to modify the selected text object. You can also double-click and edit the object to apply the formatting to specific ranges of text. Note that the Builder uses pixels and not points as a unit of font height. Next, let’s try adding a slide background. To do so, choose the Add Library Art button and select “Sample Backgrounds”, and then “Blue wash background”. With the blue background, you’ll want to change the color of the text to white. To do this, select the text object, and locate the Text Color button in the text formatting toolbar, then pick a white color from the Color dialog. In the Preview view, your whiteboard might look something like this:

9

Adding a presentation Next we’ll add some voice and animation. Returning to Outline View, select the Slide object and press the Add Presentation button ( ). The Presentation object goes in your slide, but it doesn’t have any visual appearance of its own. Presentation objects won’t appear in Design View.

To edit a presentation, you switch to Script View. In the Script View toolbar you can select from a dropdown list of all the presentations in the file. Begin by pressing the “Insert Say Action” button ( ). The following property pane will appear down below – try typing “Welcome to my first slideshow”.

As you type, the Script View area will update to reflect your changes:

If you have installed the recommended Text-to-Speech voices Microsoft Mike and Microsoft Mary (available from the Download page), then you can use the Speak button ( ) to create an Audio file from this text. Alternatively you can use the Record button ( ) to record your own voice (push to talk). After recording an audio file you’ll need to Lip Sync it ( ). If you use Text-to-Speech then you can skip the LipSync step. In both cases you need to finish by Compressing your audio file ( ). Note that a button will appear with a red hilight when Script View thinks that it still needs to be pressed. When in doubt, press audio buttons that are highlighted, in left-to-right order. If you are using Text-to-Speech then you may need to use some creative spellings and insert extra punctuation to make your transcript come out right. If you are using a recorded voice, then having an

10

accurate transcript will help in synchronizing actions with your voice. You will also be able to print your transcript for handoff to a voice artist. Note that you can either use the audio buttons in the property panel or the buttons in the right margin of the main view – the two sets of buttons are identical. Next we’ll add an animation action. Click just before the “W’ in “Welcome” to place the insertion point at the beginning of the action. Insert a “Hands Up” action, by clicking on the Add Hands Action button and selecting the first icon from the drop-down list (Hands Up).

Your Script View will then look something like this.

You can click on an action icon to select the action. When an action is selected, its properties will appear in the Property Pane. Many actions have a Target property that allows a target for an action to be selected. The Say action is the only action that does not have its own icon, but you can select it by clicking the entire line, in the margin. Now click below this line: notice how the blue insertion mark in the margin indicates where your next insertion will occur. You can click between lines to insert a new line, or below the last line to add a line. Now press the Insert Pause Action button to create a line containing a Pause action. You will often want a Pause action between distinct Say actions. By default a pause will be ¾ of a second. A line will often consist of one or more action icons, and no text. These actions are not synchronized with any audio, and are simply played silently. Press the Insert Say Action button again to create a third line: “My name is John, and I will be your host today.”

You can synchronize an action with the voice by placing the action where you would like the action to begin – in this case it will begin at the same time as the audio. You will find that the resulting script reads much like a theatrical script. Now Record or Speak, Lip-sync, and Compress this line, and switch to the Preview view to see the result of your work. Note that you can place several actions in a row. In many cases two successive actions will actually run concurrently. For example a Look Left and a Gesture Left can be played concurrently since they involve different parts of the body. However a Look Left and a Look Right action cannot be played concurrently. If

11

a second action becomes ready for execution when the first action is still running, and the two cannot play together, then the second action will simply wait for the first to complete. All actions embedded in a Say action will get executed in order – if need be the Say action is extended with silence in order for this to happen. You can try moving the Hands Up action within the Say action. You can do this easily in Script View by clicking on the action and then dragging it to its new.

If you return to Preview view, you will notice that the hands start rising just after the character speaks “my”. You can insert, remove, and reposition actions without needing to re-record, lip-sync, or re-compress your audio. However as soon as you change your transcript, you will want to re-record your audio to keep it in sync with the transcript. How important is it to keep the transcript in sync with the audio? In the case of Text-to-Speech, the transcript is read to create the audio when you press the Speak button. In the case of recorded audio, the Builder uses the transcript to compute the timing of any actions you place within the text. When your project is running smoothly in Preview view, you can use the Render to Macromedia Flash ( ) button, or press F6. Next, click the Explore Output Files ( ) button. A File Explorer window should appear showing the contents of the Output subdirectory of your project.

You are now ready to copy these files to a standard web server. The Slideshow.html file serves as a test container page – you can cut and paste the OBJECT syntax from this HTML file to use in your own HTML page. Please see the comments in the HTML file for more specific directions.

Understanding animation actions The Builder does not re-render John from 3D primitives, but chooses from a set of pre-rendered images that are carefully designed to let him perform a range of common actions. The process of creating a new character, or extending the range of motion of an existing character, requires a deeper understanding of the mechanism that drives the character’s animation, and access to the required 3d modeling and/or vector art tools. However you can use a “stock” character from the library, or download additional characters from the Media Semantics web site. Some characters can also be modified through properties in the property pane, by re-coloring artwork and specifying parameters or add-ons. Media Semantics defines a Standard Animation Model that characters are expected to conform to where possible. This model includes many of the actions that you would expect a “presenter” to use, including turning, looking, pointing, speaking, hand movements, etc. When a given action is not available, the character simply ignores the action. Actions can affect a character’s body, arms, head, mouth, or eyes. Some actions, such as “Palm Up”, put the body part into a particular state, or “pose”. Other actions, such as “Palm Wave” animate a body part and then return to the same state.

12

Actions are designed to be largely independent of one another. For example you can have your character look at an object, point at it, begin speaking, then look back at the user while still pointing, then raise its eyebrows, etc. You can play many actions concurrently for greater effect. For example you could create a “shrug” action by combining a Hands Out, and an Eyes Wide action. Since the actions involve independent body parts, the system can play both actions concurrently, even though they are specified sequentially in the script. Media Semantics characters tend to have many small, independent actions that can be combined to produce fluid character animation. However independence of motion can come at a high cost to the animator. Consider the body position. The standard animation model says that a character can be a) turned to face the user (front), b) turned to face the content (full profile), or c) halfway in-between (half-profile). For each position, the animator might need to draw a complete new set of images for all arm actions. For this reason, some actions are limited to certain body positions. For example many hand actions are only implemented for the “front” position. The half-profile position is used primarily when the character is drawing the attention to some supporting visuals – he can still point at the content, and may glance back at the user. The full-profile position is used primarily for walking. Walking itself is not implemented on all characters. Most characters will implement the mouth and eye animations for all head positions, and “preserve” these expressions as the head turns. This allows a character to talk as it looks back and forth between the user and any supporting visuals.

Adding a second slide You can use the Character Builder to create a standalone application that lets the end-user start, stop, and navigate within your content. To do this we’ll add a navigation bar to our scene. First switch to Design View, select the Scene, then choose the Add Library Object button ( ), select “Navigation Bars” from the drop-down, then “Standard Navigation Bar”. You’ll see a navigation bar appear at the bottom of the scene. To create a second slide, you might want to take advantage of the work you’ve already done. You can go to Outline View, the select the first slide, right-click Copy, then select the slideshow, and then right-click Paste. Next go to Design View and change the text of the second slide to, say “My Last Slide”. Next, go to Script View – you can select the first line by clicking in the margin, then shift-clicking before the last line to select all the lines, then hit the Delete key to remove them. Create a new Say action with the words “Goodbye!”. A character will always be running a presentation – when it is stopped, it is actually still running a presentation – an “idle” presentation, which is repeated continuously. An idle presentation will normally be created for you based on the character’s Default Idle property. When the project starts, the character will normally begin presenting the first presentation. You can change this behavior through the Initially Presenting and Initial Focus properties of the Project object. A character normally plays through a presentation until the end, then stops, i.e. goes idle. Presentation objects are “atomic units of presentation”: they can be interrupted, however they can only be restarted from the beginning. For this reason, longer presentations should normally broken into distinct steps using the Sequence and Step objects. A character can transition from one presentation to another, however to ensure that there is no jump in this transition, the system ensures that all presentations start and end with the character in the same “default” position, usually with the character facing the user and its hands at rest. If you test the current Slideshow project, you’ll find that the character presents the first slide, then stops. You can navigate to the second slide, and get John to present it by pushing Next, then Start. You can also have the character control the navigation. To do so, add a Next action as the last line in the first presentation.

13

If a Next action is reached at the end of a presentation, then the character will “move the focus” (i.e. the current slide or step), just like when the end-user presses the Next button. Since the character was presenting when it encountered the Next, it will continue presenting on the next slide. When the focus is moved, the new slide is normally shown immediately – then the character returns to its default position in order to make the transition to the next presentation. A nice effect is to end your slide with the following sequence:

This makes the character pause slightly for the last few words to sink in, then look at the slideshow and “will” the slide transition to occur. In subsequent tutorials you’ll also see how the character can cause all kinds of changes to occur in the slide, and also to react to the user’s actions.

14

Sequences and Dialogs Tutorial In this tutorial we’ll build a slightly longer presentation that is broken down into a sequence of steps. Each step is associated with a visual change, and the user can navigate through the steps using the navigation bar. We’ll also show how a character can control objects on the screen, as well as discuss automatic character actions. You can see the final result in the “Tutorials/Sequence” subdirectory of the installation directory.

Creating a sequence We’ll create a series of 3 text bullets that Dave will reveal in a step-by-step manner. We’ll have 4 presentations – one for each text bullet, and one to wrap up. In this case we’ll put the visuals on the scene itself, though you could equally well place them in a slide. Start by creating a new project using the Empty Project template. Switch to Design View, and add use Add Library Art, “Sample Backgrounds”, and “Blue Wash Background”, then use Add Character to add Dave to the scene. You will also want to add the standard navigation bar. Next, use Add Text to create a title and 3 bullets. You can use the Alt-0149 keystroke sequence to insert the bullet character – a complete list of special character can be found in the Accessories, System Tools, Character Map application.

Next, set the Initial Hidden property of the three bullet text objects to True. Note that you can control whether an object is hidden (or locked) from the layer panel to the right of the view, but these settings are completely independent from the Initial Hidden property. The layer panel simply lets you work with complex layouts in Design View by locking down or hiding those objects that you are not currently editing.

Now switch back to Outline View, and, with the Scene object selected, use the Add Sequence button ( ) to add a Sequence object. Select the Sequence object and choose Add Step ( ). Repeat so as to add 4 steps in total. Then select each Step and add a Presentation to it using Add Presentation. The resulting outline should appear as follows:

15

Next, we fill in the presentation for each step. For the first step:

We create a slight head-nod to go with the “Hello”, by moving the head down and then up again. Then, coinciding with “This is my first bullet item”, we make Dave look and gesture to his right, and then Show the (initially hidden) bullet 1. The Show action requires a Target property, which you can set in the property pane below. If you haven’t renamed your text objects, then this would be “Text 2”. When we are done, we move the focus to the next step using the Next Focus action. Here is the second presentation.

Here we have the character turn to half profile – from this position he can point to items, and also glance back at the user – useful when you want to get the user to focus on the content. Note that, in addition to Look Right and Point Right, you can use Look At and Point At, along with a target, to let the character determine the optimal head and arm position based on the position of the character relative to the target. These “targeted” actions are often only implemented from the “half-profile” position, as they appear more natural from this position. And the third presentation:

We end with a follow-up presentation.

Understanding automatic actions Before we continue, let’s discuss some of the “automatic actions” that are taken by the character. In the previous presentations, we concerned ourselves with getting the character into its different poses, but not so much on returning the character’s head to look at the user, or lower its arms again. You can always return ), and lower the arms with the Hands By Side action the gaze to the user with the Look User action ( (

). But in many cases this won’t be necessary because of the Automatic Actions feature.

16

To simplify the authoring process, most characters have some “automatic”, or “reflexive” actions. Generally you can expect a character to: 1. 2. 3. 4. 5.

Return its hands to a resting (hands-by-side) position if left too long in an extended position, Return to look at the user when talking with the head turned away from the user for too long, Blink Use subtle head movements Use subtle arm or body movements.

Behaviors 1 and 2 mean that you just have to “push” the character in different ways, and the character returns to a default, “natural” state by itself, if you haven’t already instructed it to do so explicitly. Note that you can also specify that the character “hold” a certain position using the Hold action ( ), which “holds” the last specified body part in its current position until another action is explicitly taken on that body part. Behavior 3 through 5 will interleave additional subtle animation, such as blinking, to provide a sense of life to your character. You can selectively turn off different automatic behaviors in the Advanced Properties panel of your Character.

Navigation with sequences When you render your project to Flash, you’ll find that Dave presents each bullet in turn, as we would expect him to. You can also stop Dave at any time using the Stop button on the navigation bar. When a presentation is stopped, Dave will go idle, but notice what happens when you press Start again. Since Presentation objects are “atomic units of presentation”, Dave restarts at the beginning of the current presentation, which is the beginning of the current step. This is one good reason to break a long presentation into several short ones using steps, as you don’t necessarily want Dave to restart right from the very beginning when interrupted – just at the last logical break. Another reason is to provide navigation within the sequence of steps, to let a user skip ahead or skip back. Navigation within a sequence of steps can be made to appear very natural to the end user, as long as you follow some simple principles. First, each step should ideally be associated with some visual change – in this case a bullet is revealed during each step. In most cases a “wrap-up” step, such as our fourth step is also recommended, in which all visuals are showing. Second, you should think about what assumptions each step should have in terms of the hidden/visible state of the supporting visuals at the beginning of each step. For example at the beginning of step 1 we are assuming that all 3 bullet items are hidden, since during the step we’ll be revealing the first item. At the beginning of step 2 we assume that the first item is visible, but that the remaining two are not. At the beginning of step 3 we assume that the first two items are visible and that the remaining one is not. Finally, in step 4, we assume that all the bullets are visible. Once you’ve determined the visual states at the beginning of each step, you’ll want to add an Event Script for each step ( ). An Event Script is like a presentation except that it is executed immediately (in no time) when a given event takes place. We will use the “On Take Focus” event to execute some hide/show actions immediately when a slide, scene, or step takes the focus, i.e. comes into view. Step 1’s On Take Focus should hide Text2, Text3, and Text4. Step 2’s On Take Focus should show Text2, and hide Text3 and Text4. Step 3’s On Take Focus should show Text2, Text3, and hide Text4. Step 4’s On Take Focus should show Text2, Text3, and Text4.

17

With these scripts, the standard loader can ensure that these assumptions are enforced, in the case where the user skips ahead or skips back through the presentation.

Creating a dialog Many e-learning simulations work by showing the user an interaction between two characters, such as a salesperson and a potential customer. A third character, such as a coach, might provide analysis, or ask questions. A Presentation object is always associated with a given character. Most projects have only one character so you don’t need to worry about this linkage. If you add two characters to a scene, and then add two presentations, and if you further link each presentation to a different character through the Character property on the Advanced Property tab, then you’ll find that both presentations will actually play at the same time! While you might want to take advantage of this in certain cases, getting the synchronization just right can be frustrating. Instead of adding discrete presentations, you can add a single Dialog object, using the Outline View’s Add Dialog button ( ). The Dialog is edited in Script View just like a presentation, except that another column appears between the audio buttons and the transcript area, listing the name of the character that will execute the corresponding line, just like in a theatrical script.

Note that you can change the character associated with a line by double-clicking on the name – this will cycle through all the characters in the scene.

18

Quiz Tutorial In this tutorial we’ll introduce the Character Builder’s interaction capabilities by building a simple quiz, hosted by a cartoon character.

Building a multiple-choice slide Start by creating a new empty project. We called ours “Quiz” – you can see the final result in the “Tutorials/Quiz” subdirectory of the installation directory. Switching to Design View, we added a character (Dave), and a slideshow. There are no other props – the slideshow simply lets us swap-in different supporting visuals beside the character.

Next, switch back to Outline View, select the scene, and use the Add Slide button to create a slide. Doubleclick the slide to bring it up in Design View. Normally we recommend using the Add Slide wizard to select one of the Quiz slides, but for this tutorial we’d like to start from first principles and start with an empty slide. Create the following layout, using the Text object and the Button object. To choose the Button object, use Add Library Button, then select “Misc Quiz Buttons”, and “Radio Button”. Here is the question we created:

You can also use your own art for the buttons – if you do, each button should have the Stays Chosen and Resets Peers advanced properties set, along with images for the normal and “chosen” states.

Prompts and reactions When you have completed the slide, switch back to Outline View, select the slide, and use the Add Presentation button ( ) to create a new presentation within that slide. Double-click on the presentation to bring it up in Script View.

19

An interaction normally consists of a “prompting” presentation and two or more “reacting” presentations. An example of a prompt would be to ask the user a question. After the prompt is played, the character goes idle waiting for the user to respond. Each time the user presses a button a “reaction” presentation is played. Here is the Prompt script we used.

We chose to create multiple reactions – one for each button. Use the same steps that you used to create your prompting presentation to create three more presentations. This time, be sure to give them names, such as “A”, “B”, and “C”.

Now return to Design View, select each button, and set the Action to “Goto and Start” the appropriate React presentation:

Finally, switch to Script View. For the first, and correct answer, we used the following reaction script.

Remember that the character is supposed to be reacting to a button push, so you want to first make it look at what the user selected, and then react, even though he technically already “knows” what the user has selected. Similarly, we have for B:

And for C:

20

You need to use the “Render to Flash” and “Run In Browser” buttons to experience the proper flow of your interaction. On a correct response, the character acknowledges the response and moves to the next question. On an incorrect response there is no Next action, so the character goes idle again waiting for the user to try again. That covers the first example. In the next example we’ll see a slightly different exercise, and a slightly different approach to reacting to the user’s input.

A second interaction For our next presentation we’ll use the Checkbox buttons, also from the “Misc Quiz Buttons” category in Add Library Button. In this exercise we’ll be showing a number of tricks. For one thing we’ll add some follow-up information at the bottom of the slide – an image and a text object. You can copy the file “Dodecahedron.png” from the Tutorials\Quiz directory to your own project directory. These follow-up objects should have the “Starts Hidden” box checked. Here is how our slide looks:

Remember that the material at the bottom is marked as “Starts Hidden”. Next, switch to Outline View and add a Prompt presentation:

Now we’ll do something a little different. First, we’ll connect both checkboxes to a Variable. Go to the Outline View, and add a Variable to the project. Rename it from the default ‘Var1’ to ‘Answer2’, the answer to Question 2. Note that variable names, because they are available to outside systems, may not use spaces.

21

While in Outline View, go ahead and create a new presentation ‘React 2’. Then go to Design View, and select the first button. In the Property panel, select the ‘Answer2’ variable and set the value to ‘True’. In this case we are entering a “string”, so we must enclose it in single-quotes. Whenever this button is checked, the ‘Answer2’ variable should get the value ‘True’. Conversely, whenever the button is displayed and the ‘Answer2’ variable has the value ‘True’, the button will be in the checked, or “chosen” state – the button is “linked” to this variable and value. In addition to linking the button to a variable, set its Action to “Goto and Restart” React 2.

Do the same for the other button – it will have the same ‘Answer2’ variable and the same React 2 presentation, but use the value ‘False’ instead. Now on to the ‘React 2’ presentation. Remember that this presentation will run when either button has been selected.

Again we have the character look at the content and then back, as if checking the answer. But this time we use two “If” actions to select an appropriate comment. Selecting the opening icon, you can set the “test” in the property panel as follows:

Similarly you set the test for the second “If” as Answer2 = ‘True’. (You could also have used the Choose/When/Otherwise construct instead of two If blocks.) Finally, the Clear Chosen and Set Chosen actions allow the character to correct the answer for the user in case it was incorrect. The character then reveals the initially-hidden follow-up art. While not really necessary for this simple interaction, the use of Variables and branching allow you to build increasingly rich interactive behaviors. Consider, for example, that all interactive elements (buttons, edit controls, and fields) can be linked to variables. Consider also that variables can be written-to and restored from a web server, both to for server-side progress tracking, and to influence the content or the behavior of the character during subsequent sessions.

22

Web Greeter Tutorial In this tutorial we’ll examine how to place a character on a web site and make it react to web page events. In this case, there will be no supporting visuals – the only object on the scene will be our character.

Adding a character to your web page To begin, create a new Character Builder project using the Empty Project selection. We used the name “Greeter”, and the resulting files can be found in the “Tutorials/Greeter” subdirectory of the installation directory. Select the Scene object and set the Size property to 250 by 200. Next, switch to Design View and add a character using the Add Character button ( ) – we chose Mary for this tutorial. You can set Mary to the x,y position of 0,0. For some characters you may find that you need to place your character using negative coordinates in order for it to fit on your stage. The bounding rectangle for the character represents the full area available to the animator to create animations. In most cases the actual space required to render your character animation can be much smaller.

Now go back to Outline View, select the Scene, and then add a presentation object using the Add Presentation button ( ). Switching now to Script View, enter a short script, such as the following one:

Next, use the Render to Macromedia Flash ( ) button, and then take a look at the generated files with the Explore Output Files button. To deploy your character, you simply need to upload the files from the Output subdirectory to your web server. The Builder will create an HTML page that can be used to run the corresponding Flash file. You can also cut and paste the tags from this sample HTML page to your own HTML page – please see the comments within the generated HTML file for details on how to do this.

Triggering presentations from links In the Slideshow tutorial we saw how the ‘focus” could be moved from one slide to another. In this case there is no slide to provide a visual feedback for the focus, but we can still move the focus from one presentation to another. To illustrate this, we’ll give our first presentation the name “Opening”, and add a second presentation called “Products”.

23

Your Outline should like like this:

Normally the Flash file returns to idle mode when a presentation completes. One way to provide a userinterface to a multiple-presentation project is through a series of button objects placed on the scene. You would set the button action to “Goto and Start”, and select a target presentation. However in this tutorial we’ll show you how to trigger a presentation from the surrounding web page. The state of the Builder-generated movie is controlled by two variables – ‘Focus’ and ‘Presenting’. These variables are set by navigation UI buttons, when present, but they can also be examined and set by an external controller, such as your web page. These two variables effectively form the API for the Flash movie. The initial state of the Presenting variable is set by the Initially Presenting property of the project, and you can use this to determine whether or not the first presentation will begin automatically. The following script can be added to a web page to provide a function that is equivalent to a “Goto and Start” button. Use Project Options, HTML tab, “Include sample external control Javascript”, to have the Builder automatically create similar external control code in the generated HTML file. <script language="JavaScript"> //

Here is an example of the use of this Play() function. Play Products

The Play() function works by setting the two variables ‘Focus’ and ‘Presenting’. You can stop a presentation at any time, and the character will smoothly interrupt its current presentation and return to its default position and go “idle”. Here is a second function that will stop the current presentation: function Stop() { var Movie1Obj = InternetExplorer ? Movie1 : document.Movie1; Movie1Obj.SetVariable("Presenting", "false"); }

Presentations can be as short as you like, however they will always end with the character returning to this default position. They can be as long as you like, however bear in mind that they can only be restarted from the beginning.

Synchronizing events with your presentations You can use the External Command action to raise an event to the containing web page. This allows you to control aspects of your page in a manner that is synchronized with your audio.

24

To do so, you will want to use the following script code within the script block established above. Again, use Project Options, HTML tab, “Include sample external event Javascript”, to have the Builder automatically create similar event handling code in the generated HTML file. // Handle all the FSCommand messages in a Flash movie function Movie1_DoFSCommand(command, args) { alert("command=" + command + " args=" + args); } // Hook for Internet Explorer if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) { document.write('<SCRIPT LANGUAGE=VBScript\> \n'); document.write('on error resume next \n'); document.write('Sub Movie1_FSCommand(ByVal command, ByVal args)\n'); document.write(' call Movie1_DoFSCommand(command, args)\n'); document.write('end sub\n'); document.write(' \n'); }

This script assumes that your object and embed tags have a name and id “Movie1”. To demonstrate the operation of events, we added an External Command action at the end of the second presentation. Note that the Command and Args properties have no meaning to the Builder – they are simply passed through to the Movie1_DoFSCommand() function. The generated script will simply display an alert message, however you can take over with arbitrary javascript code, to hide or show an HTML ‘div’, for example.

When to consider dynamic flash generation You may also want to have more control over what your character can do or say, on a per-user basis. For example you might want to greet the user by name upon login, or report the weather or a stock price. Since Flash does not work directly with Text to Speech engines, and since high quality engines will likely not be installed on the end-user’s machine anyway, this involves making a call to the optional Character Server product, located on your web server. When you install the Character Server, the Character Builder will gain additional New Project wizard options. The “Dynamic Speech Project” New Project type sets up a project similar to the one presented here, but with a Speak() API callable from HTML javascript. This API works by setting a variable in your project, and then setting the focus to a presentation marked as “external”. This presentation will go out to a server-side scripting page to fetch the actual Flash materials. In doing so, your movie passes the contents of all of its variables, allowing the server-side script to do context-specific processing. The result of this processing is an XML string that is fed to the Character Server for processing, and then the resulting Flash stream is returned to the client. In effect, the Character Server lets you replace any reference to a Flash SWF file with a reference to a server-side script file that generates that SWF file “on the fly”.

25

Embedded Movie Tutorial We’ve seen how characters can control supporting visuals, such as text and images placed on scenes and slides. You can also include Flash movies, including those produced by a growing number of tools that support Flash SWF as an output format. You can think of the Flash movie as a “prop” that can be hidden or revealed like an image, but also started, stopped, or moved to a certain frame, using the Movie Action ( ). One popular type of Flash movie is a screen capture of an existing application or web site, as it is being used by an operator. An example of such a movie is located in the Library (see the Design View’s Add Library Movie, Sample Screen Capture.) This movie was created using Qarbon ViewletCam, though several other applications may also be used. This tutorial describes how you can turn a screen capture movie into an elegant tutorial in which a character appears to “operate” the original application, or web site. To get started, please use the New Project wizard with the Screen Capture setting. The result will be a sample project based on the Sample Screen Capture movie. We recommend using this template, along with these notes, as a starting point for developing your own set of best practices for this style of project.

Creating the Screen Capture The following guidelines may be helpful when capturing the original application or web site: • •

• •

• •

Your screen recording software should produce a simple linear list of frames – some of the fancier screen capture tools will produce Flash SWF movies that do not permit the standard start/stop or frame-seek actions. Begin with a written series of “steps” to take, in operating the application. A step may be very short, such as moving the mouse over a button and clicking it, or slightly longer, such as filling in a few fields dialog. The key is that each step represents some logical burst of activity that will be associated with some particular commentary from the character. Don’t bother recording any audio when you do your screen recording – just concentrate on performing the actions precisely and deliberately Leave a pause between each step in which you remove your hand from the mouse, so that you can catch your breath, and so that you can easily identify each burst of activity later on. These pauses will not add much to the size of your screen recording, and need not be part of your final production. If your screen-recording software includes a loader or navigation bar, then you should turn these off when producing your Flash movie Place your movie in the Movies subdirectory of your Character Builder project for easy insertion into a scene

The Sample Screen Capture movie contains only two logical bursts of activity.

Setting up your Scene We recommend using a single scene that contains the movie, a character, and a navigation bar. Make sure the Stage is large enough to contain the movie and the character. The character may appear beside the movie or on top of the movie.

26

When placing your movie on the scene, we recommend leaving the External option checked, so that the movie is kept in a separate file. You should also leave the Auto Start option unchecked, so that the movie does not start playing automatically – we’d rather give the character more precise control over the movie. Finally, we recommend setting the Auto Stop option, found under the Advanced tab, to True. With this setting, pressing the Stop button on the navigation bar will cause all embedded movies to come to an immediate stop. As with any long presentation, we recommend that you use a sequence of steps to break your script into several smaller presentations. Each step represents a logical step in operating the original application or web site, as well as some character commentary. The navigation bar allows the user to stop the character at any time, restart the current step, or skip backward or forward through the steps.

Sequence considerations The template sets up a simple, two-step sequence that matches the sample screen capture movie.

As described in the Sequence tutorial, you should use an On Take Focus script in each step to set up the initial state for that step. In this case there are no objects to hide or show – instead you will use the Movie action to Goto And Stop to a particular frame.

27

You can use the frame selector button to bring up the Choose Frame dialog:

You can use the Frame spinner control to rapidly locate a frame right before the burst of action that is associated with the current step.

Movie control In the step’s Presentation you may want to have the character comment before, during, or after the burst of activity associate with the step. When the character is ready for the activity to begin, he will typically look at the portion where the action will occur, then execute a Play action. At this point there are a few options. You can use the Play Until action to have the execution continue until the end of the burst of activity for this step. You can use the frame selector dialog to select a frame shortly after the end of the burst of activity. The Play action executes immediately, so any subsequent actions, including any speech, will now occur at the same time as the movie is playing. While the effect can be pleasing, for simplicity we normally recommend that the character execute only one action while a movie is playing, namely the Watch Until action. While Watch Until appears as a Movie action, its effect is exclusively on the character. Until the given frame is reached, the character will remain in its current pose, normally looking at the movie, blinking occasionally. The most common combination is to 1) Look at the movie, 2) Play Until a certain frame, and 3) Watch Until that same frame. The frame used in the Play Until and Watch Until should be just past the end of the burst of activity.

At this point the character can look back at the user and proceed with a follow-up comment, or move to the next step. If the character is consistently looking at the screen capture movie’s cursor when it is moving, it will feel as if the character is in fact controlling that cursor.

28

Flash Integration Tutorial In this tutorial we’ll examine how to add a character to a traditional Macromedia Flash application. While many types of character-based applications can be rendered directly from the Character Builder, you can achieve even greater flexibility by using the Builder in conjunction with Macromedia’s own Flash Tool. This tutorial assumes that you have installed, and are familiar with, Macromedia Flash 7 or higher. The files can be found in the “Tutorials/Flash” subdirectory of the installation directory.

Loading a movie into an empty clip If you import a Builder-generated SWF file into the Macromedia Flash Builder, you will find that only the character artwork and supporting visuals will be imported - all audio and action script statements are ignored. If you want to use the Builder’s output in a Flash project, consider loading the SWF file into a Flash movie clip instead. To provide a sample Character Builder movie to work with, we created a Character Builder project using Dave. We added two short presentations. Presentation 1:

and Presentation 2:

We render this out using the default settings – you can open the Tutorials\Flash\Presentations.mpr project and use Render to Flash to build your Presentations.swf file in the Output subdirectory. Next, open Flash and create a new Flash document. Use Insert > New Symbol and enter “dave_mc” as the name. The select the first and only frame on Layer 1 and enter the following script: this.loadMovie("Output\Presentations.swf");

Then close the symbol, by clicking on the Scene 1 button, and press Ctrl-L to see your new symbol in the library panel. You can now drag an instance of this symbol to your scene. After placing it on your scene, give it an instance name, such as “dave”. At this point you should save your Flash file in the same directory as your project file. Again, we’ve created the file for you in the Tutorials\Flash directory. If you now run your Flash project, you will see that the clip will automatically load itself with the “Presentations.swf” movie, and since the movie was set up to present the first presentation and then stop, this is exactly what you’ll see.

Controlling the movie from Flash You can control the clip through the same interface as with HTML (See the Web Greeter tutorial), except that you don’t need the javascript SetVariable() syntax. To see this, try adding two Buttons using the Components panel. With the first button selected, set a label, and enter the following in the Actions window: on (click) {_parent.dave.Focus = "Presentation 1"; _parent.dave.Presenting = "true";}

29

Be careful to use the string “true” and not the boolean variable true. Similarly for the second button: on (click) {_parent.dave.Focus = "Presentation 2"; _parent.dave.Presenting = "true";}

Let’s view the result:

You can trigger a second presentation even as the current presentation is playing – the character smoothly interrupts itself, returns to the default position, and then starts in on the new presentation. You can also set the ‘Presenting’ variable to the string “false” to force the character to go “idle”. The Focus variable can be set to either the Name or the Id of the presentation (the Id of the presentation is visible in the Builder’s XML View only). If your project will contain a lot of presentations, and those presentations are likely to be accessed in a random order, then you may want to set the Builder Project’s Output Type to Multiple File. The interface is the same, except that the Presentations.swf file will be a very small “loader” file that will load the various presentations as needed. This will let you have dozens of presentations and only pay the download cost when a given presentation is used.

Monitoring the movie You can view the state of these two variable by setting up two Text objects (make sure they are of type Dynamic Text) and setting their Var field to ‘dave.Focus’ and ‘dave.Presenting’, respectively. Here is what you’ll see after pressing the Presentation 1 button, in our version.

When Dave is done presenting, you will see the ‘Presenting’ variable turn to “false”. You can use an onClipEvent(enterFrame) handler to monitor the value of Presenting, and trigger other events when the presentation is complete. For example we created another piece of text “Dave is done!” and converted it to a symbol named ‘done_mc’ by right-clicking and selecting “Convert to Symbol”. We then created an instance named ‘done’, and added a line to frame 1 of the movie to make the instance initially-hidden: done._visible = false;

Then, selecting the ‘dave’ clip, we added an onClipEvent handler in the Action pane: onClipEvent(enterFrame) { if (this.Presenting == "false") _parent.done._visible = true; else

30

_parent.done._visible = false; }

If you run the Tutorials/Flash/Flash.swf with these modifications, then you’ll see the “Dave is done!” text automatically appear when Dave is idle. If you have any variables in your Character Builder project, then those variables are also accessible to the surrounding Flash application. For example in your project had a variable ‘Var1’, then you could access this variable from Flash as dave.Var1

There is no simple way to raise events from the Character Builder to the surrounding Flash application. (The Builder’s Command and Get URL actions will go all the way out to the surrounding web page, bypassing the Flash application.) However you can use the Set Variable action to set the value of a variable, and then monitor that variable from Flash, in the same way that we monitored the special variable ‘Presenting’ above.

31

Database Generation Tutorial If you have used the XML View to see the underlying tags created by the different views, then you will appreciate that you could also create this type of XML automatically, from a database, or from a web-based administration console. The Character Server provides an API for converting such an XML string into a Flash SWF or AVI file.

Calling the Server from WSH The following javascript file contains a simple test of the Server’s dynamic Flash generation capability. To run it, just double-click on the .js file from a Windows folder. HelloWorld.js xml = '<project>\n'; xml += ' <stage size="250,200">\n'; xml += ' Hello world!\n'; xml += ' \n'; xml += '\n'; msserver = WScript.CreateObject("MSServer30.MSServer30"); msserver.Render(xml, "HelloWorld.swf"); WScript.Echo("Created file HelloWorld.swf");

The Character Server is a COM component that can be invoked from most scripting languages. In this case, the calling script creates an XML string, and then passes it along to a new instance of the Server object, along with a name for the resulting Flash SWF file.

Calling the Server from IIS Most of the Character Server samples are designed for use under Microsoft Internet Information Server (IIS). The following is a basic test of the Character Server running under IIS: GenHelloWorld.asp <%@ Language=JScript %> <% // Don't cache this Response.Expires = -1; // Create some xml xml = '<project>\n'; xml += ' <stage size="250,200">\n'; xml += ' Hello world!\n'; xml += ' \n'; xml += '\n'; // Render it msserver = Server.CreateObject("MSServer30.MSServer30"); file = msserver.RenderAsResponse(xml); %>

This second version of HelloWorld is similar to the first one, except that it uses the RenderAsResponse method to render the flash file directly into the response returned to the caller. In this way, you can effectively replace any reference to an .swf file by a reference to an .asp file that generates the SWF stream. You can perform the generation on-the-fly, or you might perform it in response to an Update or Publish button, to allow multiple views of the resulting flash SWF file. It is also possible to create a hybrid system in which responses are generated dynamically, but then saved for reuse in case a similar request appears in the future.

32

AIML Tutorial You can also use the Character Builder in conjunction with the Character Server to build open-ended question systems, in which users can type in their own questions, and even “chat” with a character, using AIML (Artificial Intelligence Markup Language) rules.

Getting started To use this tutorial you will need to install at least the evaluation edition of the Character Server. Note that the Character Server is normally used with Microsoft Internet Information Server (IIS), available for development use in Windows XP Pro. The evaluation version of the Character Server is available for free download, but supports only a limited number of AIML rules. You can edit and test AIML rules with the Character Builder, however runtime support for question answering is only available in the Character Server. Rules can be edited in XML View and then tested in Query View. Note that the XML and Query views do not show up as view tabs by default – you can add them to the set of available views for a given project through the Project Options dialog. Editing for a commonly-used subset of the AIML rule syntax is also available through the Builder’s Outline View and Script View. This tutorial shows how you can use the Outline and Script views to create simple rules. For a more in-depth treatment of the supported AIML tags, please see Appendix A. The Character Server product is normally located on your web server, and is used to generate the actual SWF file for each response. The server is passed the text entered by the user. The server-side script then proceeds in two stages – first it loads your AIML files and uses the server’s Respond API to turn the user’s text input into a text response. Second, it packages this response into a complete XML message that is passed to the server’s Render API. This mechanism is very flexible. For example you might leave a special pattern in your text output that your server script can expand, perhaps using a database query, before sending the final text on to the Respond API. Start by creating a new project of type “AIML Project”. A Notes.txt file is generated by the AIML project template containing detailed instructions on how to install the Character Server. Your project file will include references to some AIML files. One of them is “Library\Rules\Substitutions.aiml”, a file containing some commonly used substitutions rules. These rules act on the text input to remove punctuation and expand contractions such as “it’s” to “it is”. The template also generates an initial Rules file with some sample rules. A project may contain dozens of different rule files. You can create a new rule file using the File > New File… command, and then attach it to your project by selecting your Project node in Outline View, and using the Add AIML File toolbar button.

Editing rules The initial rule file contains 3 rules that demonstrate some commonly used techniques:

You can add a new rule by selecting the Rules node and using the Add Rule button. You edit the details of the rule by selecting it and working with the properties in the Edit pane.

33

The Pattern property indicates a pattern to be matched in the input. As a stylistic convention, all pattern text is often specified in capitals, but the case is completely ignored in achieving a match. The pattern for the first rule is “HELLO”. This will match “Hello” and “hello”. You can also use the wildcard character “*” in a template. For example “HELLO *” would match “Hello”, but also “Hello there”. The last rule (*) shown is effectively a catch-all that consists only of the wildcard operator. A rule’s Template property contains the text that is displayed as a response:

Rules that include a wildcard will only match when more precise rules fail to match. The portion that matched the “*” character is available for insertion in the Recurse and Template properties by repeating the “*” character. The first rule (HELLO) has a blank template, but instead it has a Presentation object attached to it that acts as the template. You can edit this presentation in Script View by double-clicking on it in Outline View.

By using a presentation as the template, you can easily add recorded speech and character actions to your output. The convention is that if a rule contains text in its Template property, then this text is converted to a character response in a default manner, typically by including it as the single Say action of a presentation. This default wrapping behavior is done by the server script, after calling Respond. This allows you to provide precise control over the character for some responses, and a reasonable default for others. The second rule (HI) shows an example of reformulation. The pattern is “HI”, but there is no Template or Presentation. Instead, the Recurse property is filled in with a new pattern “HELLO”, indicating that if “HI” is matched as the input, then the system should treat this as if the string “HELLO” were entered instead. Recursion can be used to reduce a more complex input to a simpler one, or to map several alternative formulations to a simpler, canonical formulation for which you have an answer. Note that several other XML tags are available as part of AIML, particularly in the Template portion. When editing AIML files using the views, you may enter these tags directly in the Template property, or use the Script View equivalents.

Testing your rules Switching to Query View, you can now type test input and see the resulting output.

Note that you can use the up arrow key to retrieve previously-entered input. If your Character Server is properly configured, as described in the generated Notes file, then you will also be able to use Run in Browser to see these responses delivered by a character.

34

Appendix A – XML Application Model This appendix presents the XML application model used by the Character Builder and the Character Server. This material is useful for advanced authors who may be creating library extensions, and for developers creating solutions based on the Character Server. The appendix is intended as an overview of the model – specific details are covered in the Syntax Reference help file, which can be found in the Doc subdirectory of the product.

Include expansion You can include the contents of one file within another using the element. Consider the following example, in which the file ‘Main.xml’ includes the file ‘Include.xml’. Include.xml This is included content.

Main.xml <project> <stage>

When the Builder loads the file ‘Main.xml’, it effectively sees a single file: <project> <stage> This is included content.

The included file can have multiple top-level elements, even though XML documents are normally required to have a single root element. The included XML file can in turn include other XML files. As with normal object references, all file references are relative to the path of the XML file containing the reference. File references beginning with “Library” are resolved to the ‘Library’ directory of the Builder’s installation directory.

Entity expansion In XML, an “entity” is a tag that begins with the ‘&’ character and ends with the ‘;’ character, that expands to a given string. The Builder comes with a number of pre-defined entities: & < > " '

Expands to the ampersand character (‘&’) Expands to the less-than character (‘<’) Expands to the greater-than character (‘>’) Expands to the quote character (‘”’) Expands to the apostrophe character (‘’’)

Because the characters ‘&’, ‘”’, ‘<’, and ‘>’ are reserved characters in XML, if you need to use these characters in text, you need to use the corresponding entities instead. The Builder will automatically translate these characters for you when using the Views to edit your project. Custom entities are created using XML’s ENTITY syntax. Consider the following declaration:

35



Any instance of ‘&ms;’ will expand to ‘Media Semantics, Inc.’. Entities can be used in both attributes and in body text. Entities can also be used to represent extended and international characters, as in the following example.

This entity, and entities for many other international characters and symbols are pre-defined with the Builder.

Template expansion The Builder includes an integrated template system that lets you create new XML tags. The template declaration syntax is similar to that of XSLT, however it is somewhat simplified and more specialized-totask. Templates can be specified anywhere in a document, and will apply from the point where they are defined to the end of the document. Normally they are placed at the beginning of the document, or in a separate file included near the beginning of the document. Consider the following example. <project> <stage> <mybullet/> My Point

This is equivalent to the following XML: <project> <stage> My Point

You can refer to the attributes and elements of the original tag in the expansion. The expression “@x” refers to the attribute named ‘x’, while the expression “x” refers to the child element named ‘x’. You can use these values in the body of a template using the tag. You can also use them in an attribute by enclosing the name in curly braces. For example:

applied to: John Doe 35

is equivalent to: table> Name John Doe Age 35

The entire contents of the original tag can be inserted using the tag. You can also add attributes in a more explicit manner using the element. For example:

is equivalent to:

This capability can be used in conjunction with the and elements to provide conditional expansion. For example, to copy an existing attribute “id”, but only if one was specified, you can use:

A similar technique can be used to provide default values for an attribute if the attribute is not specified in the original tag, as in the following example.

Templates are used extensively for creating library extensions and Character Server solutions.

Identifiers Most XML elements, such as <stage/>, <presentation/>, and , map directly to objects in the application model. Some elements, such as (boldface), are not objects, but simply tags that are understood by a containing object, such as . Objects have a unique identifier, or id. You can assign an identifier to an object using the ‘id’ attribute: <stage id=”Stage”/>

Identifiers must start with a letter, and must contain only letters, digits, or the underscore ( _ ) character. You can often refer to an object in another element. For example the ‘position’ attribute in the XML below contains two references to the object named ‘Stage’. <project> <stage id="Stage" size=”640,480”>

Note that objects have identifiers even if they are not named explicitly with ‘id’. Normally XML documents require that each object id in a document be unique. The application model also include a ‘name’ attribute, which can be any string, and is largely ignored by the system excepts as a way to present a more friendly naming interface for content authors. The name attribute can include spaces, and need not be unique. For example the following is valid syntax:

File references File paths are always specified relative to the directory of the XML file containing the reference. For example, an image “MyImage.jpg” located in the subdirectory “Images” of your XML file directory would be referred to as “Images/MyImage.jpg”. Note that the UNIX-style forward slash (‘/’) and the DOS-style backward slash (‘\’) are both supported as a separator character. All file references beginning with the string “Library”, such as “Library\StdProps.xml”, will get resolved to the Builder’s library directory as if the library directory were a subdirectory of your project directory, even though the library directory is located in the product’s installation directory. When you deploy your project with a runtime such as the Server, you will also need to deploy the library files used by your project. If you’ve installed the Builder on the server, then library remapping will work as it does on your development machine. If not, then you can create a ‘Library’ directory under your project directory, so that the library references are resolved correctly without any redirection. You can also specify a location for the library using the Server’s SetLibrary() method.

Expressions Many attributes will accept an expression consisting of constants, operators, and functions. Expressions may be used for the ‘position’ and ‘size’ attributes of a visual object, as well as the target attribute for animation actions such as Point. However when rendering to Flash, these expressions are evaluated at the time of the render, and not at runtime.

38

Text

In this example, the operator ‘this’ refers to the object containing the expression, in this case the text frame itself. Expressions are especially useful in conjunction with template processing.

Constants The following types of constants can be used in expressions: Type Boolean Integer String Object Reference

Example true, false 3 ‘a string’ Span1

Note that string constants always take single-quotes. This can be confusing in XML View, since expressions are already contained in attribute values. For example the <externalcommand/> action takes a string expression, so the proper syntax is: <externalcommand args=”’test’”/>

Operators The expression syntax is similar to that of JavaScript, but includes some of the '$' operator aliases found in XSLT, as these avoid the XML control characters and are easier to use within XML documents. The operators are as follows. Operator Parentheses Conditional Logical Or Logical And Logical Not Equality Inequality Less Than Less Than Or Equal Greater Than Greater Than Or Equal Addition Subtraction Multiplication Division Unary Minus This Operator

Syntax () test ? a : b ||, $or$ &&, $and$ !, $not$ =, $eq$ !=, $ne$ <, $lt$ <=, $le$ >, $ge$ >=, $ge$ + * / this

Arguments Expression Test is Boolean, a, b are any type Boolean Boolean Boolean Integer, string, or boolean Integer, string, or boolean Integer, string, or boolean Integer, string, or boolean Integer, string, or boolean Integer, string, or boolean Integer, Real Integer, Real Integer, Real Integer, Real Integer, Real

The following table shows the operators in highest-to-lowest precedence order. Operators in the same row are evaluated in left-to-right order. An operator with higher precedence is evaluated before one with lower precedence. Logical operators use shortcut-boolean evaluation. Parentheses Conditional Unary minus, Logical Not Multiplication, division Addition, subtraction

39

Equality operators Logical And Logical Or

Functions A complete list of functions is available in the Syntax Reference. Some of the functions commonly used in Library objects include: Width(object) Height(object) Top(object) Left(object) Right(object) Bottom(object) Other functions are used to identify different objects in the hierarchy: ContainingScene(object)

Variables Variables are placeholders for values. For example you might define a variable “Happy” with an initial state of “false”, as follows:

Variables can be used directly in expressions, as in: <smile/>

Variables can be altered using the <set/> action: <set target=”Happy” value=”true”/>

Variables are not typed – you can assign any type of value to a variable at any time. Variables must be declared as children of the Project node. Variables are considered “global”, that is they can be accessed from any point in the XML file.

Visual primitives The Builder supports a number of visual primitives for use in scenes and slides. Images

Images can be SVG, JPEG or PNG images.

Text Frames

Text frames allow you to flow text in a specified region, and support simple HTML layout.

Rectangles, Lines

These are commonly-used primitive shapes.

Interaction primitives The Builder currently supports the following interaction elements. Buttons

Buttons can be used alone or in groups, and can take on virtually any appearance. Buttons can be used to initiate a number of predefined actions. You

40

can also link a group of buttons to a variable, such that each button assigns a different value to the variable. Edit fields

Edit fields let the user enter text. Edit fields are always linked to a variable: a change to the edit field is reflected in the variable, and a change to the variable is reflected in the edit field.

Coordinates and positioning All objects in the visual containment hierarchy have a bounding rectangle, which is the smallest rectangle that contains the entire object. The object itself can be of any shape. Objects such as scenes, slides, and grids let you place contained objects at any point using the ‘position’ attribute. Coordinates are specified in pixels, with the origin being at the top-left corner of the containing object, and positive y coordinates running downward. The following places a rectangle at coordinate 100,100 on the stage. <project> <stage size=”640,480”>

Objects are drawn on the screen in the order that they are encountered in the file, so that objects specified later in the file will appear in front of objects specified earlier in the file.

Text frames Text elements typically contain text and formatting tags, but they can also contain visual objects, such as . Visual objects are laid out in a text frame as if they were characters. <project> <stage> This is a test.

The element supports a subset of HTML, including simple tables. For a complete set of layout tags, please see the Syntax Reference. The contents of text frames are laid out as part of the Render to Flash process.

The Loader The Character Builder will generate one SWF file for each scene, slide, and presentation in the project, as well as a directory (.dir) file that describes how the various SWF files are related. It also copies a small Flash MX-based “loader” file from the library, for use as the root SWF file. Advanced users can also use Flash MX to create their own custom loaders, using the provided source FLA file, however this is not recommended for most users. You will see these files in the Preview subdirectory and also the Output subdirectory when you leave the Project’s Single-File property set to False. With this property set to True the .dir file and all the Flash files are combined into a single swf file in the Output directory.

Scenes The stage object can contain multiple scenes: <project> <stage> <scene id=”Scene1”>

41

… <scene id=”Scene2”> …

Objects are absolutely positioned on a scene using the ‘position’ attribute. A stage always has at least one scene. If no <scene/> element is declared, then there still is a single, implied scene. The stage must be the top-level visual object of the project, and always occupies the entire display surface. Only one scene will be displayed at a time, and this scene takes up the entire stage. Switching between scenes on a stage is much like switching between pages in a web browser. You can navigate between scenes using the <movefocus/> action.

Slideshows The slideshow and slide objects behave just like the stage and scene objects, except that you can place a slideshow in a scene, leaving room for a navigation interface and a character. <project> <stage> <slideshow> <slide> ... <slide> ...

You can navigate between scenes using the <movefocus/> action.

Grids Several objects can be wrapped with a Grid object to create a composite object. Grids are not exposed directly in the Builder, but are often used in creating library extensions. Alert!

All position attributes for objects within a grid are relative to the grid object. The size of a grid can be specified explicitly, or it can simply assume a size based on its contents. Grids and the grid contents can be placed using expressions. These expressions are evaluated at render time, however no check is made for circular references. When a grid is laid out, first the size and position of each contained element is determined, in the order in which the child elements are encountered, and then the size of the grid is determined, if this size was not already specified.

Actions and scripts Elements such as <slide/> and act like nouns, while other elements, such as and <show/> act more like verbs. Their attributes are often references to object instances, as in: <show target=”img1”/>

Groups of actions, or “scripts”, can be placed in presentations and buttons. While the Builder’s Script View supports a common set of actions, there are several other actions that are available in XML View. The term “script” is used in the theatrical sense – there are some important difference between Media Semantics

42

scripts and programming languages. For example in most systems, a script is meant to execute as quickly as possible and then return control to the system. A Media Semantics script contains commands such as <say/> that must be executed asynchronously.

Character actions Actions such as <say>, , etc. are used to control a character’s behavior at a high level. The say action is special in that it allows other actions to be embedded within it. Embedded actions become eligible for execution as they are encountered in the text of the say element. If an action becomes eligible, but the character is already executing another action, then it is queued up for execution when the current action is complete. The say action will be complete when its associated audio is finished and when all embedded actions have completed.

Layout actions In addition to ‘size’ and ‘position’, visual objects have the properties ‘hidden’, and ‘opacity’. An object with the attribute hidden=”true” will initially be hidden, and can be made to appear with the <show/> action. A visible object can be hidden with the action. Visual objects can also specify an opacity value from 0 (full transparent) to 100 (fully opaque), using the ‘opacity’ attribute. The opacity can be controlled with the and actions.

Branching Control flow within a script can be affected using branching elements. The syntax for branching is similar to that of XSL: <say>I seem to be functioning normally. <when test=”2+2=4”> <say>I seem to be functioning normally. <say>I don’t feel so well, Dave.

Presentations Presentation elements let you connect visual content with voice and action. While the voice is often associated with a character, you can also use presentations to create a background narrative that accompanies visual content. Presentations are atomic units of presentation. You can interrupt a presentation, but you can only restart it from the beginning. In some cases you will have a long presentation that builds up a complex piece of visual content in the same scene or slide. In this case you may want to let the user navigate within the presentation by breaking the presentation down into smaller presentations, each within its own step. Presentations are specific to a character. You can have two characters, each with its own presentation, and the two presentations can execute asynchronously. You can start a presentation using the <startpresenting/> action. Once started, a presentation runs through until the end, and then stops. You can also end a presentation with the action, to chain multiple presentations together in a single, uninterrupted monolog.

43

Presentations always assume that the character is in its initial, or default state, when they begin. Presentations also end by returning the character to this same default state. A presentation can be stopped prematurely using the <stoppresenting/> action. If a presentation is ended prematurely, then it will cause the character to first complete its action, and then return smoothly to the default state. Presentations can be marked as being “idle” presentations. The Loader keeps track of whether a character is “presenting” or “idle”. When a non-idle presentation completes, the Loader normally chooses an idle presentation. This presentation is played repeatedly until the character enters presentation mode again.

Dialogs Dialogs are a special kind of presentation involving multiple characters. Only one character at a time is active in a dialog. Dialogs use the <setactivecharacter/> action to indicate which character is active. All non-active characters are in a special mode in which they may perform certain automatic actions, but otherwise perform no action.

Events Scripts The <script/> element contains actions to perform in response to a given event. The only event currently defined is the “ontakefocus” event, which is triggered when a scene or a slide comes into view (takes the focus).

AIML AIML files can end in the extension “.xml” or “.aiml”. A typical project will contain several AIML files. You attach an AIML file to a project by adding an AIML Reference () to the project element: <project>

AIML rules are only executed by the Character Server. However a query containing AIML References can also be tested in the Character Builder, using the Query View. A <stage/> object, if present, will be ignored by the Character Server for the purposes of responding to user input with the Respond API. Likewise, the AIML file references are ignored for the purposes of generating Flash SWF files. The “AIML” template in the File > New Project dialog, creates a typical project that combines a Flash frontend with a Character Server back-end. An AIML file normally consists of the element, which contains any number of rules, or “categories”. <pattern>HELLO

The pattern portion of the rule is matched against the user’s input. If a match is found, then the template portion is emitted as the response. The pattern portion is case-insensitive, and can include the “wildcard” characters. As a matter of style, pattern expressions are often expressed in uppercase. The template (output) portion can include control tags, including tags that allow the system to reprocess the template portion as if it were entered by the user. This recursive ability allows for the creation of rules that simplify a complex input through one or more intermediate stages.

44

All tags that don’t have specific meaning to the AIML parser are simply passed through in the response. By convention, Media Semantics projects use the <presentation/> tag directly within the