Flash Text Layout Framework

Flash テキストレイアウトフレームワークのベータ版をすこし触ってみました。
とりあえずActionScriptだけで制御するシンプルなものから。
Text Layout Framework Overview(pdf)を読みながら手探りで少しずつ試していきます。

まず、Text Layout Framework – Adobe LabsのDownload the Text Layout Frameworkからダウンロード。
フォルダのlibsに入っている、textLayout_~.swc(3つある)をFlex SDKの/frameworks/libsに入れます。

・The Text Layout Core Component (textLayout_core.swc)

このフレームワークのコンポーネントは階層構造になっているようです (下図参照)。
ルートにTextFlowという要素があって、その下にHTMLでも馴染みのあるdivやpなどがあります。
GraphicはHTMLで言うところのimg要素、Linkはa要素なのはわかりますが、TCYというよくわからないものが、。
これはTate-Chu-Yokoの略で、縦書きの TextFlow 内で横に表示されるテキストのことらしいです。
justifier for East Asian typographyとあるのを見ると、この国の文章は特殊なんだなぁとしみじみ。

まずはHello, Worldから。

import flash.geom.Rectangle;
import flash.text.engine.TextLine;
import flashx.textLayout.elements.*;
import flashx.textLayout.factory.TextLineFactory;

var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
textFlow.addChild(p);

var span:SpanElement = new SpanElement();
span.text = "Hello, World";
p.addChild(span);

TextLineFactory.createTextLinesFromTextFlow(callback, textFlow, new Rectangle(0,0,300,100));

function callback(txLine:TextLine):void{ addChild(txLine); }

import flash.geom.Rectangle;

import flash.text.engine.TextLine;

import flashx.textLayout.elements.*;

import flashx.textLayout.factory.TextLineFactory;

var textFlow:TextFlow = new TextFlow();

var p:ParagraphElement = new ParagraphElement();

textFlow.addChild(p);

var span:SpanElement = new SpanElement();

span.text = "Hello, World";

p.addChild(span);

TextLineFactory.createTextLinesFromTextFlow(callback, textFlow, new Rectangle(0,0,300,100));

function callback(txLine:TextLine):void{ addChild(txLine); }

上の図表を見ていればコードも理解しやすいかと思います。
ここで、TextFlowの内容(テキスト)を表示させるには2種類の方法があります。
・TextLineFactory
・FlowComposer
上のHello, Worldのコードでは前者を使って表示しています。
コールバック関数を作ってTextLineFactory.createTextLinesFromTextFlow()を呼び出すという手順です。
(createTextLinesFromTextFlow()はTextLineFactoryクラスのstaticメソッド)
flash.text.engine.TextLineインスタンスにはTextFlowインスタンスの内容(テキスト)が入っています。
また、flash.geom.Rectangleでテキストの表示領域の位置と大きさを決めています。
こちらは静的テキストの表示に適していて、FlowComposerより省メモリとのこと。

一方、文字の選択や変更をさせたい(動的テキスト)場合はFlowComposerを使います (下図参照)。
図を見るとわかりますが、テキストの内容は最終的にTextLineインスタンスに変換されます。

import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.elements.*;

var textFlow:TextFlow = new TextFlow();
・・・　//省略
p.addChild(span);

var textSprite:Sprite = new Sprite();
textFlow.flowComposer.addController(new DisplayObjectContainerController(textSprite, 300, 100));
textFlow.flowComposer.updateAllContainers();

import flashx.textLayout.container.DisplayObjectContainerController;

import flashx.textLayout.elements.*;

var textFlow:TextFlow = new TextFlow();

・・・　//省略

p.addChild(span);

var textSprite:Sprite = new Sprite();

textFlow.flowComposer.addController(new DisplayObjectContainerController(textSprite, 300, 100));

textFlow.flowComposer.updateAllContainers();

テキスト(TextFlow)とコンテナを関連付けてから、そのコンテナ内にテキストを表示させます。
DisplayObjectContainerControllerというのはDisplayObjectContainer(SpriteクラスはDisplayObjectContainerクラスのサブクラス)を制御するオブジェクトで、FlowComposerによって直接管理されます。
また、updateAllContainers()はFlash Playerの表示リストを更新するメソッドです。

・The Text Layout Conversion Component (textLayout_conversion.swc)

TextFilterクラスのメソッドを利用することによってテキストのインポート・エクスポートが可能です。
テキストをインポートするにはTextFilter.importToFlow()を使います。
plain text(String)でもText Layout Markup(XML)でもどちらでもOKなようです。

import flashx.textLayout.conversion.TextFilter;

// String
var text:String = "Hello, World";
var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.PLAIN_TEXT_FORMAT);

// XML
var text:XML = &lt;TextFlow&gt;&lt;p&gt;&lt;span&gt;Hello, World&lt;/span&gt;&lt;/p&gt;&lt;/TextFlow&gt;;
var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT);

import flashx.textLayout.conversion.TextFilter;

// String

var text:String = "Hello, World";

var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.PLAIN_TEXT_FORMAT);

// XML

var text:XML = <TextFlow><p><span>Hello, World</span></p></TextFlow>;

var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT);

XMLでのインポートは便利ですね。ParagraphElement等のインスタンスを一つ一つ作らなくて済みます。

エクスポートの方も簡単です。こちらはTextFilter.export()を使います。
出力フォーマットはplain text、Text Layout Markup、FXGの3つの中から選びます。

var ptext:String = "Hello, World";
var flow:TextFlow = TextFilter.importToFlow(markup, TextFilter.PLAIN_TEXT_FORMAT);
// XMLで出力
var out:XML = TextFilter.export(flow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE);

var ptext:String = "Hello, World";

var flow:TextFlow = TextFilter.importToFlow(markup, TextFilter.PLAIN_TEXT_FORMAT);

// XMLで出力

var out:XML = TextFilter.export(flow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE);

上のコードはTextLayout Framework Overviewのコードそのままですが、これだとエラーが出ました；
TextFilter.export()の返り値がObjectだったので、outの型もObjectにすると上手くいきましたが、、
ちなみにこれをtraceしてみると、TextFlow階層構造のXMLが表示されます。

&lt;flow:TextFlow whiteSpaceCollapse="preserve" xmlns:flow="http://ns.adobe.com/textLayout/2008"&gt;
  &lt;flow:p&gt;
    &lt;flow:span&gt;Hello, World&lt;/flow:span&gt;
  &lt;/flow:p&gt;
&lt;/flow:TextFlow&gt;

<flow:TextFlow whiteSpaceCollapse="preserve" xmlns:flow="http://ns.adobe.com/textLayout/2008">

<flow:p>

<flow:span>Hello, World</flow:span>

</flow:p>

</flow:TextFlow>

新しい名前空間が出てきました。
また、fontSizeやcolorなどはXML文書の属性として割り当てることができます。

&lt;flow:TextFlow xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14"&gt;
　&lt;flow:p&gt;This is an example of Text Layout Framework Markup.&lt;/flow:p&gt;
　&lt;flow:p color="#0000ff"&gt;
　　&lt;flow:span&gt;This is the first span of the second paragraph.&lt;/flow:span&gt;
　　&lt;flow:span color="#ff0000"&gt;This is the second span of the second paragraph.&lt;/flow:span&gt;
　&lt;/flow:p&gt;
&lt;/flow:TextFlow&gt;

<flow:TextFlow xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14">

　<flow:p>This is an example of Text Layout Framework Markup.</flow:p>

　<flow:p color="#0000ff">

　　<flow:span>This is the first span of the second paragraph.</flow:span>

　　<flow:span color="#ff0000">This is the second span of the second paragraph.</flow:span>

　</flow:p>

</flow:TextFlow>

Conversion Componentの基本的な使い方はこれくらいです。

今回はテキストを表示する部分を主に紹介しました。
動的テキストを扱う際に利用するEdit Componentについてもこれから調べていきたいと思います。
各要素それぞれ細かい部分についても追々。

続く…

Flash Text Layout Framework

・The Text Layout Core Component (textLayout_core.swc)

・The Text Layout Conversion Component (textLayout_conversion.swc)

あわせて読む:

3 Thoughts

コメントを残す