第39回　TLFTextFieldクラスを使う

3次元表現のお題はまだ当分続く予定だが、前回予告したとおりFlash Professional CS5から加わったテキストレイアウトフレームワーク（Text Layout Framework）について数回を割いて説明しておきたい。今回はまず、TLFTextFieldクラスだ。これまでのTextFieldクラスと基本的な扱いは同じものの、より細かな設定ができる。

TLFテキストの操作

TLFはText Layout Frameworkの略だ。Flash Professional CS5で[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できる（図1左⁠）⁠。[TLFテキスト]は、[詳細な文字設定]など文字や段落をInDesignのように細かく設定できる（図1右⁠）⁠。

[TLFテキスト]のインスタンスはTLFTextFieldクラスで生成し、そのプロパティやメソッドを操作する。たとえば、TLFTextFieldインスタンス（[TLFテキスト]）をタイムラインに動的に配置して、テキストを設定するときは、つぎのスクリプト1のようなフレームアクションを記述する（図2⁠）⁠。

スクリプト1　動的に配置したTLFTextFieldインスタンスにテキストを設定する

// フレームアクション
import fl.text.TLFTextField;
var my_txt:TLFTextField = new TLFTextField();
addChild(my_txt);
my_txt.x = 20;
my_txt.y = 20;
my_txt.width = 200;
my_txt.height = 100;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";

このスクリプト1は、これまでのTextFieldインスタンスを使う処理と基本的に変わらない（第26回「外部データの読込み待ち」の「外部テキストファイルのロード」参照⁠）⁠。実際、インスタンス生成のステートメントをつぎのようにTLFTextFieldからTextFieldに変えれば、動的に配置されたTextFieldインスタンスにテキストが設定される。なお、wordWrapとborderプロパティは、それぞれテキストの折返しと周囲の境界線の有無を設定する。

// var my_txt:TLFTextField = new TLFTextField();
var my_txt:TextField = new TextField();

なお、ひとつ注意しておきたいのは、スクリプト1冒頭のimport宣言だ。他の多くのActionScript定義済みクラスと違い、Text Layout Frameworkに含まれるクラスはフレームアクションでもimport宣言が必要だ[1]⁠。これがないと、[コンパイルエラー]になる（図3⁠）⁠。

TLFTextFieldインスタンスに書式を設定する

TLFTextFieldインスタンスの書式の設定は、TextFieldインスタンスと少し勝手が違う。まず、使うクラスはTextLayoutFormatだ。そして、書式を定めたTextLayoutFormatオブジェクトは、TLFTextFieldインスタンスに直接適用するのでなく、インスタンスのTLFTextField.textFlowプロパティを取出し、そのTextFlow.hostFormatプロパティに設定する。TextFlowオブジェクトは、TLFTextFieldインスタンスに納められる文章全体を管理する。

前記スクリプト1に以下の処理を加えると、TLFTextFieldインスタンスに、フォントの色は青（0x0000FF）に変え、サイズを16ポイントにする書式が設定される（図4⁠）⁠。TextLayoutFormat.colorとTextLayoutFormat.fontSizeが、それぞれを設定するプロパティだ。なお、クラスTextLayoutFormatとTextFlowは、やはりimport宣言する必要がある。

// フレームアクションに追加
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
my_fmt.color = 0x0000FF;
my_fmt.fontSize = 16;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();

TextLayoutFormatインスタンスの書式をTextFlowオブジェクトに適用するには、前述のとおりTextFlow.hostFormatプロパティに代入する。さらにその設定を有効にするため、TextFlow.flowComposerプロパティの参照するオブジェクトに対してupdateAllControllers()メソッドを呼出し[2]⁠、テキストの表示を更新しなければならない。

前掲スクリプト1に上記の書式設定を加えたフレームアクション全体は、つぎのスクリプト2のとおりだ。

スクリプト2　動的に配置したTLFTextFieldインスタンスのテキストに書式を設定する

// フレームアクション
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_txt:TLFTextField = new TLFTextField();
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
addChild(my_txt);
my_txt.x = 20;
my_txt.y = 20;
my_txt.width = 200;
my_txt.height = 100;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";
my_fmt.color = 0x0000FF;
my_fmt.fontSize = 16;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();

TLFテキストの方向を動的に変える

TLFテキストならではの機能も、ひとつ紹介しておこう。それはテキストの縦書きだ。設定を変えれば、ユーザーが入力することもできる。デフォルトでは、テキストの選択のみ可能だ。

まず、テキストが縦書きか横書きかは、TLFTextField.blockProgressionプロパティで変える。設定するのはBlockProgressionクラスの定数で、縦書きがBlockProgression.RL、横書きはBlockProgression.TBにする。つぎに、選択可能か編集可能かは、TLFTextField.typeプロパティが定める。同名のプロパティはTextFieldクラスにも備わっており、設定の仕方も同じだ。選択可能はTextFieldType.DYNAMIC、編集可能がTextFieldType.INPUTになる[3]⁠。

前記スクリプト2のテキストを縦書きにし、編集できるようにしたのがつぎのフレームアクションだ（スクリプト3⁠）⁠。[ムービープレビュー]で試すと、縦書きのTLFテキストを選択して書替えることができる（図5⁠）⁠。

スクリプト3　TLFTextFieldインスタンスのテキストを縦書きにして編集可能にする

// フレームアクション
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.BlockProgression;
var my_txt:TLFTextField = new TLFTextField();
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
addChild(my_txt);
my_txt.x = 20;
my_txt.y = 20;
my_txt.width = 200;
my_txt.height = 100;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";
my_txt.blockProgression = BlockProgression.RL;
my_txt.type = TextFieldType.INPUT;
my_fmt.color = 0x0000FF;
my_fmt.fontSize = 16;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();

図5　縦書きのTLFテキストを書替える


1.テキストを選択	2.文字の入力	3.入力を確定

Text Layout Frameworkは、TLFテキストだけのためのフレームワークではない。フレームワークに含まれる様々なクラスを使えば、テキストコンテンツがきめ細かく扱える。次回は、その基本について説明しよう。

今回解説した次のサンプルファイルがダウンロードできます。

サンプルファイル（CS5形式/約20KB）