Use Show and Hide Methods to Display a Simple Tooltip AS 3.0 Component
Updated: Aug 30, 2007
Views: 2769
Description: This tutorial will show you how to add the Tooltip to a button by using the show and hide methods.
To get started, here is all of the code and an example of what we are going to build. More advanced users may only need to look at this example, while others might want to read below where I will go through the code and what each part of it does.
| |
Code used in this tutorial
import flash.events.MouseEvent;
function overHandler(event:MouseEvent) {
myTooltip.show();
}
function outHandler(event:MouseEvent) {
myTooltip.hide();
}
btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);
btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);
function overHandler(event:MouseEvent) {
myTooltip.show();
}
function outHandler(event:MouseEvent) {
myTooltip.hide();
}
btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);
btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);
Part II - New Flash ActionScript 3.0 file
You must use Flash CS3 and have the Tooltip ActionScript 3.0 component for this tutorial. The first step is to create a new Flash file using ActionScript 3.0.
Part III - Create the Button
Create a button with an instance name of btn.
Part IV - Adding Tooltip to Stage
Assuming that you have Tooltip ActionScript 3.0 component installed, the first step is dragging an instance of the Tooltip component on to the stage using the component panel (window -> components). Give the tooltip an instance name of myTooltip.
Part V - Setting Parameters of Tooltip
Select the instance of the tooltip, and using the component inspector (window -> component inspector) or parameters panel (window -> properties -> parameters) set the following parameters of the instance of the Tooltip:
- autoShow:false
- Drag:true
Part VI - Adding ActionScript
Add the following code to an actions layer using the actions window (windows -> actions):
Import MouseEvent class:
import flash.events.MouseEvent
Add Event Listeners for roll over and roll out for the button:
btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);
btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);
btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);
Add roll over handler that uses show method:
function overHandler(event:MouseEvent) {
myTooltip.show();
}
myTooltip.show();
}
Add roll out handler that uses hide method:
function outHandler(event:MouseEvent) {
myTooltip.hide();
}
myTooltip.hide();
}
If you have any questions please post them on our forum.
Other Tutorials
