2010.01.08
03:34
author: taikiken
0件のコメント
Text Layout Framework
Flashの文字表示を驚くほど多種多様にコントロールできるText Layout Framework。
細かく設定できるのはいいけど、同じ結果になるのにも何通りもの方法があるようです。ものにできるには少々覚悟が必要だと思います。
右往左往しながら使ってみたのですが、コアなClassがあるようです。
TextFlow
ヘルプによれば・・・
The TextFlow class is responsible for managing all the text content of a story. In TextLayout, text is stored in a hierarchical tree of elements. TextFlow is the root object of the element tree. All elements on the tree derive from the base class, FlowElement.
TextFlowがルートオブジェクトになるらしい。
なにはさておきTextFlowインスタンスを作るのが吉らしい。
まずはTextFilterを使ってインスタンスを作成。
でも、このTextFilterってAPIにのってないんだよなぁー。
のってるのはflashx.textLayout.conversion.TextConverter。
プロパティとメソッドは同じようだけど・・・
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextFilter;
import flashx.textLayout.formats.BlockProgression;
import flashx.textLayout.factory.TextLineFactory;
import flash.geom.Rectangle;
import flash.text.engine.TextLine;
// TextFlowインスタンス作成
var flow:TextFlow = TextFilter.importToFlow("ここに文章を設定。今回はプレインタイプのテキスト。", TextFilter.PLAIN_TEXT_FORMAT);
// 縦書き
flow.blockProgression = BlockProgression.RL;
// テキストブロック x:0, y:20, w:500, h:300
var bounds:Rectangle = new Rectangle(0, 20, 500, 300);
// 出力
TextLineFactory.createTextLinesFromTextFlow(
function (tl:TextLine):void {
addChild(tl);
}
, flow
, bounds
); |
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextFilter;
import flashx.textLayout.formats.BlockProgression;
import flashx.textLayout.factory.TextLineFactory;
import flash.geom.Rectangle;
import flash.text.engine.TextLine;
// TextFlowインスタンス作成
var flow:TextFlow = TextFilter.importToFlow("ここに文章を設定。今回はプレインタイプのテキスト。", TextFilter.PLAIN_TEXT_FORMAT);
// 縦書き
flow.blockProgression = BlockProgression.RL;
// テキストブロック x:0, y:20, w:500, h:300
var bounds:Rectangle = new Rectangle(0, 20, 500, 300);
// 出力
TextLineFactory.createTextLinesFromTextFlow(
function (tl:TextLine):void {
addChild(tl);
}
, flow
, bounds
);
縦書き文字が表示される。
初めの一歩としては、こんなものでしょうか。
font-maily, font-size, color…etc
など色々設定してみたい。
DOM操作するようにもっと細かな制御もしてみたい。
それはまた今度にしてみる。
良くわからないのは、TextFilterをTextConverterに変えるとコンパイルエラーになっちゃう。
1046: 型が見つからないか、コンパイル時定数ではありません : ImportExportConfiguration。
発展途中のベータ版だし、しょうがないか。
追記
と、ココまで書いていて大事なことに気がついた。
Adobe Labs : http://labs.adobe.com/downloads/textlayout.html のFlash CS4 Componentが古いことに！
APIにないClassを使ったりするのはそのせいだった様子。
Extension Manager から Text Layout Flash Component 0.207.0を削除し textLayout.swc を使用するようにした。
上記コードを書き直した。
正
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.factory.TextFlowTextLineFactory;
import flashx.textLayout.formats.BlockProgression;
import flash.display.DisplayObject;
import flash.geom.Rectangle;
// TextFlowインスタンス作成
var flow:TextFlow = TextConverter.importToFlow("ここに文章を設定。今回はプレインタイプのテキスト。", TextConverter.PLAIN_TEXT_FORMAT);
// 縦書き
flow.blockProgression = BlockProgression.RL;
// TextFlowTextLineFactoryインスタンス作成
var factory:TextFlowTextLineFactory = new TextFlowTextLineFactory();
// テキストブロック x:0, y:20, w:500, h:300
factory.compositionBounds = new Rectangle(0,20,500,300);
// 出力
factory.createTextLines(
function (d:DisplayObject):void {
addChild(d);
}
, flow
); |
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.factory.TextFlowTextLineFactory;
import flashx.textLayout.formats.BlockProgression;
import flash.display.DisplayObject;
import flash.geom.Rectangle;
// TextFlowインスタンス作成
var flow:TextFlow = TextConverter.importToFlow("ここに文章を設定。今回はプレインタイプのテキスト。", TextConverter.PLAIN_TEXT_FORMAT);
// 縦書き
flow.blockProgression = BlockProgression.RL;
// TextFlowTextLineFactoryインスタンス作成
var factory:TextFlowTextLineFactory = new TextFlowTextLineFactory();
// テキストブロック x:0, y:20, w:500, h:300
factory.compositionBounds = new Rectangle(0,20,500,300);
// 出力
factory.createTextLines(
function (d:DisplayObject):void {
addChild(d);
}
, flow
);
こっちの方がコードがスッキリしてる。
Flash CS4 でTLFコンポーネントを使うやり方は一世代前の方法みたいだ、Flex SDKから textLayout.swc を取出して使うことにする。
Using the Text Layout Framework with Adobe Flash CS4 Professional
このリンク先の方法が◯ってことだね。
Adobe Labs にTLFコンポーネントへのリンクが残ってるのが間違いの元なんだよ。 🙁
update
CS4 を使い始めたばかりで誤解がありました。
.swc をパス指定で使用できるようになってたんですね。
必ずしも.mxpでコンポーネントをインストールしなくても良くなって、使い勝手は著しく向上しています。
CS3と同じようにに.mxpをインストールさせるタイプのものがあることも分かりました。
と2冊揃えて本棚に並べておくと、きっとこいつFlashできるやつと思われるのではないかと期待して予約をすることにします。
Text Layout Framework を使って「縦書き」文章レイアウトを行いました。
起動後Webcamを「許可」して下さい。