3次元表現のお題はまだ当分続く予定だが、前回予告したとおりFlash Professional CS5から加わったテキストレイアウトフレームワーク(Text Layout Framework)について数回を割いて説明しておきたい。今回はまず、TLFTextFieldクラスだ。これまでのTextFieldクラスと基本的な扱いは同じものの、より細かな設定ができる。
TLFテキストの操作
TLFはText Layout Frameworkの略だ。Flash Professional CS5で[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できる(図1 左) 。[TLFテキスト]は、[詳細な文字設定]など文字や段落をInDesignのように細かく設定できる(図1 右) 。
図1 [テキストツール]で[TLFテキスト]が選択できる
[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 = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";
図2 タイムラインに配置されたTLFTextFieldインスタンスにテキストが設定された
このスクリプト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 ) 。
図3 TLFTextFieldクラスのimport宣言がないと[コンパイルエラー]になる
[1] もっともFlash Professional CS5では、データ型を指定すればそのクラスのimport宣言が自動的に挿入される。なお、多くのActionScript定義済みクラスは、フレームアクションではデフォルトで自動的にimportされる(F-site「コードヒントとimport宣言 」参照) 。
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 ();
図4 テキストの色は青でサイズが16ポイントになる
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 ();
[2] TextFlow.flowComposerプロパティには、決まった仕様(IFlowComposerインターフェイス )にもとづいたクラスのオブジェクトであれば設定できる設計になっている。もっとも、今のところそのようなクラスとしてはStandardFlowComposerしかない。よって、ここで呼び出しているのはStandardFlowComposer.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テキストを書替える
Text Layout Frameworkは、TLFテキストだけのためのフレームワークではない。フレームワークに含まれる様々なクラスを使えば、テキストコンテンツがきめ細かく扱える。次回は、その基本について説明しよう。
今回解説した次のサンプルファイルがダウンロードできます。