【小技】 AS2 のツールチップ処理

昔に作ったhikatsuka.swf ライブラリパッケージで実装していた機能なんだけども、今回、ちょっと同じようにツールチップ処理をする必要があったため、スクリプト処理のみ流用して実装した。

ちょっとこのツールチップの処理を勉強がてら AS2 でクラス化してみようかなーとか思ってたんだけども、AS2 の場合、毎フレームごとに import する必要があるんで、_global の方がどの階層でも同じ記述だし便利かなーと思って、普通に function で処理を行っている。

サンプル

アクションスクリプト

このサンプルのスクリプトは下記の通り。

/*============================================================
サンプル処理
============================================================*/
//▼初期設定（デフォルトから変更する場合のみ記述）
hikatsukaInfoTextSet("FFFFFF", "333333", "000000", 10, 1);
//▼ロールオーバー
btn0.onRollOver = btn0.onDragOver = function() {
	hikatsukaInfoTextSet("FFFFFF", "333333", "000000", 10, 1);
	hikatsukaInfoTextShow("文字装飾を初期設定に戻す");
}
btn1.onRollOver = btn1.onDragOver = function() {
	hikatsukaInfoTextShow("テキストテキストテキストテキスト\nテキストテキスト");
}
btn2.onRollOver = btn2.onDragOver = function() {
	hikatsukaInfoTextShow("テキストテキストテキストテキスト\nテキストテキスト");
}
btn3.onRollOver = btn3.onDragOver = function() {
	hikatsukaInfoTextSet("333333", "FFFFCE", "333333", 14, 5);
	hikatsukaInfoTextShow("文字装飾の設定を変更する");
}
ireko.btn.onRollOver = ireko.btn.onDragOver = function() {
	hikatsukaInfoTextShow("「ireko.btn」オブジェクト。\n_globalにしているので入れ子でも\n同じ記述でOK！");
}
//▼ロールアウト
btn0.onRollOut = btn0.onDragOut = 
btn1.onRollOut = btn1.onDragOut = 
btn2.onRollOut = btn2.onDragOut = 
btn3.onRollOut = btn3.onDragOut = 
ireko.btn.onRollOut = ireko.btn.onDragOut = 
function() {
	hikatsukaInfoTextDelete();
}
/*============================================================
ボタンのロールオーバーテキスト ※改行は「\n」
hikatsukaInfoTextShow(Txt);
hikatsukaInfoTextSet(F, Bg, Bo, Fs, Sp);
hikatsukaInfoTextDelete();
============================================================*/
//▼色初期値
_global.hikatsukaInfoFontColor = "FFFFFF";//文字色
_global.hikatsukaInfoBgColor = "333333";//背景色
_global.hikatsukaInfoBorderColor = "000000";//枠線色
_global.hikatsukaInfoFontSize = 10 ;//フォントサイズ
_global.hikatsukaInfoSpacing = 1;//行間
//▼ボタンのロールオーバーテキスト
_global.hikatsukaInfoTextShow = function(infotext) {
	//文言チェック
	if (infotext==null || infotext=="") {
		return false;
	}
	// スタイルの作成
	var hikatsukaStyles = new TextField.StyleSheet();
	hikatsukaStyles.setStyle(".c1", {fontFamily:'_ゴシック', fontSize:hikatsukaInfoFontSize+'px', color:'#'+hikatsukaInfoFontColor, marginLeft:'8px', marginRight:'5px', letterSpacing:'0px'});
	//新規テキストフィールドを生成
	hikatsukaInfoText.removeTextField();
	_global.hikatsukaInfoText = createTextField("hikatsukaInfoText", getNextHighestDepth(), _xmouse, _ymouse, 10, 10);
	with (hikatsukaInfoText) {
		multiline = true;
		//複数行テキストフィールド
		wordWrap = false;
		//折り返さない
		autoSize = "left";
		//自動的な拡大/縮小および整列
		border = true;
		borderColor = "0x"+hikatsukaInfoBorderColor;
		background = true;
		backgroundColor = "0x"+hikatsukaInfoBgColor;
		selectable = false;
		embedFonts = false;
		html = true;
		styleSheet = hikatsukaStyles;
		//HTMLテキストを挿入
		if (infotext.indexOf("\n")==-1) {
			htmlText = "<span class='c1'>"+infotext+"</span>";
		} else {
			htmlText = "<textformat leading='"+hikatsukaInfoSpacing+"'/><span class='c1'>"+infotext+"</span>";
		}
	}
	//表示位置の調整
	divX = (_level0._xmouse<Stage.width/2) ? 20 : (-10-hikatsukaInfoText._width);
	divY = (_level0._ymouse<Stage.height/2) ? 20 : (-10-hikatsukaInfoText._height);
	//テキスト表示初期位置
	hikatsukaInfoText._x = _level0._xmouse+divX;
	hikatsukaInfoText._y = _level0._ymouse+divY;
	//テキスト表示処理
	hikatsukaInfoTextMC.removeMovieClip();
	_global.hikatsukaInfoTextMC = createEmptyMovieClip("hikatsukaInfoTextMC", getNextHighestDepth());
	hikatsukaInfoTextMC.onEnterFrame = function() {
		//表示位置の調整
		divX = (_level0._xmouse<Stage.width/2) ? 20 : (-10-hikatsukaInfoText._width);
		divY = (_level0._ymouse<Stage.height/2) ? 20 : (-10-hikatsukaInfoText._height);
		//テキスト表示位置
		hikatsukaInfoText._x += (hikatsukaInfoText._xmouse+divX)/5;
		hikatsukaInfoText._y += (hikatsukaInfoText._ymouse+divY)/5;
	}
}
//▼テキスト削除
_global.hikatsukaInfoTextDelete = function() {
	//関連オブジェクトを削除
	delete hikatsukaInfoTextMC.onEnterFrame;
	hikatsukaInfoTextMC.removeMovieClip();
	hikatsukaInfoText.removeTextField();
}
//▼カラー設定
_global.hikatsukaInfoTextSet = function(F, Bg, Bo, Fs, Sp) {
	if (F != null) { hikatsukaInfoFontColor = F; }//文字色
	if (Bg != null) { hikatsukaInfoBgColor = Bg; }//背景色
	if (Bo != null) { hikatsukaInfoBorderColor = Bo; }//枠線色
	if (Fs != null) { hikatsukaInfoFontSize = Fs; }//フォントサイズ
	if (Sp != null) { hikatsukaInfoSpacing = Sp; }//行間
}

使い方

ツールチップ表示

hikatsukaInfoTextShow(infotext);
マウスの動きに合わせてテキストのポップアップを表示します。

ツールチップを削除

hikatsukaInfoTextDelete();
テキストのポップアップを表示を削除します。

ツールチップの色やフォントの設定

hikatsukaInfoTextSet(F, Bg, Bo, Fs, Sp);
「hikatsukaInfoTextShow」で表示されるテキストのポップアップの色設定を変更します。

サンプルダウンロード

あ、ちなみに、AS3 のツールチップ処理は既にクラス化済み。

AS3 のツールチップクラスを再調整

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