Friday, January 23, 2015
Creating EasyTooltip class Part 13
First of all, go to the EasyTooltip class and add a new parameter in the constructor - spawnDelay. Declare a variable in the class called "delay", and in the constructor apply spawnDelays value to delay. Then, in the addListener() function, pass the delay value as third parameter of the TooltipListener constructor:
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;
/**
* 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.
* @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, spawnDelay:int = 0)
{
delay = spawnDelay;
par = parent;
listeners = [];
parW = parentWidth;
parH = parentHeight;
cursor = new TooltipCursor(parentWidth, parentHeight);
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;
}
private function onFrame(evt:Event):void {
cursor.x = par.mouseX;
cursor.y = par.mouseY;
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);
}
}
}
}
Go to TooltipListener class, declare a Timer:
private var timer:Timer;
Receive the delay in the constructor, apply its value as the delay of the timer when creating it. Add a TIMER_COMPLETE event listener to the 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);
}
In the onOver() function, instead of simply setting display property of the tooltip to true, reset and start the timer:
private function onOver(evt:MouseEvent):void {
timer.reset();
timer.start();
}
In the onOut() function, set display to false and stop the timer:
private function onOut(evt:MouseEvent):void {
tip.display = false;
timer.stop();
}
And create the timer handler function onTimer(), use it to set display property of the tooltip to true:
private function onTimer(evt:TimerEvent):void {
tip.display = true;
}
This way the tooltip will be displayed after the timer dispatches the TIMER_COMPLETE event. Full TooltipListener class code:
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);
}
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;
}
}
}
In the main.as file, you can now pass a value in milliseconds to the EasyTooltip constructor to set the delay:
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.minWidth = 240;
myStyle.maxWidth = 300;
myStyle.offsetX = -10;
myStyle.offsetY = -10;
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight, 500);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, "This is a piece of a longer text. It should fit in the visible area.");
Thanks for reading!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.