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

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

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

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

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

※1
新しいText Layout Frameworkの特徴参照。なお,ライブラリはFlash Playerに組み込まれているわけではないため,書き出されたSWFファイルはFlash Player 10(Flash CS4 Professional対応)でも基本的に動く。

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インスタンスを生成しない

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入