Tuesday, November 20, 2012

Creating EasyTooltip class: Part 19

Today we'll add the ability to smoothen the movement of the tooltip.

Go to EasyTooltip class, add a new variable smooth, typed Number.

private var smooth:Number;

Pass a new parameter to the constructor of the class called smoothMovemen. Receive the value in the constructor and apply its value to smooth variable.

/**
 * 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);
cursor.mouseChildren = false;
cursor.mouseEnabled = false;
parent.addChild(cursor);
cursor.addEventListener(Event.ENTER_FRAME, onFrame);
setStyle(new TooltipStyle());
trace("Tooltip manager created!");
}

Now go to onFrame() function, and change the lines that set the cursor.x and cursor.y values. Instead of directly setting the coordinates of the mouse to these variables, we use the following expression to smoothen the movement:

cursor.x += (par.mouseX - cursor.x)/smooth;
cursor.y += (par.mouseY - cursor.y)/smooth;

Full function:

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);
}
}

This way the movement of the tooltip is smooth by default, and the user can change the smoothness level, or remove it at all by setting the value to 1.

Full class 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);
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.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);
}
}

}

}

Thanks for reading!

The results:


No comments:

Post a Comment