Open up the InfoBoxDemo.as 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.
package{
    import flash.display.*;
    import flash.events.*;
    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. Note that the InfoBox class references my library path, and, if you are using your own library, you will need to change the package declaration to match where you are storing the file.

Next, we declare our variables, starting with an instance of the InfoBox. Right under that we declare a Boolean variable called isOpen, which will keep track of whether or not an instance of our InfoBox is already open. Since it starts out false, we'll set it to that here. 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";
moreInfo1.name = "info1";
moreInfo1.setStyle("textFormat", butFormat);
moreInfo1.addEventListener(MouseEvent.CLICK, moreInfoHandler);
addChild(moreInfo1);


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{
if(isOpen){
                removeIB();
            }
    switch(e.target.name){
        case "info1":
            trace("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, "www.xtydigitaldesign.ca/images/samSara1280.jpg", "_blank", "See a big picture", 0x0000ff);
            ib.x = 50;
            ib.y = 50;
            ib.addEventListener(InfoBox.CLEAN_UP, removeIB);
            addChild(ib);
       isOpen = true;
            break;
        case "info2":
            trace("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);
            addChild(ib);
           isOpen = true;
            break;
        case "info3":
            trace("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, "www.xtydigitaldesign.ca/images/samSara1280.jpg", "_blank", "See a big picture", 0x00ff00);
            ib.x = 100;
            ib.y = 50;
            ib.addEventListener(InfoBox.CLEAN_UP, removeIB);
            addChild(ib);
    isOpen = true;
            break;
            break;
    }
}


The first thing we do is find out if there is already an instance of the InfoBox open. If there is, we use the removeIB() function to get rid of it and return the isOpen variable to false. 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,
                 "www.xtydigitaldesign.ca/images/samSara1280.jpg",
                 "_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 out 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 = null):void{
    ib.removeEventListener(InfoBox.CLEAN_UP, removeIB);
    removeChild(ib);
    isOpen = false;
}

This does what it says and removes the instance of the InfoBox you created, and sets our variable isOpen to false. Note that the event passed is set to null. This is so we can use it without having an event passed to it, as we do in the moreInfoHandler function. The other thing to notice is the event type on the listener for the ib instance - 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 InfoBox.as class. And, we might as well do that right now.