Flash tooltips tutorial

Step 1

• Create a new Flash CS3 document with size 300 x 150 and background color #000000.
• 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.
• 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. See Fig 1 for  step by step:

Fig 1

Linkage the Movie Clip to class with name Tooltip, see Fig 2.

Fig 2

Step 2

• 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, tooltip is ready and now we have to move to actionscript.
• Remove the tooltip from stage and rename its layer to actions.

Step 3

• Select the first frame on the “actions” layer and press F9 to open the Actions panel.

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

//step two 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{
	//create a new tooltip instance
	var tooltip:Tooltip = new Tooltip();
	//tell the holder to hold our tooltip
	holder = tooltip;
	//add text to the tooltip
	holder.descr.text = "completed projects";
	//positioning the tooltip on the stage
	holder.x = stage.mouseX;
	holder.y = stage.mouseY - 15;
	//add the tooltip to the stage
	addChild(tooltip);
}

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

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