Actionscript 3.0 Tooltip
|
| 
Introduction
In this tutorial I will show you how to
create a tooltip using the Object Oriented scripting language called
Action Script 3.0. Action Script 3.0 is the primary scripting
language used for Adobe Flash Development.
You can see what we are about to do by clicking HERE
What is a tooltip? The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over. Yes, at times these can be REALLY annoying when you are trying to surf through a web page and you keep getting the tooltip popups but in many cases it can be very useful to what you are trying to do. Used properly, and in moderation a tooltip can be your best friend.
Part 1. (Create the objects)
Open
up a new Flash File and make sure to choose Action Script 3.0.
*We assume that you have some working knowledge of the Adobe Flash UI and will not spend to much time on matters that do not pertain to the topic.
-The first thing we need to do before we get into any code is create two objects on the stage. These objects can be anything, so as long as they are converted to Movie Clips.
Choose
the Rectangle Tool and draw 2 shapes. Typically in flash it is a good
idea to place all of your components on their own separate layers but
in this case we will just use one. Highlight one of the drawn shapes
and choose Modify>Convert
to symbol. Choose MOVIE
CLIP and press okay. Do
the same with the other shape so that you have two different Movie
Clips on the stage.
Now give each object an instance name. In this tutorial we will use btn1 and btn2.
See the figure below:
-This class dynamically pulls a font from the flash library and places it on the stage so next we need to create a new font in the library and prepare it for EXPORT(actionscript).
To do this simply open the library and right click anywhere in the dead space below your movie clips and choose NEW FONT. Here you can tell it what font you wish to use. To keep it simple, go ahead and choose Arial for the font. Below under LINKAGE just click the export for ActionScript and press okay.
See the figure below:
Part 2. (Begin the code)
-Create another layer and name it AS. Typically it is a good idea to always name your layers. Flash files can become multi-layered and it is important to keep organized. Trust me, many of us have learned the hard way.
Click on frame 1 and either right click>choose actions or press F6 to bring up the actions window.
Before we begin the code I would like to mention that it is important to comment your code as you go. This will help you take notes and remember what you are doing as well as offer a guide for others to understand it too.
Let's import the necessary class and packages:
|
import classes.Tooltip; import flash.display.Sprite; import flash.utils.Timer; import flash.events.MouseEvent; import flash.events.TimerEvent; |
Now lets set the necessary variables:
|
var timer:Timer=new Timer(300,1); var tooltip:Tooltip; var dir:String="up"; var dist:int=10; |
Next we will define our listeners by writing a function that will be called from another. We essentially are going to attach a listener to each object. Remember the instance names we assigned to them? This is where those names first come into play. One listener will be for rollover and one for rollout. When either event takes place a function will call. The functions are the last parameter in the script. In this case they are rover and rout.
|
function addListeners():void { btn1.addEventListener(MouseEvent.MOUSE_OVER, rover); btn1.addEventListener(MouseEvent.MOUSE_OUT, rout); btn2.addEventListener(MouseEvent.MOUSE_OVER, rover); btn2.addEventListener(MouseEvent.MOUSE_OUT, rout); } function MAIN():void { addListeners(); } |
This tooltip would be no good if all you could do is apply it to one object. I have written a Switch statement for both the ROLLOVER and ROLLOUT events of both object. It is within two functions whose names are already defined on the listeners. This will allow us to scale this to as many objects as we need. A Switch is a conditional statement similar to the if, else if , else conditional statement. Inside the switch, for each case you will notice that the MAIN CALL for the tooltip takes place. It has adjustable parameters to manipulate the tooltip's size, color, speed, and much more. You may be wondering why this line is pulling data from what seems to be a non existent function:
|
tooltip=new Tooltip(90,18,4,"TOOL TIP 1",0xFFFFFF,0x000000,1,true,dir,dist); |
It is actually pulling from the class itself. Remember that we are using a class as well as code on the time line. Notice also that the function startTooltipCounter(); is fired as well as hideTooltip(); These functions speak for themselves. One starts the timer for the tooltip to appear and once hides it upon ROLLOUT.
|
function rover(event:MouseEvent):void { switch (event.currentTarget.name) { case "btn1" : //Custom parameters for tool tip tooltip=new Tooltip(90,18,4,"TOOL TIP 1",0xFFFFFF,0x000000,1,true,dir,dist); startTooltipCounter(); break; case "btn2" : //Custom parameters for tool tip tooltip=new Tooltip(90,18,4,"TOOL TIP 2",0xFFFFFF,0x000000,1,true,dir,dist);
startTooltipCounter(); break; } } function rout(event:MouseEvent):void { switch (event.currentTarget.name) { case "btn1" : hideTooltip(); break; case "btn2" : hideTooltip(); break; } } |
The next lines of code will fire off a timer function”just mentioned above”, that upon expiry will execute a core function that shows the tooltip. The function below that hides the tooltip on ROLL-OUT. In the function the tooltip is added to the stage via addChild(tooltip); The listeners for the movement of the tooltip are also added.
|
function startTooltipCounter():void { timer.addEventListener(TimerEvent.TIMER_COMPLETE, showTooltip); timer.start(); } function showTooltip(e:TimerEvent):void { timer.removeEventListener(TimerEvent.TIMER_COMPLETE, showTooltip);
/* Start Position */ //In this switch, the "dir" is what is important. switch (dir) { case "up" : tooltip.x=mouseX-tooltip.width/2; tooltip.y = mouseY - (tooltip.height + dist); break; case "down" : tooltip.x=mouseX-tooltip.width/2; tooltip.y = mouseY + (tooltip.height + dist); break; case "left" : tooltip.x=mouseX-tooltip.width-dist; tooltip.y = mouseY - (tooltip.height / 2); break; case "right" : tooltip.x=mouseX+dist; tooltip.y = mouseY - (tooltip.height / 2); break; }
//Add tooltip to stage and move listener addChild(tooltip); btn1.addEventListener(MouseEvent.MOUSE_MOVE, moveTooltip); btn2.addEventListener(MouseEvent.MOUSE_MOVE, moveTooltip); } |
This next function will remove the tooltip on the MOUSE_OUT:
|
function hideTooltip():void { if (timer.currentCount==1) { removeChild(tooltip); }
timer.reset(); } |
The last two functions handle the movement of the tooltip and fire the Entire Platform off.
|
function moveTooltip(e:MouseEvent):void { switch (dir) { case "up" : tooltip.x=mouseX-tooltip.width/2; tooltip.y = mouseY - (tooltip.height + dist); break; case "down" : tooltip.x=mouseX-tooltip.width/2; tooltip.y = mouseY + (tooltip.height + dist); break; case "left" : tooltip.x=mouseX-tooltip.width-dist; tooltip.y = mouseY - (tooltip.height / 2); break; case "right" : tooltip.x=mouseX+dist; tooltip.y = mouseY - (tooltip.height / 2); break; } } /////////////////////////////// MAIN();//Execute the tooltip /////////////////////////////// |
This
concludes the tutorial. We hope that you enjoyed it and encourage you
to view the others. Download all of the source files below.
