第1回 ダイナミックテキスト | デザインってオモシロイ -MdN Design Interactive-
イチから始めたい人、リトライしたい人のためのFlashのABC

Lesson7 外部読み込み

第1回 外部テキストの読み込み


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

解説:北川貴清
※「FlashのABC」の本文中の解説で使用しているサンプルデータは、別ページでダウンロードができます。


外部テキストを読み込んでスクロールさせる


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


【サンプル1】外部で設定したテキストが表示され、スクロールバーでテキストをスクロールすることができる

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

【図1】「変数名=表示するテキスト」となるよう、テキストを編集する(Notepadでの編集例)
【図1】「変数名=表示するテキスト」となるよう、テキストを編集する(Notepadでの編集例)

【図2】文字コードを「UTF-8」にして保存
【図2】文字コードを「UTF-8」にして保存

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

【図3】「ダイナミックテキスト」の設定
【図3】「ダイナミックテキスト」の設定

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

【図4】読み込んだ外部テキストデータを表示するActionScriptを記述
【図4】読み込んだ外部テキストデータを表示するActionScriptを記述

this.loadVariables("sample.txt");
this.onData = function() {
sample_txt.text = sampletext;
};

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

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

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

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


【図5】テキストボックスに読み込んだ文字が表示される

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

【図6】テキストボックスに枠線を表示させる
【図6】テキストボックスに枠線を表示させる

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

【図7】ドラッグすると、スクロールバーが自動的にダイナミックテキストの右側に配置される
【図7】ドラッグすると、スクロールバーが自動的にダイナミックテキストの右側に配置される

外部テキストに複数の変数を設定する


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


【サンプル2】サイトの最新更新情報、3件をテキストボックスに表示する

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

【図8】テキストを編集する(Notepadでの編集例)。改行を入れずにテキストを入力
【図8】テキストを編集する(Notepadでの編集例)。改行を入れずにテキストを入力

【図9】文字コードを「UTF-8」として保存
【図9】文字コードを「UTF-8」として保存

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

【図10】「ダイナミックテキスト」の設定
【図10】「ダイナミックテキスト」の設定

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

【図11】外部テキストを読み込み、データを表示するActionScriptを記述
【図11】外部テキストを読み込み、データを表示するActionScriptを記述

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」の値に設定



サンプルをダウンロードする


次回につづく


著者写真 [プロフィール]
きたがわ・たかきよ●1972年8月生まれ。三重県出身。三重大学工学部卒業。大阪を拠点としてwebデザインを中心に活動中。著書に『Flash8デザインスクール for Win & Mac 』『ネタ帳ビギナーズ FLASHテンプレート集 』
http://www.f-l-a-v-o-r.com
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

3.11-3.17