flashMX2004一個新的功能就是能載入外部的CSS檔案並使之應用到flash文本, 現在有一個新的類(類?因為新的ActionScript2是基於類的指令碼語言):TextField.StyleSheet class,就是這個類的幾個方法使我們能象給HTML定義CSS一樣來格式化flash文本,比如字型大小,顏色,位置等等。以後我們要改變flash文本的樣式就只要修改外部的CSS檔案而不必再到FLA檔案中修改了。
在開始之前需要確定你安裝了flashMX2004並懂點HTML的知識,這應該基本上都做得到吧,OK~預備……開始~
首先建立一個CSS檔案,你可以用DWMX2004也可以用其他文本編輯工具:.textTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #993300;
text-align: center;
}
.textContent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
儲存檔案並命名為externalCSS.css,接著建立一個flash文檔,從Components面板裡拖(或雙擊)一個TextArea組件到情境,
並給組件命名為“myText”:
TextArea組件的高和寬根據你文本的多少來確定,並確保其HTML參數為true:
接下來就要寫AS了,選中在時間軸第一幀,按快速鍵“F9”,彈出Action面板:
// 建立樣式表對象
var myCss = new TextField.StyleSheet();
// CSS檔案位置
var cssURL = "externalCSS.css";
// 定義文字框組件的內容,這個隨你.
var textStr:String = "<p class='textTitle'>許魏 -- 一天</p>
<span class='textContent'>
清晨到夜晚 世界不停的旋轉 寒冬已走遠 春天帶來無盡溫暖
我站在這裡 靜靜感覺和你 走過的歲月 陣陣清風
</span>";
// 載入外部CSS檔案並判斷是否載入成功
myCss.load(cssURL);
myCss.onLoad = function(suc) {
if (suc) {
// 如果載入成功,設定文字框內容並應用載入進來的CSS
myText.styleSheet = myCss;
myText.text = textStr;
}
};
上面這段AS我就不再解釋,裡面的注釋寫的很清楚,需要說明的是定義文本字串的時候用到了兩個HTML標籤:<p>和<span>,作用就是為flash文本定義CSS,這就是我為什麼前面提到需要一點HTML知識的原因。OK,儲存flash到externalCSS.css檔案的目錄,Ctrl+Enter,是不是文字效果和CSS檔案中定義的一樣?呵呵,這麼簡單。
你也可以使用TextField.StyleSheet class 這個類的setStyle()方法建立CSS,還是以上面為例:
var myCSS= new TextField.StyleSheet();
myCSS.setStyle("textTitle",
{ font-family:'Verdana, Arial, Helvetica, sans-serif',
font-size:'12px',
font-weight:'bold',
color:'#993300',
text-align:'center'}
);
myCSS.setStyle("textContent",
{ font-family:'Arial, Helvetica, sans-serif',
font-size:'12px',
color:'#000000'}
);
var textStr:String = "<p class='textTitle'>許魏 -- 一天</p>
<span class='textContent'>
清晨到夜晚 世界不停的旋轉 寒冬已走遠 春天帶來無盡溫暖
我站在這裡 靜靜感覺和你 走過的歲月 陣陣清風
掠過我的身體 它將我喚醒 靜觀著所有的悲喜 都熔近燦爛夕陽裡</span>";
myText.styleSheet = myCSS;
myText.text = textStr;
這段代碼和上面載入外部CSS檔案的效果是一樣的。
附圖:[flash支援的CSS1.0屬性值]