Flashbot Tutorial Details

The Flashbot script has now been updated to Actionscript 3 (AS3). It is available here.

After setting up a bot with Pandorabots fantastic ALICE variant, I wanted more control over the appearance of the interface and thought that using Flash was a good way to go.
This is how I created a basic flash interface to be used with the Pandorabots engine. You may well want to add more functionality, sound, animation, but hopefully this will give you a step in the right direction. I’m not a very good flash programmer, so there could well be areas that could be improved, refined.
Source files flashbot.fla (64kb).
Open up flash and create a document to the size you require.

Step 1 : On Frame 1, place a textbox along the top length of your scene allowing for a button on the right hand side, set this as ‘Input text’ and give it the name ‘user’. Give this a line type of ‘Single Line’. Check the ‘Show border around text’ property. This is the area that the user will type in his/her questions.

Step 2 :Place a large textbox, filling up the remainder of the space. This should be set as ‘Dynamic Text’ and be called ‘reply’. Give this text area the line type of ‘Multiline’ and check the ‘Render as HTML’ and ‘Show border around text’. This is where the responses from Pandora will appear.

Step 3: Place another textbox at the bottom right of the stage. This should be set as ‘Dynamic Text’ and be called ‘custid’. Give this text area the line type of ‘Single Line’ and check the ‘Render as HTML’ and ‘Show border around text’. This is to show you the CUSTID. This can be on the stage, or hidden off the stage.

In the actions on this frame place:
// This is to move the focus always to the input text box, // so that the user doesn’t have to click to select this area. // _root.user being the name of your text input box Selection.setFocus(_root.user); // This code utilises Flash’s shared object function. // It checks the user’s machine for a object called ‘custid’ // and if it finds it, then it displays it into your ‘Custid’ textbox. myLocal_so = sharedobject.getLocal(“custid”); _root.custid.text = myLocal_so.data.name; // You can enter a message that you would like the new user to see when they first // visit your page. This can include HTML tags as the textbox is set up to render HTML. _root.reply.htmlText = “Hello, my name is Chatbot. I am being trained to answer your questions.”
Ok. You now need to create a Button on the stage. Quickest and simplest way for this is to create a small box with the drawing tools. Drag and select this box, right click and select ‘Convert to Symbol’. Select ‘Button’ and there you have it.
Drag it into place next to the input text box.
Make sure the button is selected and open up the actions.
Copy and paste this script into the actions of the button :
on (release, keyPress “<Enter>”) { var botSend = new LoadVars(); botSend.custid = _root.custid.text var botReply = new XML(); botSend.botid = “YOUR BOTID”; botSend.input = _root.user.text; botSend.sendAndLoad(“http://www.pandorabots.com/pandora/talk-xml”, botReply); _root.reply.htmlText = “Awaiting reply….”;</p> <p> _root.user.text = “”; botReply.onLoad = function(success) { if (success) { _root.custid.text = botReply.firstChild.attributes.custid; myLocal_so.data.name = custid.text; _root.reply.htmlText = botReply.firstChild.firstChild.nextSibling.firstChild.nodeValue; } }; }
An explanation of this script
In order for you to contact pandorabots, you need to send the variables ‘input’, ‘botid’ & ‘custid’ (if the user has previously visited).
When you send variables to http://www.pandorabots.com/pandora/talk-xml, you receive back a reply formatted in XML.
// Create the container for your variables, this will be what is sent to pandora. var botSend = new LoadVars();
// This will specify if the user already has a Custid. If not, then the first response // from Pandora will contain one, which we store in the shared object function of Flash. botSend.custid = _root.custid.text
// This is to tell Flash that the response we will receive from Pandora is XML formatted. var botReply = new XML();
// You need to replace this BOTID with your own. botSend.botid = “<font color=”#990000″>d0f69734de348d5a</font>”;
// This sets the input variable to be the text that the user has entered. botSend.input = _root.user.text;
// botSend is the information sent to Pandora in a URLEncoded format. // botReply is the XML that it receives back. botSend.sendAndLoad(“http://www.pandorabots.com/pandora/talk-xml”, botReply);
Whilst the user is waiting for a reply from the pandora server (which is normally very quick), it is good to let the User know that what he has typed is being dealt with. We replace the main reply text with a message of our choosing ;
_root.reply.htmlText = “Awaiting reply….”;
We also delete the user’s input text so that it is cleared for the user to start typing again ;
_root.user.text = “”;
Once we know that the data has been received, we can parse the XML for the information we require.
botReply.onLoad = function(success) { // onLoad checks to see if it has finished receiving the XML reply. if (success) { // If successful // We extract the custid from the XML _root.custid.text = botReply.firstChild.attributes.custid; // We set Flash’s shared object to be the custid, so that whenever the user returns, it will know who they are. myLocal_so.data.name = custid.text; // We extract the bot’s reply from the XML. _root.reply.htmlText = botReply.firstChild.firstChild.nextSibling.firstChild.nodeValue; } };
Save, publish and hopefully you’ll have a nice new flash interface for your Pandorabot !
It should look something like this :