Get Adobe Flash player

The InfoBox Tutorial

The InfoBox class is built upon the back of the WordBubble class. As you start creating your own classes, and then retool them to do other things, you will discover better ways of doing some things, and ways of optimizing your code. We'll see a couple of examples of that in this tutorial.

In the WordBubble class we had a somewhat limited number of options to change the look of the WordBubble. This time we will go a little over board and give ourselves many customizable options. How many are too many? Well, you'll have to decide that for yourself, but, remember, the number of parameters being passed to the constructor is in direct proportion to the flexibility of the class. CS5 promises to bring us greater introspection of custom classes, so this should help greatly with classes that use a lot of parameters. Once you get comfortable with how this class works, you can always hard code some of the options and cut down the number of parameters it is necessary to pass.

Let's take a look at what we are going to be building. This demo is an extremely simplified use of the InfoBox class. In a more realistic example, there would be a block of text outlining something that, as a visitor, might want More Info on. Use your imagination, and click the More Info buttons.

All the classes, example fla files and images we'll be using in this tutorial are included in the file. Go ahead and download it now:

Getting Set Up

You can unpack the zip file directly to the folder you are keeping this project in and it will be all ready to go. Inside the ca folder you'll find the xty folder, then inside the xty folder you'll find the myUtils folder. Inside myUtils you'll find the class file. If you have a class library of your own, you can have the file in that - just make sure to change the package information to reflect the new location of the file. If a class library is a new concept, have a look at the WordBubble class for some further information.

Inside the zip file you will find infoBoxDemo.fla (CS4) and infoBoxDemoCS3.fla (CS3). The class files, and don't care which version you are using. You'll also notice a folder called "images". This is where the images used in the example are stored.

Open up whichever fla you are using. Notice that there is nothing on the stage. In the library, the only thing there is an instance of the Button component. In the example fla if you look closely at the button skins you will see that I have modified it from the default skin. The InfoBox uses a button to close itself, and it's important to note that it will use whatever button skin is in the main fla's library. The other thing to note is the Document Class in the Properties for the fla, which is set to InfoBoxDemo. No .as extension - just the name of the class. Speaking of the Document Class, let's take a look at it.

The Document Class

Open up the file. A Document Class can be thought of as a replacement for your timeline code, or external AS files. If you want to use timeline code, you need to modify this code slightly by removing all references to the declaration "private", and it will work just fine. But, since I am trying to show you the benefits of using classes, we'll stick with our Document Class approach.

    import flash.display.*;
    import flash.text.*;
    import fl.controls.Button;
    // Import the Info class - change this if you have set it up in your own class library
    import ca.xty.myUtils.InfoBox;

First of all we'll look at the package. Notice that in this case there is nothing but the word package. That is because we are including this class in the same folder as the fla, so there is no library address necessary. Our import statements bring in the classes we will be using, including the Button component and our InfoBox class. Now, note that the InfoBox class references my library path, and, if you are using your own library, that you will need to change this to match where you are storing the file.

Next, we declare the variables we will be using, starting with an instance of the InfoBox. Then come the variables that we will be using to pass information to the InfoBox constructor function. The color arrays have been initialized here to get them ready to use. Then we set up a few instances of Button, then a TextFormat for our buttons and finally the xPos and yPos to hold the x and y positions.

Inside the constructor function we fill out some properties for our button format.

butFormat = new TextFormat();
butFormat.font = "verdana";
butFormat.size = 11;
butFormat.color = 0xffffff;

Then we give our xPos and yPos variables a starting point, after which we set up the buttons.

xPos = 215;
yPos = 100;

moreInfo1 = new Button();
moreInfo1.x = xPos;
moreInfo1.y = yPos;
moreInfo1.width = 70;
moreInfo1.height = 20;
moreInfo1.label = "More Info"; = "info1";
moreInfo1.setStyle("textFormat", butFormat);
moreInfo1.addEventListener(MouseEvent.CLICK, moreInfoHandler);

Nothing fancy is happening with the buttons, except that we are using the "name" property to assign a unique name to each button. This is because we are using the same label property for each button, and will need something unique to compare when we get to the moreInfoHandler function which uses a switch statement to tell us which button has been clicked.

private function moreInfoHandler(e:MouseEvent):void{
        case "info1":
            bgColorArray1 = [0xffcc00, 0xff9900];
            bgColorArray2 = [0xffffff, 0xdddddd];
            infoTitle = "My Cat Sam";
            infoDescription = "You first met Sam in my last tutorial about a WordBubble class. Now that I have some room, I can tell you a little more about him. As you can tell by the sleepy look on his face, he likes his naps.";
            var infoImage1:String = "images/samSmall.jpg";
            ib = new InfoBox(400, 160, 0x000000, bgColorArray1, bgColorArray2, infoTitle, infoDescription, infoImage1, "", "_blank", "See a big picture", 0x0000ff);
            ib.x = 50;
            ib.y = 50;
            ib.addEventListener(InfoBox.CLEAN_UP, removeIB);
        case "info2":
            bgColorArray1 = [0xffcc00, 0xff9900];
            bgColorArray2 = [0x6D4201, 0x543201];
            infoTitle = "Sam's Sister Sara";
            infoDescription = "Sara is Sam's little sister now, but this was not always the case. When they were just 6 weeks old Sam was the runt and his sister stood taller than he did. Sara is still the boss, however, and Sam always defers to her judgement. If Sara runs upstairs, Sam knows there is a good reason and follows immediately.";
            var infoImage2:String = "images/mugShot.jpg";
            ib = new InfoBox(400, 180, 0xffffff, bgColorArray1, bgColorArray2, infoTitle, infoDescription, infoImage2);
            ib.x = 50;
            ib.y = 50;
            ib.addEventListener(InfoBox.CLEAN_UP, removeIB);
        case "info3":
            bgColorArray1 = [0xffcc00, 0xff9900];
            bgColorArray2 = [0x6D4201, 0x543201];
            infoTitle = "This Choice Has No Photo";
            infoDescription = "This option does not use a photo, as you can plainly see. What else is different about this implementation of the InfoBox is that I did not make the height of the box quite large enough, so the box is auto-stretching to fit.";
            var infoImage3:String = "none";
            ib = new InfoBox(300, 120, 0xffffff, bgColorArray1, bgColorArray2, infoTitle, infoDescription, infoImage3, "", "_blank", "See a big picture", 0x00ff00);
            ib.x = 100;
            ib.y = 50;
            ib.addEventListener(InfoBox.CLEAN_UP, removeIB);

The switch statement checks to see which button has been clicked by comparing the name property. In the case of "info1" the first button has been clicked and so we want to send the information relevant to that button to our InfoBox class. Since we will always be sending the bgColorArrays, and the info title and description, I have set these variables up so that we do not need to declare them each time. But, since we may not always be using an image, I have left the infoImage variable to be created each time. When we get to the InfoBox class, you will see that the infoImage parameter has a default value of "none". By giving the parameter a default value we do not have to include it when we create a new InfoBox; it is considered optional. Now, if we were to set up an infoImage variable in the same way as we did the infoTitle variable, you would have to pass a value of "none" each time for the simple reason that once you set the infoImage to have a value it will retain that value, and so you could inadvertently pass along an image to be displayed when you had no intention of doing so. Having said that, you will also notice in the case "info3" that we have to set a variable called infoImage3 to "none". Why is that? Before I explain that bit of contradiction, let's take a look at how to set up a new InfoBox using the "info3" example.

ib = new InfoBox(300, 120, 0xffffff, bgColorArray1, bgColorArray2, infoTitle, infoDescription, infoImage3, "", "_blank", "See a big picture", 0x00ff00);

The first parameter is the width you want the InfoBox to be, and the second parameter is the height. The third parameter is the text color, then come our background colors, first the array for bg1 and then the array for bg2. Following these are our variables for the Title and the Description. Now, everything after this has a default value in the InfoBox constructor and are therefore all optional. Looking at example 3, you see that we are using the link option, which includes the url, the target, the link text and finally the link color. Just before the link options we have declared infoImage3, even though we are not using an image in this case, because, in order to use the link options we must include the image option to hold its place in the InfoBox constructor, otherwise the parameters will all be off by one. If we leave our the parameter for infoImage the constructor will use the url for the link as the image, the target as the link, the link text as the target and the link color as the link text. A nasty mess and a pile of errors. If you were not going to use a image or a link, then you could leave everything after the infoDescription blank.

The three examples are here to illustrate the different ways in which you can set up your InfoBox. For an individual project, you would most likely be serving up the same kinds of information and consistently using, or not using, either an image or a link. In the InfoBoxDemo class you will notice a function called buildInfoBox which has been commented out. Using this function will save you making the same InfoBox over and over. In your moreInfoHandler function you would change the information for things like title and description and then call buildInfoBox().

The only other function in this class is the removeIB function.

private function removeIB(e:Event):void{
    ib.removeEventListener(InfoBox.CLEAN_UP, removeIB);

This does what it says and removes the instance of the InfoBox you created. The thing to notice is the event type - InfoBox.CLEAN_UP. This will not look like anything you've run across before because it is our own creation. We'll talk about it more when we get to the class. And, we might as well do that right now.

Page 2


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