AS3の簡易ツールチップ生成クラスを作ってみた

ボタンや補足説明時に重宝するのがツールチップ表示。いちいちコンテンツを作るほどのものでなければ、さくさくと数文字のテキストで補足した方が何かと効率が良いですからね。

それで、AS3の勉強がてらツールチップ表示のクラスなんかを作ってみた。

何となく…もうちょっとスマートな書き方があるような気がしてならない。ところどころに「プププッ」と笑ってしまうような変な書き方があるかもしれないが、そこはご愛嬌ということで。

とりあえずはこんな感じで動きます。

サンプル

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	//toolTipsクラス読み込み
	import hikatsuka.utils.toolTips;
	
	public class  main extends Sprite {
		
		//ツールチップオブジェクトを生成
		private var TT:toolTips = new toolTips(stage);
		
		//コンストラクタ
		public function main() {
			A.addEventListener(MouseEvent.ROLL_OVER , overBtn);
			A.addEventListener(MouseEvent.ROLL_OUT , outBtn);
			B.addEventListener(MouseEvent.ROLL_OVER , overBtn);
			B.addEventListener(MouseEvent.ROLL_OUT , outBtn);
			
			//ロールオーバー
			function overBtn (e:MouseEvent):void {
				switch (e.target) {
					case A :
						//ツールチップ表示
						TT.setToolTips("A:ツールチップテキスト");
						break;
					case B :
						//ツールチップ表示
						TT.setToolTips("B:改行\n改行\n改行");
						break;
				}
			}
			
			//ロールアウト
			function outBtn (e:MouseEvent):void {
				//ツールチップ削除
				TT.delToolTips();
			}
		}
	}
}

使い方は簡単だと思う。

1. new toolTips(stage); でツールチップオブジェクトを生成
   ※必ず stage を引き渡すこと
2. setToolTips("テキスト"); でテキストが表示される
3. delToolTips(); でテキストが削除される

この最初にオブジェクトを生成する時に stage を引き渡しているのだけども、こういうのって普通？
良く分からないが、stage を引き渡さないとツールチップが表示されないんだよね…（汗

※アドバイス募集中（^^;

ツールチップクラス

で、クラスのソースは下記。

package hikatsuka.utils {
	
	/*============================================================
	クラス読み込み
	============================================================*/
	import flash.display.Stage;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	public class toolTips {
		
		//デフォルト
		private var FC:String = "FFFFFF";	//文字色
		private var FS:uint = 12 ;			//フォントサイズ
		private var FF:String = "sans"
		private var BgC:String = "333333";		//背景色
		private var BoC:String = "000000";	//枠線色
		private var LD:int = 1;				//行間
		private var SP:int = 0;				//文字間
		private var B:Boolean = false;			//太字
		private var LM:int = 2;				//マージン
		private var RM:int = 0;			//マージン
		//オブジェクト
		private var txtST:Stage;
		private var txtFMT:TextFormat;
		private var txtMC:TextField;
		
		//コンストラクタ
		public function toolTips(ST:Stage) {
			
			//ステージを設定
			txtST=ST;
			
			//テキストフォーマットの設定
			txtFMT = new TextFormat();
			with(txtFMT) {
				font = FF;	
				size = FS;
				leading = LD;
				color = "0x" + FC;
				letterSpacing = SP;
				bold = B;
				leftMargin = LM;
				rightMargin = RM;
			}
			
			//テキストフィールドを作成
			txtMC = new TextField();
			with (txtMC) {
				defaultTextFormat = txtFMT;
				autoSize = TextFieldAutoSize.LEFT;
				selectable = false;
				multiline = true;
				wordWrap = false;
				border = true;
				background = true;
				mouseEnabled = false;
				backgroundColor = "0x" + BgC;
				borderColor = "0x" + BoC;
			}
		}
		
		public function setToolTips(TXT:String) {
			if (TXT.indexOf("\n")==-1) {
				txtFMT.leading = 0;
			} else {
				txtFMT.leading = LD;
			}
			txtMC.defaultTextFormat = txtFMT;
			txtMC.text = TXT;
			txtMC.x=txtST.mouseX;
			txtMC.y=txtST.mouseY;
			txtST.addChild(txtMC);
			
			//イベント設定
			txtMC.addEventListener(Event.ENTER_FRAME, txtEnterFrame);
		}
		
		public function delToolTips() {
			txtST.removeChild(txtMC);
			txtMC.removeEventListener(Event.ENTER_FRAME, txtEnterFrame);
		}
		
		private function txtEnterFrame(e:Event):void {
			//表示位置の調整
			var divX:Number = (txtST.mouseX<txtST.stageWidth/2) ? 20 : (-10-e.target.width);
			var divY:Number = (txtST.mouseY<txtST.stageHeight/2) ? 20 : (-10-e.target.height);
			//テキスト表示位置
			e.target.x += (e.target.mouseX+divX)/5;
			e.target.y += (e.target.mouseY+divY)/5;
		}
	}
}

色や文字の設定変更のメソッドは取り急ぎ用意しないない。必要に応じて設定変更などの処理を追記していく予定（汗

この記事をブックマークしておく