Professional Documents
Culture Documents
在開始這講之前,老師想先說明一些學習上的想法,這學期一開始時,老師所開
的書單,如果同學們認真看待的話,小正正那本書和我們所推蔫的教科書都是很
好的自修內容,老師認為,我們上課的內容,因為顧及時效性,無法非常仔細的
講解每一講背後所需的背景知識,但老師希望同學們能自發的學習並補上所缺的
部分,這一點是希望同學們能領會的。
好了,回歸正題,接下來我們想講的部份,是有關於如何在Flash中製作圖
文整合的網頁,這部份的內容,當然,若我們使用影片片段的方式也可作出圖文
整合的效果 1 ,但自從Flash MX 2004 之後,Flash另外提供了一個方法,可以讓
圖文整合在Flash中變的更簡單(當然,同學們可能會認為有些困難)
,那就是利
用在動態文字物件(dynamic text field) 裏所支援的HTML語法,加上可在HTML
語法中使用的階層式樣式表 (Cascading Style Sheet, CSS)及內嵌圖片(或SWF檔)
的功能,即可完成圖文整合網頁的目標;而利用此方法製作的網頁,外觀非常神
似用Dreamweaver製作的網頁。
在接下來,我們另外開啟一個portfolio.fla檔案,最終成果輸出成swf檔,再
利用上一講所教的動態載入的方法可直接嵌入主檔案.fla中。
1. 網站規格與圖層安排
1
同學們自行思考如何製作,用影片片段製作圖文的方法其實和一般的幕前排版軟體類似,優點
是可精確控制圖文所在位置,缺點則是必須整合較多的元件來製作,這部份之後有機會再詳細介
紹。
1
建立日期 2006/11/26
動態文字框
HTML
其中,由動態文字需命名實體名稱,我們亦可以了解到,其實動態文字與
影片片段一樣是物件的一種,而至於其對應的屬性與方法請參考小正正的
書第六章,這裏老師列出 Flash 文件中關於文字欄位(TextField)物件的說明:
(請仔細閱讀)
2
建立日期 2006/11/26
(ii). 另外,關於文字欄位的格式設定,在上述星號段落中,已解釋十分清楚,
在 這 裏 簡 單 說 明 , 動 態 文 字 的 格 式 設 定 依 Flash 發 展 順 序 為 先 使 用
TextFormat 再進一步進展到使用可使用部份 StyleSheet 及 HTML 語法。另
外,我們也可以在 HTML 格式之內,內嵌 GIF 及動態的 Flash。
2. 接下來,我們就來介紹如何用語法來達成上述圖文整合的任務。
a. 簡單講,接下來還是要使用與上一講所提到所謂物件導向程式設計(OOP)
的概念,本講中我們要使用另外兩個不同的物件來達成任務,分別是:
※ 值得注意的是,這裏,我們會先就此二物件如何載入外部資料的過程詳
加說明,至於外部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)
2
請參照第四講第三頁下半。
3
這裏的物件TextField.StyleSheet() 不需另外使用偵聽器,它本身就配置有onLoad的事件處理函
式。
3
建立日期 2006/11/26
(iv). 或許有同學會覺得有些奇怪,明明LoadVars物件portfolio_lv尚未建立,為何
(4)式可進行載入外部資料的動作?關於這點,其實是物件導向程式的一個
重要的特點,就是,在我們撰寫的程式中,雖然有撰寫的前後差別(行號
不同)
,但當Flash對程式進行編譯時(Ctrl+Enter)
,其實Flash對每一行語法
是一視同仁的,意思就是,(4)式的portfolio_lv事實上已被建構了 4 (雖然
語法在後面才寫出來)。
4
此即所謂『物件』之意,就好像我們要拿工具箱裏的工具,雖然拿出來使用的順序有先後(ex.
portfolio_ss先,portfolio_lv後),但事實上,每一個工具早就準備好在工具箱裏了。
4
建立日期 2006/11/26
c. 接下來我們來看外部資料的載入:
(i). 這個部分與前面原理相似,語法如下:
(iii). 順便,我們一併介紹主場景的按鈕事件,這部分的語法相信大家都已耳熟
能詳了吧!(按按鈕則動態載入分頁內容,其分屬於不同變數之圖文內容。)
5
建立日期 2006/11/26
6
建立日期 2006/11/26
(ii). 上表的語法的右半段為錨點標籤<a>的樣式規定,包括其各種狀態。另外,
關於其它 Flash 所支援的 HTML 標籤中 CSS 可加以使用的樣式則列表如下:
7
建立日期 2006/11/26
名稱,而其等號後面接的則是它對應的內容:
&動態文字物件變數名稱=變數內容
我們也發現一個資料檔中可放置任意數目的動態文字變數。
z 段落及內容指定:
<p class="portfolioTitle">龍捲風研究</p>
其中代表的含意為:
<段落 類別=主標題>主標題內文,</段落>
其中同學們要特別注意標籤的封閉問題,即<p>…</p>一定要兩兩對好。
z <br>代表換行,好用,但要注意行距會太寬。
z 圖片內嵌標籤的使用,如下例:
<img src="/image/currentPage.swf" align="right" width="328" height="199">
詳細用法在此列出 Flash 說明如下:
可別小看這個影像標籤的功能,請同學們仔細想想,它的功能可真不少哦!
至於可以怎麼用?完全看同學們的想像力囉!(老師暫且賣個關子)
3. 好,真是夠了,應該大功告成了吧!換同學們上場囉!下圖為整合至主網頁
的畫面。(頁面顯示為 portfolio1 的變數的內容)
8
建立日期 2006/11/26
另一個按鈕對應的內容(變數為 portfolio2)
That’s ALL~