ActionScript 3.0で始めるオブジェクト指向スクリプティング

第40回Text Layout Frameworkでテキストコンテンツを表示する

前回の第39回TLFTextFieldクラスを使うの結びで述べたとおり、Text Layout FrameworkはTLFテキストのためだけのフレームワークではない。今回は、フレームワークに含まれるクラスを使ったテキストコンテンツの扱い方について解説しよう。

Text Layout Frameworkは「高度なテキスト編集およびレイアウト機能」を提供する。このフレームワークは「ActionScript 3.0で記述された独立したコンポーネントライブラリ」[1]⁠。ライブラリの各クラスは、テキストの構造とフォーマットやその表示、さらに編集操作などの役割を、それぞれ分けて担っている。

Text Layout Framework Markup形式のXMLからTextFlowオブジェクトをつくる

テキストコンテンツは、TextFlowオブジェクトに構造化して納める。Text Layout Frameworkは、XHTMLを参考にしてテキストの構造化を定めた。構造化したTextFlowオブジェクトのつくり方はいくつかある。応用しやすいのは、XMLデータをTextFlowオブジェクトに変換することだろう。その場合、静的メソッドTextConverter.importToFlow()を用いる。

TextConverter.importToFlow(ソースデータ, データ形式)

ソースのXMLデータは、後に説明するText Layout Framework Markup形式でマークアップしておく。その場合、TextConverter.importToFlow()メソッドの第2引数には定数TextConverter.TEXT_LAYOUT_FORMATを渡す表1⁠。

表1 TextConverterクラスの定数
定数データ形式説明
TEXT_FIELD_HTML_FORMAT単純なHTMLテキストTextFieldクラスと基本的に同じタグと属性のサブセットをサポート(具体的なタグは[ヘルプ]参照)
PLAIN_TEXT_FORMATプレーンテキストフォーマットされていない文字列
TEXT_LAYOUT_FORMATText Layout Framework MarkupText Layout Framework Markup参照

マークアップに使えるタグは、[ヘルプ]の「Text Layout Frameworkのモデル」Text Layout Framework Markupの項に一覧表が掲げられているので、参照してほしい。エレメントは、それぞれ定められた子エレメントがもてる表2⁠。単純なテキストは、つぎのようにエレメントを構造化する。なお、各エレメントには、それを扱うクラスが決められている。

<TextFlow>
  <p>
    <span>
    テキスト
    </span>
  </p>
</TextFlow>
表2 単純なテキストコンテンツを構造化するためのエレメントと対応するクラス
エレメント説明クラス
textFlowルートdiv、pTextFlow
divブロックレベル範囲div、pDivElement
p段落a、tcy、span、img、tab、brParagraphElement
spanテキスト(インライン)範囲-SpanElement

エレメントのタグには、TextLayoutFormatクラスのプロパティでフォーマットをXML属性として記述できる。たとえば、つぎのフレームアクションにより、段落(p)の位置揃えtextAlignを中央(center)にし、テキスト範囲(span)にはImpactfontFamilyの18ポイントfontSizeでフォントを設定したテキストのTextFlowインスタンスがつくられる。

import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
var markUp:XML = <TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>
  <p textAlign='center'><span fontFamily='Impact' fontSize='18'>
  Text Layout Framework
  </span></p>
</TextFlow>;
var myFlow:TextFlow = TextConverter.importToFlow(markUp, TextConverter.TEXT_LAYOUT_FORMAT);
trace(myFlow.getText());   // テキストを確認

注意が2つある。第1に、TextFlowオブジェクトは構造化されたテキストやそのフォーマット指定をデータとしてもつだけで、そのままステージには表示できない。そこで、オブジェクトに設定されたテキストをgetText()メソッドで調べ、TextFlowインスタンスがつくられたことを確かめた図1⁠。

図1 Text Layout Framework Markup形式のデータから生成したTextFlowオブジェクトのテキストを確認
図1 Text Layout Framework Markup形式のデータから生成したTextFlowオブジェクトのテキストを確認 図1 Text Layout Framework Markup形式のデータから生成したTextFlowオブジェクトのテキストを確認

第2は、TextFlowタグにxmlns属性でXML名前空間を宣言することだ図1参照⁠。これがないと、TextConverter.importToFlow()メソッドがTextFlowインスタンスを生成できず、nullを返してしまう図2⁠。

図2 xmlns属性がないとTextConverter.importToFlow()メソッドはTextFlowインスタンスを生成しない
図2 xmlns属性がないとTextConverter.importToFlow()メソッドはTextFlowインスタンスを生成しない 図2 xmlns属性がないとTextConverter.importToFlow()メソッドはTextFlowインスタンスを生成しない

フローコンポーザーでテキストコンテンツを表示する

TextFlowオブジェクトがもつ構造化されたテキストやそのフォーマット指定のデータをステージに表示する役割は、フローコンポーザーが担う。フローコンポーザーのオブジェクトは、前回紹介したTextFlow.flowComposerプロパティからその参照が得られる。フローコンポーザーは、インターフェイスIFlowComposerを実装するクラスのオブジェクトだ。

テキストコンテンツは、Spriteインスタンスをコンテナとして流し込まれる。そのSpriteインスタンスとTextFlowインスタンスを結びつけ、テキストの表示領域を定めるのがContainerControllerオブジェクトだ。コンストラクタメソッドには、コンテナのSpriteインスタンスおよびテキスト領域の幅と高さを渡す。そして、そのオブジェクトをIFlowComposer.addController()メソッドの引数に渡すと、TextFlowインスタンスのコンテナが加わる図3⁠。

new ContainerController(コンテナSprite, テキスト領域幅, テキスト領域高さ)
IFlowComposerオブジェクト.addController(ContainerControllerオブジェクト)
図3 Text Layout Frameworkにおけるオブジェクトの関係
図3 Text Layout Frameworkにおけるオブジェクトの関係

フローコンポーザーで、前掲フレームアクションのテキストコンテンツを表示してみよう図4⁠。前掲フレームアクションにフローコンポーザーの処理を加えたのが、つぎのスクリプト1だ。前回説明したとおり、フローコンポーザーにテキストコンテンツを表示させるには、IFlowComposer.updateAllControllers()メソッドの呼出しが必要になる。

スクリプト1 Text Layout FrameworkでXML形式のテキストコンテンツをステージに配置する
// フレームアクション
import flash.display.Sprite;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.compose.IFlowComposer;
var container:Sprite = new Sprite();
var markUp:XML = <TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>
  <p textAlign='center'><span fontFamily='Impact' fontSize='18'>
  Text Layout Framework
  </span></p>
</TextFlow>;
var myFlow:TextFlow = TextConverter.importToFlow(markUp, TextConverter.TEXT_LAYOUT_FORMAT);
var controller:ContainerController = new ContainerController(container, 240, 100);
var composer:IFlowComposer = myFlow.flowComposer;
addChild(container);
composer.addController(controller);
composer.updateAllControllers();
図4 フローコンポーザーでテキストがステージに表示された
図4 フローコンポーザーでテキストがステージに表示された

次回でText Layout Frameworkの説明は終える。外部XMLファイルからText Layout Framework Markup形式のデータを読み込んだ後、ユーザーインタラクションを加える。

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

おすすめ記事

記事・ニュース一覧