ToolTip类，趋于完美
东西虽小，内容丰富：自定义，缓动，淡入、淡出，自动调整位置。
package myas
{
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.geom.*;
import flash.text.*;
//import flash.utils.Timer;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
/**
* Example:
var tt:ToolTip = new ToolTip();
tt.show( DisplayObject, "", "这里是信息" );
或：
var tf:TextFormat = new TextFormat();
tf.bold = true;
tf.size = 12;
tf.color = 0xff0000;
var contentFormat:TextFormat = new TextFormat();
contentFormat.size = 14;
contentFormat.color = 0xFFFFFF;
contentFormat.bold = false;
var tt:ToolTip = new ToolTip();
tt.hook = true;
tt.hookSize = 20;
tt.cornerRadius = 20;
tt.align = "center";
tt.titleFormat = tf;
tt.contentFormat = contentFormat;
tt.show( DisplayObject, "Title Of This ToolTip", "Some Copy that would go below the ToolTip Title" );
*
****** by zcheng 2011-3-22 [email protected]
基于* @author Duncan Reid, www.hy-brid.com * @date October 17, 2008 * @version 1.1
*
*/
public class ToolTip extends Sprite
{
//objects
private var _stage:Stage;
private var _parentObject:DisplayObject;
private var _tf:TextField;// title field
private var _cf:TextField;//content field
private var _tween:Tween;
//formats
private var _titleFormat:TextFormat;
private var _contentFormat:TextFormat;
/* check for format override */
private var _titleOverride:Boolean = false;
private var _contentOverride:Boolean = false;
//defaults
private var _defaultWidth:Number = 200;//宽
private var _buffer:Number = 10;//四周留白数
private var _align:String = "right";//箭头位置
private var _cornerRadius:Number = 4;//圆角度数
private var _bgColors:Array = [0xFFF4E1,0xFFF4E1];
//private var _bgColors:Array = [0xB5FEB4,0x003300];//背景色
private var _autoSize:Boolean = false;//自动调整大小
private var _hookEnabled:Boolean = true;//有无箭头
//private var _delay:Number = 0; //延迟出现毫秒数，已精简
private var _hookSize:Number = 10;//箭头大小
//offsets
private var _offSet:Number;
private var _hookOffSet:Number;
public function ToolTip():void
{
//do not disturb parent display object mouse events
this.mouseEnabled = false;
this.buttonMode = false;
this.mouseChildren = false;
//setup delay timer
/*_timer = new Timer(this._delay, 1);
_timer.addEventListener("timer", timerHandler);*/
this.animate(true);
}
public function show( p:DisplayObject, title:String, content:String=null ):void
{
//get the stage from the parent
this._stage = p.stage;
this._parentObject = p;
this.addCopy( title, content );
this.setOffset();
this.drawBG();
this.bgGlow();
//initialize coordinates
var parentCoords:Point = new Point(_parentObject.mouseX,_parentObject.mouseY);
var globalPoint:Point = p.localToGlobal(parentCoords);
this.x = globalPoint.x + this._offSet;
this.y = globalPoint.y - this.height - 10;
this.alpha = 0;
this._stage.addChild( this );
this._parentObject.addEventListener( MouseEvent.MOUSE_OUT, this.onMouseOut );
//removed mouse move handler in lieu of enterframe for smoother movement;
//this._parentObject.addEventListener( MouseEvent.MOUSE_MOVE, this.onMouseMovement );
this.follow( true );
//_timer.start();
}
public function hide():void
{
this.animate( false );
}
/*private function timerHandler( event:TimerEvent ):void {
this.animate(true);
}*/
private function onMouseOut( event:MouseEvent ):void
{
event.currentTarget.removeEventListener(event.type, arguments.callee);
this.hide();
}
private function follow( value:Boolean ):void
{
if (value)
{
addEventListener( Event.ENTER_FRAME, this.eof );
}
else
{
removeEventListener( Event.ENTER_FRAME, this.eof );
}
}
private function eof( event:Event ):void
{
this.position();
}
private function position():void
{
var speed:Number = 3;
var parentCoords:Point = new Point(_parentObject.mouseX,_parentObject.mouseY);
var globalPoint:Point = _parentObject.localToGlobal(parentCoords);
var xp:Number = globalPoint.x + this._offSet;
var yp:Number;
if ((_hookEnabled &&globalPoint.y>this.height) || (!_hookEnabled &&globalPoint.y>this.height+10))
{
yp = globalPoint.y - this.height - 10;
if (! _hookEnabled)
{
_hookEnabled = true;
this.graphics.clear();
drawBG();
}
}
else if (stage.stageHeight/2>this.height)
{
yp = globalPoint.y + 25;
if (_hookEnabled)
{
_hookEnabled = false;
this.graphics.clear();
drawBG();
}
}
var overhangRight:Number = this._defaultWidth + xp;
if (overhangRight > stage.stageWidth)
{
xp = stage.stageWidth - this._defaultWidth;
}
if (xp < 0)
{
xp = 0;
}
if (yp < 0)
{
yp = 0;
}
this.x += ( xp - this.x ) / speed;
this.y += ( yp - this.y ) / speed;
}
private function addCopy( title:String, content:String ):void
{
if (! this._titleOverride)
{
this.initTitleFormat();
}
var titleIsDevice:Boolean = this.isDeviceFont(_titleFormat);
this._tf = this.createField(titleIsDevice);
this._tf.htmlText = title;
this._tf.setTextFormat( this._titleFormat);
//this._tf.setTextFormat( this._titleFormat, 0, title.length );
if (this._autoSize)
{
this._defaultWidth = this._tf.textWidth + 4 + ( _buffer * 2 );
}
else
{
this._tf.width = this._defaultWidth - ( _buffer * 2 );
}
this._tf.x = this._tf.y = this._buffer;
this.textGlow( this._tf );
addChild( this._tf );
if (content != null)
{
if (! this._contentOverride)
{
this.initContentFormat();
}
//check for device font
var contentIsDevice:Boolean = this.isDeviceFont(_contentFormat);
this._cf = this.createField(contentIsDevice);
this._cf.htmlText = content;
var bounds:Rectangle = this.getBounds(this);
this._cf.x = this._buffer;
this._cf.y = bounds.height + 5;
this.textGlow( this._cf );
this._cf.setTextFormat( this._contentFormat );
if (this._autoSize)
{
var cfWidth:Number = this._cf.textWidth + 4 + ( _buffer * 2 );
this._defaultWidth = cfWidth > this._defaultWidth ? cfWidth:this._defaultWidth;
}
else
{
this._cf.width = this._defaultWidth - ( _buffer * 2 );
}
addChild( this._cf );
}
}
//create field, if not device font, set embed to true
private function createField( deviceFont:Boolean ):TextField
{
var tf:TextField = new TextField();
tf.embedFonts = ! deviceFont;
tf.gridFitType = "pixel";
//tf.border = true;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.selectable = false;
if (! this._autoSize)
{
tf.multiline = true;
tf.wordWrap = true;
}
return tf;
}
//draw background, use drawing api if we need a hook
private function drawBG():void
{
var bounds:Rectangle = this.getBounds(this);
var fillType:String = GradientType.LINEAR;
//var colors:Array = [0xFFFFFF, 0x9C9C9C];
var alphas:Array = [1,1];
var ratios:Array = [0x00,0xFF];
var matr:Matrix = new Matrix();
var radians:Number = 90 * Math.PI / 180;
matr.createGradientBox(this._defaultWidth, bounds.height + ( this._buffer * 2 ), radians, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
this.graphics.beginGradientFill(fillType, this._bgColors, alphas, ratios, matr, spreadMethod);
if (this._hookEnabled)
{
var xp:Number = 0;
var yp:Number = 0;
var w:Number = this._defaultWidth;
var h:Number = bounds.height + ( this._buffer * 2 );
this.graphics.moveTo( xp + this._cornerRadius, yp );
this.graphics.lineTo( xp + w - this._cornerRadius, yp );
this.graphics.curveTo( xp + w, yp, xp + w, yp + this._cornerRadius );
this.graphics.lineTo( xp + w, yp + h - this._cornerRadius );
this.graphics.curveTo( xp + w, yp + h, xp + w - this._cornerRadius, yp + h );
//hook
this.graphics.lineTo( xp + this._hookOffSet + this._hookSize, yp + h );
this.graphics.lineTo( xp + this._hookOffSet , yp + h + this._hookSize );
this.graphics.lineTo( xp + this._hookOffSet - this._hookSize, yp + h );
this.graphics.lineTo( xp + this._cornerRadius, yp + h );
this.graphics.curveTo( xp, yp + h, xp, yp + h - this._cornerRadius );
this.graphics.lineTo( xp, yp + this._cornerRadius );
this.graphics.curveTo( xp, yp, xp + this._cornerRadius, yp );
this.graphics.endFill();
}
else
{
this.graphics.drawRoundRect( 0, 0, this._defaultWidth, bounds.height + ( this._buffer * 2 ), this._cornerRadius );
}
}
/* Fade In / Out */
private function animate( show:Boolean ):void
{
var end:int = show == true ? 1:0;
_tween = new Tween(this,"alpha",Strong.easeOut,this.alpha,end,.5,true);
if (! show)
{
_tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
//_timer.reset();
}
}
private function onComplete( event:TweenEvent ):void
{
event.currentTarget.removeEventListener(event.type, arguments.callee);
this.cleanUp();
}
/* End Fade */
/** Getters / Setters */
public function set tipWidth( value:Number ):void
{
this._defaultWidth = value;
}
public function set titleFormat( tf:TextFormat ):void
{
this._titleFormat = tf;
if (this._titleFormat.font == null)
{
this._titleFormat.font = "_sans";
}
this._titleOverride = true;
}
public function set contentFormat( tf:TextFormat ):void
{
this._contentFormat = tf;
if (this._contentFormat.font == null)
{
this._contentFormat.font = "_sans";
}
this._contentOverride = true;
}
public function set align( value:String ):void
{
var a:String = value.toLowerCase();
var values:String = "right left center";
if (values.indexOf(value) == -1)
{
throw new Error(this + " : Invalid Align Property, options are: 'right', 'left' & 'center'");
}
else
{
this._align = a;
}
}
/*public function set delay( value:Number ):void {
this._delay = value;
this._timer.delay = value;
}*/
public function set hook( value:Boolean ):void
{
this._hookEnabled = value;
}
public function set hookSize( value:Number ):void
{
this._hookSize = value;
}
public function set cornerRadius( value:Number ):void
{
this._cornerRadius = value;
}
public function set colors( colArray:Array ):void
{
this._bgColors = colArray;
}
public function set autoSize( value:Boolean ):void
{
this._autoSize = value;
}
/* End Getters / Setters */
/* Cosmetic */
private function textGlow( field:TextField ):void
{//对显示对象应用发光效果
var color:Number = 0x000000;
var alpha:Number = 0.2;
var blurX:Number = 2;
var blurY:Number = 2;
var strength:Number = 1;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
var filter:GlowFilter = new GlowFilter(color,
alpha,
blurX,
blurY,
strength,
quality,
inner,
knockout);
var myFilters:Array = new Array();
myFilters.push(filter);
field.filters = myFilters;
}
private function bgGlow():void
{//对显示对象应用发光效果
var color:Number = 0x000000;
var alpha:Number = 0.40;
var blurX:Number = 2;
var blurY:Number = 2;
var strength:Number = 1;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
var filter:GlowFilter = new GlowFilter(color,
alpha,
blurX,
blurY,
strength,
quality,
inner,
knockout);
var myFilters:Array = new Array();
myFilters.push(filter);
filters = myFilters;
}
private function initTitleFormat():void
{
_titleFormat = new TextFormat();
_titleFormat.font = "_sans";
_titleFormat.bold = true;
_titleFormat.size = 16;
_titleFormat.color = 0x01430E;
}
private function initContentFormat():void
{
_contentFormat = new TextFormat();
_contentFormat.font = "_sans";
_contentFormat.bold = false;
_contentFormat.size = 14;
_contentFormat.color = 0x000000;
}
/* End Cosmetic */
/* Helpers */
/* Check if font is a device font */
private function isDeviceFont( format:TextFormat ):Boolean
{
var font:String = format.font;
var device:String = "_sans _serif _typewriter";
return device.indexOf( font ) > -1;
//_sans
//_serif
//_typewriter
}
private function setOffset():void
{
switch ( this._align )
{
case "left" :
this._offSet = - _defaultWidth + ( _buffer * 3 ) + this._hookSize;
this._hookOffSet = this._defaultWidth - ( _buffer * 3 ) - this._hookSize;
break;
case "right" :
this._offSet = 0 - ( _buffer * 3 ) - this._hookSize;
this._hookOffSet = _buffer * 3 + this._hookSize;
break;
case "center" :
this._offSet = - ( _defaultWidth / 2 );
this._hookOffSet = ( _defaultWidth / 2 );
break;
default :
this._offSet = - ( _defaultWidth / 2 );
this._hookOffSet = ( _defaultWidth / 2 );
break;
}
}
/* End Helpers */
/* Clean */
private function cleanUp():void
{
this._parentObject.removeEventListener( MouseEvent.MOUSE_OUT, this.onMouseOut );
this.follow( false );
this._tf.filters = [];
this.filters = [];
removeChild( this._tf );
this._tf = null;
if (this._cf != null)
{
this._cf.filters = [];
removeChild( this._cf );
}
this.graphics.clear();
parent.removeChild( this );
}
/* End Clean */
}
}