First let's have a look at what this class does. The gray background is there to show you the size of the movie in order to better demonstrate how the WordBubble automatically stays aligned with the stage.


Now, download the wordBubble.zip file and let's dig into the code and see how this works.

The Demo Files

Open up the wordBubble.zip and you will see a bunch of files and folders. If you set up a class library with the main folder being called flashClasses, you can drop the ca folder and all it's sub folders into the flashClasses folder and not have to change a thing. The caurina folder, which holds all the files and folders related to the Tweener classes can also be placed in the flashClasses folder and used as is.
The wordBubbleTest.fla is the fla that runs the demonstration we want to look at first. Looking through the fla, you will see that there is nothing on the stage, but you will find some items in the library and you'll see that under the Properties heading, the Document Class is set to WBDemo. The WBDemo.as class is commented to give you an idea of how this is set up. If you take a look at it, you see that we have set up a variable called wb as an instance of our WordBubble class. In this example we will be using the ROLL_OVER and ROLL_OUT event listeners to call the WordBubble. Have a look in the overHandler function and you'll see how little it takes to set this class in motion.

wb = new WordBubble(150, 25, 0x000000, 0xff0000, 0x980101, "This is Button 1 and it uses the timer feature.", 2);
setWBXY();


We use our variable wb to create a new instance of WordBubble and pass the class several parameters.
1) width of the WordBubble
2) height of the WordBubble
3) text color
4 & 5) the colors of the background gradient
6) the text we want to display
7) an optional parameter that sets up a timer function to automatically make the WordBubble disappear, after 2 seconds in this case.

The setWBXY() function is responsible for handling the positioning of the WordBubble on the stage.
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);
}


We use the mouseX and mouseY properties, then subtract half the width of the WordBubble to center it in relation to the mouse pointer. Next we make sure that it remains on stage by correcting it's position if necessary. Once everything is set up properly, the WordBubble is added to the display list. Now let's take a look at the WordBubble.as class and see how it operates.