Create A Customizable ToolTip AS3 - Chapter I Preparing The Files
Posted by : FlashXpert on Jun 23, 2010
We will create a .fla file just to explore the ways the tool-tip can be used. Our main objective is creating the separated .as class that you will be able to re-use whenever you need, without having to modify it.
It is always good practice to use external files for your AS code as opposed to simply writing it in the Actions panel for several reasons, including:
- breaking the code into separate external files makes it easier to organize and maintain.
- you can reuse the code in other FLA files without having to rewrite a single line.
- you can change the code with any text editor, you will not necessarily need the authoring tool.
So let's begin by creating a folder that will be dedicated to our project: name it "toolTip".
Open the Flash authoring tool and create a new document: choose "Flash File (ActionScript 3.0)". Save the newly created .fla file inside the "toolTip" folder and give it the name "MyFlashProject".
Then hit ctrl+n to begin creating a second document. This time select "ActionScript File". Save the newly created .as file inside the "toolTip" folder and give it the name "ToolTip". This second document will hold the toolTip class.
Inside the toolTip.as file, paste the following code:
package {
/**
* ToolTip Class
* @author FlashXpert
* @version 3.0.1
*/
import fl.transitions.easing.Regular;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.utils.Timer;
public class ToolTip extends Sprite {
/** The singleton instance of the ToolTip */
private static var mInstance : ToolTip;
/** The textfield of the ToolTip */
public var toolTipBox : TextField;
/** The background of the ToolTip */
public var mcBck : Sprite;
/** The middle section of the ToolTip, used in resizing */
public var mcMiddle : Sprite;
/** The opaqueness of the displayed ToolTip */
private var goAlpha : Number;
/** The time in seconds for the tooltip to be displayed after the mouse has moved away from the tooltip's target */
private var hideDelay : Number;
/** A timer used to hide the ToolTip */
private var timeout : Timer;
/** A tween used to animate the fading of the ToolTip */
private var toolTipTween : Tween;
/**
* @return singleton instance of ToolTip
*/
public static function getInstance() : ToolTip {
if (mInstance == null) {
new ToolTip();
}
return mInstance;
}
/**
* Constructor, sets the tarnsparency of the ToolTip to maximum
*/
public function ToolTip() {
mInstance = this;
this.toolTipBox.embedFonts = true;
this.alpha = 0;
this.visible = false;
}
/**
* Initializes the tooltip
* pParam: pHideDelay the time in seconds for the tooltip to be displayed after the mouse has moved away from the tooltip's target
* pParam: pBckColor the color of the tooltip text's background
* pParam: pTxtColor the color of the tooltip's text
* pParam: pAlpha the opaqueness of the tooltip
*/
public function init(pHideDelay : Number, pBckColor : Number, pTxtColor : Number, pAlpha : Number) : void {
this.hideDelay = pHideDelay;
Color.setColor(this.mcBck, pBckColor);
Color.setColor(this.mcMiddle, pBckColor);
this.toolTipBox.textColor = pTxtColor;
this.goAlpha = pAlpha / 100;
this.timeout = new Timer(this.hideDelay * 1000, 1);
this.timeout.addEventListener(TimerEvent.TIMER, this.hideToolTip);
}
/**
* It pops-up a tooltip
* @param pText The text to be used with the tooltip
* @param pMovieClip The movieclip that the tooltip is pointing to
* @param yDiff [May not be given] - It's here to correct eventual height differences
* @param pFollowMouse
*/
public function showToolTip(pText : String, pMovieClip : DisplayObject, yDiff : Number = 0, pFollowMouse : Boolean = false) : void {
this.toolTipBox.text = pText;
this.toolTipBox.autoSize = "left";
this.mcBck.width = this.toolTipBox.x * 2 + this.toolTipBox.width;
this.mcMiddle.x = 2;
var pt : Point;
var xDiff:Number;
if(pFollowMouse) {
pt = pMovieClip.localToGlobal(new Point(pMovieClip.mouseX, 0));
xDiff = 2;
} else {
pt = pMovieClip.localToGlobal(new Point(0, 0));
xDiff = pMovieClip.width / 2;
}
if (pt.x - this.width / 2 + xDiff + this.width > this.stage.stageWidth) {
this.x = this.stage.stageWidth - this.width - 2;
this.mcMiddle.x = Math.floor(this.width - (this.stage.stageWidth - pt.x) + xDiff) + 2;
}else if(pt.x - this.width / 2 + xDiff < 0) {
this.x = 2;
this.mcMiddle.x = pt.x + xDiff - 2;
} else {
this.x = Math.floor(pt.x - this.width / 2 + xDiff);
this.mcMiddle.x = Math.round(this.mcBck.width / 2);
}
if (isNaN(yDiff)) {
this.y = Math.floor(pt.y);
} else {
this.y = Math.floor(pt.y + yDiff);
}
if(this.toolTipTween != null) {
this.toolTipTween.stop();
}
this.visible = true;
if(this.toolTipTween != null) {
this.toolTipTween.stop();
}
this.toolTipTween = new Tween(this, "alpha", Regular.easeIn, this.alpha, this.goAlpha, 0.3, true);
this.timeout.reset();
this.timeout.start();
}
/**
* Hides the tooltip
*/
public function hideToolTip(event : TimerEvent = null) : void {
if(this.toolTipTween != null) {
this.toolTipTween.stop();
}
this.toolTipTween = new Tween(this, "alpha", Regular.easeIn, this.alpha, 0, 0.3, true);
this.toolTipTween.addEventListener(TweenEvent.MOTION_FINISH, this.hide);
}
/**
* Event handler: hides the tooltip
*/
private function hide(event : TweenEvent) : void {
this.visible = false;
}
}
}
Hit ctrl+s to save the file.
Hit ctrl+n to create another as file. The following class is the base class of our main fla. It is here where we'll add the code needed to initialize the tooltip, but we'll do this in the coming sections of this tutorial. For now, just create the as file, name it "MyFlashProject.as" and paste the following code inside:
package {
public class MyFlashProject extends MovieCLip {
}
}
Hit ctrl+s to save the file.
Hit ctrl+n to create another as file. The following class is an utility used to set the color of the tool tip, so that you can later easily customize it. Name the file "Colors.as" and paste the following code inside the file:
package {
/**
* Color utils
* @author FlashXpert
* @version 1.0.0
*/
import flash.display.DisplayObject;
import flash.geom.ColorTransform;
public class Color {
/**
* Changes the color of the received DisplayObject
* pParam: pDisplayObject
* pParam: pColor the color to be set
*/
static public function setColor(pDisplayObject : DisplayObject, pColor : uint) : void {
var newColorTransform : ColorTransform = pDisplayObject.transform.colorTransform;
newColorTransform.color = pColor;
pDisplayObject.transform.colorTransform = newColorTransform;
}
}
}
Hit ctrl+s to save the file.
Hit ctrl+n to create another as file. The following class is an utility used to better organize your code. Name the file "Proxy.as" and paste the following code inside the file:
package {
/**
* Unlike the Delegate class the Proxy class allows the passing of function parameters without redefining.
*/
public class Proxy {
static public function create(referrer : *, func : Function, ...params) : Function {
var delegate : Function = function(...parameters):* {
return func.apply(referrer, parameters.concat(params));
};
return delegate;
}
}
}
Hit ctrl+s to save the file.
no comment
Add comment