Hover Captions - Page 2

In the previous page, we created the hover captions and got them displaying properly. In this page I will explain the code so that you will be able to apply techniques into your own, more creative implementation of the hover captions you saw earlier.

ActionScript Explained
Let's take the code apart line-by-line:

b1.onRollOver = function() {

captionFN(true, "E-Mail!", this);

this.onRollOut = function() {

captionFN(false);

};

};

The above is the action added to our button with the instance name b1, and the exact same code is applied to all of the other buttons. The code executes when someone rolls over the button, hence the use of onRollOver in the first line declaring our function.

In the second line, I make a call to a function called captionFN. It takes in three arguments. The first argument tells the function whether to display the function (true) or to hide the function (false). The second argument is the text that is displayed in the caption. The third and final argument simply displays the path to our button.

The only change you would need to make for each button is to replace the "E-Mai!" caption with something more representative of your button. If you look at the code for buttons b2 through b6, you will see that the second argument, the caption parameter, of our function call varies depending on what our button is.

this.onRollOut = function() {

captionFN(false);

};

For every roll over, there needs to be a roll out. Well, not really, but in this case we need it. This function pretty much cancels out our above onRollOver event. When your mouse leaves the button area, the code in the onRollOut function executes.

The onRollOut function executes another call to captionFN, but I am only passing in one argument - the first argument. Since I am interesting in hiding our menu, I pass the value false.

You will understand later why I am passing true and false as arguments. In the interim, you will just have to take my word for it.

captionFN = function (showCaption, captionText, bName) {

This is the first line that declares our captionFN function. This function takes, at most, three arguments. The variables that store the three arguments are showCaption, captionText, and bName.

if (showCaption) {

_root.createEmptyMovieClip("hoverCaption", this.getNextHighestDepth());

cap.desc.text = captionText;

cap._width = 7*cap.desc.text.length;

cap._alpha = 75;

//

if ((bName._width+bName._x+cap._width)>Stage.width) {

xo = -2-cap._width;

yo = -17;

} else {

xo = 2;

yo = -17;

}

hoverCaption.onEnterFrame = function() {

cap._x = _root._xmouse+xo;

cap._y = _root._ymouse+yo;

cap._visible = true;

};

} else {

delete hoverCaption.onEnterFrame;

cap._visible = false;

}

Early on, I divide up the path our code takes with an if statement. My condition is simply to test whether showCaption is a boolean true or false. If you recall, showCaption stores the first argument passed into our function, and the first argument passed into our function is either a true or a false.

If the value of showCaption is true, the large chunk of code (grayed out for now) will execute. If the value of showCaption is false, our code under else would execute. I cover what those grayed out pieces of code are later on.

_root.createEmptyMovieClip("hoverCaption", this.getNextHighestDepth());

I create a new, empty movie clip called hoverCaption in the root of our animation. This movie clip will be used later to temporarily store event handlers such as onEnterFrame.

cap.desc.text = captionText;

If you recall, our caption movie clip was called cap (Step viii), our dynamic text field inside our cap movie clip was called desc (Step vi), and finally the caption data is passed to our captionFN function via the variable captionText.

What I am doing in the first line is using our text field's text property to assign it the value of captionText. The line of code simply ensures that our text field displays the text data contained inside our captionText variable.

cap._width = 7*cap.desc.text.length;

In the first line, I set the width of our cap movie clip to be dependant on the number of characters in our caption. In other words, the longer our caption, the wider the movie clip will be.

I figure out the length of our text field by using our text field's length property. It returns a number that represents the number of characters in our caption. Increasing the width of our caption (cap) movie clip by just the number of characters isn't enough. I multiply the number representing the characters in our text field with an arbitrary number, 7 in this case, to stretch the width of our caption movie clip more.

I settled on the number 7 after some experimentation, but you may want to adjust the number from 7 to something else. It depends largely on your text field's font and font size that could change the spacing between characters and words.

cap._alpha = 75;

I want our movie clip to be a little transparent, so I set the alpha of our caption movie clip to 75. Our caption movie clip contains the rectangular background and the dynamic text field, but both of those elements will not have their transparencies affected.

Adjusting the transparency of our caption movie clip will only affect the transparency of our rectangle. The text in our dynamic text field will not be affected, for unless you embed the fonts in your text field, adjusting the transparency will have no effect on it.

We are almost finished, but there is more code that needs to be explained. Onwards to the next page!

page 2 of 3