Get Adobe Flash player

The Recap

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.

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

private function outHandler(e:MouseEvent):void{

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;

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 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. See the tutorial- AS3 Dynamic Gradient Fills by Ryan Walker - for an excellent explanation on playing with 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 did not perform a certain action to get started. I set up a Timer to wait 10 seconds and if a certain ComboBox was not clicked then a WordBubble instance appeared to prompt the user into making a choice from that ComboBox. Once the choice was made, the WordBubble disappeared. If the choice was 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 fills a simple need as it is, but it can be an excellent start for a more complex widget, and that will be the subject of my next tutorial. Called the InfoBox, we will be building a more complex class that will let us include 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. Use the comment form below, or drop me a line./p>

Page 1


Get Adobe Flash player


No Comments

Warning: date() []: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /home/xtydigi/public_html/footer.php on line 2