Tutorio.com

Hovertext Introduction

Alt tags or captions are a great way to display information when you are short on space. And can improve the usability of your flash files. For example hover over the button tutorio, in the movie to your right and see what happens

Flash Setup.

1. Create a MovieClip for your button place it on the stage and give it the instance name 'hoverover'
2. Create a MovieClip for the caption place it on the stage and give it the instance name 'caption'

Simple hover text without easing

hoverover.onRollOver = function() {
	this.onMouseMove = function () {
       caption._x = _xmouse;
       caption._y = _ymouse;
	}
};
hoverover.onRollOut = function() {
       caption.alpha = 0;
};

when the button is rolled over a function is called, which calls another function which in turn sets the x and y values of the function to equal the _x and _y values of the mouse, whenever the mouse is moved.

And then when the mouse rolls out a function is called which sets the alpha value of the caption to zero

Adding easing to the caption

Tutorio.com's captions use easing, here's how its done.

hoverover.onRollOver = function() {
	this.onEnterFrame = function () {
	caption._alpha += (100-caption._alpha)/3;
	caption._x -= (caption._x-_xmouse)/2;
	caption._y -= (caption._y-_ymouse)/2;
	}
};
hoverover.onRollOut = function() {
	this.onEnterFrame = function() {


		caption._alpha += (0-caption._alpha)/3;
	};
};

I have added some easing here, if you read the Flash Random Motion Tutorial then this should be pretty familiar.

First of lets start with the easing the alpha (transparency) of the movie clip. The alpha is always set between 0 and 100 so onenterframe the alpha value of the caption is increased by part of the difference between 100 and the current value when the mouserollsover the button. Then when the mouse rolls out the same thing happens exept this time the target value is 0.

The easing of the x and y position of the caption movie clip works in a very similar fashion. Except this time the values are being eased towards the mouse pointer values which themselves may change.