第 27 章 網頁動畫大集合 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 27 章 網頁動畫大集合 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 27 章 網頁動畫大集合 著作權所有 © 旗標出版股份有限公司

2 本章提要 Flash 網站的產生過程 設定場景連結 背景音樂設定 使用者控制聲音播放與停止 設定網頁連結
製作光碟自動執行檔與全螢幕顯示動畫技巧 利用影片結構檢視器

3 Flash 網站的產生過程 前期作業 中期作業 後期作業

4 Flash 網站的產生過程 本章範例的製作流程如下：

5 前期作業 擬定光碟主題：我們定義本書附光碟的主題為：各章範例欣賞 / Flash 酷站連結。
蒐集相關資料：收集各章範例檔案, 與篩選欲推薦的網站。 規劃光碟內容：光碟內容規劃為三個部份。每日一站連結到 Macromedia 網站中的一個網頁, 這個網頁每天會介紹一個 Flash 網站；範例欣賞放置各章範例檔；酷站連結放置篩選後的 Flash 網站連結。

6 前期作業 繪製架構草圖：

7 前期作業 根據架構圖, 我們規劃出下列 3 個場景架構：

8 前期作業 企劃動畫腳本：場景敲定後, 我們便可開始構思與設計場景的內容。以下列出書附光碟的部份動畫腳本。

9 前期作業

10 中期作業 開始製作動畫：一切都準備好後, 便可以開始繪製每個場景的草圖, 並逐一開始製作動畫。
上傳與測試：動畫完成後, 便可將其發佈成 HTML 文件, 你可先行在本機上測試, 若沒問題, 再將 Flash 影片檔、影像檔、與 HTML 文件等所有檔案上傳至伺服器。

11 後期作業 最後你可以到各大搜尋引擎網站登錄推廣你的網站, 或在友站放置你的網站連結, 關於這部份的說明, 你可參考其他相關書籍, 以取得更詳細的資料。

12 設定場景連結 從主畫面場景連結到其他場景 本章的練習檔 從其他場景連結到主畫面

13 設定場景連結 我們要設定主畫面、範例欣賞及酷站連結 3 個場景間的連結, 下圖是 3 個場景間的連結關係：

14 從主畫面場景連結到其他場景 從主畫面場景連結到其他場景的關鍵是：當使用者按了範例欣賞按鈕後, 會先播放一段小紳士走到範例欣賞按鈕上的動畫, 接著播放一段範例欣賞轉場動畫, 最後才跳到範例欣賞場景。 請開啟 ch27.fla 範例檔的主畫面場景, 並點選轉場動畫圖層的影格 204, 我們來看一下如何加入跳到範例欣賞場景的 ActionScript。

15 從主畫面場景連結到其他場景

16 從主畫面場景連結到其他場景

17 從主畫面場景連結到其他場景 以上指令的意思是, 當動畫播放到影格 204 處時, 就會跳到範例欣賞場景的影格 1 處開始播放。至於按下酷站連結按鈕跳到酷站連結場景的指令, 其設定方法也相同：

18 從主畫面場景連結到其他場景

19 從主畫面場景連結到其他場景

20 本章的練習檔 由於本章的範例較為複雜, 因此我們在介紹時均以完成的 ch27.fla 來做說明, 若你需要親自練習, 可在每個部份開啟相對應的練習檔 (ch27-learn1.fla ~ ch27-learn7.fla) 來試試看。

21 從其他場景連結到主畫面 在範例欣賞場景與酷站連結場景的右下角各有一個回主畫面的按鈕, 我們要在此按鈕實體上設定跳回主畫面場景的 ActionScript。 我們以酷站連結場景為例說明設定方式 (可開啟 ch27-learn2.fla 練習檔來做練習)：

22 從其他場景連結到主畫面

23 從其他場景連結到主畫面

24 從其他場景連結到主畫面 上述程式的意思是：當使用者按了回主畫面按鈕放開後, 便跳回主畫面場景的等待按鈕影格標籤 (在轉場動畫圖層的影格 123) 處, 並停在該影格, 等待使用者做下一個動作。範例欣賞場景部份也參考此設定即可。

25 背景音樂設定 背景音樂介紹 主畫面場景聲音設定 其他場景與主畫面場景聲音銜接說明 Bmain 聲音檔的播放設定
Bsample 聲音檔的播放設定 Bmain 聲音檔的停止設定 其他場景與主畫面場景聲音銜接說明

26 背景音樂介紹 人物進場聲音檔：書附光碟的開場是一段人物進場的動畫, 搭配的是人物進場聲音檔。待主畫面內容都出現後, 人物進場音樂也正好結束, 動畫此時會停下來等待使用者按鈕。

27 背景音樂介紹 Bmain 聲音檔：Bmain 聲音檔是動畫在主畫面場景停下來等待使用者按鈕時, 一段不停播放的背景音樂。我們設置一個背景音樂圖層來放置此聲音檔。 Bsample 聲音檔：Bsample 聲音檔是範例欣賞及酷站連結場景的背景音樂。當主畫面場景開始播放轉場動畫時, 便開始播放此聲音檔。我們設置轉場音樂 1、轉場音樂 2 圖層分別放置這 2 個場景的聲音檔。

28 Bmain 聲音檔的播放設定 請你開啟 ch27-learn3.fla 練習檔, 並切換到主畫面場景。由於我們希望動畫會在主畫面場景的等待按鈕影格標籤處停止播放, 同時開始不斷重複播放 Bmain 聲音檔, 請做如下設定：

29 Bmain 聲音檔的播放設定

30 Bmain 聲音檔的播放設定 Bmain 聲音檔之所以選擇開始同步類型的原因有 3 個：
當我們將滑鼠指標指在主畫面場景的任一按鈕上時, 動畫會跳到該按鈕名稱圖層的影格 126~165 之間, 並顯示按鈕的名稱：

31 Bmain 聲音檔的播放設定 當滑鼠指標移出按鈕的範圍外時, 影片就會跳回等待按鈕影格標籤處。若將 Bmain 聲音檔的同步類型設定為事件, 則只要影片跳回等待按鈕影格標籤處, Bmain 聲音檔就會再播放一次。為確保同一時間只有一個 Bmain 聲音檔在播放, 我們將 Bmain 聲音檔的同步類型設定為開始, 以避免這種狀況發生。

32 Bmain 聲音檔的播放設定 當使用者按了主畫面場景的每日一站、旗標的家、Macromedia、捎信來按鈕實體時, 便會播放一小段小紳士沿著導引線走到按鈕上的動畫, 等小紳士到達該按鈕後, 影片也會跳回等待按鈕影格標籤處, 所以情況和第一個原因相同。 當影片從範例欣賞或酷站連結場景回到主畫面場景時, 同樣也會跳回等待按鈕影格標籤處, 所以原因同上。

33 Bsample 聲音檔的播放設定 在轉場動畫圖層的影格 200 及 222 處是轉場動畫開始播放的影格, 在此要加入 Bsample 聲音檔做為這兩個轉場動畫的背景音樂。且在轉場動畫播完跳到其他場景後, Bsample 聲音檔還要繼續播放, 做為範例欣賞和酷站連結場景的背景音樂。為了讓 Bsample 聲音檔持續播放, 其聲音設定如下：

34 Bsample 聲音檔的播放設定

35 Bmain 聲音檔的停止設定 為配合 Bsample 聲音檔的播放, 在背景音樂 1 圖層的影格 200 及 222 處 (也就是轉場動畫開始播放的影格), 我們設了讓 Bmain 聲音檔 (就是等待使用者按鈕時的背景音樂) 停止播放的聲音設定, 以免 2 個背景音樂互相干擾。

36 Bmain 聲音檔的停止設定

37 Bmain 聲音檔的停止設定 設定方法是, 先在背景音樂 1 圖層的影格 200 及 222 新增空白關鍵影格, 接著點選背景音樂 1 圖層的影格 200, 開啟屬性面板：

38 其他場景與主畫面場景聲音 銜接說明 範例欣賞與酷站連結場景的背景音樂是 Bsample 聲音檔, 當跳回主畫面場景的等待按鈕影格標籤處時, 就必須停止播放 Bsample 聲音檔, 以免跟 Bmain 聲音檔互相干擾。因此, 我們在主畫面場景轉場音樂 1 圖層的影格 123, 加入了讓 Bsample 聲音檔停止播放的設定：

39 其他場景與主畫面場景聲音 銜接說明

40 使用者控制聲音播放與停止 停止聲音設定 播放聲音設定

41 停止聲音設定 下面我們以酷站連結場景為例, 說明設定的方式, 請開啟 ch27-learn4.fla 檔, 並切換到酷站連結場景。
酷站連結場景播放到停止聲音 2 影格標籤處便會停止, 以等待使用者按鈕。而停止聲音播放的停止聲音按鈕也同時出現在關閉聲音圖層的停止聲音 2 影格標籤上, 讓使用者可以選擇是否要關閉背景音樂。

42 停止聲音設定

43 停止聲音設定 當使用者按下停止聲音按鈕, 影片會繼續播放 (因按鈕上設了繼續播放的 ActionScript), 到了影格 26 處 Bsample 聲音檔停止播放 (因影格 26 上設了停止播放 Bsample 聲音檔的設定), 動畫則停在影格 36 處 (因影格 36 上設了 stop () 指令) 等待使用者按鈕, 同時此格也出現了可開啟背景音樂的播放聲音鈕, 讓使用者可以再度開啟背景音樂。

44 停止聲音設定 在關閉聲音圖層影格 25 的停止聲音按鈕中, 要設定繼續播放動畫的 ActionScript：

45 停止聲音設定 而在背景音樂圖層的影格 26 處做如下的設定：

46 播放聲音設定 接續前面的說明, 我們知道當音樂關掉後, 動畫會停在影格 36, 並出現播放聲音鈕：

47 播放聲音設定 此時, 若使用者按下播放聲音按鈕, 影片會從影格 36 處開始播放, 到影格 37 時, Bsample 聲音檔開始播放 (因我們在背景音樂圖層的影格 37 處設定播放 Bsample 聲音檔), 到影格 43 時, 會跳到停止聲音 2 影格標籤處 (因影格 43 設定了跳到停止聲音 2 影格標籤處的 ActionScript), 此時使用者又可以按停止聲音按鈕來關閉背景音樂了。

48 播放聲音設定

49 播放聲音設定

50 設定網頁連結 相對路徑的設定方式 連結磁碟中的網頁 連結 Internet 上的網站 傳送電子郵件 關於相對路徑
html 文件的相對路徑設定 連結磁碟中檔案的設定 連結磁碟中的網頁 連結 Internet 上的網站 傳送電子郵件

51 關於相對路徑 相對路徑是網頁檔案連結最常使用的路徑表示方法, 它可以避免使用者在不同的電腦中因使用絕對路徑而發生連結失敗的錯誤。舉例來說, 如果你在「C:\」下的 link.html 這個檔中加入一個連結, 指向「C:\Flashhtml\movie1.html」, 此時,「C:\Flashhtml\movie1.html」這個寫法就是絕對路徑。

52 關於相對路徑 但由於 link.html 檔案搬到其他人的電腦中或是上傳到伺服器中時, 位置不一定會在 C:\ , 如此一來, 連結便會失敗, 因此我們建議你在使用連結時, 最好能採用相對路徑來表示。 在 Flash 中相對路徑的表示方法, 又因檔案發佈後的格式分為 2 種：一是 html 文件, 另一種則是 exe 放映檔格式。

53 html 文件的相對路徑設定 舉例來說, 在本書附光碟中, 所有發佈成 html 檔案的範例都放在光碟根目錄下的 html 資料夾中, 而本章範例則是放置在範例 \ch27 資料夾中, 如果我們希望在 ch27.html 範例欣賞場景中按下 ch11 的章名能夠開啟 ch11.html 來欣賞, 其相對的路徑關係如下：

54 html 文 件 的 相 對 路 徑 設 定

55 html 文件的相對路徑設定 也就是說, 在 ch27.html 文件中按下 ch11 章名文字, 必須往上二層後再開啟 html 資料夾才能找到 ch11.html 文件, 因此相對路徑的表示方法就是「../../html/ch11.html」。 「/」是開啟 html 文件的路徑資料夾表示方法, 1 個「..」表示往上一層。若是在同一層資料夾中, 只要直接輸入要開啟的檔名即可。

56 連結磁碟中檔案的設定 上述方法適用於在瀏覽器中指定開啟 html 文件, 若你想在 Flash 放映檔中開啟磁碟機中的檔案, 則必須使用指定磁碟機路徑的方式。在書附光碟中的操作介面使用的就是連結磁碟機檔案的方法：

57 連結磁碟中檔案的設定

58 連結磁碟中檔案的設定 因此, 我們在瀏覽光碟文字上設定的連結是「..\html\index.html」, 意思是按下此文字連結, 開啟光碟根目錄下 html 資料夾中的 index.html；「..\」是指光碟機根目錄, 而磁碟路徑資料夾是以「\」(反斜線) 來表示。

59 連結磁碟中的網頁 請開啟 ch27-learn5.fla 檔, 並切換到範例欣賞場景, 我們直接以第 11 章的範例文字來試看看：

60 連結磁碟中的網頁 由於本例是將 ch27.fla 發佈成 html 文件, 並透過瀏覽器來欣賞, 所以我們使用「../../html/ch11.html」這樣的相對路徑, 表示開啟的是與影片檔同一磁碟中上二層目錄 html 資料夾中的 ch11.html 文件。

61 連結 Internet 上的網站 連結 Internet 上的網站方法比較簡單, 我們在本書第 21 章的範例中已經介紹過, 所以我們就以酷站連結場景中的一個連結為例, 簡單做個說明。請開啟 ch27-learn6.fla 練習檔：

62 連結 Internet 上的網站

63 傳送電子郵件 使用 getURL 指令還可以開啟電子郵件程式, 傳送電子郵件到指定的電子郵件信箱。
在主畫面場景中, 按下捎信來按鈕, 就會播放小紳士走到捎信來按鈕的動畫, 接著就會開啟電子郵件程式讓你撰寫電子郵件傳送到旗標公司的電子郵件信箱。 請開啟 ch27-learn7.fla 練習檔：

64 傳送電子郵件

65 製作光碟自動執行檔與 全螢幕顯示動畫技巧 撰寫光碟自動執行檔 讓動畫以全螢幕方式顯示 使用 exec 命令的要點

66 撰寫光碟自動執行檔 請用記事本開啟書附光碟中的 autorun.inf 檔, 你只要使用任何一套文字編輯軟體, 仿照下圖輸入自動執行的執行檔名, 然後存成 autorun.inf。燒錄光碟時, 將此檔放在光碟根目錄即可。

67 讓動畫以全螢幕方式顯示 想要動畫以全螢幕方式顯示, 必須使用fscommand 指令來辦到。fscommand 的功能是控制獨立播放程式 (包括放映檔), 還可以傳送訊息給網頁中的 JavaScript 程式。我們先來認識一下 fscommand 可接受的的命令與參數：

68 讓動畫以全螢幕方式顯示

69 讓動畫以全螢幕方式顯示

70 使用 exec 命令的要點 在 Flash 中使用 exec 命令來執行 .exe 執行檔時, 須注意以下 2 點：
Flash 動畫必須發佈成放映檔 (.exe), 且要被執行的 .exe 執行檔要放置在與放映檔同一目錄下的 fscommand 資料夾中。 雖然被執行的執行檔放在 fscommand 資料夾中, 不過只需填入執行檔名即可, 不用加填路徑。

71 讓動畫以全螢幕方式顯示 想讓動畫全螢幕播放, 只要在影格 1 寫入 "fscommand ( "fullscreen" , "true" )；" 這一行指令即可。以 ch27.fla 為例, 可以新增一個圖層, 並在影格 1 寫入這行指令：

72 利用影片結構檢視器 影片結構檢視器簡介 修改影片結構檢視器中的元件 影片結構檢視器的編輯與管理功能 修改文字 修改其他元件
前往位置與前往元件定義 從元件庫尋找

73 利用影片結構檢視器 「影片結構檢視器 (Movie Explorer)」可說是 Flash 影片的管理工具, 不但可以讓你檢視動畫文件內容, 還能選取文件中的物件加以修改。它的操作與功能並不複雜, 但對於維護與修改一整個 Flash 動畫檔 (.fla) 卻有很大的幫助。接著我們就以本章範例為例, 來說明影片結構檢視器的使用方法。 請開啟 ch27.fla 檔, 再執行『視窗 / 其他面板 / 影片結構檢視器』命令, 開啟影片結構檢視器。

74 影片結構檢視器簡介 若要顯示影片中的文字、元件、ActionScript、匯入的檔案、影格與圖層, 可按下顯示項目右邊的按鈕。若要自訂要顯示的項目，請按一下自訂要顯示的項目按鈕。

75 影片結構檢視器簡介

76 影片結構檢視器簡介 按下 鈕, 可以開啟影片結構檢視器設定交談窗, 供你 選擇 想要顯示的 物件：

77 影片結構檢視器簡介

78 修改影片結構檢視器中的元件 再怎麼複雜的動畫文件, 只要開啟影片結構檢視器瀏覽就能一清二楚。若想要修改其中的元件, 可以如下操作 (若要在影片結構檢視器中進行修改, 記得先解除物件所在圖層的鎖定)：

79 修改文字

80 修改其他元件 至於其他元件, 只要選取該元件後雙按, Flash 便會自動顯示該元件, 讓你直接進行修改。

81 影片結構檢視器的編輯與管理 功能 按下 鈕可以顯示影片結構檢視器的選項選單, 其中提供了一些編輯、管理的功能。 下面我們介紹幾種常用的功能：

82 輯與管理功能 影片結構檢視器的編

83 影片結構檢視器的編輯與管理 功能 此跳到含有在影片結構檢視器的「元件定義」區域中已經選取元件的實體的場景 輸入所選取元件的新名稱
影片結構檢視器的編輯與管理 功能 此跳到含有在影片結構檢視器的「元件定義」區域中已經選取元件的實體的場景 輸入所選取元件的新名稱 讓你在舞台中編輯所選取的元件 讓你在新視窗中編輯選取的元件 顯示影片中的元素, 依照不同的場景分開 顯示所有與元件相關的元素

84 影片結構檢視器的 編輯與管理功能 會複製選取的文字到剪貼簿上。你可以將文字貼到外部文字編輯器上, 進行拼字檢查或其他編輯。
影片結構檢視器的 編輯與管理功能 會複製選取的文字到剪貼簿上。你可以將文字貼到外部文字編輯器上, 進行拼字檢查或其他編輯。 「剪下」、「複製」、「貼上」和「清除」會在選取的元素上執行這些功能。修改顯示清單中的項目時, 也會修改影片中對應的元素

85 影片結構檢視器的 編輯與管理功能 展開選取元素的瀏覽樹狀結構 收合選取元素的瀏覽樹狀結構 收合瀏覽樹狀結構中不包含選取元素的節點
影片結構檢視器的 編輯與管理功能 展開選取元素的瀏覽樹狀結構 收合選取元素的瀏覽樹狀結構 收合瀏覽樹狀結構中不包含選取元素的節點 列印目前顯示在影片結構檢視器中的階層式顯示清單

86 前往位置與前往元件定義 前往位置會跳到文件中所選取的圖層、場景或影格上, 而前往元件定義會跳到在影片結構檢視器的影片元件區域中所選取元件的元件定義上。 元件定義會列出所有與該元件有關的檔案。

87 前往位置與前往元件定義

88 前往位置與前往元件定義

89 從元件庫尋找 從元件庫尋找功能是在元件庫中找出所選的元件, 因此, 我們只要在影片結構檢視器中選取元件, 再執行此命令就可以開啟對應的元件庫, 並找到該元件進行編輯 (若尚未顯示元件庫面板, Flash 會自動幫你開啟)。

90 從元件庫尋找