MSAgent Style Critters for your Web Pages

• Download jcritters.zip - 24.9 KB

Introduction

MS Agent style class for Web Pages. Uses javascript and (x)html only. No Active-X or other plug-ins required.

Background

I recently needed a way to communicate with the users of a web page via a somewhat "interactive" manner, without using flash or java. Alert boxes were simply too obtrusive. I thought about MS Agent, but then it would only be compatible with IE. So I decided to build my own that would, in part, mimic the functionality of MS Agent, but be as cross-browser as possible.

Using the code

The class itself is pretty easy to use. You supply your own image and small adjustments to make sure everything goes where you want it.

<script src="jcritter.js" type="text/javascript"></script>
<script type="text/javascript">
    var newCritter;
    window.onload =    function()
    {
    var monkey = 
    {
        width: 128,
        height: 128,
        src: 'monkey.gif',
        adjustTop: 15,
        adjustLeft: 20,
        speechTop: 45,
        speechLeft: 65
    }
    myCritter = new JCritter(monkey);
    myCritter.draw();
    myCritter.show();
    }
    
</script> 

Properties

//You shouldn't set any of these.  They are included so you can test
//the current state of your critter.  Changing them manually may cause
//unexpected results.
//Display JCritter version
critterObject.version
        
//Boolean value.  Shows current display state of the critter
critterObject.isHidden

//Boolean value.  Shows current speaking state of the critter
critterObject.isSpeaking

Methods

//Draws our critter and places it in the right place
//Shouldn't need to use it
critterObject.drawAgent
    
//Draws our speech balloon, relative to the citter and the speechTop/Left offsets
//Shouldn't need to use it
critterObject.drawBalloon
    
//Function that draws both balloon and citter
//This should be used when you create your object, otherwise, it won't position correctly on the page
critterObject.draw
    
//Make the word ballon appear and say foo
critterObject.say(foo)
    
//Stop talking critter!
critterObject.hush
    
//Show our Critter
critterObject.show
    
//Remove critter
critterObject.hide

//Mute critter
critterObject.mute

//Unmute critter
critterObject.unMute
    
//Remove and destroy critter
critterObject.destroy
    
//What happens when you click on the agent graphic.  Default is Hush
//set by doing: critterObject.Click = function() {...}
critterObject.onClick
    
//What happens when you move the mouse over the image.  Default is nothing;
//set by doing: critterObject.MouseIn = function() {...}
critterObject.onMouseIn
    
//What happens when you move the mouse away from the image.  Default is nothing;
//set by doing: critterObject.MouseOut = function() {...}
critterObject.onMouseOut

//Set font size
critterObject.setFontSize(size)

//Set font color
critterObject.setFontColor(color)
    
  
//Switches the the image you specify.  Useful for making animations
critterObject.Play('animationName') 

Custom

//Add your own custom critters!
    var tux = 
    {
        //image width
        width: 112,
        //image height
        height: 112,
        //image source
        src: 'tux.gif',
        //how far from the bottom of the page the image is
        adjustTop: 20,
        //how far from the right of the page the image is
        adjustLeft: 20,
        //you have to make some adjustments to the speech bubble
        //so that you can get it right where you want it
        speechTop: 0,
        speechLeft: 50 
        //You can supply your own images here, which can be called using the .Play('animation_name') method
        animations:
        {
            animation_name: 'animation_image.gif'
        }
    }  

Animations

If you supply numerous gif images(probably animated), you can fake some animation. The big drawback to this is that javascript is not capable of knowing when an animation "ends". Because of this, you will want to be careful using looping animations, and your animations should return to the default image you want to display when your critter is idle.

Compatibility

Bugs

License

BSD License

Points of Interest

This code works best on "Web 2.0" sites, where pages are not forced to refresh as often.

Hompage

Please see the project website for current versions/bugfixes http://www.jcritters.com

History

• Monday, April 28 2008 : Updated article
• Wednesday, March 5 2008: Restored article(what the heck?)
• Tuesday, October 23 2007: Restored article(deleted accidentally)
• Tuesday, October 17 2007: Uploaded Version 0.5
• Animation Support added
• Removed event handlers on Destroy
• Tuesday, October 16 2007: Uploaded Version 0.4