1月 11 2010
Text Layout Framework を使って「縦書き」文章レイアウトを行いました。
文章は青空文庫の北大路魯山人作「若鮎について」を使わせていただきました。
Text Layout Framework を使うと Flash 上の文章をHTML+CSSのように手軽に操れることも分かってきました。
あるいはJavascriptのようにDOM操作もできるようです。
これはFlashにとってすばらしい出来事です。
CS5が登場し、この Text Layout Framework から早く Betaがとれることを願わずにはいられません。
Sample File
Textlayout Frame Work – 縦書き
＊Flash Player 10以上が必要です。
import flash.text.engine.FontLookup; import flash.text.engine.FontWeight; import flashx.textLayout.container.ContainerController; import flashx.textLayout.edit.SelectionManager; import flashx.textLayout.elements.DivElement; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.formats.BlockProgression; import flashx.textLayout.formats.Direction; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.formats.BaselineOffset; var xml:XML = <book> <author>北大路魯山人</author> <title>若鮎について</title> <body> <line>あゆの小さなものは、どうかするとうまくないというひともあるが、わたしは一概にそうは思わない。</line> <line>小田原の手前に酒匂川《さかわがわ》という川がある。まだ禁漁中にあの近辺のひとが酒匂川のあゆをよく盗み取りするが、わたしはそれをもらうことがあって、たびたび食ったことがある。大きさはまだやっと一寸ぐらいのものだが、ちょっとあぶって食うと、実に調子の高いうまさが舌になじむ。</line> <line>もっとも、最初東京にはいってくるものは、江州《ごうしゅう》地方でいわゆるあゆの飴煮《あめに》にするものであって、これはあまり美味なものではない。あゆは不思議な魚で、水勢のないところでは大きくならない。また同じ水勢であっても、水質や餌《えさ》の関係であろうか、川によって成長率が違う。一般に大きな川のあゆは大きくなり、小さな川のものは小さく育つようである。</line> <line>琵琶湖のあゆは非常に小さく、一年経っても若あゆ以上に大きくならない。大きくならないで一人前に子を持っている。昔は琵琶湖のあゆは他のあゆとはまったく種類が違うかと思われたが、その実、琵琶湖で生まれた子あゆが江州から石山などを通って宇治川へ落ちて出ると、立派に成長するらしい。それかあらぬか、琵琶湖で孵化《ふか》したあゆの稚魚を地方の渓流へ放流すると、通常のあゆ通り立派に成長することが分って、近来は諸所で盛んに放魚が行われているようだ。</line> <line>琵琶湖では、あゆの稚魚を茄《ゆ》でてひうおと呼んでいる。このひうおの大ぶりなのが飴煮にされて来るもので、琵琶湖にはほとんど無限といってよいほど発生する。それがこの頃では諸地方の大川へどしどし放流され、あゆの産出を全国的に増加させている。この点、あゆ党にとってはまことにありがたいことである。</line> <line>ところで、前述の琵琶湖産のひうおなるものは、なんといっても小さすぎるから、みた目の割合にうまくない。しかし、このひうおも川に出て成長してからは一人前のあゆの味を備え、やはりうまい。そこで、先の酒匂川の若あゆのことなども合わせて考えてみると、若あゆなるものは結局琵琶湖のひうおではあゆらしいうまさはないが、初めから河川で発生したものはちょっとぐらいでも、すでに立派な美食価値を持っている。いわば、それぞれの川の味をもっているのだ。</line> </body> </book>; // TextFlow var flow:TextFlow = new TextFlow(); flow.color = 0x333333; flow.fontSize = 14; flow.lineHeight = 20; flow.fontFamily = 'ヒラギノ明朝 Pro W3, メイリオ, ＭＳ Ｐ明朝, _serif'; flow.fontLookup = FontLookup.DEVICE; flow.locale = "ja"; flow.direction = Direction.LTR; flow.blockProgression = BlockProgression.RL; flow.interactionManager = new SelectionManager(); // div var div:DivElement = new DivElement(); flow.addChild(div); // title var titleP:ParagraphElement = new ParagraphElement(); var titleSpan:SpanElement = new SpanElement(); titleSpan.text = xml.title; titleSpan.fontSize = 24; titleSpan.color = 0x000000; titleSpan.fontWeight = FontWeight.BOLD; titleSpan.lineHeight = 48; titleP.addChild(titleSpan); div.addChild(titleP); // author var authorP:ParagraphElement = new ParagraphElement(); authorP.textAlign = TextAlign.END; authorP.paragraphEndIndent = 100; var authorSpan:SpanElement = new SpanElement(); authorSpan.text = xml.author; authorSpan.fontSize = 18; authorSpan.lineHeight = 36; authorP.addChild(authorSpan); div.addChild(authorP); // body var i:int = -1; var limit:int = xml.body.line.length() -1; for ( ;i++ < limit; ) { var p:ParagraphElement = new ParagraphElement(); p.textIndent = 14; p.paddingRight = 100; var span:SpanElement = new SpanElement(); span.text = xml.body.line[i]; p.addChild(span); div.addChild(p); p = null; span = null; } var sprite:Sprite = new Sprite(); sprite.x = 10; sprite.y = 10; addChild(sprite); flow.flowComposer.addController(new ContainerController(sprite, 780, 480)); flow.flowComposer.updateAllControllers();
Flash Builder Beta 2 + Flex SDK 4
起動後Webcamを「許可」して下さい。
