Here are the steps we need to do in order to set this up in a situation where we have a Document Class file being used.

1) Declare a variable for the WordBubble
private var wb:WordBubble;


2) Set up event listeners on your buttons or MovieClips.
but1.addEventListener(MouseEvent.ROLL_OVER, overHandler);
but1.addEventListener(MouseEvent.ROLL_OUT, outHandler);


3) Set up the functions overHandler and outHandler. These are set up for use with buttons. If you are using MovieClips be sure and use the overMCHandler.

private function overHandler(e:MouseEvent):void{
    switch(e.currentTarget.label){
        case "Button 1":
            wb = new WordBubble(150, 25, 0x000000, 0xff0000, 0x980101, "This is Button 1 and it uses the timer feature.", 2);
            setWBXY();
            return;
        case "Button 2":
            wb = new WordBubble(150, 30, 0x000000, 0xff0000, 0x980101, "This is Button 2");
            setWBXY();
            return;
        case "Button 3":
            wb = new WordBubble(100, 25, 0x000000, 0xff0000, 0x980101, "This is Button 3");
            setWBXY();
            return;
    }
}

private function outHandler(e:MouseEvent):void{
    removeChild(wb);
}


4) Set up the function setWBXY() to position the WordBubble.
private function setWBXY():void{
    wb.x = mouseX - (wb.width/2);
    if(wb.x < 5){
        wb.x = 5;
    }
    if((wb.x + wb.width) > stage.stageWidth){
        wb.x = (stage.stageWidth - wb.width) - 5;
    }
    wb.y = mouseY - (wb.height + 5);
    if(wb.y < 0){
        wb.y = mouseY + 5;
    }
    addChild(wb);
}


And you are good to go!

Can I Add This Code to the Timeline?

Sure you can. The one big difference is the designation "private". Private can only be used inside of Class files, so just eliminate all of the private designations from the code that you place on the timeline and put in things like var wb:WordBubble; instead of private var wb:WordBubble; and function setWBXY instead of private function setWBXY. You will still need to import your WordBubble class unless you include only the WordBubble.as file in your project folder. If you do this - and you know you should be setting up your class library - make sure that you change the package details at the top of the file to read just package{ instead of package ca.xty.myUtils{. I have included a movie called wordBubbleFLATest in the zip file to demonstrate this.

Customize Your WordBubble

The parameters you set give you quite a lot of variety and flexibility, but you don't have to stop there. Play with the code that makes up the rounded rectangles. You can alter their shape or add more colors to the gradient. In the drawRoundRect constructor - drawRoundRect(0, 0, _wbWidth, _wbHeight, 12); - the last parameter - 12 - represents the curve of the rounded rectangle. Play with this number to change the shape of the WordBubble. To mess around with the gradient fill, see the tutorial- AS3 Dynamic Gradient Fills by Ryan Walker - for an excellent explanation on the workings of the gradientFill.

Another way to add variety is through your choice of event listeners. Here we have used the ROLL_OVER/ROLL_OUT MouseEvents, but you don't have to. For instance, I recently used the WordBubble in a project that required a prompt if the user does not perform a certain action to get started. I set up a Timer to wait 10 seconds and if a particular ComboBox was not clicked, then a WordBubble instance appears and prompts the user into making a choice from that ComboBox. Once the choice is made, the WordBubble disappears. If the choice is made before the 10 seconds has elapsed, the timer is stopped and the WordBubble never appears.

And, of course, you can add additional fields, such as a title field. The WordBubble as it is, fills a simple need , but it can be an excellent start for creating a more complex class, and that will be the subject of my next tutorial. Called the InfoBox, we will be building a class that will let us include things like an image and hyperlinked text.

Worth Noting

Something I noticed from the feedback on my first tutorial dealing with AS Classes was a common mistake a few people made, as did I, when dealing with Classes for the first time. The AS files do not get uploaded to your server. Unlike an XML file, or a Text File, Flash does not read information from the AS files on your server. AS files are complied into the final swf when you publish your flash movie. So, when you make changes to any of the AS files, save the file, then re-publish your movie to make the changes take effect.

As always, if you have any questions, don't be shy. Contact information can be found in my profile.