|
Web Speak Review
PLEASE NOTE -- THIS PAGE IS OBSOLETE -- CHECK THE NEW PAGE FOR UPDATED INFORMATION. IT HAS BEEN LEFT POSTED FOR THOSE WHO MAY HAVE BOOKMARKED THE PAGE. Microsoft Agent characters have been around since the late 90's and really don't seem to be used much on websites. The disadvantage was that you had to know how to code them and they don't work on all browsers. They do, however, have advantages that offset that. They talk to you, they get your attention, their animations alone, such as a doubtful look or surprised look, can convey much more than just the spoken or written word. Not only that, you pay Microsoft nothing for using them. Thanks to Web Speak, you no longer need to know code to instantly add these characters to your web site. Download and install Web Speak and follow along with the examples. For the record, Web Speak is NOT made by Microsoft, but is a tool that helps you use a Microsoft Technology. If you haven't seen and heard Merlin yet, you either 1) Aren't using and Active X enabled browser like Internet Explorer or 2) Need a driver mentioned in the next section. Correct the problem by changing browsers or following the directions in the next section - it WILL be worth it. MS Agent drivers WebSpeak and the web sites it creates use Microsoft Agent drivers to work. If you want to go into all of the details, check the Microsoft Agent page. The quick story is: MS Agent is installed in the operating system of Windows XP, 2000 and ME. Users of Windows 95,98,and NT will be prompted to download the drivers. XP users must download and install the following two drivers: 1) SAPI 4.0 2) L&H Speech Engine If you're really not interested in why you need these, just skip to the next section. If you really want to know why, the reason is: Microsoft Agent uses SAPI 4.0 to provide speech services but Windows XP comes with SAPI 5.0 which is not backward compatible. You can, however, have both SAPI 4.0 and 5.0 on your PC at the same time but you'll need the L&H speech engine to sort them out. The addition of SAPI 4.0 and the L&H Speech Engine causes no problems at all with the operation of SAPI 5.0 Commands 
The picture above shows the Web Speak window; as you can see, it takes up very little room on your PC screen. The heart of Web Speak is the 6 commands you use to control the characters. When you start, the commands window will be empty except for an icon with "project" in it. Below the window, to the left of the "add" button will be a text box that expands to a list of six commands when you click on the down arrow. 
In all new projects, you must add the character first by selecting "Show Character" from the list of commands and clicking the "Add" button. Character menu to the left of the commands window will show you a list of available characters when you click on the down arrow. 
For our example, we will select Merlin. Next we will move Merlin towards the center of the screen so we can see him better by selecting and adding the "Move to" command. 
To the right of the commands window will be a set of sliders that will show you where you want Merlin to go. For this example, we'll set both the x and y settings to 250. You can also type any value you want in the appropriate text box. Please note that the characters do not cause the web page they appear on to scroll so they will move off the screen if you pick a value larger than the screen size. Character position is also measured from the top left hand corner of the screen and not the web page. 
Next we'll add some animation by selecting the "play animation" command and clicking the "Add" button. A list of the available animation actions appears to the right of the command window. Beneath that is the animation description window which, unfortunately, doesn't work. This really isn't a major issue since the action names are descriptive enough to guide you; I just wish they were in alphabetical order! When adding a series of animation commands, remember, you select the animation AFTER you click add. If you click add after selecting the animation, it add an extra one that usually defaults to the rest pose. The key to good animation is the choosing the proper combinations. Some of the combinations are obvious because they're numbered such as idle1_1,idle1_2, idle1_3. Others aren't as obvious so here's a short list for Merlin.Choosing the version of an action with an "ing" ending seems to make it last until another action gets it out of the loop. For instance, read will perform a short animation while reading will continue endlessly and never show the next animation. Read and Write have three part animations follow a "start - continued - return" pattern. For example, Read, ReadContinued, and ReadReturn. The "continued" animation generally repeats the action of the starting animation, and is usually included to lengthen the animation. If you leave it out and use Read, ReadReturn, you'll still get a fluid animation but it will be shorter. Some motions have three part animations that follow a "start - blink - return"pattern such as LookDown - LookDownBlink - LookDownReturn. Some animations like Search and Process are one command animations. Here is a partial list of what actions a few of the less obvious animations performs: Do Magic (2 Part) - Puff of smoke Announce (1 Part)- Blows trumpet Get Attention (2 or 3 Part)- knocks on the monitor screen Idle 1 series - Looks around Idle 2 series - looks at wand Idle 3 series - Yawns/sleeps Process (1 Part) - Boiling green pot Search (1 Part) - look at green ball Sometimes the animations and their sound effects get cut off because they don't load fast enough. If you want to emphasize a certain movement, like Announce for example, you may with to put an unimportant animation such as RestPose in front of it. That way, the unimportant animation will be the one cut off and not the one you want to see. Remember that these movements are for Merlin only. The other three characters have movements that are similar but not exactly the same. Another tip is don't change the character after you've set up animations since the animations change. For instance: 1) Select Merlin as a character 2) Set the animations to Read - ReadContinued - ReadReturn 3) Change the character to Genie 4) The animations will have changed to Suggest - WriteContinued - Idle1_6 even though Genie does have Read commands. You will only see these changes when you go to the preview code window. The pause command will have the character wait for a predetermined amount of time before he performs the next one. The time is changed by moving the slider to the right of the command window. Holding the left click button down while on the slider will display the amount of seconds. Four seconds was selected in the following example. 
The hide character command will remove the character from the screen. Calling another action automatically makes the character reappear so you can't make it vanish and reappear at another spot on the page. Finally the Speak command. Select "Speak" in the command menu and click "Add". This will open the following window. 
Printing in all caps causes the character to pronounce each letter which could be used for emphasis.
Using the menu bar, select the output to HTML will save the file as a web page.
You have now created a web page that is totally blank except for the animated speaking character. While it is novel and eyecatching, it obviously need a bit more work.
Using with other web pages WebSpeak really doesn't have much else for web page creation so you'll have to use it with another editor if you want much more than a blank page with a talking character. The easiest way to use WebSpeak with other web pages is to create the character actions, export the page to HTML and open that page with the HTML editor of your choice. This will only work if you're creating a new web page. If you have an existing page, you'll have to copy and paste the code from WebSpeak into your existing web page. This isn't very difficult; click this icon  to open up the preview code window.
The key to successful cutting and pasting is knowing where to put what. Most web pages have the following tags: HTML - HEAD - BODY and tags to close that section: /HTML - /HEAD - /BODY The WebSpeak code goes in the HEAD section. To do this, copy the code in the code preview from the OBJECT id = "AGENT" line all the way to the "End of WebSpeak VB Script" line. After this has been copied, paste it anywhere between the HEAD and /HEAD tages on your web page. Right under the TITLE tag in your web page is a good place. If you need a hint, click the "view source" option on this web page. The WebSpeak code for Merlin is between "Here's where I pasted the WebSpeak Code" and "End of WebSpeak VB Script". Referencing Images If the character moves randomly around your web page, the above methods are fine. You'll need to do a little more if you want the character to actually reference something. When referencing items on your web page, you should remember two things. First, the motion function of the characters is based on pixel distance from the upper left hand corner of the screen. Second, the character does not have to stay on the web page. If you minimize or reduce the size of the web, the character will still roam around the screen to the position you specified. An example of a character referencing an image can be seen in the WebSpeak Tour page which has Merlin pointing out certain functions. The following procedure shows one way to make a page like this. 1) Using your favorite HTML editor, create a web page with images in absolute positions. Based on the size of the image and it's location, you'll know where to move Merlin. 2) Plan what you want the character to do and use WebSpeak to create the movements. 3) Bring up the HTML page with the images on your browser. 4) Test the WebSpeak page on a different browser window. 5) Minimize the WebSpeak test page. The page will vanish but NOT the character. 6) The HTML image page will now be visible and you'll see the character on top of it. Watch where the character goes and make some minor adjustments to the location until it looks good. 7) After the character performs as desired, click on the "Preview Code" button which will open a window containing the character code. Copy and paste the code to your HTML image page as shown in the "Using With Other Web Pages" section above. 8) Save the HTML image page with the new code and open it with your browser. For those using Web Effects, here is an easy way to create the image file: 1) Click on the insert image icon on the top menu bar. 2) Under the "Position" selection on the menu bar, select "absolute". 3) Under the "Position" selection on the menu bar, select "Set Grid". 4) Set the grid to x = 200, y = 100. 5) Drag the image over one and down one. The top left corner of the image will now always appear 100 pixels from the top of the browser page and 200 pixels from the left. Use this reference when planning the character's movements. Use With Buttons You can make your characters interactive by copying the proper code. The example page is shown on the Web Speak Buttons page. In the example, the onclick value of the images was used to call a VBScript subroutine that controls the character. Follow these steps to see how it's done: 1) Create a web page with images on it that you want to have activate the character. In the example, four images of text were used. 2) Use Web Speak to create the movement of for the first image. 3) Copy the code to the HTML page as specified above. 4) On your HTML page, select the code from "Sub Start()" to "End Sub" and copy it right below the original code. You will now have two identical subroutines named "Sub Start()". 5) In the first "Sub Start()" subroutine, delete everything except the lines "C.Show" and "C.Hide". 6) In the reference to the first image on the HTML page, add onclick = "FirstAction()". 7) Change the name of the second "Sub Start()" subroutine to "Sub FirstAction()". 8) Clicking on the first image will now start the character animation. If you're still not clear, go to the example page and use the view source option to look at the page code. Legal notices Since these talking characters are the property of Microsoft, there are a few legal guidelines to follow. The exact agreement as well as lots of other useful information on these characters can be found at the MS AGENT page. A few of the things I have done to try to comply with this are: 1) Copyright information: Added this to my web pages using the characters: "Uses Microsoft Agent technology "Merlin (c) 1996-1998 Microsoft Corporation. All rights reserved" Replace "Merlin" with the other character's name. 2) I few other things I don't do: - Don't use Microsoft's name or logo to promote my site. - Don't use the characters to say nasty things about Microsoft. - Don't use the characters with existing logos. For example, one of the other characters is a blue Genie. I don't think they'd like it if I had him flying around saying "I'm the Shareware Genie!" You should check the MS AGENT site for exact legal information or if you have any other questions. Conclusion and Registration There is no finer introduction to Microsoft Agent characters and their uses than Web Speak. Now you can easily place moving and talking characters on your web site and make it more memorable. Web Speak's easy interface and low registration cost of $19.99 make it a web design tool you'll want to have. The program will ask you to register during start up or you can select "register" from the "About" menu selection. When registering, you will also be offered a special deal to add an additional 13 characters to Web Speak. Try Web Speak and liven up your web pages. If you develop an interest in Microsoft Agent technology, I advise you visit the Microsoft Agent page listed above. The proper use of the characters along with VBScript or DHTL would create some very impressive effects for your web page. You can download the trial version of Web Speak by clicking on the button below. I hope you find the program useful and would like to hear your comments at - The Genie -
|
|
