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.

 Ask Kirupa?
Why, when the text field is transparent do I go to the extreme of leaving a empty space to hide what is already hidden?

   _root.caption.words = " ";

The answer is, unlike movie clip objects, text field objects contain system generated data such as text. Text that is static can be modified by the user or Flash into any numerous forms including being made transparent. Because we are using Dynamic Text, Flash will not transparent the text in the text field.

You may see the background become transparent and disappear, but the text will be bold and bright as ever. That is why I am telling Flash to leave a small blank space instead. You don't see text (unless you can discern spaces....which is just plain strange) and Flash does not get confused! Problem solved.

The only other method would be to embed the font outline in the dynamic text field. Once the font has been embedded, you will get the transparency to work in the dynamic text field quite nicely. You can see that post in which this revelation was made by clicking here.


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

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!


Previous Page

Discuss in the Forums



kirupa.com's fast and reliable hosting provided by Media Temple.