第1回　ダイナミックテキスト

FlashではSWFファイルとは別に、外部に作成したテキストデータをActionScriptで読み込み、「ダイナミックテキスト」に表示させることができる。これを使うと、テキストエディタ等でテキストデータを更新するだけで、煩雑なデータの更新を簡単に行うことが可能となる。サイトのWhat's newなど、頻繁に更新するテキストデータに用いられる手法だ。今後更新するデータを考慮しながら、計画的にサイトを構築するとよいだろう。

外部テキストを読み込んで、ダイナミックテキストで表示する。外部テキストの文字コードは「UTF-8」が標準だ。また、コンポーネントの［UIScrollBar］を利用して、スクロールするテキストボックスを作成しよう。

1．まずは、外部テキストを用意する。テキストエディタで（アプリケーションはテキストを作成できるものであれば、何でもかまわない）、「変数名=表示するテキスト」となるようにテキストを編集しよう。ここでは、変数名を「sampletext」とした【図1】。編集が終わったら、文字コードを「UTF-8」、ファイル名を「sample.txt」として、SWFファイルと同じフォルダ内に保存する【図2】。

2．Flashに戻り、ステージに「テキストツール」でテキストボックスを描画する。プロパティインスペクタで、［テキストの種類：ダイナミックテキスト］、［インスタンス名：sample_txt］と入力する。また、［フォント］を［_ゴシック］に、［行タイプ］を［複数行］に設定しよう【図3】。

3．新規レイヤー「action」を作成する。［フレーム1］を選択し［アクション］パネルに、外部テキストを読み込み「ダイナミックテキスト」に表示するActionScriptを設定する【図4】。外部テキストを読み込むには、MovieClipオブジェクトの「loadVariables」メソッドを使用する。「onData」イベントハンドラメソッドは、データの読み込みが完了したときに実行する、イベントハンドラメソッドだ。

（1）
外部テキストファイル「sample.txt」を読み込む

（2）
データの読み込みが完了したときに、テキストフィールド「sample_txt」のテキストの内容を、外部テキストで設定した変数「sampletext」の値に設定

外部テキストデータの文字コードを「Shift-JIS」で保存すると、テキストが文字化けしてしまう。もし、「Shift-JIS」で保存したデータを読み込みたい場合は、［アクション］パネルの1行目に「System.useCodepage = true;」を追加すると文字化けを防ぐことができる

4．ここまでを、［制御］→［ムービープレビュー］で確認してみよう。テキストブロックに外部で設定したテキストが表示されるはずだ【図5】。

5．次に、ステージのテキストボックスを選択し、プロパティインスペクタで［テキストの周囲にボーダーを表示］をクリックして、テキストボックスに枠線を表示させる【図6】。

6．［ウィンドウ］→［コンポーネント］で［コンポーネント］パネルを開く。パネルの［User Interface］フォルダにある［UIScrollBar］をダイナミックテキストの上にドラッグする【図7】。これで完成だ。［制御］→［ムービープレビュー］で確認してみよう。

外部テキストに設定する変数を複数にすることも可能だ。変数ごとに値を表示する「ダイナミックテキスト」を作成し、サイトの更新情報を表示するWhat's Newを作ってみよう。

1．「news1」、「news2」、「news3」の3つの変数を用意し、「変数名=表示するテキスト」の記述を「&」で連結して、テキストエディタに1行で（改行を入れずに）記述する【図8】。編集が終わったら、文字コードを「UTF-8」、ファイル名を「news.txt」として、SWFファイルと同じフォルダに保存する【図9】。

2．Flashに戻り、ステージにWhat's Newを表示するウィンドウを描画する。次に、新規レイヤー「text」を作成し、「テキストツール」でテキストボックスを3つ描画する。それぞれを選択して、プロパティインスペクタで、［テキストの種類：ダイナミックテキスト］、［フォント：_ゴシック］として、［インスタンス名］を［news1_txt］、［news2_txt］、［news3_txt］に設定する【図10】。

3．新規レイヤー「action」を作成する。［フレーム1］を選択し［アクション］パネルに、外部テキストを読み込んでそれぞれの「ダイナミックテキスト」に各変数を表示させるActionScriptを設定する【図11】。これで完成だ。［制御］→［ムービープレビュー］で確認してみよう。

this.loadVariables("news.txt");
this.onData = function() {
news1_txt.text = news1;
news2_txt.text = news2;
news3_txt.text = news3;
};

（1）
外部テキストファイル「news.txt」を読み込む

データの読み込みが完了した時に、

（2）
テキストフィールド「news1_txt」のテキストの内容を、外部テキストで設定した変数「news1」の値に設定

（3）
テキストフィールド「news2_txt」のテキストの内容を、外部テキストで設定した変数「news2」の値に設定

（4）
テキストフィールド「news3_txt」のテキストの内容を、外部テキストで設定した変数「news3」の値に設定