Displaying

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.

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.

Download Final Source

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums New, Upcoming, and In-Progress Tutorials How to Help out kirupa.com Writing Tutorials

Cheers! Kirupa Chinnathambi facebook | twitter

 

---

Previous Page

Discuss in the Forums