*TextFieldのHTMLで遊ぶ

対象	FLASH MX 2004

FLASHのTextFiledは面白いです。MX 2004なら、HTMLにCSSもIMGタグも使えるし、いろいろ遊んでみました。

(1) 普通にHTML表示

TextFieldを作って、htmlをtrueにして、htmlTextにテキストを設定します。

FLASH

a_txt.html = true;
a_txt.htmlText = "testaaaaa bbbbb";

(2) リンクする

リンクを作ってみました。<A href="">と書きたいところですが、ダブルコーテーション(")は、文字列の括りで使うので、シングルコーテーション(')で括ると便利です。

FLASH

a_txt.html = true;
a_txt.htmlText = "<A href='http://www.text2music.com'>text2musicへ</A>";

でも、普通のHTMLと違って、自動的に色が変わったり下線がついたりすることはありません。
そこで、リンクを明示したい場合は、自分で色を変え、下線をつける必要があります。色指定には、blueとかredとかHTMLで使える定数は使えません。

FLASH

a_txt.html = true;
a_txt.htmlText = "<A href='http://www.text2music.com'>" +
　　"text2musicへ</A>";

ちなみに、Windows XPのローカルな環境でZIP形式のファイルをリンクするとエクスプローラーでZIPファイルの内容が表示され、バッチファイルや実行可能(EXE)ファイルをリンクするとIEと同じようにダウンロードするか実行するか尋ねるダイアログが出ました。（正当な動きですね）

(3) リンクに ActionScriptの関数を埋め込む→こちら

(4) ムービークリックを埋め込む

IMGタグでムービークリップを表示させることができるのは嬉しい限りです。
（但しこの場合は、リンケージでActionScriptに書き出しをチェックしておく必要があります。）

FLASH

a_txt.html = true;
a_txt.htmlText = "<IMG src='b_mc'>";

(5) 動的にHTMLをロードしてみる

ボタン(a_btn)をクリックしたとき、HTMLファイル(test.html)を動的にロードして、テキストフィールドに表示する例です。
（LoadVarsにonDataを定義すると、onLoadが呼ばれない代わりに、生のデータを取得することができます。）

FLASH

a_btn.onRelease = function () {
　html_lv = new LoadVars();
　html_lv.onData = function (src) {
　　a_txt.html = true;
　　a_txt.htmlText = src;
　}
　html_lv.load("test.html");
}

(5') Windows で作った HTMLファイルを読む
ここで問題になるのは、HTMLファイルに、FLASH未対応タグがあっても、無視してテキストを表示してしまうことです。
<HTML><HEAD><TITLE>title</TITLE>...というHTMLを読み込むと・・・titleを表示してしまいます。
ですからHTMLエディタで作ったデータをテキストフィールドに直接表示するときは、注意しましょう。
あとは、こちらでも言及してますが、普通にWindowsのメモ帳で作ったデータを読み込むと、改行が２つになってしまいます。
必ずWindowsで作ったデータを読み込むと決まっている場合には、以下のようにすると良いでしょう。

FLASH

System.useCodepage = true;//SHIFT-JISを使う
a_btn.onRelease = function () {
　　html_lv = new LoadVars();
　　html_lv.onData = function (src_str) {
　　　　//改行コードを直す
　　　　temp_array = src_str.split( String.fromCharCode(13,10) );
　　　　src_str = temp_array.join( String.fromCharCode(13) );
　　　　//HTMLをセットする
　　　　a_txt.html = true;
　　　　a_txt.htmlText = src_str;
　　}
　　html_lv.load("test.html");
}

(6) CSSを適用してみる

(A) TextField.StyleSheet() で使う
CSSを適用する方法は２つあります。１つは、ActionScriptから指定する方法。
（この場合もスタイルシートに指定するクラス名に、".name"のように名前の初めにドットが必要なので注意です。）

FLASH

// スタイルの作成
var styles = new TextField.StyleSheet();
styles.setStyle(".c1", {fontFamily:'_ゴシック', fontSize:'32px'});
styles.setStyle(".c2", {fontFamily:'_明朝', fontSize:'18px'});
// TextFieldに設定
a_txt.styleSheet = styles;
a_txt.html = true;
a_txt.htmlText = "ああああ";

(B) 外部CSSを読む
外部CSS("test.css")から読む方法です。
当然のことながら、font-familyに日本語フォント名を指定するときには、漢字コードをUTF-8で保存する必要があります。

FLASH

// スタイルの読込み
var styles = new TextField.StyleSheet();
styles.load("test.css");
styles.onLoad = function (ok) {
　if( ok ){
　　// TextFieldに設定
　　a_txt.styleSheet = styles;
　}else{
　　// 失敗
　　trace("error");
　}
　a_txt.html = true;
　a_txt.htmlText = "ああああ";
}

CSS (test.css) #漢字コードをUTF-8で保存

.c1{
font-family: ARマッチ体B;
font-size: 46px;
}
.c2{
font-family: ＭＳゴシック;
font-size: 12px;
}

戻る