Technology Lesson: EasyTooltip free AS3 tooltip library HOW TO CUSTOMIZE

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.

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!

Technology Lesson

Wednesday, January 28, 2015

EasyTooltip free AS3 tooltip library HOW TO CUSTOMIZE

No comments:

Post a Comment