日本語の文章をブラウザで表示させるとき、縦書のほうが趣が出る場合がある。 例えば今回ここに示すものは、短歌である。 as3.0のTLFテキストを使えば、スクリプトで縦書き表示することができるので、今回はそのお勉強をすることにしたい。 また、このサイトの「(108) テキスト(文字列)がだんだん見えてくる」で横書き文字について用いた手法に似た手法で、テキスト(文字列)がだんだん現れるような趣も加えた。 今回は、各列を覆う短冊状の矩形(背景色と同じ色)をトゥイーンで縮小をかけることにより文字列が現れるようにした。
なお、ここで用いた短歌は、私の父(元陸軍中佐、砲兵隊中隊長)が南太平洋に出陣した折りのことを詠んだものである。
この、短歌を複数ページを切り替えて読むことのできる短歌集の例は、こちらにあります。 |
SAMPLE |
|
ステージなどの準備 |
●564*390、背景色シルバー(#999)のステージを設定
●同じディレクトリに、TLFマークアップ形式のxmlファイル(tanka.xml)を置く(下に示す内容)
|
スクリプト Frame1に記述 (as3.0) |
//各種クラスのインポート
import flash.display.Loader;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
import fl.text.TLFTextField;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.formats.BlockProgression;
import flash.filters.DropShadowFilter;
import flash.display.Shape;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
//変数型定義
var coverRec:Shape;
var tw:Tween;
var tfx:Number;
var tfy:Number;
//変数初期値の設定
var txtSize:Number=30;//文字の最大サイズ
var lineHeight:Number=1.2;//ラインハイト120%
var lineNum:int=11;//トゥイーン対象テキストの列数(空白列を含む)
var tf_w:Number=txtSize*lineHeight;//テキスト1列分の幅
var tf_h:Number=350;//テキストフィールドの高さ
//TLFテキストフィールドの作成、属性定義
var tlfTxtF:TLFTextField = new TLFTextField();
var dropShadow:DropShadowFilter = new DropShadowFilter();
with (tlfTxtF) {
border=true;
background=true;
width=(lineNum+3)*tf_w+tf_w/2;
height=tf_h;
x=tfx=20;
y=tfy=20;
borderColor=0x999999;
backgroundColor=0xffffff;
filters=new Array(dropShadow);
}
addChild(tlfTxtF);
//文字の基本フォーマット(日本語形式縦書)
var baseFmt:TextLayoutFormat = new TextLayoutFormat();
baseFmt.blockProgression=BlockProgression.RL;
baseFmt.locale="ja";
baseFmt.fontFamily="HGS明朝E,HGSMinchoE,MS P明朝,MSPMincho, ヒラギノ明朝 Pro W6,Hiragino Mincho Pro,serif";
//TLFマークアップ形式xmlからのデータ読み込み
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.dataFormat=URLLoaderDataFormat.TEXT;
xmlLoader.addEventListener(Event.COMPLETE, xmlLoad_complete);
xmlLoader.load(new URLRequest("tanka.xml"));
//読み込んだデータにbaseFormatを適用・表示し、トゥイーンを開始
function xmlLoad_complete(evt:Event):void {
tlfTxtF.tlfMarkup=xmlLoader.data;
var myTextFlow:TextFlow=tlfTxtF.textFlow;
myTextFlow.hostFormat=baseFmt;
myTextFlow.flowComposer.updateAllControllers();
lineTween(1);
}
//各列のテキストを覆う短冊型矩形をトゥイーン対象列(含空白列)分並べる
for (var i:uint=1; i<=lineNum; i++) {
var rec_mc:MovieClip = new MovieClip();
addChild(rec_mc);
rec_mc.name="rec_mc"+i;
rec_mc.x=tfx+(lineNum+1-i)*tf_w;
rec_mc.y=tfy;
recDraw(rec_mc);
}
//矩形描画関数
function recDraw(mc):void {
coverRec = new Shape();
var gr=coverRec.graphics;
gr.beginFill(0xffffff,1.0);
gr.drawRect(0,0,tf_w,tf_h);
gr.endFill();
mc.addChild(coverRec);
}
//矩形を順次縦方向に縮小して、テキストをだんだん表示する関数
function lineTween(n):void {
if (n<lineNum+1) {
var mc=MovieClip(getChildByName("rec_mc"+n));
mc.y=20+tf_h;
tw=new Tween(mc,"scaleY",None.easeOut,-1,0,2.5,true);
tw.addEventListener(TweenEvent.MOTION_FINISH,nextLine);
function nextLine():void {
n++;
lineTween(n);
}
}
} |
スクリプトの若干の説明 |
var lineHeight:Number=1.2
ラインハイト(列幅)が120%に設定されている(xml ファイル)。
baseFmt.blockProgression=BlockProgression.RL;
baseFmt.locale="ja";
TLFテキストフィールドの縦書、日本語を指定(2行目を指定しないと、列の左右中央に文字が配置されない)
なお、TLFテキストについては詳しく記述しているサイトがいくつかあるので、そちらを参照のこと
mc.y=20+tf_h;
tw=new Tween(mc,"scaleY",None.easeOut,-1,0,2.5,true);
短冊型矩形をテキストフィールドの最下部を起点に、scaleXを-1から0までトゥイーンさせると、短冊が上から下に向けて縮小し、下部に配置されているテキストが現れる
|
tanka.xml |
<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>
<p color='#777777' fontSize='18' lineHeight='120%'>
<span fontSize='30' color='#663300'>ラバウルへ</span>
<span fontSize='30'> </span>
磯小浦波静かにて戦いの<span fontSize='30'> </span>
<span fontSize='30' color='#006633'>南の島に</span>今立たんとす
<span fontSize='30'> </span>
明けやらぬ渚に高き爆音は<span fontSize='30'> </span>
わが便乗する<span fontSize='30' color='#000099'>陸軍輸送機</span>
<span fontSize='30'> </span>
ただ一機南を指して驀進する<span fontSize='30'> </span>
<span fontSize='30' color='#ffd700'>機銃二丁を</span>空に構えて
<span fontSize='30'> </span>
高空をわれは涼しく飛びきしが<span fontSize='30'> </span>
たちまち基地の<span fontSize='30' color='#ff6600'>灼熱に立つ</span>
</p>
</textFlow> |
(注) <span fontSize='30'> </span>
は、フォントサイズ30の空白スペース、空白行を置き、均一なサイズの列配列にしている |
|
|
HOME お勉強総リスト |