Button Tooltip
| Category | : Flash | Views | : 25089 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : button-tooltip.zip | ||
| Result | : See the result | ||||
In this tutorial you will learn a simple tooltip code to use in any kind of flash application.
This is the result for this tutorial:
Create three buttons and drag them to the stage. Give the instance names "btn1", "btn2", "btn3", etc.
You can create one button, duplicate it two times and just change the text.
Now create a new Movie Clip and draw you tooltip:
On the top of your tooltip draw a dynamic text box with the instance name "tip", we will change the text later by using this name.
Go back to the main timeline and drag an instance of the Tooltip Movie Clip with the name "Tooltip".
Now go to the actions for the first frame and paste:
//when the mouse roll over
btn1.onRollOver = function()
{
//explained bellow
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 1");
}
btn2.onRollOver = function()
{
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 2");
}
btn3.onRollOver = function()
{
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 3");
}
//same event for all buttons
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut = function()
{
//hide the tool tip
_root.Tooltip._visible = false;
//clear the interval made on the roll over.
clearInterval(tooltipTimer);
}
//function with the parameter "tip", tip is the text used in the tooltip
function showTooltip(tip)
{
//tooltip is visible
_root.Tooltip._visible = true;
//set the tooltip position to be equal to the mouse.
_root.Tooltip._x = _xmouse;
_root.Tooltip._y = _ymouse;
//set the text of the textbox inside the tooltip Movie Clip to the parameter "tip"
_root.Tooltip.tip.text = tip;
}
Test you code (Ctrl + Enter), leave you mouse over a button for at least one second to see the tooltip.
More cool tech articles from other blogs.
