January 26, 2008

(1)

著作權所有 © 旗標出版股份有限公司

Flash 網頁設計與特效

January 26, 2008

(2)

Page 2 January 26, 2008

本章提要

•

1-1 認識操作環境

•

1-2 開新檔案、開啟舊檔與儲存檔案

•

1-3 檢視動畫文件視窗

•

1-4 面板的操作

•

1-5 場景

•

1-6 動畫的文件屬性

•

1-7 動畫的匯出與發佈

(3)

1-1 認識操作環境

•

請執行『開始/所有程式/Macromedia/

Macromedia Flash 8』命令啟動 Flash，預設在程式開始時會顯示起始頁的開檔選單畫面，選單內容依類型分為 3 個區域，分別是開啟最近使用的檔案、建立新檔案和從樣板建立，供使用者自行選擇要執行的檔案。

(4)

認識操作環境

(5)

認識操作環境

•

請按下起始頁中建立新檔案區的 Flash 文件（第 1 個項目），即可看到如下圖的預設版面配置，

我們就透過它來認識 Flash 的操作環境：

(6)

認識操作環境

(7)

認識操作環境

•

Flash 的操作環境主要分成 3 大部份：

▫

Flash 主視窗

▫

動畫文件視窗

▫

散佈四處的面板。

•

主視窗界定出 Flash 程式的工作範圍；動畫文件視窗是編輯動畫內容的場所；面板則是製作動畫時所使用的各種工具箱。

(8)

1-2 檔案開啟與儲存

•

開新檔案

•

開啟舊檔與關閉檔案

•

儲存檔案

•

切換與排列動畫文件視窗

(9)

開新檔案

•

在起始頁中選擇 Flash 文件項目，或在Flash 主

視窗執行『檔案/開新檔案』命令皆可建立新檔案。

•

兩者的差異是選擇前者的方式開啟，會立即建立一個新的空白文件檔；執行後者的命令，則會出現如下的新增文件交談窗，讓您選擇要開啟的檔案類型：

(10)

開新檔案

•

檔案預設會從未命名-1 開始編號，接著是未命名 -2、未命名-3…依此類推，當你儲存檔案時，

Flash 則會讓你重新為檔案命名。

(11)

開啟舊檔與關閉檔案

•

要開啟儲存在磁碟中的動畫檔，可執行『檔案/開啟舊檔』命令將檔案重新載入Flash 中來編輯；

也可以在起始頁中選擇開啟最近使用的檔案項目或開啟舊檔，同樣可以由開啟舊檔交談窗讓您選擇要開啟的檔案。

(12)

開啟舊檔與關閉檔案

•

編輯完畢並儲存檔案後，可執行『檔案/關閉檔案』

命令（或是按下動畫文件視窗標題列右側的鈕）關閉。

•

若按下主視窗的關閉鈕，則會關閉所有動畫文件視窗並結束 Flash。

(13)

儲存檔案

•

做好的Flash 動畫一定要儲存起來，以後才能再載入 Flash 中繼續編輯。

•

執行『檔案/儲存檔案』命令便可存檔。從未存檔過的 Flash 動畫，在執行『檔案/儲存檔案』命令後，會顯示另存新檔交談窗，讓你為檔案命名後再存檔，之後即直接儲存。

(14)

儲存檔案

•

要以其它檔案儲存時，請執行『檔案/另存新檔』

命令，為動畫重新命名再儲存。

•

Flash 所儲存的檔案格式是 .fla，這是Flash 動畫 的原生檔案格式，只有 .fla 格式的檔案才能在 Flash 中編輯、修改。

(15)

切換與排列動畫文件視窗

•

開啟多個檔案時，預設會將檔案名稱以頁次標籤顯示，按一下想要編輯的檔案頁次標籤，即可切換至該檔案。

•

『視窗』功能表最下方亦會列出目前開啟的檔案，

選取檔案名稱可切換該檔案到最上層來編輯。

•

若執行『視窗/重疊顯示』命令，會將動畫檔顯示成一個個的獨立視窗，點選要編輯的檔案即可切換。

(16)

1-3 檢視動畫文件視窗

•

動畫文件視窗是編輯動畫內容的場所，所以在正式製作動畫之前，我們要花點時間來認識並熟悉這個工作環境。

•

首先我們要仔細瀏覽動畫文件視窗，了解其內部的組成，再熟悉檢視動畫的技巧。

(17)

文件視窗

•

開啟檔案時，動畫文件視窗預設是最大化的狀態，

且填滿 Flash 的主視窗。

•

為了讓畫面變單純，使我們更清楚看到文件視窗的組成，請按下鈕，將文件視窗與主視窗分離，就可以看到如下的文件視窗。

(18)

文件視窗

(19)

文件視窗

•

文件視窗主要分成兩大塊，上面是時間軸面板，

只有這個面板會嵌在文件視窗中。下方整個區域稱為編輯區，我們可以在此區進行繪圖、編輯動畫的內容；其中又分為兩個部份：白色的區域是舞台（Stage），即動畫真正的播放範圍，灰色部份稱為工作區域（Work Area），我們亦可在工作區域編輯物件，但在播放動畫時看不到此區的內容。

(20)

調整顯示比例

•

我們可以從編輯區右上方的顯示比例列示窗，或

『檢視/顯示比例』子功能表中，選擇編輯區的顯示比例。

•

除了以數字改變顯示的比例外，也可以選擇顯示影格

（Show Frame）、顯示全部（Show All）與符合視窗大小（Fin in Windows）3 個選項，其顯示狀況如右：

(21)

調整顯示比例

(22)

調整顯示比例

(23)

調整顯示比例

(24)

調整顯示比例

•

也可以直接在顯示比例列示窗中輸入想要的比例值（% 可以省略），或利用『檢視』功能表的

『放大顯示』或『縮小顯示』命令來調整顯示比例。

(25)

顯示/ 隱藏工作區域

•

在編輯動畫時，預設會顯示工作區域，執行『檢視/工作區域』命令則可切換工作區域的顯示或隱藏（勾選該命令表示顯示）。隱藏工作區域時，

位於工作區域中的物件便不會顯示，想預覽動畫播放的實際畫面便可這麼做。

(26)

顯示/ 隱藏工作區域

(27)

使用「縮放工具」調整顯示比例

•

利用工具面板上檢視區的縮放工具（Zoom Tool），可以針對特定區域進行縮放：

(28)

使用「縮放工具」調整顯示比例

(29)

使用「縮放工具」調整顯示比例

(30)

使用「手掌工具」移動畫面

•

使用手掌工具（Hand Tool）可以拉曳編輯區的畫面，以顯示出想要檢視的部份，且不會改變顯示比例：

(31)

預覽模式─加快畫面顯示速度

•

Flash 提供5 種預覽模式，可以讓你根據電腦效能調整畫面的顯示速度。

•

請執行『檢視/預覽模式』

(32)

外框（Outlines）

•

此模式只會顯示物件的外框輪廓，所以顯示速度最快。當你要改變圖形物件的造型時，選此模式可以方便作業。

(33)

快速（Fast）

•

此模式可顯示物件原來的顏色，但不啟用反鋸齒

（Anti-aliasting）功能，所以顯示的速度較快，

但會出現鋸齒狀邊緣的現象。

(34)

消除鋸齒（Antialias）

•

此模式可顯示物件原色，並開啟了圖像物件的反鋸齒功能，所以看起來比較平滑，但顯示速度比快速模式慢。

(35)

消除文字鋸齒

（Antialias Text）

•

此模式比消除鋸齒模式多了文字物件的反鋸齒功能，即使文字物件放大顯示，看起來也很平滑。

(36)

完整（Full）

•

此模式中所有物件皆以最佳效果呈現，但會因此讓顯示的速度變得緩慢。

(37)

1-4 面板的操作

•

Flash 的操作環境是可以彈性配置的，其重點就在於各式面板的靈活調度。想要有個舒適又適合自己的編輯環境，那你先得學會面板的各項基本操作。

(38)

開啟、切換與關閉面板

•

Flash 的面板可以隨時視作業需求自由開啟或關閉，從『視窗』功能表即可看到Flash 提供的各面板。

(39)

開啟、切換與關閉面板

•

各面板都有對應的快速鍵，所以你也可以利用快速鍵來開啟、展開或摺疊、關閉面板，例如按下 [Ctrl] + [K] 鍵，可開啟對齊面板。

•

當面板標題列包含 2 至 3 個面板時稱為面板群組，

按下群組內的面板標題，即可切換至該面板進行設定。

(40)

開啟、切換與關閉面板

(41)

開啟、切換與關閉面板

•

對於已開啟，但暫時不需使用的面板，除了可由

『視窗』命令將該面板關閉（再點選一次面板名稱）外，還可以利用如下的方法關閉面板，騰出更大的編輯空間：

(42)

開啟、切換與關閉面板

•

如果只是想要暫時隱藏所有的面板，可按下 [F4]

鍵（或執行『視窗/隱藏面板』命令），將目前操作環境中所有已開啟的面板全部隱藏起來；再按一次 [F4] 鍵，又可恢復原狀。

(43)

摺疊與展開面板

•

在操作的過程中，面板有可能擋住太多編輯區域，

但又要隨時開啟該面板時，可利用標題列上左邊的三角圖示來摺疊或展開面板：

(44)

摺疊與展開面板

•

如果想要一次摺疊右側（或下方）的所有面板，

可按下鈕（或鈕），即可一次摺疊右側

（或下方）的面板區，再按一次可展開該面板區。

(45)

移動與組合面板

•

面板可以嵌在主視窗上，也可以變成浮動面板，

還可以將多個面板組合成面板群組。按住滑鼠左鈕拉曳面板標題列左側的移動把手，即可移動面板位置

(46)

移動與組合面板

(47)

移動與組合面板

(48)

移動與組合面板

•

不過，面板群組中的面板無法直接拉曳來調整位置，只能整個面板群組一起移動。為了提供更方便的操作環境，我們還可以將多個面板組合在一起，組成更適合自己使用的專屬面板群組。

•

請按下面板標題列右邊的鈕

(49)

移動與組合面板

(50)

移動與組合面板

•

如果希望調色盤面板，不再隸屬於顏色面板群組之下，可執行上圖中的『新面版群組』命令，使調色盤面板獨立顯示成一個面板，或是在其它面板進行如上的合併操作，將經常使用的面板集合在一起，就成為自己專屬的面板群組囉！

(51)

儲存與管理版面配置

•

Flash 會記憶關閉時的環境配置（包括各面板的組合、開啟狀態），待下次啟動時仍會顯示上次關閉前的狀態。

•

若想保留調配好的面板配置，可執行『視窗/工作區版面/儲存目前版面』命令，將目前的操作環境配置命名存檔，日後即可於『視窗/ 工作區版面』

子功能表中直接選取套用。

(52)

儲存與管理版面配置

•

執行『視窗/工作區版面』命令，可以看到預設及自訂的面板配置，選取要套用的面板配置名稱，

工作環境即可調整至該配置：

(53)

儲存與管理版面配置

•

一旦儲存了太多的版面配置，反而可能失去選擇的便利性，你可以執行『視窗/工作區版面/管理版面』命令，從中刪除不需要的版面配置：

(54)

1-5 場景

•

場景（Scene）是 Flash 動畫中的一個重要觀念，

這個觀念是從電影、影片延伸而來，例如我們在電影中，看到女主角在家門口與男主角道別後，

接著鏡頭一轉，男主角馬上到機場要坐飛機了... 。

•

短短幾句話，我們就看到了兩個場景，第1 個場景是「女主角在家門口與男主角道別」，第 2 個場景是「男主角到機場坐飛機」。

(55)

何謂場景

•

所謂的場景，就是指整個影片中的一個片段。一個 Flash 動畫中可以有多個場景，而場景之間最大的不同通常是背景，也就是除了主角之外的環境。

•

兩個連續播放的場景，可以沒有任何關聯，尤其在 Flash 中，場景的播放順序還可以透過

ActionScript 來控制，因此我們可以說，場景是用來區隔不同的動畫，以方便安排故事情節。

(56)

新增與切換場景

•

新開啟的空白文件預設只有一個場景，如果需要增加場景，執行『插入/場景』命令即可新增，而新增的場景會依順序編號，例如預設的場景為場景1，那麼新增的場景便從場景2、場景3... 依序編號。

(57)

場景的安排與操作

•

使用場景面板（Scene panel）可以新增、複製、

刪除、重新命名場景，以及調整各場景的順序。

•

請執行『視窗/其他面板/場景』

(58)

1-6 動畫的文件屬性

•

舞台是動畫實際播放的畫面，所以舞台的大小與長寬比例對將來動畫的呈現有很大的影響。

•

Flash 預設的舞台尺寸是550 Pixels × 400 Pixels，

背景為白色

•

如果要更改舞台大小與背景色，請執行『修改/文件』，開啟文件屬性交談窗

(59)

動畫的文件屬性

(60)

動畫的文件屬性

•

標題（Title）：輸入動畫的標題。

•

說明（Description）：新增動畫的描述及說明文字。

•

尺寸（Dimensions）：此設定舞台的寬、高度，

尺寸單位可由下方的尺規單位欄設定。舞台的寬、

高度必須設定在 1 Pixels 至 2880 Pixels 之間。

(61)

動畫的文件屬性

•

符合（Match）：

此處提供 3 個選項來設定舞台尺寸。

•

背景顏色（Background Color）：設定舞台背景色。

(62)

動畫的文件屬性

•

影格速率（Frame Rate）：設定動畫播放速率

•

尺規單位（Ruler Unites）：設定舞台尺寸的單位，

一般建議使用預設值（像素）即可。

•

設成預設：按此鈕可將目前的設定存成預設值，

以後開啟新檔案都會套用這個預設值。

(63)

動畫的文件屬性

•

由於將 Flash 動畫發佈成網頁時，還可以另行調整顯示區域、大小...，所以若一開始不知如何決定舞台尺寸，使用預設值（550 Pixels × 400 Pixels）即可。

(64)

1-7 動畫的匯出與發佈

•

做好的 Flash 動畫除了要儲存起來，方便日後再載入 Flash 中編輯外，想要讓 Flash 動畫能夠在其它應用程式播放，例如用 Microsoft Media Player 播放，還得進一步將動畫匯出成適當的格式。

•

若是要將動畫應用在網頁上，那麼可由 Flash 的發佈功能設定所有細節。

(65)

動畫的匯出與發佈

•

Flash 動畫的原生檔案格式為 .fla，發佈成動畫檔後檔案格式為 .swf，預設可在 Flash Player 進行播放（安裝 Flash 程式時即會進行安裝）。

(66)

著作權所有 © 旗標出版股份有限公司

Flash 網頁設計與特效

January 26, 2008

(67)

本章提要

•

2-1 快速建立移動動畫

•

2-2 製作逐一影格動畫

(68)

2-1 快速建立移動動畫

•

Flash 能讓製作網頁動畫的人趨之若鶩，有大半功勞都要歸給補間動畫（Tweened）。它是最方便又容易的一種動畫製作方式，我們只要製作連續動作的開始和結束的內容，中間的動畫過程就交給 Flash 自動完成。

(69)

快速建立移動動畫

(70)

快速建立移動動畫

•

運用補間動畫可以輕易製作出具有移動、縮放、

旋轉、形狀漸變、色彩漸變等效果的動畫，還能控制移動速度變慢或變快…等。

•

Flash 的補間動畫分為形狀補間動畫（Shape Tweening）和移動補間動畫（Motion

Tweening）2 種，此處我們先介紹移動補間動畫的製作方法，讓您搶先體驗補間動畫的魅力。

(71)

快速建立移動動畫

1.

開啟檔案 Sample02.fla；

2.

我們要製作第 1 格影格的內容。請先按一下時間軸面板上圖層 1 的影格 1 ，再執行『視窗/元件庫』命令開啟元件庫面板，其中小汽車是我們準備好的圖形，請從元件庫面板將小汽車拉曳到舞台左邊的位置：

(72)

快速建立移動動畫

(73)

快速建立移動動畫

3.

接下來我們要製作結束影格的內容。假設動畫共有 10 格影格，請在時間軸面板上圖層 1 的影格 10 處按下滑鼠右鈕，執行『插入關鍵影格』命令（快速鍵：F6）：

關鍵影格：影格 10 的動作會延續影格 1 的動作

(74)

「播放磁頭」的作用

•

我們可由播放磁頭得知目前舞台上播放的是哪一格影格的內容。請先按一下影格 1 的位置，將播放磁頭移至動畫的最前面，再按下 [Enter] 鍵，

此時播放磁頭會依序由影格 1 移動至影格 10，不過由於我們尚未進行移動的設定，因此舞台上的小汽車沒有任何的移動或變化。

(75)

快速建立移動動畫

4.

選取圖層 1 的影格 10，然後按下工具箱的選取工具，再將舞台左邊的小汽車拉曳到舞台的右邊，代表小汽車的行徑路線。移動時請儘量保持水平移動，如果擔心無法維持在相同的水平位置，請在拉曳前先按下 [Shift] 鍵不放再進行拉曳，小汽車就會維持在相同的水平位置囉！

(76)

快速建立移動動畫

(77)

快速建立移動動畫

•

請在影格 1 上按右鈕，執行『建立移動補間動畫』

命令，影格 1 到影格10 之間便會顯示一個箭頭圖示，箭頭穿過的影格，就是 Flash 幫我們完成的，

這些自動完成的影格稱之為補間動畫影格：

(78)

快速建立移動動畫

•

動畫設定到此就完成了，請按下時間軸面板上的影格 1，將播放磁頭移至影格 1 的位置，再按下 [Enter] 鍵，即可藉由播放磁頭的移動來檢視小汽車的移動效果。

(79)

調整影格速率

•

預設影格播放速率為 12 fps（frame per second，每秒影格）

•

在時間軸下方顯示影格數字的欄位雙擊，即可開啟文件屬性視窗，修改影格播放速率使動畫達到最佳表現效果。

(80)

2-2 製作逐一影格動畫

•

除了補間動畫的製作方式，我們也可以一格一格的繪製影格內容，這種類似傳統卡通的繪製方法，

我們稱之為連續影格動畫（Frame by Frame）。

•

連續影格動畫所採用的製作方式，是將要表現動態的部份分解成多個動作，然後一個個的製作，

再將這些動作連續播放，就形成了動態效果。

(81)

製作逐一影格動畫

•

Smaple03.fla

(82)

製作逐一影格動畫

•

連續影格動畫需要繪製很多內容不同的影格，適合用來表現細膩的動作，例如︰人物的跑步各階段動作（Sample04.fla）

•

缺點

▫

製作費時

▫

檔案體積較大

•

如果動畫要應用在網頁上，最好盡量減少使用連續影格動畫，以免增加網頁下載時間。

(83)

製作逐一影格動畫

•

在 Flash 中製作連續影格動畫有 2 種方式

▫

在 Flash 中逐格地繪製分解動作或

▫

直接匯入由其它軟體（如︰Illustrator、

Photoshop...）所製作的分解動作連續圖檔。

•

在此，我們使用的是第 1 種方式，在 Flash 中逐格繪製動作。

(84)

製作逐一影格動畫

1.

開啟檔案 Sample03.fla 後，即可在元件庫面板

（執行『視窗/元件庫』命令可開啟元件庫面板）

看到我們事先準備好的 7 個分解動作圖檔。請拉曳動作 1 至舞台中靠近右邊的位置：

(85)

製作逐一影格動畫

(86)

製作逐一影格動畫

2.

請點選時間軸面板圖層 1 的影格 2 再按下 [F7]

鍵（或在影格 2 上按右鈕，執行『插入空白關鍵影格』命令），將影格 2 設定為空白關鍵影格。

(87)

製作逐一影格動畫

3.

按下時間軸面板下方的描圖紙，再將動作 2 由元件庫拉至舞台上動作 1 的左邊位置。

啟動描圖紙的好處，就是可以參考影格 1 中動作

1

的位置來安排影格 2 的內容，使動作

2

的位置能更準確，動畫的效果更流暢。

(88)

製作逐一影格動畫

4.

重覆步驟 2 及步驟 3 的操作，一一設定好每個影格的動作，每設定一個影格就要往左邊移動

一點，才會有走向左邊的效果。請設定到動作 7，

整個動畫會有 7 個影格。

(89)

製作逐一影格動畫

•

完成後請在影格 1 的位置按一下，將播放磁頭移到影格 1 的位置，即可按下 [Enter] 鍵瀏覽每個影格的設定結果，並檢查動畫的流暢度再做適當的調整；或是先儲存檔案，再執行『控制/測試動畫』命令，檢視動畫的播放效果。

(90)

常用快速鍵

•

開新檔案 Ctrl + N

•

開啟舊檔 Ctrl + O

•

儲存檔案 Ctrl + S

•

插入影格 F5

•

插入關鍵影格 F6

•

插入空白關鍵影格 F7

•

測試動畫 Ctrl + Enter

(91)

HW #01

•

簡易動畫製作

▫

移動補間動畫

x 製作 24 影格長度（約 2 秒）動畫

▫

逐一影格動畫

x 製作 36 影格長度（約 3 秒）動畫

•

作業完成後，請將兩個 Flash 原始檔（.fla）壓縮成一個壓縮檔（.7z、.zip、.rar、…），以附件 Email 給老師

▫

信件主旨：FW55學號:HW01