TextFieldの装飾関係はTextFormatを適用させれば色々できるのですが結構使えなくて、xhtml/cssであっさりできる「デフォルトでは下線があってオンマウスで下線非表示」なんてこともできません。そこで外部cssを使って実装してみます。

参考にさせて頂いたページ

• GRAFZ.NET 開発ブログ TextFirldでCSS+TextFormat合わせ技
• gelsol | ActionScript3.0 プログラミング入門
• nondelion.com – TextField に leading + autoSize を設定すると…

TextFieldにはスタイルシートを適用させることができます。といってもサポートされているのスタイルプロパティはさほど多くありません。（ここで確認できます。）

以下のcssを適用させてみます。

p
	{
	color:#000000;
	font-size:14;
	leading:10;
	}

a
	{
	color:#FF0000;
	text-decoration:underline;
	}

a:hover
	{
	text-decoration:none;
	}

.textGreen
	{
	font-weight:bold;
	color:#006600;
	}

line-heightが使えないのでleadingとプロパティを代わりに使っています。数値の単位はだいぶ違うけど。asの方はこんな感じ。

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.text.StyleSheet;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;

	public class TextTest extends Sprite
	{
		//css読込
		private var cssLoader:URLLoader;

		//コンストラクタ
		public function TextTest():void {
			init();
		}

		public function init():void
		{
			//外部css読込
			var cssRequest:URLRequest = new URLRequest("text.css");
			cssLoader = new URLLoader();
			cssLoader.load(cssRequest);
			cssLoader.addEventListener(Event.COMPLETE, onCssLoaded);
		}

		function onCssLoaded(event:Event):void
		{
			try
			{
				//Text
				var myText:String = "<p>";
				myText += "そりゃもうあんた、<br>";
				myText += "<a href='http://chimanaco.net/blog/'>リンクしちゃうし</a><br>";
				myText += "<span class='textGreen'>色も変えちゃうよ</span>";
				myText += "</p>"; 

				//TextField
				var tf:TextField = new TextField();
				tf.x = 50;
				tf.y = 50;
				tf.width = 200;
				tf.multiline = true;
				tf.autoSize = TextFieldAutoSize.LEFT;
				tf.wordWrap = true;
				tf.border = true;
				tf.borderColor = 0x000000;

				//css適用
				var ss:StyleSheet = new StyleSheet();
				ss.parseCSS (cssLoader.data);
				tf.styleSheet = ss;

				tf.htmlText = myText;

				//表示リストに追加
				addChild(tf);

			}
			catch (err:TypeError)
			{
				trace(err.message);
			}			

		}

	}
}

外部cssの読込が完了したら、TextField作成→css適用→表示リストに追加という流れです。少しはまったのが、cssの適用を実際にテキストを入れる、

tf.htmlText = myText;

より後に記述してしまうとちゃんと適用されません。ちょっと考えれば当たり前の話ですが。

やりたかった:hoverの指定も効いてるしこれでできたーと想いきや問題あり。leadingで行間を指定したところに、autoSizeでサイズ調整を行うと、テキストを選択してマウスカーソルを上下に動かすとスクロールしてしまいます。マウスホイールでもスクロールしちゃう(win)。autoSizeを入れないと表示がおかしくなるので取るわけにもいかないし…解決策はnondelion.com様の記事にありました。そのやり方の1つが、

いったん autoSize を設定して、その height を保存した後で、 autoSize を TextFieldAutoSize.NONE に、height を 保存した height + leading の値 にする。

ということでleadingをasの方で指定する必要があり、cssからはleadingの設定を削除。

p
	{
	color:#000000;
	font-size:14;
	}

asの方でtextFormatを使ってleadingの設定を行い、

//leading
const LEADING_SIZE:Number = 10;
//TextFormat
var textFormat:TextFormat = new TextFormat();
textFormat.leading = LEADING_SIZE;

以下の設定を行う。

var h:Number = tf.height;
tf.autoSize = TextFieldAutoSize.NONE;
tf.height = h + LEADING_SIZE;

というわけでスクロール問題は解決。しかしtextFieldもう少し使いやすくできんものか…。
あと、SyntaxHighlighterの中で打ち消し文字を使うにはどうすればいいんだろ？