Jun
30
2008
Create Tool Tips with Flash PDF Print E-mail

HariesDesign.com This tutorial will show you how to add tool tips to any flash project. Tool tips are extremely useful for informing users of what is interactive in a flash project. please hover this button :

 
 
follow this step to create it... 

Step 1 

Create new Document set Dimension 300 px X 100 px

 

Step 2 

Use Rectangle Tool and Set Corner Radius with 8 point, like this :

hariesdesign.com - tool tips with flash hariesdesign.com - tool tips with flash hariesdesign.com - tool tips with flash

Step 3 

Use gradient color for fill color, and transparent for Stroke color

hariesdesign.com - tool tips with flash  hariesdesign.com - tool tips with flash

 

Step 4 

Apply on layer document, create square shape like shown in this picture :

hariesdesign.com - tool tips with flash 

 

Step 5 

With Paint Fill menu,

hariesdesign.com - tool tips with flash

klick and hold on your left mouse, then drug from down to up like this

hariesdesign.com - tool tips with flash

 

Step 6 

Select and press F8 to convert button types , name it with botton1

hariesdesign.com - tool tips with flash

 

Step 7

Add text with Text Tools

hariesdesign.com - tool tips with flash hariesdesign.com - tool tips with flash

you can modify color between up and over like this :

hariesdesign.com - tool tips with flash  hariesdesign.com - tool tips with flash

and

hariesdesign.com - tool tips with flash  hariesdesign.com - tool tips with flash

 

Step 8
 
Back to the scene 1 on properties, insert instance name with menu1

hariesdesign.com - tool tips with flash
 

Step 9

On the library box  left click on your mouse, then press new symbol select movie clip type, name it toolTip and check on linkage like shown :

hariesdesign.com - tool tips with flash hariesdesign.com - tool tips with flash 

 

Step 10 

Create text box to that symbol

hariesdesign.com - tool tips with flash 

On properties panel, change with dynamic text and insert instance name with message,

hariesdesign.com - tool tips with flash  

Now you have 2 item on the library

hariesdesign.com - tool tips with flash 

 

 

Step 11

Now you just add this script , click on frame, and then open action add this script :

 

//Main function

function toolTip(tagTarget, myMessage) {

//Handle the rollOver event

tagTarget.onRollOver = function() {

//disable hand cursor

tagTarget.useHandCursor = true;

//create a movieclip to hold the tooltip MC

h = _root.createEmptyMovieClip("h", 10);

//position the tooltip dynamically to the mouse position

h._y = _root._ymouse-30;

h._x = _root._xmouse;

//attach the tooltip MC from the library

h.attachMovie("toolTip", "toolTip", 10);

//format the message textfield

h.toolTip.message.autoSize=true;

h.toolTip.message.border=true;

 h.toolTip.message.borderColor=0x0066cc;

 

//control the message with the myMessage parameter of the function

//Visit www.hariesdesign.com

h.toolTip.message.text = myMessage;

//position the tooltip on mouse move

h.onMouseMove = function() {

h._y = _root._ymouse-30;

h._x = _root._xmouse;

}

 

}

//remove the tool tip

tagTarget.onRollOut = function() {

removeMovieClip(h);

}

}

//Usage

_root.toolTip(_root.menu1, "Please visit HariesDesign.com");

 

Press Ctrl+Enter to view

 

 
< Prev   Next >

Gallery Photography

Login

Sponsors


Get Chitika Premium