Sunday, January 18, 2015
Creating EasyTooltip class Part 6
Today well improve our tooltip styling abilities, as well as the way the tooltips are drawn.Go to TooltipStyle and add a number of new variables. These include backgroundAlpha, textAlpha, textPadding, offsetX and offsetY. It should be noted that textPadding is an object of class TextPadding, which I will add shortly.
TooltipStyle with the new properties and defautl values set:
package com.kircode.EasyTooltip
{
import flash.text.TextFormat;
/**
* Used for visually styling tooltips.
* @author Kirill Poletaev
*/
public class TooltipStyle
{
public var backgroundAlpha:Number;
public var backgroundColor:uint;
public var textAlpha:Number;
public var textFormat:TextFormat;
public var textPadding:TextPadding;
public var offsetX:int;
public var offsetY:int;
public function TooltipStyle()
{
backgroundAlpha = 1;
backgroundColor = 0x000000;
textAlpha = 1;
textFormat = new TextFormat("Arial", 17, 0xffffff);
textPadding = new TextPadding(5, 5, 5, 5);
offsetX = 0;
offsetY = 0;
}
}
}
The TextPadding class is a simple class containing 4 public properties (left, right, top, bottom), constructor and setPadding() method, which I used in AdvAlert library. This is the exact same class, just with a different package (com.kircode.EasyTooltip now).
The class is used for storing padding of a text field in 4 directions. As I said, theres setPadding() method which makes it easy to set all 4 values in one line. Its also possible to do using the constructor.
Create the TextPadding.as class and use this code:
package com.kircode.EasyTooltip
{
/**
* Text padding management.
* @author Kirill Poletaev
*/
public class TextPadding
{
public var left:int = 5;
public var right:int = 5;
public var top:int = 5;
public var bottom:int = 5;
/**
* Padding values of a text field. All default values are 5.
* @paramtopPadding Top padding of the text field.
* @paramrightPadding Right padding of the text field.
* @parambottomPadding Bottom padding of the text field.
* @paramleftPadding Left padding of the text field.
*/
public function TextPadding(topPadding:int = 5, rightPadding:int = 5, bottomPadding:int = 5, leftPadding:int = 5)
{
top = topPadding;
right = rightPadding;
bottom = bottomPadding;
left = leftPadding;
}
/**
* Padding values of a text field. All default values are 5.
* @paramtopPadding Top padding of the text field.
* @paramrightPadding Right padding of the text field.
* @parambottomPadding Bottom padding of the text field.
* @paramleftPadding Left padding of the text field.
*/
public function setPadding(topPadding:int, rightPadding:int, bottomPadding:int, leftPadding:int):void {
top = topPadding;
right = rightPadding;
bottom = bottomPadding;
left = leftPadding;
}
}
}
Now go to TooltipCursor.as. Here add 5 new variables - background (Shape), w, h, actual_x and actual_y (integers). In the constructor, declare the background as a new Shape and then add it to the cursor (add it before adding text field to ensure that text field spawns on top of it):
public var txt:TextField;
private var style:TooltipStyle;
private var background:Shape;
private var w:int;
private var h:int;
private var actual_x:int;
private var actual_y:int;
public function TooltipCursor()
{
txt = new TextField();
background = new Shape();
addChild(background);
addChild(txt);
}
Update setStyle() function so that it only sets the style property and doesnt calculate/set anything else:
/**
* Set style of the tooltips.
* @paramst TooltipStyle object to apply.
*/
public function setStyle(st:TooltipStyle):void {
style = st;
}
Update setText() method so that it only sets the text of the tooltip and applies text format, then calls 2 functions called updateSize() and updateDisplay():
/**
* Change the text value of the tooltip.
* @parammessage The new text value.
*/
public function setText(message:String):void {
txt.text = message;
txt.setTextFormat(style.textFormat);
updateSize();
updateDisplay();
}
The updateSize() function will later be used to calculate the proper size and position according to settings, but for now lets just hardcode width and height to 150x40. We can calculate the actual_x and actual_y values by adding the offset values to (0;-h):
private function updateSize():void {
// Here we will later calculate the size, for now lets just leave some hardcoded values
w = 150;
h = 40;
actual_x = 0 + style.offsetX;
actual_y = -h + style.offsetY;
}
In updateDisplay() function the tooltip will be drawn and positioned. Use all the provided values to properly draw the background box and position the text field:
private function updateDisplay():void {
background.graphics.clear();
background.graphics.beginFill(style.backgroundColor, style.backgroundAlpha);
background.graphics.drawRect(actual_x, actual_y, w, h);
background.graphics.endFill();
txt.width = w - style.textPadding.left - style.textPadding.right;
txt.height = h - style.textPadding.top - style.textPadding.bottom;
txt.x = actual_x + style.textPadding.left;
txt.y = actual_y + style.textPadding.top;
}
Full TooltipCursor code so far:
package com.kircode.EasyTooltip
{
import flash.display.MovieClip;
import flash.display.Shape;
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;
private var background:Shape;
private var w:int;
private var h:int;
private var actual_x:int;
private var actual_y:int;
public function TooltipCursor()
{
txt = new TextField();
background = new Shape();
addChild(background);
addChild(txt);
}
/**
* Set style of the tooltips.
* @paramst TooltipStyle object to apply.
*/
public function setStyle(st:TooltipStyle):void {
style = st;
}
/**
* Change the text value of the tooltip.
* @parammessage The new text value.
*/
public function setText(message:String):void {
txt.text = message;
txt.setTextFormat(style.textFormat);
updateSize();
updateDisplay();
}
private function updateDisplay():void {
background.graphics.clear();
background.graphics.beginFill(style.backgroundColor, style.backgroundAlpha);
background.graphics.drawRect(actual_x, actual_y, w, h);
background.graphics.endFill();
txt.width = w - style.textPadding.left - style.textPadding.right;
txt.height = h - style.textPadding.top - style.textPadding.bottom;
txt.x = actual_x + style.textPadding.left;
txt.y = actual_y + style.textPadding.top;
}
private function updateSize():void {
// Here we will later calculate the size, for now lets just leave some hardcoded values
w = 150;
h = 40;
actual_x = 0 + style.offsetX;
actual_y = -h + style.offsetY;
}
}
}
Thats all for today.
Next time well work on calculating size and position of the tooltip.
Thanks for reading!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.