Showing posts with label easytooltip. Show all posts
Showing posts with label easytooltip. Show all posts
Thursday, February 5, 2015
Creating EasyTooltip class Part 16
Today well add the ability to create bitmap fills and strokes for our tooltips.
First, create 2 new class files - BitmapRect.as and BitmapStroke.as. These are similar to the classes of the same name in the AdvAlert library.
BitmapRect.as code:
BitmapStroke.as code:
Go to TooltipCursor.as, find the updateDisplay() function. Create 2 new if..statements here.
The first one checks if style.backgroundStroke is an object of class BitmapStroke. Base this if..statement off the one that checks if the object is an instance of GradientColorStroke, just change lineGradientStyle() to lineBitmapStyle() and use the approporiate values:
The second if...statement checks if backgroundRect is an instance of BitmapRect class. Base this one on the if...statement that checks if backgroundRect is an object of GradientColorRect class. Change beginGradientFill() to beginBitmapFill() and use the new values:
Full class code:
Using bitmap strokes and fills is now as easy as it is to use gradients. In this example, I create 2 perlin noise BitmapDatas and set them as stroke and fill of the tooltip:
Thanks for reading!
The results:
Read more »
First, create 2 new class files - BitmapRect.as and BitmapStroke.as. These are similar to the classes of the same name in the AdvAlert library.
BitmapRect.as code:
package com.kircode.EasyTooltip
{
import flash.display.BitmapData;
import flash.geom.Matrix;
/**
* ...
* @author Kirill Poletaev
*/
public class BitmapRect
{
public var _bitmap:BitmapData;
public var _matrix:Matrix;
public var _repeat:Boolean;
public var _smooth:Boolean;
public var _radius:Array;
/**
* Create a rectangle filled with bitmap. Has the same parameters as beginBitmapFill(), plus lineThickness, lineColor, lineAlpha and cornerRadius.
* @parambitmap BitmapData to be used to fill the rectangle.
* @parammatrix Matrix object for transformation.
* @paramrepeat Repeat the bitmap when filling.
* @paramsmooth Smoothen the bitmap.
* @paramcornerRadius Radius of the corners of the box - top left, top right, bottom left, bottom right.
*/
public function BitmapRect(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false, cornerRadius:Array = null)
{
if (cornerRadius == null) cornerRadius = [10, 10, 0, 0];
_bitmap = bitmap;
_matrix = matrix;
_repeat = repeat;
_smooth = smooth;
_radius = cornerRadius;
}
}
}
BitmapStroke.as code:
package com.kircode.EasyTooltip
{
import flash.display.BitmapData;
import flash.geom.Matrix;
/**
* ...
* @author Kirill Poletaev
*/
public class BitmapStroke
{
public var _lineThickness:Number;
public var _bitmap:BitmapData;
public var _matrix:Matrix;
public var _repeat:Boolean;
public var _smooth:Boolean;
/**
* Create a bitmap filled line stroke. Uses same parameters as lineBitmapStyle() + lineThickness.
* @paramlineThickness Thickness of the line stroke.
* @parambitmap BitmapData to be used to fill the rectangle.
* @parammatrix Matrix object for transformation.
* @paramrepeat Repeat the bitmap when filling.
* @paramsmooth Smoothen the bitmap.
*/
public function BitmapStroke(lineThickness:Number, bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false)
{
_lineThickness = lineThickness;
_bitmap = bitmap;
_matrix = matrix;
_repeat = repeat;
_smooth = smooth;
}
}
}
Go to TooltipCursor.as, find the updateDisplay() function. Create 2 new if..statements here.
The first one checks if style.backgroundStroke is an object of class BitmapStroke. Base this if..statement off the one that checks if the object is an instance of GradientColorStroke, just change lineGradientStyle() to lineBitmapStyle() and use the approporiate values:
if (style.backgroundStroke is BitmapStroke) {
if(style.backgroundStroke._matrix){
style.backgroundStroke._matrix.tx = actual_x;
style.backgroundStroke._matrix.ty = actual_y;
}
background.graphics.lineStyle(style.backgroundStroke._lineThickness);
background.graphics.lineBitmapStyle(style.backgroundStroke._bitmap, style.backgroundStroke._matrix, style.backgroundStroke._repeat, style.backgroundStroke._smooth);
}
The second if...statement checks if backgroundRect is an instance of BitmapRect class. Base this one on the if...statement that checks if backgroundRect is an object of GradientColorRect class. Change beginGradientFill() to beginBitmapFill() and use the new values:
if (style.backgroundRect is BitmapRect) {
if(style.backgroundRect._matrix){
style.backgroundRect._matrix.tx = actual_x;
style.backgroundRect._matrix.ty = actual_y;
}
background.graphics.beginBitmapFill(style.backgroundRect._bitmap, style.backgroundRect._matrix, style.backgroundRect._repeat, style.backgroundRect._smooth);
background.graphics.drawRoundRectComplex(actual_x, actual_y, w, h, style.backgroundRect._radius[0], style.backgroundRect._radius[1], style.backgroundRect._radius[2], style.backgroundRect._radius[3]);
background.graphics.endFill();
}
Full class code:
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;
private var parentW:int;
private var parentH:int;
private var direction:String = "";
public function TooltipCursor(pW:int, pH:int)
{
parentW = pW;
parentH = pH;
txt = new TextField();
txt.multiline = true;
background = new Shape();
addChild(background);
addChild(txt);
txt.width = 1;
txt.height = 1;
}
/**
* 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();
if (style.backgroundStroke is SolidColorStroke) {
background.graphics.lineStyle(style.backgroundStroke._lineThickness, style.backgroundStroke._lineColor, style.backgroundStroke._lineAlpha);
}
if (style.backgroundStroke is GradientColorStroke) {
if(style.backgroundStroke._matrix){
style.backgroundStroke._matrix.tx = actual_x;
style.backgroundStroke._matrix.ty = actual_y;
}
background.graphics.lineStyle(style.backgroundStroke._lineThickness);
background.graphics.lineGradientStyle(style.backgroundStroke._gradientType, style.backgroundStroke._colors, style.backgroundStroke._alphas, style.backgroundStroke._ratios, style.backgroundStroke._matrix, style.backgroundStroke._spreadMethod, style.backgroundStroke._interpolationMethod, style.backgroundStroke._focalPointRatio);
}
if (style.backgroundStroke is BitmapStroke) {
if(style.backgroundStroke._matrix){
style.backgroundStroke._matrix.tx = actual_x;
style.backgroundStroke._matrix.ty = actual_y;
}
background.graphics.lineStyle(style.backgroundStroke._lineThickness);
background.graphics.lineBitmapStyle(style.backgroundStroke._bitmap, style.backgroundStroke._matrix, style.backgroundStroke._repeat, style.backgroundStroke._smooth);
}
if (style.backgroundRect is SolidColorRect) {
background.graphics.beginFill(style.backgroundRect._backgroundColor, style.backgroundRect._alpha);
background.graphics.drawRoundRectComplex(actual_x, actual_y, w, h, style.backgroundRect._radius[0], style.backgroundRect._radius[1], style.backgroundRect._radius[2], style.backgroundRect._radius[3]);
background.graphics.endFill();
}
if (style.backgroundRect is GradientColorRect) {
if(style.backgroundRect._matrix){
style.backgroundRect._matrix.tx = actual_x;
style.backgroundRect._matrix.ty = actual_y;
}
background.graphics.beginGradientFill(style.backgroundRect._gradientType, style.backgroundRect._colors, style.backgroundRect._alphas, style.backgroundRect._ratios, style.backgroundRect._matrix, style.backgroundRect._spreadMethod, style.backgroundRect._interpolationMethod, style.backgroundRect._focalPointRatio);
background.graphics.drawRoundRectComplex(actual_x, actual_y, w, h, style.backgroundRect._radius[0], style.backgroundRect._radius[1], style.backgroundRect._radius[2], style.backgroundRect._radius[3]);
background.graphics.endFill();
}
if (style.backgroundRect is BitmapRect) {
if(style.backgroundRect._matrix){
style.backgroundRect._matrix.tx = actual_x;
style.backgroundRect._matrix.ty = actual_y;
}
background.graphics.beginBitmapFill(style.backgroundRect._bitmap, style.backgroundRect._matrix, style.backgroundRect._repeat, style.backgroundRect._smooth);
background.graphics.drawRoundRectComplex(actual_x, actual_y, w, h, style.backgroundRect._radius[0], style.backgroundRect._radius[1], style.backgroundRect._radius[2], style.backgroundRect._radius[3]);
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 {
if (style.maxWidth == 0) style.maxWidth = parentW;
if (style.maxHeight == 0) style.maxHeight = parentH;
txt.wordWrap = true;
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) w = style.minWidth;
if (h < style.minHeight) h = style.minHeight;
// calculate best direction
if (this.y <= h-style.offsetY) {
direction = "bottom";
actual_y = -style.offsetY;
} else
if (this.y > h-style.offsetY) {
direction = "top";
actual_y = -h + style.offsetY;
}
if (this.x <= parentW * 0.5) {
direction += "right";
actual_x = - style.offsetX;
} else
if (this.x > parentW * 0.5) {
direction += "left";
actual_x = -w + style.offsetX;
}
// If sticks out on the right:
if(direction == "topright" || direction == "bottomright"){
// if tooltip sticks out of border - calculate shortened width to fit the content
if (this.x + actual_x + w > parentW) {
txt.wordWrap = true;
w = parentW - this.x - actual_x;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) {
w = style.minWidth;
this.x = parentW - w + style.offsetX;
}
if (h < style.minHeight) h = style.minHeight;
} else {
// if doesnt stick out, keep adding 1 pixel to the width until as much text is seen as possible
while (this.x + actual_x + w < parentW && w < style.maxWidth && w >= style.minWidth) {
w += 1;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right && w >= style.minWidth && w < style.maxWidth) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
if (w < style.minWidth) {
w = style.minWidth;
}
break;
}
txt.wordWrap = true;
}
}
}
// If sticks out on the left:
if(direction == "topleft" || direction == "bottomleft"){
if (this.x + actual_x <= 0) {
txt.wordWrap = true;
actual_x = -this.x;
w = this.x + style.offsetX;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) w = style.minWidth;
if (h < style.minHeight) h = style.minHeight;
} else {
// if doesnt stick out, keep adding 1 pixel to the width (and substracting it from actual_x) until as much text is seen as possible
while (this.x + actual_x > 0 && w < style.maxWidth && w >= style.minWidth) {
actual_x -= 1;
w += 1;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right && w >= style.minWidth && w <= style.maxWidth) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
if (w < style.minWidth) {
w = style.minWidth;
}
break;
}
txt.wordWrap = true;
}
}
}
}
}
}
Using bitmap strokes and fills is now as easy as it is to use gradients. In this example, I create 2 perlin noise BitmapDatas and set them as stroke and fill of the tooltip:
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.minWidth = 240;
myStyle.maxWidth = 0;
myStyle.offsetX = -10;
myStyle.offsetY = -10;
var myBitmap:BitmapData = new BitmapData(200, 100, false, 0x000000);
myBitmap.perlinNoise(200, 100, 3, 7, true, true);
var myBitmap2:BitmapData = new BitmapData(200, 100, false, 0x000000);
myBitmap2.perlinNoise(100, 100, 3, 11, true, true);
myStyle.backgroundRect = new BitmapRect(myBitmap, new Matrix(), true, true, [10, 10, 10, 10]);
myStyle.backgroundStroke = new BitmapStroke(2, myBitmap2, new Matrix(), true, true);
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight, 0);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, "Test test test test test test test test test test test test test test test");
Thanks for reading!
The results:
Wednesday, February 4, 2015
Creating EasyTooltip class Part 12
In this tutorial we will improve our positioning and sizing algorithm.
Before we start, Id like to give the code in the main.as class, which is being used to test out examples:
Go to the TooltipCursor class and find the updateSize() function.
The first change well make is related to direction calculation. In the part where we choose whether to go bottom or top, change parentH to h-style.offsetY. This will make sure that the tooltip is displayed below the cursor only when absolutely necessary.
Now in the if...statement that has "topright" and "bottomright" in the conditional, add "+ style.offsetX" in the line that calculates this.x if width is less than styles minWidth. Then, in the conditional of the while loop, also check if width is less than style.maxWidth and is greater than or equals minWidth. Check the same inside the if...statement in that while loop.
In the "topleft" and "bottomleft" part, add the same conditions in the while loop and in the if..statement which is inside the while loop:
Full class code so far:
Thanks for reading!
Here are the results:
Read more »
Before we start, Id like to give the code in the main.as class, which is being used to test out examples:
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);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, "This is a piece of a longer text. It should fit in the visible area.");
Go to the TooltipCursor class and find the updateSize() function.
The first change well make is related to direction calculation. In the part where we choose whether to go bottom or top, change parentH to h-style.offsetY. This will make sure that the tooltip is displayed below the cursor only when absolutely necessary.
// calculate best direction
if (this.y <= h-style.offsetY) {
direction = "bottom";
actual_y = -style.offsetY;
} else
if (this.y > h-style.offsetY) {
direction = "top";
actual_y = -h + style.offsetY;
}
Now in the if...statement that has "topright" and "bottomright" in the conditional, add "+ style.offsetX" in the line that calculates this.x if width is less than styles minWidth. Then, in the conditional of the while loop, also check if width is less than style.maxWidth and is greater than or equals minWidth. Check the same inside the if...statement in that while loop.
// If sticks out on the right:
if(direction == "topright" || direction == "bottomright"){
// if tooltip sticks out of border - calculate shortened width to fit the content
if (this.x + actual_x + w > parentW) {
txt.wordWrap = true;
w = parentW - this.x - actual_x;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) {
w = style.minWidth;
this.x = parentW - w + style.offsetX;
}
if (h < style.minHeight) h = style.minHeight;
} else {
// if doesnt stick out, keep adding 1 pixel to the width until as much text is seen as possible
while (this.x + actual_x + w < parentW && w < style.maxWidth && w >= style.minWidth) {
w += 1;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right && w > style.minWidth && w < style.maxWidth) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
}
In the "topleft" and "bottomleft" part, add the same conditions in the while loop and in the if..statement which is inside the while loop:
// If sticks out on the left:
if(direction == "topleft" || direction == "bottomleft"){
if (this.x + actual_x <= 0) {
txt.wordWrap = true;
actual_x = -this.x;
w = this.x + style.offsetX;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) w = style.minWidth;
if (h < style.minHeight) h = style.minHeight;
} else {
// if doesnt stick out, keep adding 1 pixel to the width (and substracting it from actual_x) until as much text is seen as possible
while (this.x + actual_x > 0 && w < style.maxWidth && w >= style.minWidth) {
actual_x -= 1;
w += 1;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right && w > style.minWidth && w <= style.maxWidth) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
}
Full class 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;
private var parentW:int;
private var parentH:int;
private var direction:String = "";
public function TooltipCursor(pW:int, pH:int)
{
parentW = pW;
parentH = pH;
txt = new TextField();
txt.multiline = true;
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 {
if (style.maxWidth == 0) style.maxWidth = parentW;
if (style.maxHeight == 0) style.maxHeight = parentH;
txt.wordWrap = true;
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) w = style.minWidth;
if (h < style.minHeight) h = style.minHeight;
// calculate best direction
if (this.y <= h-style.offsetY) {
direction = "bottom";
actual_y = -style.offsetY;
} else
if (this.y > h-style.offsetY) {
direction = "top";
actual_y = -h + style.offsetY;
}
if (this.x <= parentW * 0.5) {
direction += "right";
actual_x = - style.offsetX;
} else
if (this.x > parentW * 0.5) {
direction += "left";
actual_x = -w + style.offsetX;
}
// If sticks out on the right:
if(direction == "topright" || direction == "bottomright"){
// if tooltip sticks out of border - calculate shortened width to fit the content
if (this.x + actual_x + w > parentW) {
txt.wordWrap = true;
w = parentW - this.x - actual_x;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) {
w = style.minWidth;
this.x = parentW - w + style.offsetX;
}
if (h < style.minHeight) h = style.minHeight;
} else {
// if doesnt stick out, keep adding 1 pixel to the width until as much text is seen as possible
while (this.x + actual_x + w < parentW && w < style.maxWidth && w >= style.minWidth) {
w += 1;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right && w > style.minWidth && w < style.maxWidth) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
}
// If sticks out on the left:
if(direction == "topleft" || direction == "bottomleft"){
if (this.x + actual_x <= 0) {
txt.wordWrap = true;
actual_x = -this.x;
w = this.x + style.offsetX;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
if (w > style.maxWidth) w = style.maxWidth;
if (h > style.maxHeight) h = style.maxHeight;
if (w < style.minWidth) w = style.minWidth;
if (h < style.minHeight) h = style.minHeight;
} else {
// if doesnt stick out, keep adding 1 pixel to the width (and substracting it from actual_x) until as much text is seen as possible
while (this.x + actual_x > 0 && w < style.maxWidth && w >= style.minWidth) {
actual_x -= 1;
w += 1;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right && w > style.minWidth && w <= style.maxWidth) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
}
}
}
}
Thanks for reading!
Here are the results:
Monday, February 2, 2015
Creating EasyTooltip class Part 7
Today well begin working on auto-sizing of our tooltips.
Firstly go to EasyTooltip and add 2 more parameters to receive - the width and height of the parent.
Before that, declare 2 variables - parW and parH:
And then, as said above, receive the parameters and apply their values to parW and parH. Moreover, pass the two varaibles to the TooltipCursor objects constructor.
In TooltipCursor declare 2 new varaibles - parentW and parentH:
Receive and set the values in the constructor:
Now go to updateSize() function.
The first thing well do is calculate the width and height of the tooltip. The width consists of the text width and the left/right text paddings. It is also necessary to add 4 pixels to the width so that the last letter doesnt get cut (some kind of a bug I guess). Similar with the height:
The next 2 lines remain unchanged:
Now here is where it starts to get tricky.
First we check if the tooltip is wide enough to cross the parents boundaries. This is done with an if...statement:
Then we set text fields wordWrap property to true, so that we can break the text into multiple lines:
Calculate the new width by using all the available space from the current mouse coordinate to the left.
Then calculate the height the same way we did before:
All the code above is executed if the width exceeds boundaries. If it doesnt however, we add a while() loop that keeps adding 4 pixels to the width, until the width exceeds the borders.
In the while loop(), after adding the 4 pixels, we also add another check - set wordWrap of the text to false and see if the whole text fits in the visible area. If it does, that means the whole text is fit as one line in the tooltip. Then we can break the while loop and keep that width. Otherwise, set wordWrap back to true and continue:
Full function:
And full code now:
I made an example with 2 visual objects that invoke tooltips:
Thanks for reading!
Read more »
Firstly go to EasyTooltip and add 2 more parameters to receive - the width and height of the parent.
Before that, declare 2 variables - parW and parH:
private var parW:int;
private var parH:int;
And then, as said above, receive the parameters and apply their values to parW and parH. Moreover, pass the two varaibles to the TooltipCursor objects constructor.
/**
* 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.
*/
public function EasyTooltip(parent:DisplayObjectContainer, parentWidth:int, parentHeight:int)
{
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!");
}
In TooltipCursor declare 2 new varaibles - parentW and parentH:
private var parentW:int;
private var parentH:int;
Receive and set the values in the constructor:
public function TooltipCursor(pW:int, pH:int)
{
parentW = pW;
parentH = pH;
txt = new TextField();
txt.multiline = true;
background = new Shape();
addChild(background);
addChild(txt);
}
Now go to updateSize() function.
The first thing well do is calculate the width and height of the tooltip. The width consists of the text width and the left/right text paddings. It is also necessary to add 4 pixels to the width so that the last letter doesnt get cut (some kind of a bug I guess). Similar with the height:
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
The next 2 lines remain unchanged:
actual_x = 0 + style.offsetX;
actual_y = -h + style.offsetY;
Now here is where it starts to get tricky.
First we check if the tooltip is wide enough to cross the parents boundaries. This is done with an if...statement:
// if tooltip sticks out of border - calculate shorted width to fit the content
if (this.x + actual_x + w > parentW) {
Then we set text fields wordWrap property to true, so that we can break the text into multiple lines:
txt.wordWrap = true;
Calculate the new width by using all the available space from the current mouse coordinate to the left.
w = parentW - this.x - actual_x;
Then calculate the height the same way we did before:
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
All the code above is executed if the width exceeds boundaries. If it doesnt however, we add a while() loop that keeps adding 4 pixels to the width, until the width exceeds the borders.
In the while loop(), after adding the 4 pixels, we also add another check - set wordWrap of the text to false and see if the whole text fits in the visible area. If it does, that means the whole text is fit as one line in the tooltip. Then we can break the while loop and keep that width. Otherwise, set wordWrap back to true and continue:
}else {
// if doesnt stick out, keep adding 4 pixels to the width until as much text is seen as possible
while (this.x + actual_x + w < parentW) {
w += 4;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
Full function:
private function updateSize():void {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
actual_x = 0 + style.offsetX;
actual_y = -h + style.offsetY;
// if tooltip sticks out of border - calculate shorted width to fit the content
if (this.x + actual_x + w > parentW) {
txt.wordWrap = true;
w = parentW - this.x - actual_x;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
}else {
// if doesnt stick out, keep adding 4 pixels to the width until as much text is seen as possible
while (this.x + actual_x + w < parentW) {
w += 4;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
}
And full code now:
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;
private var parentW:int;
private var parentH:int;
public function TooltipCursor(pW:int, pH:int)
{
parentW = pW;
parentH = pH;
txt = new TextField();
txt.multiline = true;
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 {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
actual_x = 0 + style.offsetX;
actual_y = -h + style.offsetY;
// if tooltip sticks out of border - calculate shorted width to fit the content
if (this.x + actual_x + w > parentW) {
txt.wordWrap = true;
w = parentW - this.x - actual_x;
h = txt.textHeight + 4 + style.textPadding.top + style.textPadding.bottom;
}else {
// if doesnt stick out, keep adding 4 pixels to the width until as much text is seen as possible
while (this.x + actual_x + w < parentW) {
w += 4;
// try turning off wordwrap and see if it still fits (as one line)
txt.wordWrap = false;
if (w > txt.textWidth + 4 + style.textPadding.left + style.textPadding.right) {
w = txt.textWidth + 4 + style.textPadding.left + style.textPadding.right;
break;
}
txt.wordWrap = true;
}
}
}
}
}
I made an example with 2 visual objects that invoke tooltips:
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight);
tooltip.addListener(object1, "This is an object.");
tooltip.addListener(object2, "This is a piece of a longer text. It should fit in the visible area.");
Thanks for reading!
Wednesday, January 28, 2015
EasyTooltip free AS3 tooltip library HOW TO CUSTOMIZE
Today Ill explain how to style tooltips made using EasyTooltip class.
To change the appearance of tooltips, create a new TooltipStyle object, set its properties and then apply it to the EasyTooltip instance using EasyTooltips setStyle() method.
To edit the text appearance, use the textAlpha, textFormat and textPadding properties of the TooltipStyle object.
To change the position of the tooltip relative to mouse, use the offsetX and offsetY properties.
You can use minWidth, maxWidth, minHeight and maxHeight to set size limits for your tooltips.
You can apply an array of filters to the filters property of the TooltipStyle object.
The remaining 3 properties are backgroundRect, backgroundStroke and dynamicContent. Lets start with dynamic content.
Normally, you wouldnt need to edit contents of the dynamicContent array manually. Theres a method that lets you add a visual element to the tooltip (such as an icon) without having to touch the array. The method is called addContent().
There are 3 parameters in the function - class of the visual object, x and y offsets. The class is passed instead of a class instance, because objects of that class will be created automatically. In the example below, myIcon is the name of a class that extends MovieClip and just contains a small image.
There are 3 background fill types for the tooltip box, and 3 background stroke types. Those are solid color fill and stroke, gradient color fill and stroke, and bitmap fill and stroke. Any fill type can be used in combination with any stroke.
You can set the backgroundRect property value to an instance of SolidColorRect, GradientColorRect or BitmapColorRect class. Similarly, youcan set the backgroundStroke property value to an instance of SolidColorStroke, GradientColorStroke or BitmapColorStroke class.
Use the properties of these classes to customize your tooltip appearances. Below are 3 examples using all of the classes:
Using all these tools you can customize your tooltips to look the way you want them to.
Thanks for reading!
Read more »
To change the appearance of tooltips, create a new TooltipStyle object, set its properties and then apply it to the EasyTooltip instance using EasyTooltips setStyle() method.
To edit the text appearance, use the textAlpha, textFormat and textPadding properties of the TooltipStyle object.
To change the position of the tooltip relative to mouse, use the offsetX and offsetY properties.
You can use minWidth, maxWidth, minHeight and maxHeight to set size limits for your tooltips.
You can apply an array of filters to the filters property of the TooltipStyle object.
The remaining 3 properties are backgroundRect, backgroundStroke and dynamicContent. Lets start with dynamic content.
Normally, you wouldnt need to edit contents of the dynamicContent array manually. Theres a method that lets you add a visual element to the tooltip (such as an icon) without having to touch the array. The method is called addContent().
There are 3 parameters in the function - class of the visual object, x and y offsets. The class is passed instead of a class instance, because objects of that class will be created automatically. In the example below, myIcon is the name of a class that extends MovieClip and just contains a small image.
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.maxWidth = 0;
myStyle.offsetX = -10;
myStyle.offsetY = -10;
myStyle.addContent(myIcon, 5, 5);
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, " Example of dynamic content usage. ");
There are 3 background fill types for the tooltip box, and 3 background stroke types. Those are solid color fill and stroke, gradient color fill and stroke, and bitmap fill and stroke. Any fill type can be used in combination with any stroke.
You can set the backgroundRect property value to an instance of SolidColorRect, GradientColorRect or BitmapColorRect class. Similarly, youcan set the backgroundStroke property value to an instance of SolidColorStroke, GradientColorStroke or BitmapColorStroke class.
Use the properties of these classes to customize your tooltip appearances. Below are 3 examples using all of the classes:
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.backgroundRect = new SolidColorRect(0x880000, [10, 0, 10, 0], 1);
myStyle.backgroundStroke = new SolidColorStroke(2, 0xcc0000, 1);
myStyle.offsetX = -10;
myStyle.offsetY = -10;
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, "Example of using solid color fill and stroke. ");
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.minWidth = 240;
myStyle.maxWidth = 0;
myStyle.offsetX = -10;
myStyle.offsetY = -10;
var matrix1:Matrix = new Matrix();
matrix1.createGradientBox(240, 200, 1.57);
myStyle.backgroundRect = new GradientColorRect(GradientType.LINEAR, [0, 0], [0.2, 1], [0, 255], matrix1, "pad", "rgb", 0, [0, 0, 0, 0]);
var matrix2:Matrix = new Matrix();
matrix2.createGradientBox(240, 200, 1.57);
myStyle.backgroundStroke = new GradientColorStroke(2, GradientType.LINEAR, [0x000000, 0xffffff], [1, 1], [0, 255], matrix2, "pad", "rgb", 0);
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, "Example of gradient fill and stroke usage. ");
var myStyle:TooltipStyle = new TooltipStyle();
myStyle.minWidth = 240;
myStyle.maxWidth = 0;
myStyle.offsetX = -10;
myStyle.offsetY = -10;
var myBitmap:BitmapData = new BitmapData(200, 100, false, 0x000000);
myBitmap.perlinNoise(200, 100, 3, 7, true, true);
var myBitmap2:BitmapData = new BitmapData(200, 100, false, 0x000000);
myBitmap2.perlinNoise(100, 100, 3, 11, true, true);
myStyle.backgroundRect = new BitmapRect(myBitmap, new Matrix(), true, true, [10, 10, 10, 10]);
myStyle.backgroundStroke = new BitmapStroke(2, myBitmap2, new Matrix(), true, true);
tooltip = new EasyTooltip(stage, stage.stageWidth, stage.stageHeight);
tooltip.setStyle(myStyle);
tooltip.addListener(object1, "Example of bitmap fill and stroke usage. ");
Using all these tools you can customize your tooltips to look the way you want them to.
Thanks for reading!
Subscribe to:
Posts (Atom)