格式化文字

您可以使用 TextFormat 類別設定數種不同的文字顯示屬性，並將它們套用至 TextField 物件的整個內容，或是套用至文字範圍。

下列範例會將一個 TextFormat 物件套用至整個 TextField 物件，而將第二個 TextFormat 物件套用至該 TextField 物件內的文字範圍：

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 檔載入。

flash.text.StyleSheet 類別可處理 CSS 樣式。StyleSheet 類別可辨識的 CSS 屬性集合有限。如需 StyleSheet 類別所支援樣式屬性的詳細清單，請參閱「Adobe® Flash® Professional CS5 的 ActionScript® 3.0 參考」中的 flash.textStylesheet 項目。

如下例所示，您可以透過您的程式碼來建立 CSS，並使用 StyleSheet 物件將這些樣式套用至 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 樣式生效，您必須先將樣式表套用至 TextField 物件，然後才能設定 htmlText 屬性。

依據設計，您無法編輯含有様式表的文字欄位。如果您擁有輸入文字欄位，並在其中指定様式表，則文字欄位會顯示様式表的屬性，但是文字欄位不允許使用者在其中輸入新的文字。而且，您無法在含有指定様式表的文字欄位中使用下列 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()，您可以將特定屬性指定給文字欄位某部分的內容，以回應使用者輸入 (例如提醒使用者必須填寫特定項目的表單)，或是在使用者選取部分文字時，變更文字欄位內所強調的文字子區段。

下列範例會在字元範圍上使用 TextField.setTextFormat()，讓使用者按一下文字欄位時變更 myTextField 部分內容的外觀：

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); 
}