|
サンプルの作成などに使用した ParaDraw のバージョンは Ver.0.3a4， Suzuka のバージョンは Ver. 0.8.0.0 [RichEdit版] です。
かわいい↑？
いつになくちょっとオトメチックなデザインにしました。ファイルサイズもかわいくて，966 バイト (1KB未満) のSWFで〜す！
って，そんなことはどうでも良いですね。テキストフィールド内の文字をHTMLのタグで装飾する方法です。
上のサンプルでは，外部テキストを LoadVars.loadメソッド でロードして，テキストフィールドに表示させていますが，
外部テキストファイルにはHTMLタグ付きのデータを用意して，テキストのプロパティ設定で HTML にチェックを入れています。
これによって，タグ付きテキストが HTML としてレンダリング(rendering：描画表示)されます。
実際にロードしているテキストはこちら→ newsdata.txt です。
そして，テキストのプロパティ設定で HTML にチェックを入れている状態↓。
スクリプトにかかわるインスタンスの階層構造は次のようになっています。
_root
├ up_btn(▲ボタン)
├ down_btn(▼ボタン)
└ news_txt（テキストフィールド）
そして _root のアクションレイヤーの フレーム1 には次のように書いています。
// ---テキストフィールドの設定--------
// news_txt を複数行テキストフィールドに設定
_root.news_txt.multiline = true;
// news_txt の余分な空白を削除する
_root.news_txt.condenseWhite = true;
// ---ボタンの動作------------------
// up_btn(▲) を押したとき
_root.up_btn.onPress = function() {
// １フレーム進む時間毎に随時実行
_root.onEnterFrame = function() {
// news_txt 内の文字を下方向にスクロール
news_txt.scroll--;
};
};
// up_btn(▲) を放したとき
_root.up_btn.onRelease = function() {
// _root.onEnterFrame を削除
delete _root.onEnterFrame;
};
// up_btn(▲) を外で放したとき
_root.up_btn.onReleaseOutside = _root.up_btn.onRelease;
// down_btn(▼) を押したとき
_root.down_btn.onPress = function() {
// １フレーム進む時間毎に随時実行
_root.onEnterFrame = function() {
// news_txt 内の文字を上方向にスクロール
news_txt.scroll++;
};
};
// down_btn(▼) を放したとき
_root.down_btn.onRelease = function() {
// _root.onEnterFrame を削除
delete _root.onEnterFrame;
};
// down_btn(▼) を外で放したとき
_root.down_btn.onReleaseOutside = _root.down_btn.onRelease;
// ---外部テキストのロードと表示------------------
// 外部テキストを Shift-JIS として扱う
System.useCodepage = true;
// LoadVarsクラスのインスタンス myLV を作成
myLV = new LoadVars();
// 外部テキストロード時の処理
myLV.onData = function(myData) {
// news_txt の htmlText プロパティにロードしたデータを代入
_root.news_txt.htmlText = myData;
};
// キャッシュ参照防止策
// 今の時刻オブジェクトの作成
var myday = new Date();
// 1970年1月1日0時からのミリ秒数を取得
var mytime = myday.getTime();
// 外部テキストを LoadVarsインスタンス にロード
myLV.load("newsdata.txt"+"?num="+mytime);
|
ボタン操作に関するスクリプトが大半の行を占めてしまっていますが，このページのスクリプトの方の本題はそこではなく，
// 外部テキストロード時の処理
myLV.onData = function(myData) {
// news_txt の htmlText プロパティにロードしたデータを代入
_root.news_txt.htmlText = myData;
};
この部分です。
ここに外部テキストをHTMLとして表示させるときの重要なポイントがあります。
LoadVars.loadメソッド では，
LoadVars.onLoad = function(){ }; によってロード完了を取得していますが，
このサンプルでは，
LoadVars.onData = function(){ }; によってロード完了を取得しています。
この LoadVars.onData を使って function の後の () 内に引数を入れておいた場合，その引数を参照することによって，ロードされたデータが全て得られます。
したがって，外部テキストのデータを 「変数=値」 という形にしなくても，中のデータを取ってくることができるのです。
値が１つで，その値が長いときや，元から 「変数=値」 という形をしていないデータ（Flash用に作成されていないてきとうなテキストデータ）を取得するときに便利です。
あと，テキストフィールドに何かの値を表示させるときは，
TextField.text = ○○;
のように表示させるのが普通ですが，
テキストをHTMLとしてレンダリングさせるときは，
TextField.htmlText = ○○;
のようにして表示させます。
これは 「TextField の htmlText プロパティに何かの値を代入する。」 という意味になります。
勘違いしてもらうと困る重要事項ですが，
決してテキストフィールドの中に，HTML ファイルがブラウザのように表示できるわけではありません。
表示できるのは単なるテキストデータで，補助的に文字の装飾などができるだけです。
この点を勘違いしないように注意してください。
LoadVars.load でHTMLファイルをロードして，
LoadVars.onData = function(){ }; によってロード完了を取得すると，HTML内のデータは確かに取得できますが，
それは HTML内のデータ が単なるテキストデータとして取得できるだけで，HTMLの機能を果たすものではありません。
そのテキストフィールドの文字を簡単に装飾できるタグですが，
Suzuka のヘルプによりますと，使用可能なタグは以下の通りらしいです。
<p><br><a><font><b><i><u><li><tab>
<textformat> (属性：leftmargin,rightmargin,indent,blockindent,leading,tabstops)
Flash 8 のヘルプによりますと，使用可能なタグは以下の通りらしいです。
<a>：アンカータグ 属性 href，target
<b>：ボールドタグ
<br>：ブレークタグ
<font>：フォントタグ 属性 color，face
<img>：イメージタグ 属性 src，id，width，height，align，hspace，vspace
<i>：イタリックタグ
<li>：リスト項目タグ
<p>：段落タグ 属性 align，class
<span>：範囲タグ CSS テキストスタイルでのみ使用
<textformat>：テキストフォーマットタグ 属性 blockindent，indent，leading，leftmargin，rightmargin，tabstops
<u>：下線タグ
あと，スクリプトの下の方には，
// キャッシュ参照防止策
というものがありますが，これは本題とは全く関係がありません。
気になる方は 更新履歴 ティッカー の方を参考にしてみてください。
| 
