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, you 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 move the file to 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. And lastly, there is the caurina folder which hold all the Tweener classes.

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 them 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 panel 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.