Wda-lecture05
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Wda-lecture05 as PDF for free.
More details
- Words: 447
- Pages: 9
建立日期 2006/11/26
第五講 用動態文字及CSS作圖文整合
親民視傳系助理教授 陳弘正
在開始這講之前，老師想先說明一些學習上的想法，這學期一開始時，老師所開 的書單，如果同學們認真看待的話，小正正那本書和我們所推蔫的教科書都是很 好的自修內容，老師認為，我們上課的內容，因為顧及時效性，無法非常仔細的 講解每一講背後所需的背景知識，但老師希望同學們能自發的學習並補上所缺的 部分，這一點是希望同學們能領會的。 好了，回歸正題，接下來我們想講的部份，是有關於如何在Flash中製作圖 文整合的網頁，這部份的內容，當然，若我們使用影片片段的方式也可作出圖文 整合的效果 1 ，但自從Flash MX 2004 之後，Flash另外提供了一個方法，可以讓 圖文整合在Flash中變的更簡單（當然，同學們可能會認為有些困難） ，那就是利 用在動態文字物件(dynamic text field) 裏所支援的HTML語法，加上可在HTML 語法中使用的階層式樣式表 (Cascading Style Sheet, CSS)及內嵌圖片（或SWF檔） 的功能，即可完成圖文整合網頁的目標；而利用此方法製作的網頁，外觀非常神 似用Dreamweaver製作的網頁。 在接下來，我們另外開啟一個portfolio.fla檔案，最終成果輸出成swf檔，再 利用上一講所教的動態載入的方法可直接嵌入主檔案.fla中。 1. 網站規格與圖層安排 a. 這裏我們製作的分頁非常簡單，只有三個圖層：action, content, button，其中， button 圖層中含有三個按鈕，分別指向不同的頁面內容（這一點我們待會會 用熟悉的按鈕事件來加以呼叫載入）； b. 另外，最重要的是，在 content 圖層中，我們加入了一個動態文字框，其實 體名稱為 portfolio_txt，如下圖：
1
同學們自行思考如何製作，用影片片段製作圖文的方法其實和一般的幕前排版軟體類似，優點 是可精確控制圖文所在位置，缺點則是必須整合較多的元件來製作，這部份之後有機會再詳細介 紹。 1
建立日期 2006/11/26
動態文字框
HTML
其中，由動態文字需命名實體名稱，我們亦可以了解到，其實動態文字與 影片片段一樣是物件的一種，而至於其對應的屬性與方法請參考小正正的 書第六章，這裏老師列出 Flash 文件中關於文字欄位(TextField)物件的說明： （請仔細閱讀）
(i). 文字欄位可分為三種：靜態文字、動態文字及輸入文字。後兩者可由 Flash 執行階段從語法、外部檔案或使用者輸入來完成，以動態文字較為常用。 2
建立日期 2006/11/26
(ii). 另外，關於文字欄位的格式設定，在上述星號段落中，已解釋十分清楚， 在 這 裏 簡 單 說 明 ， 動 態 文 字 的 格 式 設 定 依 Flash 發 展 順 序 為 先 使 用 TextFormat 再進一步進展到使用可使用部份 StyleSheet 及 HTML 語法。另 外，我們也可以在 HTML 格式之內，內嵌 GIF 及動態的 Flash。 2. 接下來，我們就來介紹如何用語法來達成上述圖文整合的任務。 a. 簡單講，接下來還是要使用與上一講所提到所謂物件導向程式設計(OOP) 的概念，本講中我們要使用另外兩個不同的物件來達成任務，分別是： (i). 使用 TextField.StyleSheet()物件來載入外部階層樣式表檔案(external CSS)。 (ii). 使用 LoadVars()物件來載入作為資料來源的外部文字檔(external text)。 ※ 值得注意的是，這裏，我們會先就此二物件如何載入外部資料的過程詳 加說明，至於外部CSS檔(mystyles.css)與外部資料檔(portfolio.txt)的語法及內 容我們放在這後面再另外說明。 b. 首先我們介紹外部CSS的載入語法： 這裏的TextField.StyleSheet() 物件的使用方法，跟上一講我們所提的物件使 用方法類似 2，一樣要經過三個主要的步驟： （一）物件類別建構(object class constructor)（二）載入資料（這裏是外部CSS檔）（三）onLoad事件處理函 式 3 ，分述如下： (i). 物件類別建構 var portfolio_ss:TextField.StyleSheet = new TextField.StyleSheet();
(1)
(ii). 載入外部 CSS 檔 portfolio_ss.load("/styles/mystyles.css");
(2)
這裏我們將外部 CSS 檔 mystyles.css 存放在獨立的目錄 styles 中。(關於 mystyles.css 的撰寫，容稍後再介紹。) (iii). 接下來講比較麻煩的部份，就是 onLoad 事件處理函式，程式碼如下：
2
請參照第四講第三頁下半。 這裏的物件TextField.StyleSheet() 不需另外使用偵聽器，它本身就配置有onLoad的事件處理函 式。 3
3
建立日期 2006/11/26
請注意，這裏的 onLoad 函式中有一個『引數 (input parameter)』”success”， 這個引數的作用是，當外部 CSS 檔成功的載入 portfolio_ss 物件後，success 值會傳入”1”，反之，若載入失敗則傳入”0”。 當載入成功時，會進行下列兩行語法，首先是將 portfolio_ss 的內容（就 是 mystyles.css） 指派給動態文字物件 portfolio_txt 的樣式表屬性.styleSheet； portfolio_txt.styleSheet = portfolio_ss;
(3)
其次，則會告知 LoadVars()物件 portfolio_lv，可以對外部文字檔 portfolio.txt 進行載入的動作了。 portfolio_lv.load("/text/portfolio.txt");
(4)
當然，若載入失敗，則顯示『error loading CSS!』作為訊息。 (iv). 或許有同學會覺得有些奇怪，明明LoadVars物件portfolio_lv尚未建立，為何 (4)式可進行載入外部資料的動作？關於這點，其實是物件導向程式的一個 重要的特點，就是，在我們撰寫的程式中，雖然有撰寫的前後差別（行號 不同） ，但當Flash對程式進行編譯時（Ctrl+Enter） ，其實Flash對每一行語法 是一視同仁的，意思就是，（4）式的portfolio_lv事實上已被建構了 4 （雖然 語法在後面才寫出來）。 (v). 最後，附上 Flash 文件中關於 TextField.StyleSheet 物件的說明
4
此即所謂『物件』之意，就好像我們要拿工具箱裏的工具，雖然拿出來使用的順序有先後（ex. portfolio_ss先，portfolio_lv後），但事實上，每一個工具早就準備好在工具箱裏了。 4
建立日期 2006/11/26
c. 接下來我們來看外部資料的載入： (i). 這個部分與前面原理相似，語法如下：
第 17 行是 LoadVars 物件類別建構，第 18-24 行則是 portfolio_lv 的 onLoad 事 件 函 式 ， 與 前 面 一 樣 ， 此 函 式 有 一 引 數 success ， 表 明 外 部 資 料 檔 portfolio.txt 是否成功載入 portfolio_lv；若是，則 portfolio_txt 其中已載入的 變 數 （ 裏 面 有 全 部 圖 文 的 內 容 ） portfolio1 則 會 顯 示 在 動 態 文 字 物 件 portfolio_txt 裏面（藉由其屬性.htmlText）；若否，則顯示『error getting HTML!』的訊息。 (ii). LoadVars()物件是 AS 2.0 中新增的功能，未來有機會我們會介紹更多它的應 用 ， 它 目 前 主 要 是 廣 泛 的 應 用 在 網 站 通 訊 中 (Flash remoting, Flash Communication Server 等) (iii). 順便，我們一併介紹主場景的按鈕事件，這部分的語法相信大家都已耳熟 能詳了吧！（按按鈕則動態載入分頁內容，其分屬於不同變數之圖文內容。） 5
建立日期 2006/11/26
d. 關於外部 CSS 的語法： (i). 關於 Flash 中的 HTML+CSS 的模式，其實只支援 CSS 1.0 的部份語法，可 以說，只是陽春版的 CSS，但以基本圖文整合頁面來說已足夠矣！請同學 參考 Flash 說明檔，其中有非常完整的說明。
請注意，上文中所題到所謂的『選取器(selector)』其實就是 CSS 中最核心 的概念，在一份 CSS 檔案中，其實就是許多組關於不同選取器之樣式的組 合，以本講中所用的選取器，我們定義了三個，包括 portfolioTitle、 portfolioSubTitle 及 portfolioText 分別定義了主標題、副標題及本文的樣 式，每個選取器中所可使用的樣式規定請參考上一頁關於 CSS 支援的規格 說明。
6
建立日期 2006/11/26
(ii). 上表的語法的右半段為錨點標籤的樣式規定，包括其各種狀態。另外， 關於其它 Flash 所支援的 HTML 標籤中 CSS 可加以使用的樣式則列表如下：
其中，p 為段落(paragraph)樣式，body 為整體樣式，li 為項目符號樣式。 (iii). 最後，我們終於要打開最麻煩的一個檔案了！請用 Dreamweaver 開啟 portfolio.txt，我們發現裏面密密麻麻的一堆文字，好不嚇人！別慌，我們這 就一一說明： z 先找出&portfolio1, &portfolio2 及&portfolio3 三組字，＆定義了變數的 7
建立日期 2006/11/26
名稱，而其等號後面接的則是它對應的內容： &動態文字物件變數名稱＝變數內容 我們也發現一個資料檔中可放置任意數目的動態文字變數。 z 段落及內容指定：
類別＝主標題>主標題內文，
其中同學們要特別注意標籤的封閉問題，即
代表換行，好用，但要注意行距會太寬。 z 圖片內嵌標籤的使用，如下例：
詳細用法在此列出 Flash 說明如下：
可別小看這個影像標籤的功能，請同學們仔細想想，它的功能可真不少哦！ 至於可以怎麼用？完全看同學們的想像力囉！（老師暫且賣個關子） 3. 好，真是夠了，應該大功告成了吧！換同學們上場囉！下圖為整合至主網頁 的畫面。(頁面顯示為 portfolio1 的變數的內容)
8
建立日期 2006/11/26
另一個按鈕對應的內容（變數為 portfolio2）
That’s ALL~ 9
第五講 用動態文字及CSS作圖文整合
親民視傳系助理教授 陳弘正
在開始這講之前，老師想先說明一些學習上的想法，這學期一開始時，老師所開 的書單，如果同學們認真看待的話，小正正那本書和我們所推蔫的教科書都是很 好的自修內容，老師認為，我們上課的內容，因為顧及時效性，無法非常仔細的 講解每一講背後所需的背景知識，但老師希望同學們能自發的學習並補上所缺的 部分，這一點是希望同學們能領會的。 好了，回歸正題，接下來我們想講的部份，是有關於如何在Flash中製作圖 文整合的網頁，這部份的內容，當然，若我們使用影片片段的方式也可作出圖文 整合的效果 1 ，但自從Flash MX 2004 之後，Flash另外提供了一個方法，可以讓 圖文整合在Flash中變的更簡單（當然，同學們可能會認為有些困難） ，那就是利 用在動態文字物件(dynamic text field) 裏所支援的HTML語法，加上可在HTML 語法中使用的階層式樣式表 (Cascading Style Sheet, CSS)及內嵌圖片（或SWF檔） 的功能，即可完成圖文整合網頁的目標；而利用此方法製作的網頁，外觀非常神 似用Dreamweaver製作的網頁。 在接下來，我們另外開啟一個portfolio.fla檔案，最終成果輸出成swf檔，再 利用上一講所教的動態載入的方法可直接嵌入主檔案.fla中。 1. 網站規格與圖層安排 a. 這裏我們製作的分頁非常簡單，只有三個圖層：action, content, button，其中， button 圖層中含有三個按鈕，分別指向不同的頁面內容（這一點我們待會會 用熟悉的按鈕事件來加以呼叫載入）； b. 另外，最重要的是，在 content 圖層中，我們加入了一個動態文字框，其實 體名稱為 portfolio_txt，如下圖：
1
同學們自行思考如何製作，用影片片段製作圖文的方法其實和一般的幕前排版軟體類似，優點 是可精確控制圖文所在位置，缺點則是必須整合較多的元件來製作，這部份之後有機會再詳細介 紹。 1
建立日期 2006/11/26
動態文字框
HTML
其中，由動態文字需命名實體名稱，我們亦可以了解到，其實動態文字與 影片片段一樣是物件的一種，而至於其對應的屬性與方法請參考小正正的 書第六章，這裏老師列出 Flash 文件中關於文字欄位(TextField)物件的說明： （請仔細閱讀）
(i). 文字欄位可分為三種：靜態文字、動態文字及輸入文字。後兩者可由 Flash 執行階段從語法、外部檔案或使用者輸入來完成，以動態文字較為常用。 2
建立日期 2006/11/26
(ii). 另外，關於文字欄位的格式設定，在上述星號段落中，已解釋十分清楚， 在 這 裏 簡 單 說 明 ， 動 態 文 字 的 格 式 設 定 依 Flash 發 展 順 序 為 先 使 用 TextFormat 再進一步進展到使用可使用部份 StyleSheet 及 HTML 語法。另 外，我們也可以在 HTML 格式之內，內嵌 GIF 及動態的 Flash。 2. 接下來，我們就來介紹如何用語法來達成上述圖文整合的任務。 a. 簡單講，接下來還是要使用與上一講所提到所謂物件導向程式設計(OOP) 的概念，本講中我們要使用另外兩個不同的物件來達成任務，分別是： (i). 使用 TextField.StyleSheet()物件來載入外部階層樣式表檔案(external CSS)。 (ii). 使用 LoadVars()物件來載入作為資料來源的外部文字檔(external text)。 ※ 值得注意的是，這裏，我們會先就此二物件如何載入外部資料的過程詳 加說明，至於外部CSS檔(mystyles.css)與外部資料檔(portfolio.txt)的語法及內 容我們放在這後面再另外說明。 b. 首先我們介紹外部CSS的載入語法： 這裏的TextField.StyleSheet() 物件的使用方法，跟上一講我們所提的物件使 用方法類似 2，一樣要經過三個主要的步驟： （一）物件類別建構(object class constructor)（二）載入資料（這裏是外部CSS檔）（三）onLoad事件處理函 式 3 ，分述如下： (i). 物件類別建構 var portfolio_ss:TextField.StyleSheet = new TextField.StyleSheet();
(1)
(ii). 載入外部 CSS 檔 portfolio_ss.load("/styles/mystyles.css");
(2)
這裏我們將外部 CSS 檔 mystyles.css 存放在獨立的目錄 styles 中。(關於 mystyles.css 的撰寫，容稍後再介紹。) (iii). 接下來講比較麻煩的部份，就是 onLoad 事件處理函式，程式碼如下：
2
請參照第四講第三頁下半。 這裏的物件TextField.StyleSheet() 不需另外使用偵聽器，它本身就配置有onLoad的事件處理函 式。 3
3
建立日期 2006/11/26
請注意，這裏的 onLoad 函式中有一個『引數 (input parameter)』”success”， 這個引數的作用是，當外部 CSS 檔成功的載入 portfolio_ss 物件後，success 值會傳入”1”，反之，若載入失敗則傳入”0”。 當載入成功時，會進行下列兩行語法，首先是將 portfolio_ss 的內容（就 是 mystyles.css） 指派給動態文字物件 portfolio_txt 的樣式表屬性.styleSheet； portfolio_txt.styleSheet = portfolio_ss;
(3)
其次，則會告知 LoadVars()物件 portfolio_lv，可以對外部文字檔 portfolio.txt 進行載入的動作了。 portfolio_lv.load("/text/portfolio.txt");
(4)
當然，若載入失敗，則顯示『error loading CSS!』作為訊息。 (iv). 或許有同學會覺得有些奇怪，明明LoadVars物件portfolio_lv尚未建立，為何 (4)式可進行載入外部資料的動作？關於這點，其實是物件導向程式的一個 重要的特點，就是，在我們撰寫的程式中，雖然有撰寫的前後差別（行號 不同） ，但當Flash對程式進行編譯時（Ctrl+Enter） ，其實Flash對每一行語法 是一視同仁的，意思就是，（4）式的portfolio_lv事實上已被建構了 4 （雖然 語法在後面才寫出來）。 (v). 最後，附上 Flash 文件中關於 TextField.StyleSheet 物件的說明
4
此即所謂『物件』之意，就好像我們要拿工具箱裏的工具，雖然拿出來使用的順序有先後（ex. portfolio_ss先，portfolio_lv後），但事實上，每一個工具早就準備好在工具箱裏了。 4
建立日期 2006/11/26
c. 接下來我們來看外部資料的載入： (i). 這個部分與前面原理相似，語法如下：
第 17 行是 LoadVars 物件類別建構，第 18-24 行則是 portfolio_lv 的 onLoad 事 件 函 式 ， 與 前 面 一 樣 ， 此 函 式 有 一 引 數 success ， 表 明 外 部 資 料 檔 portfolio.txt 是否成功載入 portfolio_lv；若是，則 portfolio_txt 其中已載入的 變 數 （ 裏 面 有 全 部 圖 文 的 內 容 ） portfolio1 則 會 顯 示 在 動 態 文 字 物 件 portfolio_txt 裏面（藉由其屬性.htmlText）；若否，則顯示『error getting HTML!』的訊息。 (ii). LoadVars()物件是 AS 2.0 中新增的功能，未來有機會我們會介紹更多它的應 用 ， 它 目 前 主 要 是 廣 泛 的 應 用 在 網 站 通 訊 中 (Flash remoting, Flash Communication Server 等) (iii). 順便，我們一併介紹主場景的按鈕事件，這部分的語法相信大家都已耳熟 能詳了吧！（按按鈕則動態載入分頁內容，其分屬於不同變數之圖文內容。） 5
建立日期 2006/11/26
d. 關於外部 CSS 的語法： (i). 關於 Flash 中的 HTML+CSS 的模式，其實只支援 CSS 1.0 的部份語法，可 以說，只是陽春版的 CSS，但以基本圖文整合頁面來說已足夠矣！請同學 參考 Flash 說明檔，其中有非常完整的說明。
請注意，上文中所題到所謂的『選取器(selector)』其實就是 CSS 中最核心 的概念，在一份 CSS 檔案中，其實就是許多組關於不同選取器之樣式的組 合，以本講中所用的選取器，我們定義了三個，包括 portfolioTitle、 portfolioSubTitle 及 portfolioText 分別定義了主標題、副標題及本文的樣 式，每個選取器中所可使用的樣式規定請參考上一頁關於 CSS 支援的規格 說明。
6
建立日期 2006/11/26
(ii). 上表的語法的右半段為錨點標籤的樣式規定，包括其各種狀態。另外， 關於其它 Flash 所支援的 HTML 標籤中 CSS 可加以使用的樣式則列表如下：
其中，p 為段落(paragraph)樣式，body 為整體樣式，li 為項目符號樣式。 (iii). 最後，我們終於要打開最麻煩的一個檔案了！請用 Dreamweaver 開啟 portfolio.txt，我們發現裏面密密麻麻的一堆文字，好不嚇人！別慌，我們這 就一一說明： z 先找出&portfolio1, &portfolio2 及&portfolio3 三組字，＆定義了變數的 7
建立日期 2006/11/26
名稱，而其等號後面接的則是它對應的內容： &動態文字物件變數名稱＝變數內容 我們也發現一個資料檔中可放置任意數目的動態文字變數。 z 段落及內容指定：
龍捲風研究
其中代表的含意為： <段落類別＝主標題>主標題內文，
其中同學們要特別注意標籤的封閉問題，即
…
一定要兩兩對好。 z代表換行，好用，但要注意行距會太寬。 z 圖片內嵌標籤的使用，如下例：
詳細用法在此列出 Flash 說明如下：可別小看這個影像標籤的功能，請同學們仔細想想，它的功能可真不少哦！ 至於可以怎麼用？完全看同學們的想像力囉！（老師暫且賣個關子） 3. 好，真是夠了，應該大功告成了吧！換同學們上場囉！下圖為整合至主網頁 的畫面。(頁面顯示為 portfolio1 的變數的內容)
8
建立日期 2006/11/26
另一個按鈕對應的內容（變數為 portfolio2）
That’s ALL~ 9