GRAFZ.NET
一言:自分はいったい何がしたいんだろう。その謎が解けるまでとりあえずこのサイトの更新は続く・・・
開発ブログ
flash利用で手動の画質最適化
虫の動きをスクリプトで記述する

軽い気持ちで更新されるブログ
CS3へのアップグレード
JWW外変「Kiefer」公開します。

ダウンロード
JW_WIN外部変形Kiefer
JW_WIN外部変形FastMeasure
管理者からのお知らせ
4/30 サーバーダウンについて
4/16 このサイトを開設しました。

管理者プロフィール (-)
suda
26歳男
神奈川県生まれ
最近の趣味:ジョギング
職業:grafz.netという屋号でwebデザイン+プログラム制作してます。
一言:自分はいったい何がしたいんだろう。その謎が解けるまでとりあえずこのサイトの更新は続く・・・。
コンタクトは以下まで
suda@grafz.net
RSS
ブログをRSS配信してます。

© GRAFZ.NET 2008
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