Flash Tutorials

We want to make sure that when the user hovers the mouse pointer to either the circle or the textfield, the tool-tip appears displaying a piece of information and disappears when the mouse pointer is moved away.

Let's make it run by editing the MyFLashProject.as file we created at the beginning. Open it, and paste the following code inside the package:

import ToolTip;
import Color;
import Proxy;
import flash.events.MouseEvent;
import flash.display.MovieClip;

With the imports we tell the compiler what files it needs and where it can find them.

Inside the class, paste the following variable declarations:

public var mcToolTip : ToolTip;
public var mcCircle: MovieClip;
public var mcText: MovieClip;

Notice how we use the instance names we gave to our mcs in the previous chapter.

Then build the constructor of our class. Inside the constructor, we'll also initialize the ToolTip. Initializing the ToolTip is done by passing a few parameters: delay (the number of seconds after which the ToolTip auto-hides), the color of the ToolTip's background, the color of the font used, and the transparency of the ToolTip). You can edit all these however you want, in your future projects. Paste the following code:

public function MyFlashProject(){
            ToolTip.getInstance().init(30, 0xCDCDFF, 0x000000, 100);

            this.initHandlers(this.mcCircle);
            this.initHandlers(this.mcText);         
        }

Notice how we added the mcCircle and the mcText to our list of objects that will have a ToolTip. In the same way, you will be able to add any of your displayed objects.

By adding event listeners to our circle and textfield, we ready them for an action, in case one of these two events happens: mouseOver or MouseOut. Paste the following code:

private function initHandlers(pTarget : MovieClip) : void {
            pTarget.addEventListener(MouseEvent.MOUSE_OVER, Proxy.create(this, handlerAction, "rollOver", pTarget));
            pTarget.addEventListener(MouseEvent.MOUSE_OUT, Proxy.create(this, handlerAction, "rollOut", pTarget));

            pTarget.buttonMode = true;
        }

The handlerAction function has a switch with two cases: rollOver (in which case it displays a toolTip instance over the target, with a text retained in the toolTxt variable) and rollOut(in which case it hides the ToolTip). This is where you'll edit the text you want displayed in your future projects:

private function handlerAction(event : MouseEvent, pAction : String, pTarget : MovieClip) : void {
            switch(pAction) {
                case "rollOver":
                    var toolTxt : String;
                    switch (pTarget) {
                        case this.mcCircle : toolTxt = "This is a very round shape!"; break;
                        case this.mcText : toolTxt = "Does everything make sense?"; break;
                    }
                ToolTip.getInstance().showToolTip(toolTxt, pTarget, 0); break;              

                case "rollOut":ToolTip.getInstance().hideToolTip(); break;  
            }
        }

And that's it. In the end, your "MyFlashProject.as" file should look like this:

package {

import ToolTip;
import Color;
import Proxy;
import flash.events.MouseEvent;
import flash.display.MovieClip;

    public class MyFlashProject extends MovieClip{

        public var mcToolTip : ToolTip;
        public var mcCircle: MovieClip;
        public var mcText: MovieClip;

        public function MyFlashProject(){
            ToolTip.getInstance().init(30, 0xCDCDFF, 0x000000, 100);

            this.initHandlers(this.mcCircle);
            this.initHandlers(this.mcText);         
        }

        private function initHandlers(pTarget : MovieClip) : void {
            pTarget.addEventListener(MouseEvent.MOUSE_OVER, Proxy.create(this, handlerAction, "rollOver", pTarget));
            pTarget.addEventListener(MouseEvent.MOUSE_OUT, Proxy.create(this, handlerAction, "rollOut", pTarget));

            pTarget.buttonMode = true;
        }

        private function handlerAction(event : MouseEvent, pAction : String, pTarget : MovieClip) : void {
            switch(pAction) {
                case "rollOver":
                    var toolTxt : String;
                    switch (pTarget) {
                        case this.mcCircle : toolTxt = "This is a very round shape!"; break;
                        case this.mcText : toolTxt = "Does everything make sense?"; break;
                    }
                ToolTip.getInstance().showToolTip(toolTxt, pTarget, 0); break;              

                case "rollOut":ToolTip.getInstance().hideToolTip(); break;  
            }
        }
    }
}

Save the file.

Go to to the main fla file, "MyFlashProject.as", click anywhere outside the stage to make sure everything is deselected, and in the Properties panel, inside the Publish settings, type the name of our class: "MyFlashProject".

Save and hit ctrl+enter to see the final result.