What's Part 4 all about?
In Part 4 we'll show you how to animate your bot so that he'll:

• move his mouth when speaking
• display his answer in a "speech bubble"
• move to different places by using controls in the right hand frames page
• give you a message about his new location when you move close by

Click here if you'd like to see an example running on our site.

Step 1: Setting up the files
Firstly you'll need to download the files here, and use e.g. WinZip to unzip them into a folder. Now copy all these files into the same folder on your web site (e.g.called bot).

If you're using the same folder as you used in Parts 1-3, then you'll need to overwrite a few of the earlier files which have the same names as these new ones.

NB You don't have to upload the files in your cgi-bin again (pandorabots.cgi and call) as these stay the same as in Part 2.

Step 2: Test it out!
Type the address of your new page in your web browser e.g. www.yoursite.com/bot/ where yoursite.com is your site's address and bot is the folder you saved the main files in.

When the page has loaded, try asking the bot a question by typing it in starting with B: e.g. B: How are you? You should get an answer in the chat line starting with Bot Says: e.g. Bot Says: Hi.

You should also see the bot's mouth moving approximately in sync with the words, and the answer will be displayed in a "speech bubble" above his head.

Click the Position buttons on the right hand side of the page. Each time you do he will give you a brief message and then move to the position. If you follow him and stand near him, he will also give you a comment about the location (this tends to be "blah de blah" but you can change this later!).

How do these new pages work?
You have three pages similar to those you created in Part 3:

• Index.htm is a frames page with two frames.
• The left hand frame (frame[0] in javascript))holds a new version of botmain.htm, which contains the atmo world and the java applet for the bot.
• The right hand frame (frame[1]) in javascript) holds a new version of botcontrol.htm which contains the speech plugin and now also includes the Position controls for moving the bot around.

You also have two new versions of the scripts that run the world:

• Base.js which is the main script for the worlds and communicates directly with the main page (botmain.htm),and via that to the control page (botcontrol.htm).
• Bot.js which is the script that loads the bot, controls its animation, and also communicates with (and through) base.js.

What does each page/script do?
You may want to experiment with these html pages, and javascript files - they are all commented to explain how they work.

Basically, for speech:

• The base.js script now sends the bot's answers from the atmo world to the script bot.js.
• Bot.js sends the sentence to the speech engine in botcontrol.htm via botmain.htm.
• It then splits the sentence into words.
• It then sets up a timestep so that each word triggers the bot animation walk (don't tell me I know - this bot actually does walk the talk!) and prints the word in the speech bubble at approximately the same time as the speech engine speaks them.
• This is patently not lip syncing - merely a rough approximation to make it look a bit like it!

and for movement:

• The Position buttons on botcontrol.htm send a message to bot.js via botmain.htm and then base.js (yes I know it's complicated!)
• Base.js contains the list of anchor points in the world base.aer which map out the positions and the bot's various messages.
• Bot.js moves the bot via a timestep to the location and then waits for you to get close and prints you a message about the location.

In Part 4 of the tutorial we'll show you how to adapt the pages and script so you can create your own bot and incorporate it into into any world.