Advertisement
  1. Code
  2. Effects
Code

Create a Customizable Tooltip in ActionScript 3.0

by
Difficulty:IntermediateLanguages:

A Tooltip is a graphical user interface element. It activates by hovering or rolling over an item, showing a box of text which displays information about that item.

In this tut, I'll show you how to create an easily customizable tooltip using Classes in ActionScript 3.0. Take a look!

Step 1: Brief Overview

A Tooltip class will be created to handle the drawing of the tooltip, a Main class will handle the corresponding events and it will be displayed by rolling over a Button or MovieClip on the Stage.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600x300 and create a gray radial background (#F9FAF5, #E3E5E0).

””

Step 3: The Button

Select the Rectangle Primitive Tool and create a 140x40px blue (#7B90A5) rounded rectangle. Set 10 as corner radius and add some text to make it seem more like a button.

Convert it to a MovieClip or Button and name it "button". Open the properties panel and add the following filter:

You'll end up with something like this:

Step 4: ActionScript!

Save your work and be ready for some coding.

Create a new ActionScript File and save it as Tooltip.as

Step 5: Required Classes

These are the classes we'll need. For extended information about every class please refer to the flash help.

Step 6: Extending the Class

We extend using the Sprite class to get access to DisplayObject related functions.

Step 7: Variables

These are the variables we will use, explained in the comments.

Step 8: Constructor Function

This function is executed when the class is loaded, the parameters are almost all descriptive. The useArrow paramenter will draw a little arrow in the tooltip but it will just work if the direction is Up or Down. We'll see more about that later in the code.

Step 9: Text Properties

These lines will set the TextField and TextFormat properties.

Step 10: Creating the Tooltip

This code will draw the tooltip according to the values of the parameters.

Step 11: Arrow Parameter

The useArrow parameter will draw a triangle in the center-top or center-bottom of the tooltip, notice that this will work only if the "dir" parameter is set to Up or Down.

Step 12: Drop Shadow Filter

This code applies a Drop Shadow Filter based in the color of the tooltip.

Step 13: Add Tooltip to Stage

Step 14: Animating

This line will create a short tween animation using the alpha property of the tooltip.

Step 15: Main Class

Save your Tooltip class and create a new ActionScript File, this file will be the Main Class which will handle the Events to show the Tooltip when you roll over the button.

Save this class as Main.as

Step 16: Neccessary Classes

The neccessary classes for this file:

Step 17: Extending the Class

Extend using the Sprite class to get access to DisplayObject related functions.

Step 18: Variables

The variables we'll use in this class.

Step 19: Main Function

This function is the constructor, it will be run as soon as the class is called.

Step 20: Tooltip Countdown

This function will run when the user rolls over the button, it will start the timer to count 500 millisecons before calling the function that will show the Tooltip.

Step 21: Show Tooltip Function

Creates the Tooltip according to the parameters and places it in the chosen direction. It also adds the tooltip to the Stage and creates a Mouse Move listener.

Step 22: Tooltip Movement

This code will move the tooltip based on the dist paramenter and the mouse position.

Step 23: Hide Tooltip

This is a function that will remove the Tooltip when the mouse cursor is no longer within the target, in this case the button.

Step 24: Listeners

This is a function to add the listeners at a time, executed in the Main function.

Step 25: Document Class

Go back to the Fla and in the Properties Panel, Class textfield add "classes.Main". This will link the Main class as the Document Class.

Test your Tooltip!

Conclusion

You have created a highly customizable Tooltip in ActionScript 3 Classes, now it's time to see the customization part. The following are just a few examples of how many possibilities you have:

Thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.