Pex Textbook 1.1.0 documentation

テキストを着色する

«  画像の差し込み/置換を行う   ::   Contents   ::   MovieClip の表示を消す  »

テキストを着色する

本項ではテキストの着色について案内します。

通常の FlashLite 1.1 ではテキストフィールド全体を1つの色で着色する事しか出来ませんが、 Pexの機能を使うとテキストの一部分だけに着色する事ができます。

setVariable を用いた着色指定

以下は、” こんにちは 世界のみなさん !!” の「世界のみなさん」に赤色をつける場合の具体的な方法です。

まず、 enableStyleText オプションを有効にしてください。

{ enableStyleText: true }

つぎに 表示したい文字列と着色の指定を以下の様に行います。

api.setVariable(
    '変数を設定する階層',
    'ActionScript変数名',
    'こんにちは {{"text": "世界のみなさん", "color": "#FF0000" }} !!'
);

着色したい文字列部分のみ {{ }} で囲い、”text” : “着色する文字列”, “color” : “カラーコード(カラー名, 短縮系可能)”という形式で具体的な値を指定します。

なお、swf 内では、変数名と同じ名前でテキストフィールドを配置しておくと、変数の内容がそのままテキストとして表示されます。 詳しくは fla ファイルの内容を確認してください。

具体的なコード例

var pex = new Pex("hoge.swf","domID" , { enableStyleText: true });
var api = pex.getAPI();
api.ready(function() {
  var text = 'ふつうのテキスト {{ "text" : "着色するテキスト", "color": "red"}} ふつうのテキスト'
  api.setVariable("/", "var1", text);)
}

サンプル例

下記サンプルでは普通のテキスト挿入と、着色時のテキスト挿入を比較して見る事ができます。

_images/coloring_text.jpg

動作サンプル: coloring_text_sample.html

fla ファイル: coloring_text.fla

«  画像の差し込み/置換を行う   ::   Contents   ::   MovieClip の表示を消す  »