読者です 読者をやめる 読者になる 読者になる

Flexで文字を縦書きする方法


そういえばFlash10にはテキストエンジンが追加されて日本語の縦書きにも対応したので、せっかくなのでやってみました。
Flexでの書き方はなかなかないと思いますので、参考にどうぞ。
こんな感じ
http://moeten.info/flex/20091107_tategakiTest/bin-release/main2.html
またちょっと遊んでみたもの
http://moeten.info/flex/20091107_tategakiTest/bin-release/main.html
参考になるページ
FlashPlayer10の新機能、段組クラス(縦書き)に触れてみた。
macromarionette
すべてのソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" xmlns:engine="flash.text.engine.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #B6B6B6]">
<mx:Script>
<![CDATA[
import mx.effects.Blur;
import mx.effects.Fade;
import flash.text.engine.EastAsianJustifier;
import flash.text.engine.ElementFormat;
import flash.text.engine.FontDescription;
import flash.text.engine.LineJustification;
import flash.text.engine.TextBlock;
import flash.text.engine.TextElement;
import flash.text.engine.TextLine;
import flash.text.engine.TextRotation;
//初期関数
private function init():void{
    //パラメータ
    var xPos:int = 600;
    var yPos:int = 100;
    var h:int = 900;
    //テキストブロックの高さを用いて行を計算させる。
    var textLine:TextLine = textBlock.createTextLine (null, h );
    var i:int = 1;
    var duration:int = 2000;
    while (textLine)
    {
        //右から左へ1行ずつ、ずらして配置する
        xPos -= textLine.textHeight + 14;
        textLine.filters = [dsf];
        textLine.x = xPos;
        textLine.y = yPos;
        myUI.addChild(textLine);
        //アニメーション作成
        textLine.alpha = 0;
        var fade:Fade = new Fade();
        fade.startDelay = duration * i;
        fade.duration   = duration;
        fade.alphaFrom  = 0 ;
        fade.alphaTo    = 1;
        fade.play([textLine]);
        var blur:Blur = new Blur();
        blur.startDelay = duration * i;
        blur.duration   = duration
        blur.blurXFrom  = 24;
        blur.blurYFrom  = 24;
        blur.blurXTo    = 0;
        blur.blurYTo    = 0;
        blur.play([textLine]);
        //次の行をセットする
        textLine = textBlock.createTextLine( textLine, h );
        i++;
    }
}
]]>
</mx:Script>
<mx:DropShadowFilter id="dsf" blurX="6" blurY="6" distance="0" color="0x664f4f" />
<!--#### テキストエンジン ####-->
<!--文字のフォーマット-->
<engine:ElementFormat id="format" fontSize="16" color="0x000000" alpha="0.7" locale="ja"
    fontDescription="{new FontDescription() }"/>
<!--文字の内容-->
<engine:TextElement id="textElement" elementFormat="{format}" >
    <engine:text>吾輩(わがはい)は猫である。
名前はまだ無い。
どこで生れたかとんと見当(けんとう)がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。
この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。
この時妙なものだと思った感じが今でも残っている。
    </engine:text>
</engine:TextElement>
<!--文字を入れる箱の設定-->
<engine:TextBlock id="textBlock" content="{textElement}" lineRotation="{TextRotation.ROTATE_90}"
    textJustifier="{new EastAsianJustifier('ja',LineJustification.UNJUSTIFIED)}"/>
<!--#### コンポーネント ####-->
<mx:UIComponent id="myUI"/>
</mx:Application>