Thursday, November 22, 2012

Creating EasyTooltip class: Part 21

In this tutorial we'll work on removing listeners and tooltips.

First of all, go to TooltipListener class and update the kill() function. Right now it only removes the 2 mouse event listeners. It should also stop the timer, remove its listener, set it to null and set the tooltip to null.

public function kill():void {
list.removeEventListener(MouseEvent.ROLL_OVER, onOver);
list.removeEventListener(MouseEvent.ROLL_OUT, onOut);
timer.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimer);
timer.stop();
timer = null;
tip = null;
}

Full TooltipListener class:

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

/**
 * 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;
private var timer:Timer;

public function TooltipListener(listener:DisplayObject, tooltip:Tooltip, delay:int) 
{
list = listener;
tip = tooltip;
timer = new Timer(delay, 1);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimer);
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);
timer.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimer);
timer.stop();
timer = null;
tip = null;
}

private function onOver(evt:MouseEvent):void {
timer.reset();
timer.start();
}

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

private function onTimer(evt:TimerEvent):void {
tip.display = true;
}

}

}

Now go to EasyTooltip class and add a function called removeListener(). Give it a parameter "listener", which is the DisplayObject instance that has a tooltip listener. In the function, we loop through the listeners and compare each "list" property of the listener in the array to the listener in the parameter. If they match, remove that listener using kill() method of the TooltipListener instance, set it to null, and remove the item from the array.

/**
 * Removes a Tooltip listener.
 * @paramlistener The object that invokes tooltip on roll over.
 */

public function removeListener(listener:DisplayObject):void {
for (var i:int = listeners.length-1; i >= 0; i--) {
if (listener == listeners[i].list) {
listeners[i].kill();
listeners[i] = null;
listeners.splice(i, 1);
}
}
}

Add a new function called kill(), which loops through the listeners and kills each one. Then remove the TooltipCursor, the ENTER_FRAME listener and set the cursor to null.

/**
 * Completely removes the EasyTooltip manager, all the listeners and tooltip cursor.
 */

public function kill():void {
for (var i:int = listeners.length-1; i >= 0; i--) {
listeners[i].kill();
listeners[i] = null;
listeners.splice(i, 1);
}
(par as DisplayObjectContainer).removeChild(cursor);
cursor.removeEventListener(Event.ENTER_FRAME, onFrame);
cursor = null;
}

Full EasyTooltip code:

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;
private var parW:int;
private var parH:int;
private var delay:int;
private var smooth:Number;

/**
 * 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.
 * @paramparentWidth Width of the parent.
 * @paramparentHeight Height of the parent.
 * @paramsmoothMovement The movement smoothener - the bigger the value, the smoother the movement. 1 = no smoothment.
 * @paramspawnDelay Delay in milliseconds of how long the user has to hold their mouse over the object to invoke a tooltip.
 */

public function EasyTooltip(parent:DisplayObjectContainer, parentWidth:int, parentHeight:int, smoothMovement:Number = 3, spawnDelay:int = 0) 
{
smooth = smoothMovement;
delay = spawnDelay;
par = parent;
listeners = [];
parW = parentWidth;
parH = parentHeight;
cursor = new TooltipCursor(parentWidth, parentHeight, smoothMovement);
cursor.mouseChildren = false;
cursor.mouseEnabled = false;
parent.addChild(cursor);
cursor.addEventListener(Event.ENTER_FRAME, onFrame);
setStyle(new TooltipStyle());
trace("Tooltip manager created!");
}

/**
 * Set a new style for the tooltips.
 * @paramstyle TooltipStyle object that defines the style.
 */

public function setStyle(style:TooltipStyle):void {
cursor.setStyle(style);
}

/**
 * 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, delay);
listeners.push(list);
return tip;
}

/**
 * Removes a Tooltip listener.
 * @paramlistener The object that invokes tooltip on roll over.
 */

public function removeListener(listener:DisplayObject):void {
for (var i:int = listeners.length-1; i >= 0; i--) {
if (listener == listeners[i].list) {
listeners[i].kill();
listeners[i] = null;
listeners.splice(i, 1);
}
}
}

/**
 * Completely removes the EasyTooltip manager, all the listeners and tooltip cursor.
 */

public function kill():void {
for (var i:int = listeners.length-1; i >= 0; i--) {
listeners[i].kill();
listeners[i] = null;
listeners.splice(i, 1);
}
(par as DisplayObjectContainer).removeChild(cursor);
cursor.removeEventListener(Event.ENTER_FRAME, onFrame);
cursor = null;
}

private function onFrame(evt:Event):void {
cursor.x += (par.mouseX - cursor.x)/smooth;
cursor.y += (par.mouseY - cursor.y)/smooth;
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.setText(listeners[displayInd].tip.msg);
}
}

}

}

That's all for today.

Thanks for reading!

No comments:

Post a Comment