Microsoft Word - flash_css.doc

Size: px

Start display at page:

Download "Microsoft Word - flash_css.doc"

宾镁富
6 years ago
Views:

使用階層式樣式表格式化 Flash 文字文趙英傑 http://swf.com.

1 使用階層式樣式表格式化 Flash 文字文趙英傑 ( 本文摘錄自 Flash MX 2004 中文版動畫網頁設計寶典一書第十章) 階層式樣式表 (Cascading Style Sheet, 以下簡稱 CSS 樣式表 ) 是一群控制網頁內容外觀的格式規則集合, 讓您重新定義 HTML 的標記屬性, 或者選擇性地套用給特定元素例如, 下圖是採用 CSS 樣式格式化文字的結果 : 第一行段落使用標楷體字形所有 <a> 超連結標記都會自動顯示底線當游標滑入超連結時, 超連結文字將轉變為橙色無底線上圖的樣式都是筆者自行定義的使用 CSS 樣式格式化欄位文字的大致步驟如 1

2 下 : 1. 使用文字編輯器或者 Dreamweaver 之類的網頁編輯器, 建立 CSS 檔案 2. 在 Flash 影片中, 透過 TextField.StyleSheet 類別匯入外部的 CSS 檔 3. 將匯入的 CSS 樣式設定給文字欄位的 styles 屬性註 : 關於使用 Dreamweaver 建立 CSS 樣式表的方法, 請參閱筆者的 Dreamweaver MX 2004 網頁設計寶典一書您也可以在 ActionScript 程式中直接定義 CSS 樣式, 但是, 把 CSS 樣式存在外部檔案, 可以讓所有相關的 SWF 影片以及 HTML 網頁共用相同的樣式定義, 如下圖所示建立 CSS 樣式表我們先來練習如何使用記事本軟體, 重新定義 <p> 標記的樣式, 再解說 CSS 的語法規則假設我們要將所有 <p> 標記的文字設定為標楷體橙色 18 點大小,CSS 樣式表可以這麼寫 : p { font-family: 標楷體, sans-serif; } font-size:12px; color: #FF3300; 在 CSS 樣式表的術語中, 被重新定義規則的 HTML 標記稱為判斷規則 (selector, 也有人將它翻譯成選擇子或選擇器 ), 本例中的判斷規則就是 p 樣式 2

3 主體的屬性和設定值用大括弧圍起來 ; 每個屬性之間則用分號區隔 : 判斷規則 ( 標記名稱 ) { 屬性名稱 1 : 屬性值 ; 屬性名稱 2 : 屬性值 ; } 關於 Flash 所支援的 CSS 屬性, 請參閱下一節介紹在上面的 font-family( 字體 ) 屬性中, 筆者指定了標楷體和 sans-serif 兩個值 ( 中間用逗號 ) 隔開, 它的意思是, 預設採用標楷體顯示, 如果用戶端沒有安裝這個字體, 就以系統預設的非裝飾字 (sans-serif) 替代替 Flash 的文字欄位套用 CSS 樣式的詳細操作步驟, 留待下文建立 ActionScript 的樣式表物件一節說明我們先來看看當 Flash 的文字欄位套用了這個樣式之後, 會有什麼改變 : 3

4 Flash 支援的 CSS 屬性當前,Flash 僅支援 CSS1 規格 ( 參閱的子集, 如下表所示 Flash 並不支援所有 CSS1 規格的屬性, 因此, 在網頁上 CSS 樣式可以指定標記元素的背景色 ( 和圖片 ) 把超連結的底線改成虛線等樣式,Flash 並不支援屬性名稱說明 text-align 設定文字對齊, 可能值包括 left( 齊左 ) center( 居中 ) 和 right ( 齊右 ) font-size 設定字體大小, 僅支援像素 (px) 和點 (pt) 單位 text-decoration 設定文字裝飾, 可能值包括 underline( 底線 ) 和 none( 無 ) margin-right 設定右邊留白, 僅支援像素 (px) 和點 (pt) 單位 font-weight 設定字體粗細, 可能值包括 normal( 一般 ) 和 bold( 粗體 ) font-style 設定文字樣式, 可能值包括 normal( 一般 ) 和 italic( 斜體 ) text-indent 設定文字縮排, 僅支援像素 (px) 和點 (pt) 單位 font-family 以逗號區隔的選用字體清單, 依序列出首選以及替用的字體 color 設定文字顏色, 僅支援 16 進位顏色值不支持用色彩的名稱 ( 如 :red 或 blue) 指定顏色 display 設定是否以及如何呈現指定的元素 Flash 支援下列 3 種屬性值 : none: 不顯示元素 inline: 該元素將和前後元素顯示在同一行 block: 該元素的前後將被加上斷行效果, 和前後元素顯示在不同行建立 CSS 樣式類別藉由重新定義 HTML 標記, 雖然可以改變整個 HTML 內容的標記樣式, 不過, 當您想要讓某個 <p> 段落文字和其他的段落有著不太一樣的樣式時, 這種方法就不適用了 CSS 提供另一種自定樣式的方法, 能讓您先設定好 CSS 樣式規則, 然後再將它套用給需要的 HTML 元素在 CSS 的術語中, 自訂樣式被稱為類別 (Class), 判斷規則的名字以句點 (.) 開始, 後面跟著您自定的樣式類別名稱例如, 假設筆者想要定義一個名叫 booktitle 的樣式類別, 設定採用 18 點大小 4

5 橙色的標楷體,CSS 樣式表可以這麼寫 :.booktitle { font-family: 標楷體, sans-serif; } font-size:12px; color: #FF3300; 底下是設定樣式類別的規則 : 類別名稱前面要加上句號 (.) 類別名稱可以是任意長度的英文和數位的組合, 但是最好不要用數字開頭, 而且名稱中間不能有空格或標點符號為了避免混淆, 類別的名稱最好不要和 HTML 標記名稱相同, 例如 P, BR, H1 等等, 都不是恰當的名稱套用自定類別樣式時, 必須在標記的 class 屬性指定樣式的類別名稱 ( 參閱下圖 ) 我們先來看看當 Flash 的文字欄位套用了這個樣式之後, 會有什麼改變 : 5

建立 ActionScript 的樣式表物件 ActionScript 中的 TextField.StyleSheet 類別代表 CSS 樣式表物件如果您觀察動作面板左邊的動作工具箱窗格, 您將發現 StyleSheet 類別位於 TextField 類別底下, 也就是 ActionScript 2.

6 建立 ActionScript 的樣式表物件 ActionScript 中的 TextField.StyleSheet 類別代表 CSS 樣式表物件如果您觀察動作面板左邊的動作工具箱窗格, 您將發現 StyleSheet 類別位於 TextField 類別底下, 也就是 ActionScript 2.0 類別影片 TextFiled( 文字欄位 ) StyleSheet( 樣式表 ) 控制 CSS 樣式的 StyleSheet 類別使用 TextField.StyleSheet 類別裡的任何方法之前, 必須先在程式當中宣告一個該類別的物件假設我們要建立一個名為 my_css 的類別物件, 程式要寫成 : var my_css = new TextField.StyleSheet(); 如此,my_css 將具備所有操作樣式表的方法和屬性載入外部 CSS 檔 TextField.StyleSheet 類別的 load() 方法能載入外部的 CSS 檔執行 load() 方法之後, 我們可以透過樣式表物件的 onload 事件處理常式, 判斷 CSS 檔案是否已完成載入底下, 我們就以一個實際的範例, 說明從 Flash 影片載入外部 CSS 檔, 並將它套用在文字欄位的方法 : 1 使用記事本軟體或其他文字編輯器, 輸入底下的 CSS 內容 : 6

7 2. 將 CSS 檔命名成 mystyle.css 儲存 3. 回到 Flash 軟體, 開啟新的動畫檔 4. 使用文字工具, 在舞台上拖曳出一個文字框接著開啟屬性檢測器, 將欄位設定成動態多行, 並啟動 HTML 功能, 實體名稱設定為 LCD_txt 7

8 5 按一下圖層面版底下的鈕, 新增一個圖層, 並將新的圖層改名為 actions 6 點選 actions 圖層的第一個關鍵影格, 然後按一下 F9 功能鍵開啟動作面板, 並輸入下列程式 : var my_css = new TextField.StyleSheet(); var body:string = "<p class='headline'> 電腦 + 積木 = 發明 </p><br><p> 我們若想替未來的分子工程師創造完美的遊戲場, 電腦樂高 (<a href=' MindStorms</a>) 無疑是最佳的選擇 </p><br><p> 這段文字取自 <span class= booktitle > 遊習世紀 </span> 一書第 143 頁, 台灣大塊文化出版 </p>"; 7. 繼續在同一個影格輸入底下的程式 : 1. my_css.load ("mystyle.css"); 2. my_css.onload = function (status) { 3. if (status) { 4. // 指定欄位的 CSS 樣式 5. LCD_txt.styleSheet = my_css; 6. // 指定欄位的 HTML 內容 7. LCD_txt.htmlText = body; 8. } else { 9. LCD_txt.text = 無法載入外部樣式表 ; 10. } 11. }; StyleSheet 物件的 onload 事件會在 load() 方法指定的檔案載入完畢時, 自動被觸發因此, 我們可以在這個事件處理常式中, 執行套用載入樣式的程式當 onload 被觸發時,Flash 會自動傳入一個代表載入是否成功的參數, 筆者將此參數命名為 status 如果載入成功 (status 的值為 true), 第 4 到第 7 行的程式將被執行 ; 反之,LCD_txt 欄位將呈現無法載入外部樣式表的訊息請留意上述的程式執行順序 : 一定要在設定文字欄位內容之前, 指定 CSS 樣式如果您把第 5 和第 7 行的程式對調,HTML 文字將無法呈現出 CSS 所設定的樣式 8

9 8. 按一下 Ctrl 和 S 鍵, 把檔案儲存到包含.css 的相同資料夾 9. 按一下 Ctrl 和 Enter 鍵測試影片, 您將能在舞台上看到如下圖的畫面 : 如果舞台上欄位顯示的是無法載入外部樣式表, 請確認 Flash 影片和 mystyle.css 檔是否位於相同資料夾, 以及程式指定載入的 CSS 檔案名稱是否正確 9

投影片 1

投影片 1 Introduction to CSS Cascading Style Sheets 網頁設計 / 林金祥 Webpage Design/ by Chin-Hsiang Lin 網頁設計概念 java, asp: CSS: 特殊功能式樣設計 HTML: 文字圖像內容 Webpage Design/ by Chin-Hsiang Lin 2 CSS:Fly! My Webpage! CSS: Cascading