2010年11月21日 星期日

[AS3]StyleSheet與TextField - 將 StyleSheet 物件套用至含有 htmlText 屬性的文字欄位

var style:StyleSheet = new StyleSheet();建構一個樣式表物件
StyleSheet.setStyle(styleName:String, styleObject:Object):void
以指定的名稱,將新的樣式新增至樣式表物件。
TextField.styleSheet = StyleSheet Object;
將樣式表附加至文字欄位

  1. TextField文字欄位中不是純文字就是HTML文字。純文字的字串指定給TextField類別實體的text屬性;HTML文字的字串則指定給TextField類別實體的htmlText屬性。
  2. 以flash.text.StyleSheet類別來處理CSS宣告。new StyleSheet()建構StyleSheet物件。之後透過一組物件來定義樣式屬性及其值。呼叫StyleSheet.setStyle(對應的選擇器名稱字串, 樣式物件)方法。
  3. 將樣式表StyleSheet物件指定給文字欄位TextField類別實體的styleSheet屬性,將文字欄位以CSS樣式格式化。
  4. 含有樣式表的文字欄位無法再編輯。 若將文字欄位的 type 屬性設定為 TextFieldType.INPUT, StyleSheet會 套用到文字欄位的預設文字,但就無法再對內容進行編輯。 因此,若有輸入文字需求,則改用 TextFormat 類別,將樣式指定給輸入文字欄位。
  5. 程式碼重要順序→樣式屬性內容必須先設定,接著將樣式表套用至 TextField 物件,然後才能設定 htmlText 屬性,如此 CSS 樣式才能實際生效,表現在TextField的Html文字上。
  6. 下列 ActionScript API 無法在含有指定樣式表的文字欄位中使用:• TextField.replaceText() 方法• TextField.replaceSelectedText() 方法• TextField.defaultTextFormat 屬性• TextField.setTextFormat() 方法

SWF



//
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.StyleSheet;
//
var style:StyleSheet = new StyleSheet();
//
var styleObj_1:Object = new Object();
styleObj_1.color = "#ff0000";
styleObj_1.fontSize = 88;
style.setStyle(".red", styleObj_1);
//
var styleObj_2:Object = new Object();
styleObj_2.color = "#00ff00";
styleObj_2.fontSize = 66;
style.setStyle(".green", styleObj_2);
//
var styleObj_3:Object = new Object();
styleObj_3.color = "#0000ff";
styleObj_3.fontSize = 44;
style.setStyle(".blue", styleObj_3);
//
var tf:TextField = new TextField();
//
tf.styleSheet = style;
//
tf.htmlText = "< span class = 'red'>●RED< /span>< span class = 'green'>●GREEN< /span>
< span class = 'blue'>●BLUE< /span> text";
//
tf.x = 50;
tf.y = 8;
tf.width = 460;
//
tf.multiline = true;
tf.wordWrap = true;
tf.autoSize = TextFieldAutoSize.LEFT;
//

addChild(tf);
//style.clear();


Flash Player 支援原始 CSS1 規格 (www.w3.org/TR/REC-CSS1) 中屬性的子集。 請點擊下圖連結至Flash Help瀏覽所支援的「階層式樣式表」(CSS) 屬性和值,以及它們的對應 ActionScript 屬性名稱。


適用於 Adobe  Flash  Professional CS5 的 ActionScript  3.0 參考__flash.text.StyleSheet 類別
適用於 Adobe  Flash  Professional CS5 的 ActionScript  3.0 參考__flash.text.StyleSheet.setStyle()方法
適用於 Adobe Flash Professional CS5 的 ActionScript 3.0 參考__flash.text.TextField.styleSheet屬性

沒有留言: