ActionScriptでテキストのアンダーラインの太さを自由自在に。
ActionScriptで開発をする際には、リファレンス本を片手に、それでも不足であれば、検索して探し出すのが普通だと思いますが、
ちょっと面倒な処理について検索すると、Adobeのサポートサイトしか見当たらないのも事実ですね。
そして大変申し訳ないのですが、Adobeに限らず、メーカーのサポートページというのは、なぜか理解不能なコンテンツが満載で、殆ど使えないのも事実ではないでしょうか?
「その説明」を理解する為に、ある程度のスキルが必要になっているので、サポートサイトとしての目的は殆ど果たせていないような気がします。
そんな中、現在製作中のActionSriptのシステムでクライアント様からテキストのアンダーラインを太くしてほしいとの要望を受けました。
ActionScriptでのアンダーラインの設定というのはあるのですが、太さは一定で変化させる事ができません。
flash.text.engineを使えば、underlinethicknessで太さを制御する事も可能ですが、面倒な処理を入れないと文字化け必至ですので却下。
あれこれと考えてるうちに、クライアントさまからの要望は、アンダーラインとして見えれば、要素としてはなんでも良いのだという事に気がつきました。
今回のシステムの場合、表示させるテキストは外部ファイルから動的に取得したテキストになりますので、その時々で全体の長さは変化します。
ですので、一定の長さのラインを常設するという手法は使えない。
そこで浮かんだ結論。
表示させるテキストと同じフォント同じサイズで背景色を文字色と同じものにし、その上に本来表示させるべきテキストを少し上にずらして表示させるという考え方です。
以下がその部分のソース
まず、テキストフィールドを一つ宣言
var txt_b_Name1:TextField = new TextField();
txt_b_Name1.text = no_name;
txt_b_Name1.setTextFormat(bnmFmt);
txt_b_Name1.x = 1.00
txt_b_Name1.y = 43.65 // ここで縦方向の座標位置を決める。
txt_b_Name1.width = 574.95
txt_b_Name1.height = 77.85
表示するテキストに合わせて、テキストフィールド大きさをリサイズ。
txt_b_Name1.autoSize =TextFieldAutoSize.CENTER;
txt_b_Name1.background = true;
背景色をテキストと同じ色に設定。
txt_b_Name1.backgroundColor = 0xFFFFFF;
その部分を表示させる
addChild(txt_b_Name1);
もう一つのテキストフィールドを定義
var txt_b_Name:TextField = new TextField();//
txt_b_Name.text = no_name;
txt_b_Name.setTextFormat(bnmFmt); ←同じテキストを表示
txt_b_Name.x = 1.00
y座標の設定でアンダーラインの太さを制御。
txt_b_Name.y = 41.65 ←2ほど上にずらす。
txt_b_Name.width = 574.95
txt_b_Name.height = 77.85
txt_b_Name.background = true;
ここでは、テキストの背景色を本来の色に設定
txt_b_Name.backgroundColor = 0x550000;
定義したテキストフィールドを表示させる
addChild(txt_b_Name);
上記の手法でアンダーラインの太さの制御を簡単にする事ができました。
この方法の利点は、まず、カンタンな事。
そして、本来のアンダーラインとは違うものなので、アンダーラインであるが故の制限を受けないのも利点ではないかな?
※本来のアンダーラインの場合、テキストと同じ色でしか出せませんが、この手法の場合は、色も好きに変更できます。




