Thursday, February 5, 2015
Creating EasyTooltip class Part 4
Before we move on to adding new code, lets 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 lets create a new class called TooltipCursor. I want to make this the only object thats 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 parents 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 ones "display" property is true. If none is displayed, set cursors alpha to 0. If one of the listeners display value is true - set the cursors alpha to 1, and update its text fields 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!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.