ActionScript 3.0はじめの一歩

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

この記事を読むのに必要な時間:およそ 3 分

技術評論社より好評発売中の「速習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を使う場合でも習慣的にタイムライン変数という呼び名が使われることがあります。

著者プロフィール

林拓也(ハヤシタクヤ)

Flash・Director オーサリングエンジニア,アドビ認定インストラクター,ロクナナワークショップ講師。

各種Webコンテンツ制作や,少人数ハンズオントレーニングから大規模なセミナー講師など幅広く活躍中。各種学校のカリキュラム・教材制作をはじめ,ActionScriptに関する書籍も多数執筆。

URLhttp://67.org/ws/instructor/hayashi.html

著書

ActionScript 3.0の基本がわかる,充実の2日間
林 拓也のプログラミング未経験者向けActionScript 3.0入門講座

■概要

新刊「 速習Webデザイン ActionScript 3.0」をプレゼント!!

Flashの学校 ロクナナワークショップによる,プログラミング未経験の方や初心者の方を対象にしたActionScript 3.0の入門講座が,林 拓也氏を講師に迎え開催されます。

しばしば「難しい」と言われるActionScript 3.0ですが,重要ポイントを理解して正しく攻略すれば,グッと難易度を下げることができます。本講座では,シンプルなサンプルを使って基本事項から学習するため,プログラミング未経験者の方や初心者の方には最適の内容です。
プログラミングなんて絶対無理!っと思っている方,ぜひご参加ください。

■詳細情報
【日程】2008年10月21日(火)22日(水)
【時間】10:00開場 - 16:30閉場(1日4時間、2日間で8時間の講義です)
【場所】東京都渋谷区 「T's 東宝ビル 別館 ホール204」
【定員】30名
【料金】19,800円(2日間、消費税込み、書籍プレゼント)
【協力】アドビシステムズ 株式会社
【主催】株式会社ロクナナ・ロクナナワークショップ
     〒150-0001東京都渋谷区神宮前1-1-12 #203
     Summer Camp 2008 運営事務局
     担当:佐々木・上田
     E-mail:workshop@67.org

コメント

コメントの記入