Friday, January 30, 2015
Creating EasyTooltip class Part 5
For styling we will use a class called TooltipStyle, which will do 2 things:
1) declare some variables related to tooltip styles and store their values,
2) set default values for these properties.
For now, lets add only 2 properties - backgroundColor and textFormat:
package com.kircode.EasyTooltip
{
import flash.text.TextFormat;
/**
* Used for visually styling tooltips.
* @author Kirill Poletaev
*/
public class TooltipStyle
{
public var backgroundColor:uint;
public var textFormat:TextFormat;
public function TooltipStyle()
{
backgroundColor = 0x000000;
textFormat = new TextFormat("Arial", 17, 0xffffff);
}
}
}
In TooltipCursor well add a new function called setStyle(), which is public and receives a TooltipStyle object as parameter. Using this function, it will be able to change the style of tooltips by simply providing a TooltipStyle object.
Before we do that, well need to declare a new property "style":
private var style:TooltipStyle;
Now, in the new function setStyle(), we can apply the received parameter value to our style variable, and then adjust the appearance of the text field according to the provided values.
/**
* Set style of the tooltips.
* @paramst TooltipStyle object to apply.
*/
public function setStyle(st:TooltipStyle):void {
style = st;
txt.background = true;
txt.backgroundColor = style.backgroundColor;
txt.setTextFormat(style.textFormat);
}
Well also introduce a new function called setText(), which receives a String value and applies it to the tooltip. Moreover, here we calculate the new position and size of the text field, as well as set its style again.
/**
* Change the text value of the tooltip.
* @parammessage The new text value.
*/
public function setText(message:String):void {
txt.text = message;
setStyle(style);
txt.y = -30;
txt.width = 130;
txt.height = 25;
}
Full TooltipCursor class:
package com.kircode.EasyTooltip
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.text.TextFormat;
/**
* 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;
private var style:TooltipStyle;
public function TooltipCursor()
{
txt = new TextField();
addChild(txt);
}
/**
* Set style of the tooltips.
* @paramst TooltipStyle object to apply.
*/
public function setStyle(st:TooltipStyle):void {
style = st;
txt.background = true;
txt.backgroundColor = style.backgroundColor;
txt.setTextFormat(style.textFormat);
}
/**
* Change the text value of the tooltip.
* @parammessage The new text value.
*/
public function setText(message:String):void {
txt.text = message;
setStyle(style);
txt.y = -30;
txt.width = 130;
txt.height = 25;
}
}
}
Go to EasyTooltip and create a new function called setStyle(), which sets the style of its cursor object.
/**
* Set a new style for the tooltips.
* @paramstyle TooltipStyle object that defines the style.
*/
public function setStyle(style:TooltipStyle):void {
cursor.setStyle(style);
}
Remove the lines from onFrame() that set the position and size of the text field inside the cursor, and use the setText() function to update the text of the tool tip instead of directly using the textfields text property:
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);
}
}
In the constructor of the class, we need to call the setStyle() function and pass a new TooltipStyle object as a parameter, to set the default values:
/**
* 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);
setStyle(new TooltipStyle());
trace("Tooltip manager created!");
}
Full class code 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);
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);
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);
}
}
}
}
Now in main.as you can use the defauly style by simply not specifying a custom style:
tooltip = new EasyTooltip(stage);
tooltip.addListener(object1, "This is an object.");
Or you can set a custom style like this:
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.backgroundColor = 0x333333;
tooltip.setStyle(myStyle);
Thats all for today.
Thanks for reading!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.