「FLash CS4」体験版ダウンロードはこちらから
「Adobe CS4」購入はこちらから

テキストフィールドは、Flashでメッセージを表示するときに欠かせない機能だ。今回は、テキストフィールドの基本的な使用方法を紹介したい。今回のサンプルソース(FlashCS4用)はこちら(ダウンロード)。

3つのテキストタイプ

テキストフィールドは、ツールパネルの「T」のアイコンをクリックしてから、ステージ上をドラッグすると作成できるが、作成する際に3つのタイプのどれかを指定する。

ツールパネルの「T」がテキストツールだ。テキストフィールドを作成するときはクリックしてからステージをドラッグしよう。

テキストフィールドの「静止テキスト」、「ダイナミックテキスト」、「テキスト入力」の3つのタイプは、プロパティパネルで変更する。

テキストフィールドの3タイプには、次のような特徴がある。

テキストフィールドのタイプ 特徴
静止テキスト ASを使用すればテキストから文字情報を取得することはできるが、表示専用
ダイナミックテキスト ASを使用して、テキストの入出力を行う。ただし、ユーザーのキーボードによる入力は不可
テキスト入力 ダイナミックテキストの特徴に加え、ユーザーの入力を可能とする

ここに挙げた意外にも、フォントの指定方法などに違いがあるが、とりあえずは、テキスト入力を作成しよう。

Tツールを選択したあとで、プロパティパネルで、テキストタイプを入力テキストにしてから、ステージ上をドラッグしよう。作成した入力テキストには、最低でも「フォント」、「インスタンス名」という2つの項目があるので、順に設定していこう。

ステージをドラッグすると、点線で囲まれた四角ができる。

ドラッグ操作を終了すると、テキストフィールドの作成が完了する。ただし、静止テキストの場合、ステージをクリックすると空白のテキストフィールドは消えてしまうので注意。

フォント

Flashの中には、特別にデバイスフォントと呼ばれるフォントの種類がある。

デバイスフォントとは、Flashが動作するデバイス(プラットフォーム)ごとに持っているフォントから自動的に割り当てられたフォントのことだ。テキストフィールドには、フォント指定ができるが、当然、フォント情報を保持する必要がある。仮に日本語が入力可能なテキストフィールドを作成し、フォントを割り当てるとすると、どんな文字も表示できるように、1MB以上のフォントをFlashのSWFファイルに入れなければならない。

SWFで1MBは、データが大きすぎるため、フォント情報は持たずに何か使用できるフォントを適当に割り当てたいという時に使用するのがデバイスフォントだ。適当なフォントと言っても、ゴシック系、明朝系、等幅系というタイプを区別する程度なら指定できるようになっている。Flashのフォントで「＿」で始まるフォントがそれにあたる。 デバイスフォントには、つぎのような種類がある。

デバイスフォント名 実際に使用されるフォント
\_sans Arial、Helvetica
\_serif Times Roman
\_typewriter Courier
\_ゴシック MS UI Gochic、Osaka
\_明朝 MS P 明朝、細明朝
\_等幅 MS ゴシック、Osaka 等幅

ただし、これは、FlashPlayerによって変更されることもあるので、必ずしもそのフォントが使用されるというわけではなく、あくまでも近い形のフォントを使用するということなので、表にある「実際に使用されるフォント」がインストールされていなくても、大丈夫だ。今回は「_ゴシック」を指定しよう。

デバイスフォントはフォント指定のドロップダウンリストで上に並んでいる。

6つのデバイスフォントを並べてみた。実は、再生環境がWinかMacかによって横幅などが異なる。横幅をほぼ同じにしたいときは等幅を指定すると良いだろう。

また、デバイスフォントを使用してFlashPlayerに任せるのではなく、ユーザーのマシンにインストールされているフォントを指定することもできる。この場合はフォントを埋め込まないSWFファイルが作成できるので、より綺麗なフォントでかつ小さいサイズのSWFを作成する方法もある。

インスタンス名

インスタンス名は、ActionScriptからアクセスする場合に必要となる固有名詞。これまでも、ムービークリップやボタン作成の回使用していた。テキストフィールドの場合、「ダイナミックテキスト」、「テキスト入力」では、ActionScriptでの制御が可能なことから、プロパティパネルでインスタンス名を設定できる。ここでは、インスタンス名を「hello_txt」としておこう。

テキストフィールドに文字列を表示

テキストフィールドを指定して文字列を表示するのは、簡単だ。たとえば、hello_txtに"こんにちは!"と表示するには、次のようにする。※入力した文字をそのまま使用する場合（リテラル文字と呼んだりする）は、"（ダブルクォーテーション）で囲むのがActionScriptでのルールだ。

hello_txt.text = "こんにちは！"

スクリプトは、レイヤーを追加してから、1フレーム目に記述する。

実行すると、"こんにちは！"とデバイスフォント「_ゴシック」を使用して表示されている。フォント色はわかりやすいように赤を指定した。テキスト部分は「テキスト入力」なので上書きできる。

ActionScriptから利用

タイプがテキスト入力で、フォントがデバイスフォントのテキストフィールドをhello_txtのすこし上に作成しよう。このテキストのインスタンス名は　name_txt　とする。

そして、次のスクリプトをフレームに記述する。

name_txt.addEventListener(Event.ENTER_FRAME,updateHello)
function updateHello(e:Event):void{
hello_txt.text = "こんにちは！" + name_txt.text + "さん"
}

このスクリプトは、name_txtに入力された名前を利用して「こんにちは！●●さん」と表示する。実際にムービープレビューしてから、上段のテキストフィールドに文字(名前など)を入力してみよう。すると、入力した文字を名前としたメッセージが表示されるはずだ。

入力した名前が長くて、表示しきれないときは次のところをチェックしよう。

hello_txtのプロパティとして、タイプを複数行にすると、テキストフィールドの右端で折り返して表示される。

hello_txtの右下の白い四角を下方にドラッグして、テキストフィールドを縦に大きくする。

その他の設定

その他に、Flashのテキストフィールドならではの設定として、次のものがあるので、紹介しよう。

テキストフィールドの「枠のON/OFF」、「文字選択の可否」、「HTML表示のON/OFF」などが設定できる。ただし、HTML表示のON/OFFは、ActionScriptからHTMLを指定する必要があるので、そのままでは何も起こらない。これは、またの機会に紹介したい。

まとめ

今回は、テキストフィールドに文字を表示する方法を紹介した。その文法は次のようになる。

テキストフィールドのインスタンス名.text＝"内容"

次は、応用として、このテキストフィールドを使った「デジタル時計」を作成してみよう。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。オーサリングエンジニア。Flashでの制作を中心に活動。ライターとしてFlash関連書籍や雑誌記事の執筆を行うほか、AdobeTVでも解説。著書の「ActionScript3.0辞典」が発売中。NORIでつぶやき中。