Flash Tutorials

Now let's go back to the myFlashProject.fla file which we created and is so far empty.

On the stage, add a circle and a static textfield, using the Tools panel. The color, position and the dimensions of the circle are your choice, since they will not affect the functionality of the tool-tip. The same goes for the textfield: type "Anything you want" inside.

Go to the timeline panel, double-click the layer name, and name it "content".

Click the insert new layer button to create a new layer above our content. Name the newly created layer "toolTip".

Next, we will create the movieclip inside of which the tool-tip's text is displayed. This is done in three steps:
- Step 1: Hit ctrl+F8 to create a new movie clip. Name it "mcBck" and click ok. Draw a rectangle on the stage, with its width equal to 50 and its height equal to 14 and place it at coordinates 0, 0. This will be the background shape on which the text appears. The toolTip class resizes mcBck automatically to accommodate the pop-up text.

Exit the movieclip you have just created by clicking on the Scene1 button on the nav bar.

[list][li]Step 2: Hit ctrl+F8 a second time to create a new movieclip. Name it "mcMiddle" and click ok. Draw a shape of an isosceles triangle on the stage, pointing downwards. Make its width and its height equal to 4. Place it at y=0 and align it horizontally with the middle of the stage (hit ctrl+k to open the Align window, make sure that the "To Stage" button inside the Align window is pressed, then click on the "Align horizontal center" button). This is how the settings for your shape should look like:
[/li][/list]

This small triangular shape will be the pointing vertex of the tool-tip that will always be aligned with the target movieclip. Aligning will be done automatically by the toolTip class. Exit the movieclip you have just created by clicking on the Scene1 button on the nav bar.

[list][li]Step 3: Hit ctrl+F8 a third time to create a new movieclip. Name it "mcToolTip" and click ok. In the timeline, hit "New Layer" twice to make this movieclip have a total of three layers. Name the bottom layer "mcBck", name the middle layer "mcMiddle" and name the top layer "toolTipBox". Naming layers is not compulsory, but it is good practice: from one quick glance over the layers, you will later know what each layer contains.

Our mcToolTip is so far empty, but we will place the previously two created movieclips inside: so click on the bottom layer to make sure it is selected, then drag the mcBck movieclip from the library and drop it on the stage. From the Properties panel, make sure it is placed at x=0 and at y=-19. Type "mcBck" in the "Instance Name", in the top of the properties Panel. Now click on the middle layer, drag the mcMiddle movieclip from the library and drop it on the stage. From the Properties panel, make sure it is placed at x=25 and at y=-5. Type "mcMiddle" in the "Instance Name". Finally, select the top layer, select the text tool and type something on the stage. Make sure you make the newly created textfield a "dynamic text", from the properties panel. Modify its position to x=2 and y=-20. Type "toolTipBox" in the "Instance Name".
[/li][/list]

We are done with creating the toolTip movieclip. We don't have it on the stage yet, so let's place it: on the navbar, click on "Scene 1". Remember we created a second layer named toolTip. Select the toolTip layer from the Timeline, drag the mcToolTip movieclip from the library and drop it anywhere on the stage. It is good practice that whenever possible, to place movieclips at coordinates x=0 and y=0. So go ahead and do that from the Properties panel.

You may as well save your fla at this time.