GhostWire Studios - Flash/Flex UI Components Development And Consulting Services
Quality User Interface Controls For Flash Application DevelopmentAspireUI Components

Aug 20 2009

uiToolTips: Using Fancy Background Skins

Published by at 5:15 am under Aspire UI,Flash,Tips

The uiToolTips manager implements the use of pop-up tool tips. The contents of these tool tips are placed inside an instance of the uiFrame container class. Since uiFrame containers are skinnable, this basically means that tool tips are also skinnable, albeit indirectly.


Tool Tips Without Bitmap Skinning
By default, the tool tip container has its skin property set to “ToolTip”.

In the “rules.xml” XML file in the theme folder (which by default is “assets/skins/default”, relative to the application SWF), you will find an entry similar to that below:

<ToolTip clone="" prefs="background|border,0x000000,color,0xFFFFE1,shadow,0x000000|padding|2,1,1,2" />

The clone attribute indicates which skin asset the ToolTip skin should mirror. In the above entry, clone is set to an empty string “”, which means the ToolTip skin is not cloning another skin, neither would the skinning manager (uiSkins.manager) attempt to load “ToolTip.png”. Effectively, this means that the uiFrame containing the tool tips will not be using any bitmap image for rendering its background, depending only on the background property for styling.

The prefs attribute indicates the property-value pairs that should be applied to instances using the “ToolTip” skin. Therefore, the tool tip uiFrame container, whose skin property value has been set to “ToolTip”, will be setting
(i) its background property to an Object with properties color as 0xFFFFE1 (background fill color), border as 0×000000 (border color), and shadow as 0×000000 (drop shadow); and
(ii) its padding property to “2,1,1,2″ (top padding 2px, right padding 1px, bottom padding 1px, left padding 2px).
Default ToolTip Background


Tool Tips With Bitmap Skinning
If the clone attribute is removed, the framework will attempt to load “ToolTip.png” and apply it accordingly.

Let’s consider the following image (to be saved as “ToolTip.png” in the theme folder):
Sample ToolTip Skin Asset
And the following entry in “rules.xml”:

<ToolTip edge="10" prefs="background|shadow,0x000000|padding|2,5" />

The skin asset uses a non-scaling edge of 10px for all four sides, and instances using the skin should set
(i) background property to an Object with property shadow as 0×000000 (drop shadow); and
(ii) padding property to “2,5″ (top and bottom padding 2px, right and left padding 5px).

The tool tip will then be rendered as shown below:
Fancy ToolTip Background

For more examples on skinning uiFrame containers, please see the post
uiFrame: Drawing Fancy Borders (Frames).


Live Demo
Here is a live demo showing another alternative tool tip skin:

Get Adobe Flash player


In the demo above, we have used the following skin asset (saved as “ToolTipA.png” in the theme folder):
Sample ToolTip Skin Asset
The following XML entries are used (to demonstrate the clone directive):

<ToolTip clone="ToolTipA" />
<ToolTipA edge="6,15" prefs="background|shadow,0|padding|4,18,8" />


ToolTipDemo Class

package
{
	import com.ghostwire.ui.controls.uiLabelButton;
	import com.ghostwire.ui.managers.uiSkins;
	import com.ghostwire.ui.managers.uiToolTips;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ToolTipDemo extends Sprite
	{	
		public function ToolTipDemo()
		{
			// ** make sure stage is not null **
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(evt:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			uiToolTips.initialize(stage);
 
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
			var btn:uiLabelButton = new uiLabelButton("Mouse Over Me!");
			btn.toolTip = "A tool tip!";
			addChild(btn);			
		}
	}
}


Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of these components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

pixelstats trackingpixel
Be Sociable, Share!
             

    No responses yet

    Comments RSS

    Leave a Reply

    *
    To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
    Click to hear an audio file of the anti-spam word