第2回　テキスト入力

前回の「ダイナミックテキスト」に続き、今回は「テキスト入力」について学習していこう。「テキスト入力」はテキストを入力するためのフォームなどに使用することができるTextFieldオブジェクトだ。「ダイナミックテキスト」と同様に、ActionScriptでテキストブロックの内容を操作したり、フォントを埋め込んだりすることもできる。「テキスト入力」の基本について理解し、英単語を回答する簡単な学習ツールを作ってみよう。

（1）テキストの種類
［テキスト入力］に設定する

（2）インスタンス名
テキストブロックにインスタンス名を設定する

（3）行タイプ
［単一行］、［複数行］、［折り返しなし］、［パスワード］（入力した文字が*で表示）から選択する

（4）最大文字数
テキストを入力できる最大文字数を設定することができる

（5）テキストオプションの編集
文字を選択して、フォントを埋め込むことができる

「テキスト入力」を使って、英単語をテストする学習ツールを作ってみよう。

1．まず、出題画面に表示されるテキストボックスを設定する。3つのレイヤーを作成し、［フレーム2］にキーフレームを挿入する。「title」レイヤーにタイトル（ここでは「英単語テスト」）、「btn」レイヤーにボタン「ok_btn」を配置する。「question」レイヤーには問題欄、解答欄の各要素の描画と問題番号を表示するダイナミックテキスト「n_txt」、問題を表示するダイナミックテキスト「q_txt」を配置する。また、回答を入力するテキストボックスを描画し、プロパティインスペクタで、［テキストの種類：テキスト入力］、［インスタンス名：input_txt］に設定する【図2】。

2．続けて、プロパティインスペクタの［埋め込み...］ボタンをクリックして、［文字の埋め込み］ダイアログボックスを表示する。「小文字［a.. z］（27文字）」を選択してフォントを埋め込む【図3】。なお、「n_txt」には数字を埋め込み、「q_txt」はフォントを「_ゴシック」にして、デバイスフォントを使用するように設定しておこう。

3．正解の○と不正解の×の表示をアニメーションにしたムービークリップシンボル「marubatsu」を作成する【図4】。「シーン1」に戻り、「answer」レイヤーを作成して、［フレーム10］にキーフレームを挿入する。正解を表示するダイナミックテキスト「a_txt」を設定し、作成したムービークリップシンボルを配置して、［インスタンス名：marubatsu_mc］としておく【図5】。

4．得点画面に表示する要素を設定する。「score」レイヤーを作成して、［フレーム40］にキーフレームを挿入し、得点を表示するダイナミックテキスト「s_txt」と、ボタン「try_btn」を設定する。「label」レイヤーを作成して、［フレーム2,10,40］にフレームラベル「lb_question」、「lb_answer」、「lb_result」を設定する【図6】。

5．「action」レイヤーを作成する。［フレーム1］を選択し、［アクション］パネルに初期設定を記述する【図7】。問題と正解は配列に格納する（入れる）。配列とは、複数のデータをリストのようにカンマ区切りで並べて1つの固まりとしたものだ。

// 問題
question = [ "りんご","ねこ","野球","さる","電話","本","うさぎ","鳥","誕生日","かさ" ];
// 正解
answer = [ "apple","cat","baseball","monkey","telephone","book","rabbit","bird","birthday","umbrella" ];

// 問題数
n = 0;
// 得点
score = 0;

（1）
問題を配列「question」に、正解を配列「answer」に格納する。問題と正解は同じ順番に並べる。データを取り出すときは、「配列名[（0から始まる）番号]」とすればよい。例えば1問目の問題は「question[0]」（="りんご"）、正解は「answer[0]」（="apple"）となる。

6．［フレーム2］にキーフレームを挿入し、［アクション］パネルに問題の表示とテキスト入力の設定を行う【図8】。テキストボックスにフォーカスを指定するにはSelectionオブジェクトの「setFocus」メソッドを使用する。

stop();

// ダイナミックテキストの設定
n_txt.text = n + 1;
q_txt.text = question[ n ];

// テキスト入力の設定
input_txt.text = "";
Selection.setFocus( input_txt );

// OKボタンをクリックしたときの設定
ok_btn.onRelease = function(){
_root.gotoAndPlay( "lb_answer" );
};

（1）
テキストフィールド「n_txt」の内容を「n + 1」（問目）に設定

（2）
テキストフィールド「q_txt」の内容を「question[ n ]」（n番目の問題）に設定

（3）
テキストフィールド「input_txt」の内容を空に設定

（4）
テキストフィールド「input_txt」にフォーカスをあてる（カーソルが表示される）

（5）
ボタン「ok_btn」をクリックしたとき、フレームラベル「lb_answer」にジャンプして再生する

7．［フレーム10］にキーフレームを挿入し、［アクション］パネルに正誤の判定（○×）と正解表示を設定する【図9】。また、［フレーム39］には正解の表示が終了したときに、出題番号によって次の問題を表示するか、もしくは得点表示に進む処理を、［フレーム40］には得点を表示する処理を設定しているのでサンプルデータを参考にしてほしい。［制御］→［ムービープレビュー］で確認しよう。

// 回答
ans = input_txt.text;

// 正解・不正解の判定と得点の追加
if( ans == answer[ n ] ){
score++;
marubatsu_mc.gotoAndPlay( "lb_maru" );
}
else{
marubatsu_mc.gotoAndPlay( "lb_batsu" );
}

// 正解を表示
a_txt.text = answer[ n ];

（1）
テキストフィールド「input_txt」に入力されている内容を変数「ans」に入れる

（2）
「ans」と正解である「answer[ n ]」の内容が一致すれば、変数「score」に1を加算し、ムービークリップ「marubatsu_mc」のフレームラベル「lb_maru」にジャンプして再生。一致しなければ「marubatsu_mc」の「lb_batsu」にジャンプして再生する

（3）
テキストフィールド「a_txt」の内容を「answer[ n ]」（n番目の正解）に設定

以上で、【サンプル1】の英単語を回答する学習ツールの完成だ。「テキスト入力」の基本要素を盛り込んだ内容なので、ぜひチャレンジしてほしい！