テキストのフォーマット

TextFormat クラスを使用すると、様々なテキスト表示プロパティを設定して、TextField オブジェクト全体、または一部の範囲のテキストにそれらのプロパティを適用することができます。

次の例では、TextField オブジェクト全体に 1 つの TextFormat オブジェクトを適用し、その TextField オブジェクトに含まれるテキスト範囲に別の TextFormat オブジェクトを適用します。

var tf:TextField = new TextField(); 
tf.text = "Hello Hello"; 
 
var format1:TextFormat = new TextFormat(); 
format1.color = 0xFF0000; 
 
var format2:TextFormat = new TextFormat(); 
format2.font = "Courier"; 
 
tf.setTextFormat(format1); 
var startRange:uint = 6; 
tf.setTextFormat(format2, startRange); 
 
addChild(tf);

TextField.setTextFormat() メソッドは、既にテキストフィールドに表示されているテキストにのみ影響します。TextField のコンテンツが変化する場合、 TextField.setTextFormat() メソッドをアプリケーションからもう一度呼び出して、フォーマットを再適用しなければならないことがあります。また、TextField オブジェクトの defaultTextFormat プロパティを設定すると、ユーザー入力テキストに適用するフォーマットを指定することができます。

テキストフィールドには、プレーンテキストまたは HTML 形式のテキストを含めることができます。 プレーンテキストはインスタンスの text プロパティに格納し、HTML テキストは htmlText プロパティに格納します。

CSS スタイル宣言を使用すると、多数の異なるテキストフィールドに適用できるテキストスタイルを定義することができます。 CSS スタイル宣言は、アプリケーションコード内で作成することも、実行時に外部 CSS ファイルからロードすることもできます。

CSS スタイルの処理には flash.text.StyleSheet クラスを使用します。 StyleSheet クラスでは、一部の CSS プロパティに限り認識されます。 StyleSheet クラスでサポートされるスタイルプロパティの詳細な一覧については、『ActionScript 3.0 リファレンス』の flash.textStylesheet の項を参照してください。

次の例に示すように、StyleSheet オブジェクトを使用してコードで CSS を作成し、作成したスタイルを HTML テキストに適用することができます。

var style:StyleSheet = new StyleSheet(); 
 
var styleObj:Object = new Object(); 
styleObj.fontSize = "bold"; 
styleObj.color = "#FF0000"; 
style.setStyle(".darkRed", styleObj); 
 
var tf:TextField = new TextField(); 
tf.styleSheet = style; 
tf.htmlText = "<span class = 'darkRed'>Red</span> apple"; 
 
addChild(tf);

この例のコードでは、StyleSheet オブジェクトを作成した後、一連のスタイル宣言プロパティを保持する単純オブジェクトを作成します。 続いて、 StyleSheet.setStyle() メソッドを呼び出します。このメソッドによって、「.darkred」という名前の新しいスタイルがスタイルシートに追加されます。次に、StyleSheet オブジェクトを TextField の styleSheet プロパティに割り当てることにより、スタイル シートのフォーマットを適用します。

CSS スタイルを有効にするには、 htmlText プロパティが設定される前に、TextField オブジェクトにスタイルシートを適用する必要があります。

設計上、スタイルシートを含むテキストフィールドは編集できません。 入力テキストフィールドがあり、スタイルシートが割り当てられている場合、テキストフィールドにはスタイルシートのプロパティが表示されますが、ユーザーはテキストフィールドに新しいテキストを入力することはできません。また、スタイルシートが割り当てられたテキストフィールドで、次の ActionScript API を使用することはできません。

• TextField.replaceText() メソッド

• TextField.replaceSelectedText() メソッド

• TextField.defaultTextFormat プロパティ

• TextField.setTextFormat() メソッド

テキストフィールドにスタイルシートが割り当てられている場合に、後で TextField.styleSheet プロパティを null に設定すると、 TextField.text プロパティと TextField.htmlText プロパティの両方のコンテンツがタグと属性をそれぞれのコンテンツに追加し、以前に割り当てられたスタイルシートのフォーマットを組み込みます。元の htmlText プロパティを維持するには、スタイルシートを null に設定する前に、このプロパティを変数に保存します。

CSS を使用してフォーマットを適用する手法は、実行時に外部ファイルから CSS 情報をロードできる場合にはいっそう強力なものになります。 CSS データがアプリケーション自体の外部にある場合、ActionScript 3.0 のソースコードを変更しなくても、アプリケーションのテキストの視覚的なスタイルを変更することができます。 アプリケーションをデプロイした後、外部 CSS ファイルを変更することによってアプリケーションの外観を変更できます。このとき、アプリケーションの SWF ファイルを再度デプロイする必要はありません。

StyleSheet.parseCSS() メソッドは、CSS データが含まれているストリングを変換して、StyleSheet オブジェクトにスタイル宣言として格納します。次の例は、外部 CSS ファイルを読み取り、そのファイルに含まれるスタイル宣言を TextField オブジェクトに適用する方法を示しています。

まず、ロードする CSS ファイルの内容を示します。このファイルには example.css という名前を付けます。

p { 
    font-family: Times New Roman, Times, _serif; 
    font-size: 14; 
} 
 
h1 { 
    font-family: Arial, Helvetica, _sans; 
    font-size: 20; 
    font-weight: bold; 
} 
 
.bluetext { 
    color: #0000CC; 
}    

次に、example.css ファイルをロードして TextField のコンテンツにスタイルを適用するクラスの ActionScript コードを示します。

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLLoader; 
    import flash.net.URLRequest; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 
    import flash.text.TextFieldAutoSize; 
 
    public class CSSFormattingExample extends Sprite 
    { 
        var loader:URLLoader; 
        var field:TextField; 
        var exampleText:String = "<h1>This is a headline</h1>" +  
            "<p>This is a line of text. <span class='bluetext'>" + 
            "This line of text is colored blue.</span></p>"; 
         
        public function CSSFormattingExample():void 
        { 
            field = new TextField(); 
            field.width = 300; 
            field.autoSize = TextFieldAutoSize.LEFT; 
            field.wordWrap = true; 
            addChild(field); 
             
            var req:URLRequest = new URLRequest("example.css"); 
             
            loader = new URLLoader(); 
            loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); 
            loader.load(req); 
        } 
         
        public function onCSSFileLoaded(event:Event):void 
        { 
            var sheet:StyleSheet = new StyleSheet(); 
            sheet.parseCSS(loader.data); 
            field.styleSheet = sheet; 
            field.htmlText = exampleText; 
        } 
    } 
}

CSS データがロードされると、 onCSSFileLoaded() メソッドが実行され、 StyleSheet.parseCSS() メソッドが呼び出されて、スタイル宣言が StyleSheet オブジェクトに転送されます。

flash.text.TextField クラスの便利なメソッドは、 setTextFormat() メソッドです。 setTextFormat() を使用すると、ユーザー入力に応答する形でテキストフィールドの一部のコンテンツに特定のプロパティを割り当てることができます。例えば、特定の項目が入力必須であることをユーザーに通知する必要があるフォームや、ユーザーがテキストを部分的に選択したときにテキストフィールド内のテキストの一部の強調を変更する必要があるフォームで使用します。

次の例では、ユーザーがテキストフィールド myTextField をクリックすると一部の範囲の文字に対して TextField.setTextFormat() が使用され、このテキストフィールドの一部のコンテンツの外観が変更されます。

var myTextField:TextField = new TextField(); 
myTextField.text = "No matter where you click on this text field the TEXT IN ALL CAPS changes format."; 
myTextField.autoSize = TextFieldAutoSize.LEFT; 
addChild(myTextField); 
addEventListener(MouseEvent.CLICK, changeText); 
 
var myformat:TextFormat = new TextFormat(); 
myformat.color = 0xFF0000; 
myformat.size = 18; 
myformat.underline = true; 
 
function changeText(event:MouseEvent):void 
{ 
    myTextField.setTextFormat(myformat, 49, 65); 
}