Flash Player 10 縦書き(xmlデータでテキストレイアウト)
November 27, 2008

Flash CS4用にText Layout コンポーネント(高度なテキスト編集ができるコンポーネント)がAdobe Labsに用意されたけれど、まだCS4を入れていないので、Text Layout Frameworkのオンラインデモを使ってActionScript 3.0で縦書き。
参考記事:
akihiro kamijo: Flash テキストレイアウトフレームワーク (Text Layout Framework) ベータ版の公開
試したこと
1.Text Layout Editor Demo Applicationで日本語縦書きのマークアップ形式データ(xml)を作成
2.そのデータをActionScript3.0で読み込んでテキストレイアウトを行う(Flex 4 SDKでコンパイル)
マークアップ形式データの作成
1.Text Layout Editor Demo Applicationを開き、適当に文字を入力。

2.縦書きにしたいので、[FLOW]-[Orientation]を『Vertical』に。ほかいろいろ設定。

3.『Markup』ボタンを押すとマークアップ形式のデータが表示されるので、コピーして、test.xmlと保存。

ActionScript 3.0の記述
サンプルソースダウンロード
ソース抜粋
1.URLLoaderでtest.xml読み込み
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest(MARKUP));
loader.addEventListener(Event.COMPLETE,completeHandler);
loader.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);
2.TextFlowオブジェクトにつぎのように設定
private function completeHandler(e:Event):void
{
var _textFlow :TextFlow = new TextFlow();
_textFlow = TextFilter.importToFlow(e.target.data, TextFilter.TEXT_LAYOUT_FORMAT);
_textFlow.flowComposer.addController(new DisplayObjectContainerController(this,stage.stageWidth, stage.stageHeight));
_textFlow.flowComposer.updateAllContainers();
}
Flex 4 SDKでコンパイル。
コンパイル時に、次の部分で「引数の数が正しくありません。1 個以下であることが必要です。」とエラーになる場合は、最新のFlex 4 SDK(Build 4.0.0.4198)で試してみてください。
_textFlow.flowComposer.addController(new DisplayObjectContainerController(this,stage.stageWidth, stage.stageHeight));
TextFlowなど、テキストレイアウト関係のドキュメントは、Adobe® Flex™ Gumbo Language Reference(英語)に出ていました。
おまけ
Flash Player 10をまだ入れていない人は、次の記事を参考に。
Flash Player 9と10(Astro)共存
Flex 4 SDKを入れていない人は、次の記事を参考に。
Flex 4 SDKをMacにセットアップ
Flex 4 SDKをWindowsにセットアップ
Trackback
Trackback URL for this entry:
Comment (2)
高橋文樹:大変参考にさせていただきました。ありがとうございます。
Webサイトの縦書き対応は文学者として至上命題ですので、ほんとに助かりました。
高橋文樹さん
コメントありがとうございました!
文学者の方からみたら、「縦書き」は僕が捉えている以上に重要なことなんだろうなと、感じました。
他にも、改行や行間など気になるんでしょうね。


















