Displaying

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 page 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 on the next page as well =)

---

Previous Page

Next Page