第 2 章 實作第一部 Flash 動畫－手繪風格網站.

Presentation on theme: "第 2 章 實作第一部 Flash 動畫－手繪風格網站."— Presentation transcript:

1 第 2 章 實作第一部 Flash 動畫－手繪風格網站

2 本堂課重點提要 2-1 使用繪圖工具建立動畫場景 2-2 建立與編輯漸層色及透明效果 2-3 元件、實體與元件庫的應用
2-4 設定濾鏡及轉換效果 2-5 建立文字 2-6 用移動補間動畫建立動態背景 2-7 應用導引線製作飛舞的螢火蟲 2-8 將動畫發佈為網頁

3 2-1 使用繪圖工具建立動畫場景 開啟一份新的 Flash 文件時, 在預設的情況下您看到的都是完全空白的舞台。我們要使用 Flash 的各種繪圖工具, 在舞台中建立動畫場景。這一堂課要教您以簡單的幾何造型來組合變化出不同的圖形, 並加入文字和動畫, 就可以完成一個完整且精緻的 Flash 動畫網頁了。

4 使用繪圖工具建立動畫場景 設定文件屬性 認識幾何繪圖工具 用矩形工具繪製地板 用自由變形工具 調整大小 用橢圓形工具繪製欄杆

5 設定文件屬性 進入 Flash 的主畫面後, 請執行『檔案/新增』命令 (或從歡迎螢幕中按下新增區塊的 Flash 檔案 (ActionScript 3.0) 項目), 建立一份新文件。Flash 預設的舞台尺寸是 550×400 像素, 背景色為白色, 在製作前, 請先將文件屬性修改為我們想要的設定。 請執行『修改/文件』命令, 或雙按時間軸面板上的 , 開啟文件屬性交談窗：

6 設定文件屬性

7 認識幾何繪圖工具 Flash 的幾何繪圖工具包括矩形工具 和線段工具 , 其中矩形工具圖示的右下角有個小三角形,表示在 按鈕上按住左鈕不放, 就會開啟其它幾何繪圖工具的選單, 從中選取就可以切換工具。

8 認識幾何繪圖工具 除了線段工具 只能調整筆畫顏色 外, 其餘的幾何繪圖工具則可分別設定筆畫顏色 和填色顏色 , 或設定為只有筆畫顏色或只有填色顏色。

9 用矩形工具繪製地板 接著就來應用各種繪圖工具開始繪製動畫的場景, 我們預計在空白的舞台上建立一個公園的場景, 其中會包含地板、欄杆、樹叢和路燈等圖形。首先來繪製公園的地板。 請在圖層 1 上雙按滑鼠, 將圖層名稱重新命名為 "地板"。然後點選工具箱的矩形工具 , 設定筆畫顏色 和填色顏色 ：

10 用矩形工具繪製地板

11 用矩形工具繪製地板 在舞台上按住左鈕拉曳出一個大小如下圖的矩形, 稍後再調整位置：

12 用矩形工具繪製地板 使用選取工具 點選矩形, 把矩形拉曳到舞台下方, 就完成地板的繪製：

13 用矩形工具繪製地板

14 用自由變形工具 調整大小 如果繪製的矩形太大或太小, 可以使用工具箱的自由變形工具 選取矩形,矩形四周會出現控點, 拉曳控點就可以調整大小, 不需要再重新繪製：

15 用橢圓形工具繪製欄杆 接下來要在地板上面繪製欄杆, 不過公園裡的欄杆當然不會只有一個, 所以我們會先畫好一個之後, 利用複製的方式產生數個欄杆圖形, 排列成一整排。 為避免移動到剛剛畫好的地板, 請先鎖定地板圖層, 然後按下圖層名稱下方的 鈕新增圖層, 先命名為 "欄杆", 再拉曳到地板圖層的下面。

16 用橢圓形工具繪製欄杆 請使用橢圓形工具 , 在屬性面板將筆畫顏色設定為黃色 (#FFFF00), 我們先畫出一個圓形, 然後切割掉下半部變成半圓形：

17 用橢圓形工具繪製欄杆

18 用橢圓形工具繪製欄杆 使用選取工具 選取圓形的下半部, 按 Delete 鍵刪除下半部, 就會形成欄杆的半圓形了：

19 用橢圓形工具繪製欄杆 繼續以選取工具 選取半圓形, 然後在半圓形上按右鈕執行『轉換成元件』命令, 把圖形加到元件庫, 然後複製這個圖形排列成一整列：

20 用橢圓形工具繪製欄杆

21 用橢圓形工具繪製欄杆 用選取工具 把欄杆拉曳到地板左上方, 然後按住 Ctrl 鍵 (Windows) / 鍵 (Mac) 把欄杆往右拉曳 (此時指標會呈 狀), 就可以複製出第2 個欄杆。請依照同樣的方式繼續往右複製欄杆,並且如下圖所示大致排好位置, 我們等一下再來對齊：

22 用橢圓形工具繪製欄杆

23 用橢圓形工具繪製欄杆 用選取工具 選取所有的欄杆, 然後開啟對齊面板 (執行『視窗/對齊』命令),先按下面板中的對齊下邊緣鈕 , 讓欄杆呈一直線對齊, 再按下以水平中心平均分散鈕 , 調整左右的位置, 就可以把欄杆排列整齊了：

24 用橢圓形工具繪製欄杆 進行到這裡我們已經完成地板和欄杆的繪製工作, 您也已經學會幾何工具、選取工具的使用方式, 以及設定顏色的技巧。提醒您別忘記要執行『檔案/儲存檔案』命令將目前的進度儲存起來, 接下來我們會繼續應用各種繪圖工具並且依照動畫的需要, 加入漸層、光暈等效果, 製作出完整的場景。

25 2-2 建立與編輯漸層色及透明效果 我們現在已經製作好欄杆了, 不過目前的欄杆看起來只是個平面的圖像, 沒有什麼立體感, 因此我們再將欄杆的顏色修改為漸層色, 並且加入反光和陰影, 讓畫面顯得更精緻。 設定漸層色 用橢圓形工具及鋼筆工具繪製草叢

26 設定漸層色 我們已經把欄杆加入元件庫了, 所以不必逐一修改每個舞台上的欄杆, 只要修改欄杆元件的設定就可以了。請接續先前的範例或開啟範例檔案 02-ex01.fla, 繼續下列的練習。 使用選取工具 雙按舞台上的任一欄杆, 就可以進入欄杆元件的元件編輯模式：

27 設定漸層色 使用選取工具 選取欄杆, 然後開啟顏色面板 (執行『視窗/顏色』命令), 設定漸層色的樣式：

28 設定漸層色 接著利用漸層指標來設定漸層色的顏色變化, 設定完成後, 舞台上所有的欄杆都會一起變為設定的漸層色：

29 設定漸層色 繼續在欄杆元件編輯模式中建立一個新圖層, 選擇筆刷工具 , 填色顏色設定為白色 (#FFFFFF)、不透明度 50%, 在如圖的位置塗抹, 讓欄杆有金屬反光的效果：

30 設定漸層色

31 設定漸層色 接著用筆刷工具 , 將填色顏色設定為深灰色 (#666666)、Alpha 30%, 在欄杆的重疊處畫上深灰色 (#666666), 增加欄杆的立體感：

32 設定漸層色 到此就將欄杆的漸層色設定好了, 請按下場景 1 回到舞台編輯區, 看看整體的效果如何：

33 用橢圓形工具及鋼筆工具繪製草叢 接下來我們來畫欄杆後面的草叢, 要使用的是橢圓形工具 和鋼筆工具 。您可以接續上個範例, 或是利用範例檔案 02-ex02.fla 來練習。 請建立新圖層命名為 "草叢", 拉曳到欄杆圖層下方。點選橢圓形工具 , 填色顏色設定為綠色 # (因稍後要設定漸層色, 此處可先任意設定), 筆畫顏色設定為無 , 然後如下圖繪製多個大小、形狀略有差異的圓形：

34 用橢圓形工具及鋼筆工具繪製草叢

35 用橢圓形工具及鋼筆工具繪製草叢 接著用選取工具 如圖一一調整圓形的位置, 把圓形都連接起來。因為圓形的顏色都相同, 當重疊後就會自動黏合：

36 用橢圓形工具及鋼筆工具繪製草叢 選取鋼筆工具 , 先任意設定筆畫顏色不要與剛才畫的草叢顏色 (#006600)相同即可, 我們在此設為黃色 (#FFCC33), 然後逐一設定錨點, 建立一個矩形線段與圓形連接：

37 用橢圓形工具及鋼筆工具繪製草叢 使用油漆桶工具 , 將填色顏色設為與草叢相同的綠色 #006600, 在黃線範圍內填滿。然後使用選取工具 , 一一點選線段, 按 Delete 鍵刪除掉線段。刪除黃線後, 矩形就會跟圓形黏合起來, 就完成草叢的繪製了：

38 用橢圓形工具及鋼筆工具繪製草叢

39 用橢圓形工具及鋼筆工具繪製草叢 目前製作好的草叢寬度還不夠, 我們使用選取工具 選取草叢, 按住 Ctrl 鍵 (Windows) / 鍵 (Mac) 來複製, 讓草叢的寬度延伸到舞台的左右兩側：

40 用橢圓形工具及鋼筆工具繪製草叢 為了讓草叢看起來更精緻, 我們將草叢也設定漸層和透明效果。請先用選取工具選取草叢, 然後開啟顏色面板, 如下設定漸層色樣式：

41 用橢圓形工具及鋼筆工具繪製草叢 使用漸層變形工具 調整漸層的方向, 讓較淺的綠色在上面、較深的綠色在下面：

42 用橢圓形工具及鋼筆工具繪製草叢 設定好漸層色之後, 用選取工具 選取草叢, 執行『轉換成元件』命令, 然後按住 Ctrl 鍵 (Windows) / 鍵 (Mac) 複製出第 2 個草叢, 選取複製出來的草叢, 執行『修改/變形/水平翻轉』命令, 讓兩個草叢的位置有些差異,然後調整一下草叢的位置, 就完成草叢的製作了：

43 用橢圓形工具及鋼筆工具繪製草叢

44 2-3 元件、實體與元件庫的應用 先前的繪製工作中, 我們把圖形畫好後, 會將圖形建立為「元件」, 再繼續編輯動畫內容。在動畫的製作中, 像這樣應用「元件」的做法, 可省下許多重複製作的時間, 是您一定要學會的技巧。請看看下列與元件相關的說明。 認識元件和實體 認識元件庫 建立新元件

45 認識元件和實體 在 Flash 製作動畫時, 我們可以將會重複使用到的物件, 製作成元件存放在動畫文件的元件庫中, 當您需要使用該元件時, 便可自元件庫將它拉曳出來使用。此時, 從元件庫中被放入舞台編輯區中進行編輯的, 便是該元件的實體。 在編輯區中的每個實體都是獨立個體, 你可以任意輯、更改它的屬性, 並不會影響到相同元件的其它實體。但如果進入元件的編輯模式進行修改, 則所有的實體也會同時更新, 例如上一節我們將欄杆元件設定為漸層填色之後, 舞台上所有的欄杆也都會一併修改好。

46 認識元件庫 所有建立好的元件, 都會儲存在元件庫面板中。元件庫面板是存放元件、點陣圖、聲音、視訊、組件等物件的工具箱, 也可以在此進行新增、複製、 編輯元件等 操作。

47 建立新元件 之前我們都是先繪製好圖形後, 再把圖形轉換為元件, 除了這個方式外, 我們也可以直接在元件庫中建立新元件, 再從元件庫中把元件拉曳到舞台上編輯、使用。接著我們就來練習第二種方法建立元件, 繪製動畫場景中的路燈, 請接續上個範例, 或是開啟範例檔案 02-ex03.fla。 執行『插入/新增元件』命令, 請如圖設定好元件名稱和類型後按下確定鈕就會直接進入元件編輯模式。請點選基本矩形工具 (位於矩形工具選單中) 在顏色面板設定漸層色彩, 先繪製好路燈的燈柱：

48 建立新元件

49 建立新元件

50 建立新元件 使用相同的漸層色設定, 繼續繪製路燈, 請選擇多邊星型工具 , 按下屬性面板的選項鈕, 開啟工具設定交談窗如下設定。然後繪製一個矩形, 並且使用自由變形工具 將矩形拉曳成如圖的菱形。

51 建立新元件

52 建立新元件 使用選取工具 分別在菱形上下兩端拉曳出一個三角範圍, 再按下 Delete 鍵刪除兩端的尖角, 然後利用自由變形工具 , 把菱形的外觀變得更細長：

53 建立新元件 使用直線工具 , 筆畫顏色可以任意設定,繪製一條直線劃過菱形中央, 然後使用選取工具 靠近線段往下拉曳 (指標會呈現 狀), 線段就會呈現圓弧形：

54 建立新元件 被線段劃過的菱形會被分割為上下兩個部份, 請用選取工具 選取上半部, 然後按一下 ↑ 方向鍵往上移動, 再把線段刪除：

55 建立新元件 然後使用漸層變形工具 , 將上下兩部份的菱形分別調整為如圖的漸層色方向。調整完成後, 再用選取工具 選取上半部, 按一下 ↓方向鍵往下移動,讓菱形再組合起來, 就完成路燈的製作了：

56 建立新元件 最後, 使用選取工具 選取整個燈, 執行『修改/群組』命令, 把路燈群組起來, 再把燈移動到燈柱的上面。如果燈與燈柱的比例或大小不理想, 還可以再用自由變形工具 來調整：

57 2-4 設定濾鏡及轉換效果 Flash 內建的濾鏡和轉換功能, 可以讓我們在繪製好的元件或文字上快速套用各種影像特效, 如：光暈、模糊、變亮、負片效果…, 只要改變一下設定值就能營造出不同的氣氛。 用轉換效果變化圖形外觀 在畫面上加入濾鏡特效

58 用轉換效果變化圖形外觀 轉換效果會混合上下重疊的兩個影像色彩, 依照選擇的轉換效果設定, 產生出特殊的影像混合結果, 有時也會變化出讓您出乎意料的影像效果。接下來就把製作好的路燈再畫上光暈, 並且套用轉換效果讓路燈更有發亮的感覺, 請接續上例或開啟範例檔案 02-ex04.fla 來操作。

59 用轉換效果變化圖形外觀 雙按元件庫的路燈元件, 進入元件編輯模式, 選取橢圓形工具 在顏色面板將填色顏色設定為放射狀漸層色, 筆畫顏色設為無 , 然後按住 Shift 鍵,在路燈上畫一個正圓形, 大小如下圖所示, 我們要把這個圓形製作為燈照射出來的光線範圍：

60 用轉換效果變化圖形外觀

61 用轉換效果變化圖形外觀 由於轉換效果只能套用在影片片段元件上, 因此請選取圓形, 按右鈕執行『轉換成元件』命令：

62 用轉換效果變化圖形外觀 用選取工具 點選光元件, 在屬性面板裡, 把顏色列示窗的 Alpha 數值改為60%, 讓光變成半透明、有隱隱約約顯示的感覺, 然後將轉換效果選擇螢幕, 燈座就會有發亮的效果, 變得更明顯：

63 在畫面上加入濾鏡特效 Flash 提供 7 種濾鏡特效, 包括投影、模糊、光暈、斜角、漸層光暈、漸層斜角和調整顏色, 可以套用在影片片段元件、按鈕元件和文字物件上。每種濾鏡皆有各自的設定項目, 讓您自由調整要呈現的感覺。我們再繼續建立動畫場景, 並且利用濾鏡特效, 讓路燈在夜晚中更有發光的感覺。

64 在畫面上加入濾鏡特效 請接續上例, 點選舞台上的光元件, 然後切換到濾鏡面板 (執行視窗/屬性/濾鏡命令), 按下 鈕選擇光暈項目, 如圖設定各選項：

65 在畫面上加入濾鏡特效

66 在畫面上加入濾鏡特效 然後再次按下 鈕選擇光暈項目, 再加入一個光暈濾鏡效果。這次設定為內光暈效果, 讓燈光有從內到外, 慢慢變弱的感覺, 更接近真實的燈光：

67 在畫面上加入濾鏡特效

68 在畫面上加入濾鏡特效 按下場景 1 回到舞台, 建立新圖層命名為 "路燈", 然後從元件庫中把建立好的路燈元件拉曳到舞台上。我們拉曳 3 次, 在舞台上就會有 3 個路燈, 請排列成如下圖的位置：

69 在畫面上加入濾鏡特效

70 在畫面上加入濾鏡特效 最後, 繪製燈柱下的影子, 表現光影效果。請使用基本矩形工具 , 將填色顏色設為黑色 (#000000)、Alpha 10%、無筆畫, 分別在 3 個燈柱下面繪製一個和燈柱同寬的細長矩形, 然後分別點選左邊和右邊燈柱的影子, 執行『修改/變形/旋轉和切斜』命令, 將左邊的影子往左邊水平傾斜、右邊的影子往右邊水平傾斜,就完成街燈的製作了：

71 在畫面上加入濾鏡特效

72 2-5 建立文字 動畫中的文字扮演著重要的角色, 例如製作角色對白字幕、提供文字內容供人閱讀, 或是放置商品詳細說明、公司服務介紹等資訊。在 Flash 中加入的文字, 也可以套用濾鏡特效, 以變化文字的呈現效果讓畫面更美觀。 用文字工具輸入文字 將文字套用濾鏡

73 用文字工具輸入文字 接下來要利用文字工具 , 如下圖在動畫場景中輸入網站 LOGO、選單文字,並建立版權文字, 請接續上例或開啟範例檔案 02-ex05.fla 來練習。

74 用文字工具輸入文字 請建立新圖層命名為 "LOGO", 然後點選工具箱的文字工具 , 在屬性面板如下設定文字屬性, 然後在編輯區按一下左鈕, 出現文字區塊後輸入 "Flag"：

75 用文字工具輸入文字

76 用文字工具輸入文字 然後在屬性面板中, 將字體大小改為 "22"(其它項目維持先前的設定), 在 "FLAG"文字的下方再建立一個文字方塊, 輸入"Design Studio"：

77 用文字工具輸入文字 再新增選單圖層拉曳到 LOGO 圖層下方,使用文字工具 , 如下圖設定文字選項, 在LOGO 右方建立文字區塊, 如圖輸入文字"ABOUT"、"PORTFOLIO"、"GOODS"、"CONTACTS"：

78 用文字工具輸入文字 我們想讓選單文字的高度和 LOGO 文字相同, 因此請選取選單文字, 按下屬性面板的 鈕, 調整行距：

79 用文字工具輸入文字 再新增 "版權文字" 圖層, 使用文字工具 在畫面右上方輸入版權文字"Copyright © FLAG Design Studio All rights reserved."：

80 用文字工具輸入文字 輸入完成後, 請將版權文字圖層移動到最下面, 稍後我們要製作動態背景, 就可以讓這段版權文字變得較稍微不明顯, 以免搶了畫面的視覺焦點：

81 將文字套用濾鏡 需要的文字都建立好了之後, 現在來幫文字加上濾鏡效果。我們要在 LOGO文字套用光暈濾鏡, 讓文字有微微發光的感覺, 然後在版權文字套用投射濾鏡,製造朦朧的陰影效果, 如此一來, 不僅能增加文字的質感, 也能使文字呈現與舞台一致的風格, 增加畫面的整體感。

82 將文字套用濾鏡 請點選 LOGO 圖層, 用選取工具 選取舞台上的兩個 LOGO 文字區塊, 然後切換到濾鏡面板, 如下設定效果：

83 將文字套用濾鏡 再點選版權文字圖層以選取舞台上的版權文字, 切換到濾鏡面板如下設定投射效果, 就完成範例中的文字設定了：

84 2-6 用移動補間動畫建立動態背景 我們已經應用各種繪圖工具, 以及濾鏡、轉換效果、文字工具將動畫的場景都大致繪製完成了, 接下來就要在舞台上加入會 "動" 的元件, 讓建立好的場景有畫龍點睛的效果。 用選取工具調整圖形外觀 建立移動補間動畫

85 用選取工具調整圖形外觀 目前的場景是純黑、全靜止的狀態, 我們要加入兩層緩緩游移的漸層色塊, 讓平淡的公園場景產生夏夜微風吹徐的感覺。

86 用選取工具調整圖形外觀

87 用選取工具調整圖形外觀

88 用選取工具調整圖形外觀 請接續上例或開啟範例檔案 02-ex06.fla 來練習, 首先新增漸層背景 1 圖層,將圖層拉曳到草叢圖層下方, 然後切換至矩形工具 , 再設定漸層顏色, 繪製一個接近舞台大小的矩形。

89 用選取工具調整圖形外觀

90 用選取工具調整圖形外觀 使用選取工具 靠近矩形上下兩邊的線段, 當指標呈 狀時拉曳, 請將矩形拉曳為如下圖的外觀, 然後使用漸層變形工具 , 調整漸層的方向：

91 用選取工具調整圖形外觀 選取調整好的矩形, 按右鈕執行『轉換成元件』命令, 在漸層背景 1 圖層上方再新增一個漸層背景 2 圖層, 從元件庫再拉曳一個漸層背景元件到舞台上, 然後執行『修改/變形/水平翻轉』命令, 並使用自由變形工具 , 將第 2 個漸層背景元件旋轉為如圖的角度, 讓兩個漸層背景的外觀略有差異：

92 用選取工具調整圖形外觀

93 用選取工具調整圖形外觀 顯示所有的圖層檢視整個場景, 檢查看看兩個漸層背景的位置, 注意舞台的邊緣處不要露出破綻了, 若有需要可以利用選取工具 再調整一下位置：

94 建立移動補間動畫 補間動畫的好處是只要製作出連續動作的開始和結束點的內容, 中間的動畫過程就可以請 Flash 幫我們自動完成。請繼續使用先前的範例或開啟範例檔案02-ex07.fla, 接下來要利用移動補間動畫來讓兩個漸層背景動起來。 請選取所有圖層的影格 40, 按右鈕執行『插入影格』命令, 表示把動畫的長度增長到影格 40, 在這段時間中的畫面都會延續第 1 個影格的內容不會有變化：

95 建立移動補間動畫

96 建立移動補間動畫 選取漸層背景 1 和漸層背景 2 圖層的影格 20 和影格 40, 按右鈕執行『插入關鍵影格』命令, 插入關鍵影格的地方就是我們要讓動畫產生變化的時間點：

97 建立移動補間動畫 點選漸層背景 1 圖層的影格 20, 使用自由變形工具 , 將舞台上的漸層背景元件略往左旋轉, 再點選漸層背景 2 圖層的影格 20, 將背景略往右旋轉。旋轉漸層背景時, 請小心不要大幅轉動, 以免漸層背景移動速度過快, 達不到預期中和緩的感覺, 並且注意舞台邊緣及兩個漸層背景之間不要露出銜接處：

98 建立移動補間動畫

99 建立移動補間動畫

100 建立移動補間動畫 最後, 選取漸層背景 1 和漸層背景 2 圖層, 在任一影格上按右鈕執行『建立移動補間動畫』命令, 就可以完成動態背景的製作：

101 建立移動補間動畫 建立移動補間動畫後, 影格就會出現箭頭並且顯示紫色的底色, 我們按下 Ctrl + Enter 鍵 (Windows) / 鍵 (Mac) 可以發佈動畫, 檢視動畫 的效果：

102 2-7 應用導引線製作飛舞的螢火蟲 目前的動畫已經大致完工了, 最後再為這個公園場景加入幾隻飛舞的螢火蟲, 增添動畫的生命力。範例中要應用導引線功能, 讓螢火蟲能依照我們繪製的路線移動, 請接續上例或開啟範例檔案 02-ex08.fla 跟著我們進行練習。 在元件庫中已經放置好螢火蟲元件, 請雙按螢火蟲進入元件編輯模式, 然後按下增加導引線鈕 , 使用鉛筆工具 繪製一條線段, 我們要讓螢火蟲沿著這個線段飛舞：

103 應用導引線製作飛舞的螢火蟲

104 應用導引線製作飛舞的螢火蟲 在導引線圖層的影格 40 插入影格、圖層 1 的影格 40 插入關鍵影格, 然後點選圖層 1 的影格 40, 把螢火蟲拉曳到導引線的最末端：

105 應用導引線製作飛舞的螢火蟲 點選圖層 1 的影格 1, 檢查看看螢火蟲的中心點是不是位在導引線的起始點,然後在圖層 1 的任一影格上按右鈕執行『建立移動補間動畫』命令, 螢火蟲就會隨著線段的軌跡移動了：

106 應用導引線製作飛舞的螢火蟲 回到場景1, 請在漸層背景 2 上面新增螢火蟲圖層, 從元件庫把螢火蟲元件拉曳到舞台, 然後在螢火蟲圖層的影格 40 插入影格：

107 應用導引線製作飛舞的螢火蟲 到這裡就完成整個範例的製作了, 您可以再從元件庫中再把更多的螢火蟲元件拉曳到舞台, 也可以調整螢火蟲出現的時間, 讓畫面有更多變化。最後, 按下 Ctrl + Enter 鍵 (Windows) / retum 鍵 (Mac), 再檢視一遍動畫的播放效果：

108 應用導引線製作飛舞的螢火蟲

109 2-8 將動畫發佈為網頁 確認動畫的場景和播放內容都沒有問題後, 就可以將製作好的檔案發佈成網頁囉！
請執行『檔案/發佈設定』命令, 進行發佈網頁的相關設定：

110 將動畫發佈為網頁

111 將動畫發佈為網頁

112 將動畫發佈為網頁 在此將發佈設定都維持預設值即可, 按下發佈鈕後, 開啟動畫檔儲存的位置就可以看見發佈的檔案：

113 將動畫發佈為網頁

114 將動畫發佈為網頁 這一堂課我們應用了各種繪圖工具和基本的動畫功能, 完成一個具動態效果的手繪風格網站, 相信您可以大致熟悉 Flash 的繪圖工具, 並且了解動畫製作的整個流程。下堂課開始我們要繼續學習更多 Flash 動畫的製作技巧。