あしたから本気出す工作 TextFirldでCSS+TextFormat合わせ技

4月30日
TextFirldでCSS+TextFormat合わせ技

FlashのTextfieldにおける文字の表現は、TextFormatを使用すればおおよそ大概のことはできますが、文章中にハイパーテキストを埋め込みたい場合や、部分的に文字サイズを大きくしたい場合はスタイルシートを使用したほうがよいと思います。ところがFlashは全てのスタイルをサポートしているわけではないです（とういかむしろほんの一部のみ）。そこで直面するのが行間の問題。

例えば、line-heightをスタイルで指定してもFlashは表現してくれません。じゃあどうしようか、というわけで、スタイルシートを適用したTextFieldに、leading(行間)を設定したTextFormatを何も考えずセットしてみました。

すると、スタイルシートによるスタイルがきちんと表現されているうえ、TextFormatで指定した行間がちゃんと再現されている！これぞCSSとTextFormatの合わせ技（というのは言い過ぎ）？

早くActionScript3.0やれーってな最近の状況だけど、とりあえずActionScript2.0でのソースです。

this.createTextField("tfTest",0,10,10,300,500);
this.tfTest.html = true;
this.tfTest.multiline = true;
this.tfTest.wordWrap = true;

var oTft:TextFormat = new TextFormat();
this.oTft.leading = 10;
this.tfTest.setNewTextFormat(this.oTft);

var styleObj:TextField.StyleSheet = new TextField.StyleSheet();
var owner:MovieClip = this;
styleObj.onLoad = function(success:Boolean) {
  if (success)owner.StyleOnLoad();
}

function StyleOnLoad(){
  this.tfTest.styleSheet = this.styleObj;
  this.tfTest.htmlText = "<span class='small'><span class='big'>
  大きい文字</span>\n小さい文字\n小さい文字</span>";
}

styleObj.load("style.css");

1-4行目：TextField生成のための記述。タグを使用してスタイルを指定したいのでhtmlをtrueにします。
6行目：TextFormatのオブジェクトを生成して、
7行目：行間を10ピクセルに設定。そして、
8行目：はじめに作成したTextFieldにTextFormatをセットします。
10行目：スタイルシートのオブジェクトを生成します。
11行目：（後述）
12行目：スタイルシートは外部ファイルを読み込むようにしますが、読み込みが完了したときの動作を、
13行目：ここに記述します。onLoadハンドラ内の記述が複雑にならないように、処理の内容はハンドラの外に関数を作ってそこに記述するようにしました。11行目のownerは、onLoadハンドラの中からハンドラの外にアクセスするために用意しました。
16-20行目：スタイルシートのファイルの読み込みが完了したときに実行される関数。TextFieldのstyleSheetプロパティにスタイルシートオブジェクト（の参照）を代入して、htmlTextにタグを使用したテキストを代入します。
22行目：実際にスタイルシートのファイルを読み始めます。

そして上のスクリプトの中で読み込んでいるスタイルシートのファイルが以下。(style.css)

.big{
  color:#000000;
  font-size:17px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight:bold;
}
.small{
  color:#888888;
  font-size:11px;
  font-family: Arial, Helvetica, sans-serif;
}

ご参考になれば嬉しいです。m( __ __ )m

twitterでつぶやき中