Displaying Hover Captions

by kirupa   | filed under Flash and ActionScript

"What in the world is a hover caption? Must be another name Kirupa made up." Now that you mention it, I think I did make the name up. A hover caption is the text that appears when you hover your mouse over a command icon or button. When you hover over the Lock icon in the timeline (in Flash MX), you will see the caption "Lock/Unlock Layers" display next to your mouse cursor. The text that displays when you hover over certain sections is the hover caption.

If Flash MX, Windows, Word, and other applications can have hover captions display when the mouse rests over an icon or command, why can't our animations have hover captions in them. After all, if Microsoft can create that effect, we should be able to create that effect as well...right? YES!

Note

This tutorial is mainly kept for archival purposes. The more recent version of this tutorial can be found here: Hover Captions v2

This tutorial will teach you how to create a hover caption that displays when you hover over a button in Flash MX:

[ hover over the flash icons in the above animation to see the captions ]

Creating the Caption Box

The following steps will explain how to create the caption box that houses the blue rectangle and text:

1. Create a new document in Flash MX by going to File | New. A new, blank Flash MX movie will be displayed.
    
2. Open the caption_user.fla file by clicking here. The FLA simply contains the buttons (the icons) that you will use. Rest assured that none of the coding or complex steps have been completed in the FLA.
    
3. Now that you have the caption_user.fla file opened, it's time to start 'captioning' (another word I made up). Insert another layer in your timeline.
    
4. Once the layer has been inserted, draw a small rectangular box. Make sure the box is large enough to hold text inside it:

[ notice the yellow rectangular box ]

5. Once the box has been drawn, select it and press F8 or go to Insert | Convert to Symbol. The Convert to Symbol dialog box will appear. Give the movie clip an unique name and make sure you select 'Movie Clip'. After you have done that, press OK.
    
6. Your rectangular box is now a symbol. Right click on the rectangle and select Edit in Place. We will now add a text field to display a text caption. Insert another layer in the timeline:

[ insert another layer ]

7. Click the Text tool icon. Once you have clicked the Text tool icon, draw a small rectangular box directly above your yellow rectangle. Make sure the box is large enough to support a few words of text. Make sure to Zoom in if you can't see clearly:

[ the text box zoomed in at 200% ]

8. You may have to adjust the size of the rectangle to ensure the text box is completely over the rectangle. As you can tell in my screenshot, my rectangle needs to be heightened to cover the text box.
    
9. We now need to make some modifications to our text box. Select the text box and make sure its Properties panel displays. From the Properties panel, ensure Dynamic Text is selected:

[ ensure dynamic text is selected in the drop-down menu ]

10. There are modifications that need to be made! From the same Text properties panel, make the following changes:
    1. Font: Verdana
    2. Ab: Deselected
    3. Size: 10
    4. Style: Bold
    5. Color: Black
    6. Alignment: Centered
    7. Var: words

[ how your text properties panel should look like after completing step x ]

11. Your text box is now complete and setup for the next steps. Press the Scene 1 tab (or the blue left arrow) below the timeline and you will be back on your main timeline:

[ the scene 1 tab and blue left arrow ]

That concludes this major portion of our tutorial. I am sure you are tired and worn-out from all this Flashing. If you need to, don't hesitate to take a break. Once you are refreshed and ready for some more flashing, click the next section link below.

 
Displaying Hover Captions - Page 2

Now, we are continuing the tutorial from page 1. We are at the point in the tutorial where the text box is complete. Now we need to find a way to have the text box follow the mouse and appear when the user hovers over the button. The text box should disappear if the mouse cursor goes outside the button field.

Follow the Mouse

The following steps will show you how to make the text field follow your mouse:

1. Select the yellow rectangle movie clip (the one that contains the text field). Give this movie clip the instance name, caption:

[ the properties panel for the movie clip ]

2. Insert a new layer in your timeline. This layer will contain our actions.
    
3. Right click on the empty frame in the layer you just created and select Actions. The Actions-Frame panel will appear. Copy and paste the following code into the Actions-Frame panel:

                      startDrag(_root.caption, true);

 

4. If you preview your animation, you will see the yellow rectangle follow your mouse around the animation.
    
5. We don't want the rectangle to be visible at all times during the animation. The yellow rectangle should appear only when hovering over a button. Right click on your yellow rectangle and select Actions. Copy and paste the following code in the Actions - Movie Clip panel:

                      onClipEvent (enterFrame) {

 if (_root.x==1) {

  this._alpha = 50;

 } else {

  this._alpha = 0;

 }

}

[ don't worry, I will explain the code near the end of this tutorial ]

Display the Text Caption

Now, we have the rectangle box hidden when we move the mouse around the animation. Of course, we want the rectangular box display when we hover over a button. To top that off, we need to have an appropriate caption displayed inside the rectangular box to make the text caption complete. The following steps will help you to achieve all of the aforementioned items:

1. Right click on one of the four buttons (the icons) displayed and select Actions. From the Actions-Button panel, add the following code:

                      on (rollOver) {

 _root.x = 1;

 _root.caption.words = "Word!";

}

on (rollOut) {

 _root.x = 0;

 _root.caption.words = " ";

}

2. Notice the text in quotations after _root.caption.words = "Word!". The word, Word! will be displayed when the mouse hovers over that button.
    
3. Copy the above code and paste it on all the remaining buttons. In each of the buttons, modify the word after _root.caption.words to something like, Greetings!, Howdy, Hello!, etc.
    
4. In the end, you will have the same lines of code on each button with the exception of the word in quotations. Save the file and preview the animation.
    
5. Save the animation and preview it in your browser. You will see the caption display when you hover over your button and disappear when you hover the mouse out of the button.

Minor Modifications

You have technically completed a hover text caption. Aesthetically, there is one nitpicky detail you may want to change. When you preview the animation and hover over the button, have you noticed that the rectangle containing the text box has the tendency to go under the mouse and covering up a letter in the caption instead of staying clear of the text?

The following image should explain the point I am trying to convey to you:

[ notice how the mouse pointer covers up text in the first icon ]

To fix the positioning of the rectangular box containing the text field in relation to the mouse cursor, follow these steps:

1. Right click on the rectangular box and select Edit in Place.
    
2. Make sure both layers in the timeline are unlocked. Once you have made sure both layers are unlocked, press Ctrl + A to select both the objects: the background and text field.
    
3. Once you have selected both the objects by pressing Ctrl + A, press the Up arrow on your keyboard until the positioning crosshair is in the bottom-left corner of the rectangle:

[ notice the positioning cross hair is in the bottom-left of the rectangle ]

4. You are done. Go back to your main timeline by pressing the Scene 1 text or the blue arrow. Save and preview your animation. You will notice that the text caption appears at the very tip of the mouse pointer and does not get covered by the mouse pointer!

The next section covers how all of the code in the animation works to display a hover caption. You will find the final source download for this animation in the next section as well =)

 
Displaying Hover Captions - Page 3

Now, we are continuing the tutorial from page 2. In this, the final page of this tutorial, I will explain each segment of code used in the animation and why it works the way it does.

The Code

                        startDrag(_root.caption,

  true);

The above line is used to drag the hover caption rectangular box. The rectangular box is actually a movie clip with the instance value, caption. Hence, the code refers to the actual location, _root and the name of the instance, caption. The True signifies that the movie clip should lock mouse to center.

                        on (rollOver)

  {

  _root.x = 1;

  _root.caption.words

  = "Hello!";

  }

  on (rollOut)

  {

  _root.x = 0;

  _root.caption.words

  = " ";

  }

The above segment of code is what makes the text caption appear and disappear. In on (rollOver)I am basically telling Flash to execute any commands when the mouse rolls over the button.

In _root.x = 1; I am declaring on the fly a variable stored on the main level, _root called x. I am also initializing the variable x with a value of 1. In the next line, _root.caption.words = "Hello!"; I am telling Flash to display the word "hello" in the words text field.

If you remember, the rectangular shaped movie clip is called caption. Inside that movie clip is the text field called words. In order to communicate to display text in the text field, we need to go via the _root level and then access the caption movie clip and end up at the words text field.

In the next segment of code, I basically undo what I did in the first segment of code with the rollOver. I'm re-initializing the value of x on the main level to 0. In the next line, I am telling the text field to be blank with nothing more than one space.

                               _root.caption.words

  = " ";

                        onClipEvent

  (enterFrame)

  {

  if

  (_root.x==1)

  {

  this._alpha

  = 50;

  }

  else

  {

  this._alpha

  = 0;

  }

  }

In this code segment, I am telling the movie clip to continuously check for the following statements: does x equal one or does x equal something other than 1? If the x variable equals 1, the alpha of this - the movie clip - is 50. I selected the background to be partially transparent because it creates a nice translucent effect. If you read the Ask Kirupa in the above table, you will understand why the text does not become partially transparent.

In the button actions, I told Flash to make the variable x equal one when the mouse rolls over the button. The moment the variable x equals 1, the hover caption becomes partially transparent. The moment the user takes the cursor out of the mouse - making x equal 0 - the hover caption immediately becomes fully transparent. The text is not visible because I used the " " value for the text field (see Ask Kirupa? above).

I hope you were able to learn how to create hover captions in Flash MX. This is a really good navigational aid that adds points in the areas of coolness and usability.

Discuss in the Forums

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇