あしたから本気出す
いろいろ工作して情報発信してみる。自作キーボードとか。
開発ブログ
自作キーボード「TypingTrigger-SDZERO」
自作スマートフォン緊急充電器
プログラマブルな自動化キーボード実装編
プログラマブルな自動化キーボード(プロトタイプ編)を作ってみる-後編
開発ブログをもっと見る
ブログなど
ブログはこちら
ダウンロード
JW_WIN外部変形Kiefer
JW_WIN外部変形FastMeasure
お知らせ
2010/10/1 ブログを新しくした
2009/9/4 twitter始めた
2009/7/14 サイトのタイトル変更した

管理者プロフィール (-)
suda 81年神奈川県生まれ
職業:GRAFZ.NETという屋号でプログラム制作してます。
一言:実用性を形にする。工作の日々。
コンタクトは以下までお願いします。感想、応援、苦情とか
RSS
ブログをRSS配信してます。


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