Hover Captions - Page 3

In the previous page, I started to explain how the code for our hover captions work. This page picks up from where we left off:

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

xo = -2-cap._width;

yo = -17;

} else {

xo = 2;

yo = -17;

}

This if statement checks to see if our caption would exceed the boundaries of our stage. More specifically, I check to make sure that the sums of the width of our button, the x position of our button, and the width of our caption movie clip do not exceed the width of our stage.

The variable bName is the value of this that is passed in to our captionFN function from our button. If you were to trace the value of bName, you would get something similar to _level0.b1 or _level0.b2, etc. depending on the button that called it. I will explain more about that variable a few paragraphs down.

xo = -2-cap._width;

yo = -17;

The variables xo and yo are x and y offset variables I use to adjust the position of our caption. The above code is executed when our if statement decides that the caption will overlap outside of our stage area. Therefore, I have to shift the entire caption over to the left side. That is why I offset the x position of the caption by the entire width of the caption.

The numbers -2 and -17 are used to get our caption displayed just at the top tip of your mouse cursor. You can safely change these values to what you like, for they are there purely for aesthetic purposes.

xo = 2;

yo = -17;

This is very similar to the code I explained earlier. This code gets executed when our caption falls safely within the boundaries of our movie clip. The only difference between this code and the code a few lines above is that I am not subtracting xo by the width of our caption.

hoverCaption.onEnterFrame = function() {

cap._x = _root._xmouse+xo;

cap._y = _root._ymouse+yo;

cap._visible = true;

};

In this function, I ensure that the caption follows the mouse cursor. Notice that I am using the hoverCaption movie clip I created earlier to host the onEnterFrame event handler.

The cap movie clip's x and y positions are determined by the x and y positions of the mouse cursor in addition to the offset values of xo and yo that I covered earlier. Finally, I set the visibility of our caption (cap) movie clip to true. By default the visibility is set to false, so I se the visibility to true when you are hovering over a button as you are now.

Since the above code is inside an onEnterFrame event handler, the code is executed the same number of times per second as determined by your movie's frame rate. That ensures that the position of your caption is continually updated depending on where your mouse cursor is over the button.

delete hoverCaption.onEnterFrame;

cap._visible = false;

This is the else portion of our first if statement checking whether showCaption is true or not. If our showCaption value is false, that means that you are no longer hovering over a button. It would be safe, in that situation, to no longer display the hover caption.

Hiding the hover caption can simply be done by setting the visibility of our caption movie clip to false, and I do specify that in the second line of the above code. Even with the visibility off, our enterFrame action is still running. It is good practice to delete unused onEnterFrames, and that is done by using the delete command along with the event handler and the movie clip that hosts it.

Source Code
In case you missed a step or are curious as to how my version of the file looks, you can download the zipped FLA from the links below.

page 3 of 3