Monday, November 5, 2012

Creating EasyTooltip class: Part 4

Today we will make a simple mouse follower, which displays very simple tool tips.

Before we move on to adding new code, let's go to TooltipListener class and set tip and list variables public instead of private:

package com.kircode.EasyTooltip 
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;

/**
 * Manages a single visible object that displays a tooltip when rolled over.
 * @author Kirill Poletaev
 */
public class TooltipListener 
{

public var tip:Tooltip;
public var list:DisplayObject;

public function TooltipListener(listener:DisplayObject, tooltip:Tooltip) 
{
list = listener;
tip = tooltip;
listener.addEventListener(MouseEvent.ROLL_OVER, onOver);
listener.addEventListener(MouseEvent.ROLL_OUT, onOut);
}

public function kill():void {
list.removeEventListener(MouseEvent.ROLL_OVER, onOver);
list.removeEventListener(MouseEvent.ROLL_OUT, onOut);
}

private function onOver(evt:MouseEvent):void {
tip.display = true;
}

private function onOut(evt:MouseEvent):void {
tip.display = false;
}

}

}

Now let's create a new class called TooltipCursor. I want to make this the only object that's displayed in Tooltip - the content of it changes depending on what tooltip is currently displayed, but the object itself is the same.

Create TooltipCursor.as class, which extends MvoieClip. Add "txt" variable, which is a TextField, add it to the display list:

package com.kircode.EasyTooltip 
{
import flash.display.MovieClip;
import flash.text.TextField;
/**
 * The cursor that follows the mouse (if not set otherwise) and displays each tooltip.
 * @author Kirill Poletaev
 */
public class TooltipCursor extends MovieClip
{

public var txt:TextField;

public function TooltipCursor() 
{
txt = new TextField();
addChild(txt);
txt.y = - 20;
}

}

}

We can now go to EasyTooltip.as and declare an instance of this new class:

private var cursor:TooltipCursor;

In the constructor, set its mouseChildren and mouseEnabled properties to false, add it to the parent's display list and also add an ENTER_FRAME event listener for the cursor.

cursor = new TooltipCursor();
cursor.mouseChildren = false;
cursor.mouseEnabled = false;
parent.addChild(cursor);
cursor.addEventListener(Event.ENTER_FRAME, onFrame);

In the event handler, we loop through all listeners to see which one's "display" property is true. If none is displayed, set cursor's alpha to 0. If one of the listener's display value is true - set the cursor's alpha to 1, and update its text field's text value and width:

private function onFrame(evt:Event):void {
var displayInd:int = -1;
for (var i:int = 0; i < listeners.length; i++) {
if (listeners[i].tip.display) {
displayInd = i;
break;
}
}
if (displayInd == -1) {
cursor.alpha = 0;
}else {
cursor.alpha = 1;
cursor.txt.text = listeners[displayInd].tip.msg;
cursor.txt.width = cursor.txt.textWidth + 10;
}
cursor.x = par.mouseX;
cursor.y = par.mouseY;
}

Full EasyTooltip class so far:

package com.kircode.EasyTooltip 
{
import flash.display.DisplayObjectContainer;
import flash.display.DisplayObject;
import flash.events.Event;
/**
 * Utility for creation of tooltips.
 * @author Kirill Poletaev
 */
public class EasyTooltip 
{

private var par:DisplayObject;
public var listeners:Array;
private var cursor:TooltipCursor;

/**
 * Create a Tooltip manager. Needed for creating and managing tooltips.
 * @paramparent Reference to the parent of tooltips - the container, which will contain the objects that will be rolled over.
 */

public function EasyTooltip(parent:DisplayObjectContainer) 
{
par = parent;
listeners = [];
cursor = new TooltipCursor();
cursor.mouseChildren = false;
cursor.mouseEnabled = false;
parent.addChild(cursor);
cursor.addEventListener(Event.ENTER_FRAME, onFrame);
trace("Tooltip manager created!");
}

/**
 * Add a Tooltip listener.
 * @paramlistener Object, which invokes the tooltip on roll over.
 * @paramtooltip Message to be displayed.
 * @returnNewly created Tooltip object. Can be used to dynamically change its properties in real-time.
 */

public function addListener(listener:DisplayObject, tooltip:String):Tooltip {
var tip:Tooltip = new Tooltip(tooltip);
var list:TooltipListener = new TooltipListener(listener, tip);
listeners.push(list);
return tip;
}

private function onFrame(evt:Event):void {
var displayInd:int = -1;
for (var i:int = 0; i < listeners.length; i++) {
if (listeners[i].tip.display) {
displayInd = i;
break;
}
}
if (displayInd == -1) {
cursor.alpha = 0;
}else {
cursor.alpha = 1;
cursor.txt.text = listeners[displayInd].tip.msg;
cursor.txt.width = cursor.txt.textWidth + 10;
}
cursor.x = par.mouseX;
cursor.y = par.mouseY;
}

}

}

Now when you roll over a listener, you can see a very simple tooltip appearing, and disappearing as you roll out.

Thanks for reading!

No comments:

Post a Comment