FlashPlayer10の新機能、段組クラス(縦書き)に触れてみた。

FlashPlayer10の新機能、「縦書き」を試してみました。

(SWF：要FlashPlayer10)

これは従来のTextFieldとはまったく別のもので、動的な変更や入力は一切できません。
テキストオブジェクトというよりは段組オブジェクトというほうが正確だと思いました。

flash.text.engine.*パッケージの中身のクラスも、TextFieldというよりはGraphicsのような描画APIに近い位置づけだと思います。
手順を追って説明してみます。

開発環境にFlex3.2以上とFlashPlayer10がインストールしてある必要があります。またFlashDevelop beta9の場合設定が必要です。

• サンプル zip形式(FlashDevelop beta9 flex 3.2)

縦書きのテキスト行を生成する

具体的にコードを見てみます。
おおまかな流れは、TextBoxクラスでTextLineというDisplayObjectのサブクラスを生成します。
TextBoxはテキストの整形情報と内容を持っていて、TextLineを生成するFactoryクラスで、実際に表示には使いません。

フォント設定がFontDescription、整形情報がContentFormat、整形対象がStringを含むTextElementということでたくさんクラスにわかれててややこしいので図にしました。

行間の整形

肝心の整列ですが、これはDisplayObjectなのでxとかyとかで自力でやります。
このことから、かなり低レベル(最低限)な機能だけ提供されてることがわかります。

動的に行を増やす場合

たとえば入力したテキストなどから動的に生成する場合、先に生成したTextBoxインスタンスを保持しておき、contentに新しく生成したTextElementsをセットすると同じ書式で新しい行オブジェクトを生成できます。

textbox.content = new TextElement( newText, format );

色を変更する場合。

TextFieldと大きく違うのはTextLine自体はダイナミックじゃないということです。
一度生成した(描画した)オブジェクトは後から変更できません。Flash CS3の静的テキストを生成するイメージに近いです。

ですので、ContentFormatのcolorプロパティを変更して新たにTextElementを生成する必要があります。
このとき一度TextFormatにセットされたContentElementの値はロックされてしまいますので、cloneで複製したものの値を変更して使います。

format = format.clone(); format.color = 0x0000ff; textbox.content = new TextElement( newText, format );

テキストAPIのまとめ

以上まとめてみましたが、TextFieldと比べてかなり性格が違う分、使いどころも変わってきそうです。
動的テキストとしては非常にあつかいづらい反面、タイポグラフィや文字表現という意味ではかなり可能性を感じます。

おまけ(テキストの3D回転)

(SWF：要FlashPlayer10)

DisplayObjectなのでもしやと思い試してみたら簡単に3D表現ができました。
繰り返しますが、こういったビジュアル表現としてはかなり楽しみな機能だと思います。