ActionScript 3.0はじめの一歩

第4回テキストフィールドのコントロール

技術評論社より好評発売中の「速習Webデザイン ActionScript 3.0」をテキストに、ActionScript 3.0の基本がわかる充実の2日間「林 拓也のプログラミング未経験者向けActionScript 3.0入門講座」を開催いたします。詳細はこちらでご確認ください。

本連載では前回まで、ムービークリップインスタンスを使って「オブジェクトのコントロール」「イベント処理」について中心に扱ってきました。

今回はムービークリップインスタンス以外の使用頻度の高いオブジェクトとしてテキストフィールド(ダイナミックテキストとテキスト入力)を扱っていきます。

テキストフィールドの内容の設定・取得

ActionScriptではダイナミックテキストとテキスト入力は同じ種類のオブジェクトとして扱われます。本連載ではダイナミックテキストとテキスト入力をまとめて「テキストフィールド」と呼びます。

テキストフィールドのコントロールを考える場合、⁠テキストフィールドの内容を変更すること」「テキストフィールドの内容を取得してプログラム内で使用すること」が真っ先に挙げられます。以後、前者を「内容の設定⁠⁠、後者を「内容の取得」と呼びます。

テキストフィールドには表示内容を表すtextプロパティが用意されています。つまり、テキストフィールドの内容を設定するにはテキストフィールドのtextプロパティに表示したい内容を設定し、内容を取得するにはtextプロパティを表示内容が格納された変数のように扱います。

textプロパティの重要なポイントとしては、表示内容が文字列として扱われるという点です。

したがって、テキストフィールドの内容を設定する場合、次のようになります。

テキストフィールド.text = 文字列;

何かの計算結果など数値を表示したい場合には、String()関数などを使って数値を文字列に変換した上で設定します。

テキストフィールド.text = String(数値);

例えば、10という数値を"my_txt"というインスタンス名のテキストフィールドに表示するには次のようなスクリプトになります。

スクリプト1
01: my_txt.text = String(10);

表示内容を取得する場合も文字列として扱われます。例えばテキストフィールドに「10」という値が表示されている場合、数値の10ではなく文字列の"10"として取得されます。

数値として扱いたい場合にはNumber関数などを使って文字列に変換する必要があります。例えば変数に取り出す場合には次のようになります。

var 変数:Number = Number(テキストフィールド.text);

テキスト入力にユーザーが入力した2つの数値の足し算の答えを、ボタンクリックでダイナミックテキストに表示してみます。各インスタンス名は次の図の通りです。

図1 各パーツのインスタンス名
図1 各パーツのインスタンス名

スクリプトは次のようになります。

サンプル1
01: add_btn.addEventListener(MouseEvent.CLICK, xClick);
02: function xClick(evt) {
03:   out_txt.text = String(Number(in1_txt.text) + Number(in2_txt.text))
04: }

3行目の代入式の右辺では、String()関数内で入力された内容を数値に変換して加算しています。その答えがString()関数によって文字列に変換されています。

図2 足し算のサンプル1
図2 足し算のサンプル

サンプル1は動作的には問題ありませんが、1行が長すぎてスクリプトコードが分かりにくくなっています。変数を使って数行に分けて書き直してみます。

サンプル2
01: add_btn.addEventListener(MouseEvent.CLICK, xClick);
02: function xClick(evt) {
03:   //入力された値の取得
04:   var num1:Number = Number(in1_txt.text); 
05:   ar num2:Number = Number(in2_txt.text);v
06:   //足し算の答えの算出
07:   var numTotal:Number = num1 + num2;
08:   out_txt.text = String(numTotal)
09: }

これで動作的には変わらず、スクリプトコードの内容が把握しやすくなりました。

少々変数について補足をしておきましょう。

変数は前回扱いましたが、ここで使った変数は前回扱った変数とは異なります。

前回扱ったのはグローバル変数、ここで使ったものはローカル変数といいます。

書式上の違いは、ローカル変数はfunctionステートメントブロック内で宣言し、グローバル変数はfunctionステートメントブロック外で宣言します。

動作的にはローカル変数はfunctionステートメントの処理が終了したら破棄されてしまうごく一時的なものであるのに対し、グローバル変数はずっと残り必要なときにいつでも値を参照できるという点が異なります。なお、グローバル変数はActionScript 2.0ではタイムライン変数と呼ばれていました。そのため、ActionScript 3.0を使う場合でも習慣的にタイムライン変数という呼び名が使われることがあります。

関数の基本

最後のトピックとして関数について触れておこうと思います。

関数は意味の広い言葉なのでキッチリとした定義をするのが難しい部分があります。この連載では「処理に名前をつけて登録したもの」とします。

関数を定義するにはfunctionステートメントを使います。

ご存知の通りfunctionステートメントは既にイベント処理で使っています。つまり、イベント処理の処理部分は関数です。

関数の定義のもっとも基本的な(=イベント処理用ではない)書式は次の通りです。

スクリプト2
function 関数名(){
  処理
}

イベント処理用の関数はイベントの発生に伴ってFlash Playerが自動的に実行していましたが、それ以外の自分で定義した関数は自分で実行しないと意味がありません。

実行する際には次の書式を使います。

関数名();

なお、関数の定義と実行はどちらが先に記述してあっても動作上問題はありません。

ここでは関数の定義を後にまとめて記述します。

では前のサンプルの繋がりで、足し算を行うための関数を考えてみます。

サンプル3
01: //関数の実行
02: xAdd();
03: //関数の定義
04: function xAdd() {
05:   trace(5 + 10);
06: }

ここで使ったtrace()は「()」内の式の値を出力パネルに表示するメソッドです。制作時に変数の内容のチェックなど動作確認のために使われます。

図3 答えが出力パネルに表示
図3 答えが出力パネルに表示

このサンプルの関数には、次のような大きな問題が2つあります。

  • 1.足し算に使う2つの数値が関数内で指定されていて任意の数値が指定できない
  • 2.足し算の計算結果を出力パネルに表示するという用途に限定している

1を解消するために「引数(ひきすう⁠⁠」を使い、2を解消するために「戻り値」を設定してみます。

引数は関数を実行する際に必要になる情報のことです。gotoAndStop()メソッドでは、実行する際に移動先のフレームを「()」内に指定しますが、この移動先フレームのがgotoAndStop()メソッドの引数になります。

引数は関数名の後の「()」内に指定します。引数は変数として扱われるので型指定も行います。引数が複数ある場合は「,」で区切って列記します。

スクリプト3
function 関数名(引数1:データ型, 引数2:データ型, …){
  処理
}

実行時には「()」内に実際の値を引数として指定します。

関数名(引数1, 引数2,);

戻り値を返す関数は、関数の実行の際に戻り値に置き換わります。やや分かりにくい部分ですが、式と同じようなものと考えると分かりやすいでしょう。⁠5 + 10」という式は実行された結果「15」という値に置き換わります。同様に、xAdd()が「引数で渡された2つの数値の足し算の結果を返す関数」だとしたら、⁠xAdd(5, 10)」は実行された結果「15」という値に置き換わります。算出された値をどのように扱うかは実行時に決められるので自由度が高まります。

戻り値の設定にはreturnステートメントを使います。また、関数の「()」の後に戻り値のデータ型も指定します。

スクリプト4
function 関数名():戻り値のデータ型 {
  return 戻り値;
}

なお、戻り値を返さない関数の場合、戻り値のデータ型には「void」を指定します。

実際にサンプル3の関数xAdd()を「引数で渡された2つの数値の足し算の結果を返す関数」に変更してみます。

サンプル4
01: //関数の実行
02: //出力パネルに表示
03: trace(xAdd(5, 10));
04: //テキストフィールドに表示
05: ans_txt.text = String(xAdd(111, 222));
06: //関数の定義
07: function xAdd(num1:Number, num2:Number):Number {
08:   return num1 + num2;
09: }

ここでは、足し算の答えを出力パネルに表示したり、テキストフィールドに表示したりと、実行時に用途を変えています。

図4 戻り値を色々な用途で使う
図4 戻り値を色々な用途で使う

補足として、イベント処理用の関数に触れておきます。

イベント処理用の関数は引数を1つ設定する必要がありました。これはFlash Playerが関数を実行する際に、発生したイベントに関する様々な情報を含んだ「イベントオブジェクト」を引数として渡してくれるのを受け取る必要があるためです。

この引数にもデータ型を設定してしかるべきなのですが、データ型はaddEventListener()の引数で指定するイベント定数の○○Eventの部分になります。

また、イベント処理の戻り値は常に「void」になります。

第1回で扱ったスクリプトを例にすると、次のような形になります。

スクリプト5
01: rotate_btn.addEventListener(MouseEvent.CLICK, xClick);
02: function xClick(evt:MouseEvent):void {
03:   star_mc.rotation = 5;
04: }

全4回という短い連載でしたが、ActionScript 3.0のごく基本的な部分を扱ってきました。

スペースの関係で言葉足らずの部分もありますが、初めてActionScript 3.0に触れる方が最初に力を入れる部分ということで大まかにご理解いただければ幸いです。

本連載記事がActionScript 3.0初心者の皆さまの最初の道しるべになることを願っています。

おすすめ記事

記事・ニュース一覧