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.
| 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.
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!
|
