Home > ActionScript3.0 | Progression > ToolTipをカスタマイズしてみる

ToolTipをカスタマイズしてみる


一昨日のエントリ(Q-films)で、ToolTipがカスタマイズされていて素敵! と書きましたので、僕もカスタマイズしてみました。

デフォルトでは、ToolTipは以下のように表示されます。

デフォルトの状態のToolTip

ToolTipクラスには、背景色やテキストの色やボーダーの色などを設定できるプロパティが用意されています。

早速それを使ってみたいと思います。

public class ContactButton extends CastButton {
    public function ContactButton( initObject:Object = null ) {
        super( initObject );

        // ツールチップの設定いろいろ
        toolTip.text = "ContactPageに移動します。";
        toolTip.backgroundColor = 0x000000;
        toolTip.borderColor = 0xFFFFFF;
        toolTip.textColor = 0xFFFFFF;
    }
}

上記のように設定してあげると、こんな感じになります。

カスタマイズしたToolTip・その1

これだけでも、だいぶ印象が変わりますよね。

細かいところにこだわるなら、frictionとかfilterとかdelayとかの設定も、その都度変更してあげるとよいかと…

これはToolTipクラスを直接修正(privateに設定されているので)してあげないと無理かと思うのですが、ToolTipをマウスカーソルの上に表示させたりなんかも出来ます。(推奨される方法ではないと思いますが…)

カスタマイズしたToolTip・その2

ページの下部にボタンがあって、ToolTipが下に表示されてしまうとユーザーは読みにくいかも… なんて時に有効な手段かと…

_marginXと_marginYも、プロパティとして設定出来たらいいなぁ…

Comments:2

Yasu 09-01-17 (土) 15:01

私の場合はToolTipの表示/非表示に演出を付けたかったので、直接ToolTipクラスをゴリゴリしてみました(あまり推奨されないと思いますが)。ToolTipは細かいカスタマイズできるといいですよね。例えば背景を任意のMCに差し替えられるとか。

あつのすけ 09-01-17 (土) 15:13

Yasuさま

コメントありがとうございます!

僕も上記の画像を作成する時は、ToolTipクラスを直接ゴリゴリしちゃいました!
直接書き換えちゃえば、ButtonクラスにいちいちtoolTip.backgroundColor = ●●;なんて設定しなくてもいいから便利なんですが…

まぁ、非推奨の方法だなぁ…と思ったので、やんわりとぼかしております。

背景を任意のMCに差し替えられるのっていいですよねぇ…
で、それに伴いテキストはpaddingとかで調整…

何だかCSSっぽくなりそうな予感…

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://flabaka.com/blog/wp-trackback.php?p=389
Listed below are links to weblogs that reference
ToolTipをカスタマイズしてみる from flabaka
pingback from blog.progression.jp» ブログアーカイブ » [お知らせ] 今週の Progression 関連エントリー(2009/01/17 ~ 2009/01/23) 09-01-24 (土) 2:44

[…] flabaka / ToolTipをカスタマイズしてみる […]

Home > ActionScript3.0 | Progression > ToolTipをカスタマイズしてみる

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top