Embedding Characters

Character Maker 4.2

Embedding Characters

You can use Character Maker to embed characters inside of web pages. The conversation interface elements (the user’s text entry box and the conversation history field) can be placed inside of a web page and used to drive the content of another frame or browser window. These context web pages can contain hypertext, flash, animated GIFs, or anything else your web browser can display, and be located on any server.

For a simple demo of this feature, go here.

Annotating the conversation with web directions is easy: the media field for each response can include a URL. The applet, when it encounters a response with a media URL, updates a browser window or frame to display that URL. By default the media URL will always open in a new window, but you can target a frame or browser window by specifying it to the embedded character applet. The initial media shown for a character can be set by pushing the “Character Info” button within Character Maker to bring up the window which allows you to set this property.

To embed the character in a web page you build a web page on any server which contains an applet tag with parameters that point to your character on the character maker server.

Next we’ll go over a sample web page for housing the applet. First we need to construct a web page with two frames: one which will contain the conversation Java applet and another for holding the web content to be displayed alongside it:

<frameset cols="250,*" border="0" frameborder="0" framespace=0><frame name="embed_dialog" src="embedChar.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize border="0"> <frame name="context" src="http://www.insidemacgames.com" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" noresize border="0"> </frameset>

The first frame, called “embed_dialog,” will contain the conversation interface components. The web page “embedChar.html” will go in that frame, and we’ll discuss it in a moment. The second frame will fill the remainder of the window, and it is called “context.” All of the web content triggered by the conversation will be displayed in the frame called “context.”

The following web page called “embedChar.html” embeds the conversation interface applet:

<HTML> <APPLETCODE="edu.mit.ceci.chm.EmbedChar" WIDTH=100% HEIGHT=100% CODEBASE="http://199.77.199.245/~chaim/ChMkr4-2/Bin/"><param name=author value="chaim"> <param name=character value="Grandpa"> <param name=mediaTarget value="context"> <param name=cols value="29"> <param name=rows value="30"> </APPLET> </HTML>

The parameters are straightforward: author specifies which account the character belongs to (case sensitive), character the name of that character (case sensitive), and mediaTarget the name of the frame or browser window the in which the media URLs are displayed. In this example the character “Grandpa” from account “chaim” will be displayed. The media associated with the conversation will be displayed in the frame called “context,” defined in the first web page. The EmbedChar applet does not automatically fill the frame it is placed in— you must specify its size in terms of columns (cols) and rows (rows) of text. This requires experimentation to get right.