Flash, Flex and ActionScript tutorials – flashadvanced

Tooltips are very useful and easy to create. You can use them to improve your application’s functionality. Their main purpose is to show up when the mouse is over an object and when the mouse is moving over the object the tooltip should follow it. Today I will show you how to create tooltips with Actionscript 3.0.

Let’s get started.

1. Create a new Flash CS3 document with size 300 x 150 and background color #000000.
2. Take the rectangle tool and draw a rectangle. Convert it to Button symbol and give it an instance name “btn”. That will be the object for our tooltip.
3. Now we have to draw our tooltip. Take the rectangle tool again and draw another rectangle. Use #FFFFFF for stroke color and #000000 for the fill. We will be using it for our tooltip. Now take the Selection tool and select a part of the rectangle like shown in the picture. Cut this part and take the line tool to complete the figure. Take the Paint Bucket tool to fill the holes with color #000000. Now select the fill inside the figure, open the Color panel and set the alpha to 50%. Convert the figure to Movie Clip with registration point center. Here it is step by step:

Linkage the Movie Clip to class with name Tooltip:

4. Now double click on the tooltip and inside it create a new dynamic text field. Give it “descr” for instance name and embed the font. While the text is still selected click the “Embed” button and embed lowercase and uppercase characters. Well, our tooltip is ready and now we have to move to actionscript. Remove the tooltip from stage and rename its layer to actions.
5. Select the first frame on the “actions” layer and press F9 to open the Actions panel.

//First we create a variable to hold our tooltip
var holder:MovieClip = new MovieClip();

//Next we add the event listeners to our button
btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
btn.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function mouseOverHandler(e:MouseEvent):void{
	//creating a new tooltip instance
	var tooltip:Tooltip = new Tooltip();
	//we tell the holder to hold our tooltip
	holder = tooltip;
	//adding text to the tooltip
	holder.descr.text = "completed projects";
	//positioning the tooltip on the stage
	holder.x = stage.mouseX;
	holder.y = stage.mouseY - 15;
	//adding the tooltip to the stage
	addChild(tooltip);
}

function mouseOutHandler(e:MouseEvent):void{
	//we remove the holder when the cursor is outside our button
	removeChild(holder);
}

//we create this function to move the tooltip everytime the cursor is moved
function mouseMoveHandler(e:MouseEvent):void{
	holder.x = stage.mouseX;
	holder.y = stage.mouseY - 15;
}

This is the end result: