December 30, 2007

(1)

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

Flash 網頁設計與特效

December 30, 2007

(2)

本章提要

•

7-1 認識元件與實體

•

7-2 認識元件庫與內建元件庫

•

7-3 元件的類型

•

7-4 建立元件

•

7-5 元件編輯的環境

•

7-6 元件庫的操作

•

7-7 實體屬性設定

(3)

Page 3 December 30, 2007

7-1 認識元件與實體

•

在 Flash 製作動畫時，我們可以將會重複使用到的物件，如圖像物件、群組物件、文字物件等製作成元件（Symbol），存放在動畫文件的元件庫

（Library）中，當你需要使用該元件時，便可自元件庫將它拉曳出來使用。此時，被放入編輯區中進行編輯的，便是該元件的實體（Instance）。

(4)

認識元件與實體

•

例如你可以將花朵的圖片轉換成元件，並重複拉曳此元件至舞台中，用這些複製出來的實體來建立一個花園。你還可以經由改變顏色屬性、大小等，來變化這些實體的外觀，

省卻一一繪製的功夫，可說是方便又實用。

(5)

認識元件與實體

•

在編輯區中的每個實體都是獨立個體，你可任意編輯、更改它的屬性而不會影響到相同元件的其它實體。但如果進入元件的編輯模式進行修改，

則所有的實體也會同時更新。

(6)

7-2 認識元件庫與內建元件庫

•

Flash 的元件庫分兩種，一種是每個動畫專屬的元件庫（Library）；另一種則是內建元件庫

（Common Libraries），兩者皆可透過『視窗』

功能表來開啟，以下即為您說明。

(7)

元件庫

•

元件庫面板（Library）是存放元件、點陣圖、聲音、視訊、組件等物件的工具箱。所有元件一經建立，就會存放在元件庫中。執行『檔案/匯入』

命令，可自外部匯入點陣圖、聲音、視訊等物件，

這些物件也會儲存在元件庫。因此，動畫元件的新增、複製、編輯等操作，也都是依賴元件庫來進行與管理。

(8)

內建元件庫

•

內建元件庫（Common Libraries）則存放了 Flash 提供的元件，讓使用者自由使用。Flash 內建的元件庫共有 3 種，執行『視窗/內建元件庫』命令，可看到 Flash 提供的元件類別：

(9)

內建元件庫

這 3 種內建元件庫的差異：

•

按鈕（Buttons）：提供各種具有按鈕功能的元件。

•

類別（Classes）：提供連接資料庫或其它 Web Services 所使用的元件。

•

課程互動（Learning Interactions）：提供現成的線上互動物件，主要用於教學方面。

(10)

內建元件庫

•

內建元件庫中元件的屬性是無法修改的，但將其拉曳到舞台上後，會自動在文件的元件庫中複製一份，複製到元件庫的元件就和你自行建立的一樣，可以自由編輯應用。

(11)

7-3 元件的類型

•

Flash 的元件包含圖像元件（Graphic Symbol）、

按鈕元件（Button Symbol）、影片片段元件

（Movie Clip Symbol）、字體元件（Font）與組件（Components）5 種類型，我們一一說明如下。

(12)

圖像元件

•

圖像元件（Graphic Symbol）可以是一般靜態的圖檔，也可以是一段動畫。

•

圖像元件最大的特色，是必須隨著動畫的主時間軸來播放。

▫

舉例來說，若你建立了一個含有 10 格影格的圖像元件，將其放置於 20 格影格的主動畫中，動畫將重複播放兩次圖像元件；

▫

如果將 10 格影格的元件放置在只有 1 格影格的主動畫中，主動畫將會在播放圖像元件的第 1 格影格

(13)

圖像元件

(14)

按鈕元件

•

按鈕元件（Button Symbol）可製作按鈕功能的動畫，並透過 ActionScript 或行為指令

（Behavior），與瀏覽者的滑鼠或鍵盤事件產生互動。每個按鈕元件都是由 4 格影格組成，分別代表按鈕的 4 種狀態（後述）。此外，按鈕元件內可以包含影片片段元件和圖像元件。

(15)

按鈕元件

•

我們在場景 1 看到按鈕呈現立體及光暈效果，在按鈕元件的編輯模式卻只看到平面圖形，這是因為我們在主動畫按鈕上套用了濾鏡效果。

(16)

影片片段元件

•

影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫，我們可以利用 ActionScript 和行為指令（Behavior）來控制影片片段元件，且影片片段元件擁有自己獨立的時間軸，不受主動畫影格數的影響，甚至當你透過控制器停止主動畫的播放後，影片片段元件仍可繼續播放。

(17)

影片片段元件

•

要預覽影片片段元件，必須先將動畫發佈成 .swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到。

•

此外，影片片段元件可以包含圖片、聲音或另一個元件，

甚至可以設定滑鼠的動作事件，或當做按鈕來使用，可說是應用範圍最廣的一種元件。

(18)

字體元件

•

字體元件（Font）可以單純做靜態的文字顯示，

也可以成為與瀏覽者溝通用的輸入欄位，或做為動態顯示之用。

(19)

組件

•

組件（Components）是另一種影片片段元件，

你可以使用 Flash 內建的組件，或直接下載別人做好的組件，甚至是自已開發組件來使用。使用組件最大的好處是可以透過組件參數的設定，將組件直接應用在動畫中，而不需自行撰寫

ActionScript。

(20)

7-4 建立元件

•

建立元件（Symbol）的方式有 2 種，你可以從無到有的建立一個新元件；或是選取現成的圖像物件、群組物件、

點陣圖或文字物件，再按下 [F8] 鍵將其轉換成元件。

•

使用這兩種方式建立元件的不同點在於，將現成的物件轉換成元件時，該元件不僅會儲存在元件庫中，還會自動將舞台上的原物件變成實體；若是建立一個全新的元件，此元件不會出現在舞台上，而是直接儲存在元件庫內。

•

建立元件的大致步驟如下：

(21)

建立一個新元件

•

請開啟一個空白文件，再執行『插入/新增元件』

命令（或按 [Ctrl] + [F8] 鍵），在建立新元件交談窗中替元件命名後，決定元件的類型，然後進入元件編輯模式，編輯這個新增的空白元件。

(22)

建立一個新元件

(23)

將現成物件轉換成元件

•

你可以將既有的圖像、群組、文字、視訊或匯入的圖片建立成元件，請選取要轉換成元件的物件，然後執行『視窗 /元件庫』命令開啟元件庫面板：

(24)

將現成物件轉換成元件

(25)

將現成物件轉換成元件

•

使用現成物件所建立的元件，通常是只有 1 格影格的靜態元件，你可以雙按舞台上的實體進入元件編輯模式進行其它編輯。當你編輯元件時，所有在舞台上的實體也會隨著改變。

(26)

元件的註冊點

•

當我們將圖形轉換成元件時，可設定元件的註冊點，註冊點是以十字準線 “＋＂來表示，其代表的意義就是元件的原點（x，y = 0，0），作用則是讓我們使用 ActioinScript 來控制該元件時，

能正確找到元件的座標；若要製作導引線動畫，

啟動貼齊功能後，也必須使註冊點吸附到移動路徑上，元件才能隨著導引線移動。

(27)

元件的註冊點

(28)

•

在一般的情況下，如果是執行『插入/新增元件』命令，

從無到有繪製一個新元件，我們會以註冊點為中心來繪製元件，因此元件的註冊點常與圖形的中心點重疊；若是將繪製好的圖形轉換成元件，在轉換成元件交談窗中預設的註冊點會在左上角，因此轉換後的元件註冊點會顯示在左上角，也可以自行設定於中央。

•

無論是用哪一種方式建立元件，我們都可以在建立成元件後，再切換至元件的編輯模式下視需要來調整註冊點的位置。

元件的註冊點

(29)

檢視實體在舞台上的座標位置

•

利用資訊面板可得知目前實體在舞台中的座標位置，這對於日後製作精確的動畫效果，或是想以 ActionScript 控制實體時非常有幫助。

(30)

•

利用選取工具點選舞台上的實體，會看到實體中央有一個空心圓，這就是中心點。在變形、旋轉物件時，預設會以元件的中心點為基準來進行變形或旋轉，此時中心點亦稱為變形點。

•

若要更改變形點的位置，可先按下自由變形工具，

當指標移至中心點附近呈狀，將變形點拉曳至目的位置，即可改變圖形旋轉的基準點。

元件的中心點

(31)

•

若要將實體的中心點（變形點）與註冊點設定在一起，請先按下自由變形工具，將指標移至中心點（變形點）上，當指標呈狀時雙按中心點

（變形點），實體的中心點（變形點）就會移至註冊點上，並顯示為（註冊點 + 中心點）。

元件的中心點

(32)

正確選擇元件類型

•

為了讓你明確判斷在建立元件時，該選擇什麼元件類型，我們將元件的性質表列如下，供你做個參考：

(33)

正確選擇元件類型

•

由於影片片段元件的支援度較圖像元件高，而按鈕元件大多只能應用在按鈕類功能上，故一般都建議使用影片片段類型，以增加動畫修改的彈性。

•

如果建立時選擇了不適用的元件類型，可在元件庫內該元件的名稱上按右鈕執行『類型』命令，

從中選取適當的元件類型。

(34)

實做練習

•

元件製作與使用

▫

練習一（exercise/car.fla）

x 利用元件製作汽車跳動橫越舞台動畫

▫

練習二（exercise/bear.fla）

x 將「小熊走路」製作成元件

x 利用此元件製作小熊走過舞臺動畫

▫

練習三（exercise/flower.fla）

x 將花朵製作成按鈕元件 x 當滑鼠移入時，花朵旋轉

(35)

7-5 元件編輯的環境

•

將圖形轉換為元件後，想要編輯元件的內容，必須切換到該元件的編輯模式下才能進行，元件的編輯模式有下列 3 種，以下分別為您介紹。

(36)

開啟元件編輯環境的方法

依便利性高低依序排列：

•

雙按元件庫面板中元件名稱的圖示；或選取該元件，再雙按預覽窗格。

•

直接按下動畫文件視窗右上角的編輯元件鈕，由其中選擇要編輯的元件。

(37)

開啟元件編輯環境的方法

•

在編輯區中的實體上按右鈕，執行的『編輯』命令。

•

選取編輯區中的實體，執行『編輯/編輯元件』命令（或按 [Ctrl] + [E] 鍵）。

(38)

修改註冊點的位置

•

在元件的編輯環境下會顯示十字準線的註冊點，預設在畫面的中央位置。若是想要改變元件註冊點的位置，請選取全部的圖形，再以註冊點為中心，將圖形拉曳至目的位置，

例如將圖形拉曳至註冊點的右下角，表示該元件的註冊點將移至左上角：

(39)

在實體位置上編輯

•

若想直接在舞台中編輯該元件，可選擇在實體位置上編輯，

以便和舞台中其它物件進行比對。請直接在舞台上雙按實體，或按右鈕執行『在原地編輯』命令，進入此編輯狀態：

(40)

在新視窗編輯

•

如果想開啟另一個獨立的文件視窗來編輯元件，省去在場景和元件間切換的手續，請在實體上按滑鼠右鈕，執行

『在新視窗中編輯』命令，開啟一個新視窗來編輯元件。

(41)

繪圖物件與元件的差異

•

我們曾介紹過繪圖的技巧，為了使繪製的圖形不受其它物件的影響，在繪製時可以啟動繪圖物件功能，或是將圖形群組在一起。你可能也注意到了，繪圖物件與元件有些許相似之處，例如選取時都會顯示藍色框線，雙按可進入編輯狀態...等，

為了讓您的觀念更清楚，我們再做個詳細的比較。

(42)

繪圖物件與元件的差異

•

最大的差異在於元件將儲存在元件庫中，繪圖物件則不會出現在元件庫內，且繪圖物件只是靜態的圖片，非動態效果。

•

元件和繪圖物件在選取時雖都會顯示藍色選取框線，但元件會顯示註冊點，繪圖物件則沒有註冊點。

(43)

•

若是在繪圖物件或元件上雙按，皆可進入編輯環境，此時可由圖示來辨別目前物件的型態。

•

繪圖物件的圖示為；元件會顯示成

（影片片段）、（圖像元件）、

（按鈕）。

繪圖物件與元件的差異

(44)

繪圖物件與元件的差異

•

想要編輯繪圖物件時，只要選取舞台上的物件

（不需雙按進入編輯狀態），即可變更物件的填色、框線、外形...等；編輯元件時則一定要進入元件的編輯狀態，其編輯的動作才會有作用。

•

以上我們只是列出幾個方便您區分兩者的技巧，

在使用的原則上，若是動畫中經常要出現的物件、

需要設定為動畫（或按鈕）、想設定

ActionScript ...等，還是將其轉換成元件會比較方便。

(45)

7-6 元件庫的操作

•

每個 Flash 動畫檔都有一個專屬的元件庫（Library），元件庫的目的在於讓我們檢視、儲存動畫中的項目（元件、聲音、影片、圖檔...

等），並進行管理的工作。

•

要在動畫中使用元件庫內的元件，相信您已經相當熟悉了，只要開啟元件庫面板，將其中的項目拉曳到編輯區，即可使用該元件。

(46)

共用元件庫

•

若是想在 A 動畫中使用 B 動畫元件庫中的元件，可同時開啟 A、B 兩個動畫檔案，再由元件庫面板切換至要使用的檔案元件庫，例如目前在 B 動畫檔案，要使用 A 檔案元件庫中的元件：

(47)

共用元件庫

•

使用其它檔案元件庫中的元件後，亦會自動複製一份在目前使用中的檔案元件庫。你也可以利用

『複製』和『貼上』命令，將其它檔案元件庫中的元件複製到目前檔案的元件庫中。

•

除了與目前已開啟的檔案共用元件庫外，也可以僅開啟檔案的元件庫來利用，而不須開啟動畫檔案。請執行『檔案/匯入/共用元件庫』命令，選取要使用的檔案元件庫後，即可使用該檔案元件庫內的元件。

(48)

「元件庫」面板的基本操作

•

除了上述功能外，元件庫面板還有很多功能，

我們一一說明如下︰

(49)

「元件庫」面板的基本操作

•

鎖定目前的元件庫鈕：在與其它檔案共用元件庫時，按下此鈕可固定要選用的檔案元件庫。

•

新元件庫面板鈕：按下此鈕，可將目前的檔案元件庫獨立開啟成另一個元件庫面板，讓您方便在不同的元件庫面板中複製要使用的元件。

•

項目列示窗︰列出元件庫面板內所有的項目，每個項目前方均有其代表圖示。

(50)

「元件庫」面板的基本操作

•

新增元件鈕：按此鈕可建立新的元件，功能與執行『插入/新增元件』命令相同。

•

新增資料夾鈕︰按此鈕可在元件庫面板中建立資料夾。你可以建立各類資料夾，然後把同類的項目拉曳置入同一資料夾中，讓項目的管理更有條不紊。

(51)

「元件庫」面板的基本操作

(52)

「元件庫」面板的基本操作

•

替換排列順序鈕︰按此鈕可切換遞增或遞減排列，

代表目前排列方式是遞增排列，則是遞減排列。

•

屬性鈕︰更改選取項目的屬性。選取元件後按下此鈕，可開啟元件屬性交談窗，讓您重新選擇元件的類型。

•

刪除鈕：刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）。

•

寬/窄元件庫檢視鈕：切換元件庫的顯示模式，預設為窄元件庫檢視模式。

(53)

7-7 實體屬性設定

•

介紹過元件以及元件庫面板的操作之後，接著我們再來討論元件的分身－實體的相關事項。

(54)

屬性變更

•

所有實體的屬性都可以在屬性面板中調整，屬性面板會依實體的類型而顯示對應的設定項目。

(55)

圖像元件的實體屬性

•

請先在編輯區中選取要調整屬性的實體，再執行

『視窗/屬性』命令（也可以按 [Ctrl] + [F3] 鍵）

開啟屬性面板︰

(56)

按鈕元件的實體屬性

(57)

影片片段元件的實體屬性

(58)

各類元件的共同實體屬性

•

替換︰把目前選取的實體換成另一個元件的實體。

(59)

各類元件的共同實體屬性

•

寬、高：設定實體的寬/高度。

•

X 、Y：設定實體的X 、Y 軸位置。X 軸是距離舞 台左邊框的距離；Y 軸是距離舞台上邊框的距離。

•

顏色：可用來設定實體的色彩、亮度、透明度...

等。

(60)

各類元件的共同實體屬性

•

在屬性面板調整色調時，會呈現原來顏色加上目前填色的結果。當著色量的數值愈低，愈能顯現原來的色彩（此例為紅色）；著色量高，表示將偏重色調所設定的顏色；若設定 100%，將完全捨棄元件原來的顏色，顯示目前色調所選擇的色彩。

•

若要回復原來的顏色，請將顏色欄位設定為無。

(61)

各類元件的共同實體屬性

•

要能更自由地改變舞台上實體顏色或外觀線條，

可以選取舞台上的實體，再執行『修改/打散』命令（或按 [Ctrl] + [B] 鍵），將實體轉換為一般圖像，既能自由填色、編輯，又不影響其它實體及元件。

•

被打散的實體將不再是實體，也不具有元件的特性，例如無法設定 ActionScript 來控制、修改元件庫面板中的元件時，亦無法修改已打散的實體。

(62)

各類元件的共同實體屬性

(63)

各類元件的共同實體屬性

•

因此，建議您在確定該實體不需要保有元件的特性，再進行打散的步驟，萬一後悔將實體打散了，

也不用太擔心，別忘了元件庫面板裡，還儲存了一份可以隨時取用的元件本尊哦！

(64)

Flash 網頁設計與特效

December 30, 2007

(65)

本章提要

•

8-1 認識時間軸面板、圖層與影格

•

8-2 圖層的操作與管理

•

8-3 影格的類型及相關操作

•

8-4 複製、搬移與反轉影格

•

8-5 影格速率與時間軸刻度比例

•

8-6 描圖紙功能

(66)

8-1 認識時間軸、圖層與影格

•

何謂時間軸

•

何謂圖層

•

何謂影格

(67)

何謂時間軸

•

動畫檔案視窗中的時間軸面板（Timeline，以下簡稱時間軸），主要顯示出圖層（Layer，以下簡稱圖層）以及影格（Frame，以下簡稱影格）中的所有內容。

•

時間軸面板的各項元件說明如下：

(68)

何謂時間軸

•

時間軸中若有未能顯示的圖層，可用滑鼠拉曳右側的捲軸來顯示其它圖層。

(69)

何謂圖層

•

製作傳統動畫的時候，為了製作上的方便，常會將畫面中的背景與角色分別製作，例如將人物、

背景分別繪製在不同的透明賽璐璐片上，當背景與人物交疊時便成為完整的畫面；若要呈現人物原地跳躍的動作時，只要更換人物的賽璐璐片即可。此觀念運用在 Flash 動畫中，就是圖層。

(70)

何謂圖層

•

Flash 動畫可以將背景、物件分別放置在不同的圖層上：

(71)

何謂影格

•

我們利用傳統動畫與 Flash 動畫的製作過程，來對照說明影格的觀念，可以比較容易了解影格的作用。

•

傳統動畫是先在賽璐璐片上繪製圖形，然後將其掃描成單格畫面，剪輯成為具有連貫性的影片。

Flash 時間軸上一格格的影格，就如同動畫影片的單格畫面一樣，而影格順序則代表 Flash 動畫行進的程序，我們必須根據演出順序製作影格內容。不過，影格內容並非放置在時間軸內，而是顯示在舞台之中。

(72)

何謂影格

•

一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放，而連續播放Flash 時間軸上的影格，即形成 Flash 動畫。一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格。

(73)

在 Flash 製作動畫的注意事項

•

多運用補間動畫（Tweened）來設計動畫效果，並減少動畫中關鍵影格的數量。

•

多利用元件（Symbol），少用匯入點陣圖的方式來製作動畫。

•

動畫中的靜態、動態部分，及 ActionScript 程式、聲音、

視訊，儘量都分開在不同圖層中製作較好。

•

匯出含有聲音的 Flash 影片時，利用 MP3 格式來壓縮聲音可有效降低檔案大小。

•

注意使用的字型。使用裝置字體可有效降低檔案大小，若是不想使用裝置字型，則不要使用太多種字型以免增加檔案體積。

(74)

8-2 圖層的操作與管理

•

圖層的作用就如同一張張透明的賽璐璐片，你可以將動畫中的每項物件，放置在不同圖層中，圖層交疊就形成完整的畫面。在各圖層中的物件，

做任何的移動或變化，都不會相互干擾，所以當你編輯一個物件時，只要在物件所在的圖層進行操作，將可大幅降低製作過程的複雜度與難度。

(75)

新增與刪除圖層

•

新增圖層

▫

開啟一份新的動畫檔時預設只有一個圖層，新增圖層的方式如下：

•

刪除圖層

▫

若是有不需要使用的圖層，可先按一下圖層名稱，

再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上，皆可刪除圖層。

(76)

將圖層重新命名

•

Flash 會自動將圖層依序命名為圖層＊（＊為 1 、 2 、3... 等依序編號），為了方便日後的編輯工

作，建議您為圖層重新更改為容易辨識的名稱。

為圖層重新命名時，請雙按圖層名稱，即可輸入新的圖層名稱。

(77)

•

當你想要對圖層進行任何編輯動作時，必須先選取圖層，

而選取的方式有如右 2 種：

•

此外，想要選取多個圖層時，可按住 [Shift] 鍵不放，再接續按下其它圖層名稱。

選取圖層

(78)

改變圖層順序

•

圖層的上下位置代表圖層中物件在編輯區域的前後關係。

在愈上方的圖層，就位於編輯區域愈上層，而背景則是放置在最底層的圖層。想要變更圖層的順序，請如下進行：

(79)

實做練習

•

圖層的使用（exercise/airplane.fla）

▫

製作飛機與汽車同時橫越舞臺之動畫

▫

調整使飛機與汽車之速度不同

(80)

使用圖層資料夾管理圖層

•

在製作大型動畫的時候，圖層太多可能造成操作、

尋找上的不方便，這時候就可以利用圖層資料夾

（Layer Folder ），將相關的圖層放在同一圖層資料夾下，管理起來就會方便許多。

(81)

使用圖層資料夾管理圖層

(82)

使用圖層資料夾管理圖層

•

圖層資料夾關閉時會隱藏其下的所有圖層，以精簡時間軸的空間，再按一下圖層資料夾前方小三角形，可再次開啟圖層資料夾：

(83)

圖層的 4 種狀態

•

在圖層名稱右方有圖層狀態欄，以圖示來顯示該圖層的圖層狀態，一共有 4 種圖層狀態，其代表的意義如下：

(84)

•

作用中的圖層：目前正在進行編輯的圖層。

•

不論有幾個圖層，都只會有 1 個作用圖層。

•

作用中圖層除了圖層名稱右方會顯示圖示外，

圖層也會呈現被選取的狀態。

•

當你要在圖層中繪製新的圖形、插入實體或是執行『貼上』命令時，該圖層都必須是在作用狀態下才行。

圖層的 4 種狀態

(85)

圖層的 4 種狀態

•

隱藏的圖層：表示該圖層的物件不會顯示出來，

也不能進行編輯的工作。當你正在編輯某一個圖層時，可以將其它圖層設定為隱藏，以便在不受干擾的環境下順利進行編輯動作。

•

鎖定的圖層：表示該圖層無法執行任何編輯動作，

但圖層中的物件仍可正常顯示。當你正在編輯某一圖層時，可以將其它圖層設為鎖定，避免不小心更動到其它圖層的內容。

(86)

圖層的 4 種狀態

•

將圖層中的物件顯示成外框：表示該圖層中的所有物件都會以外框線條來顯示。當動畫的內容複雜，需要隨時參考其它圖層的內容，可將圖層設定為此狀態，就不用擔心編輯的物件會被上面圖層遮住，並可了解各圖層物件的相對位置，兼顧編輯時的方便性。

(87)

圖層的 4 種狀態

(88)

切換圖層狀態

•

若要將圖層切換成作用中的圖層，只要選取該圖層即可。

•

接下來為您說明其餘圖層狀態的切換方法，我們以切換成隱藏的圖層來做示範，而鎖定、顯示成外框的操作也都相同。

(89)

切換圖層狀態

•

隱藏單一圖層：按一下圖層名稱右方的隱藏圖層狀態欄，可以切換圖層的隱藏或顯示狀態：

(90)

切換圖層狀態

•

隱藏或顯示所有圖層：按下圖層狀態欄的圖示，

可同時隱藏或顯示所有的圖層。

(91)

切換圖層狀態

•

隱藏或顯示其它圖層：按住 [Alt] 鍵，再按一下圖層名稱右方的隱藏圖層狀態欄，可以切換其他圖層的隱藏或顯示狀態：

(92)

8-3 影格的類型及相關操作

•

新增影格

•

播放磁頭與影格的關係

•

選取影格

•

移除影格

•

影格的類型

•

設定關鍵影格

•

設定空白關鍵影格

•

清除關鍵影格

(93)

新增影格

•

在 Flash 中開啟一個新檔案時，其時間軸刻度表上只有 1 格影格，我們可透過以下的方法來新

增影格，假設我們要新增影格至影格 15 的位置：

(94)

新增影格

•

新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容，以本例而言，就是影格 1 與影格 2 ~ 14 中的內容都一樣。

•

往後若是新增圖層，將會自動建立好相同數目的影格，但在新增的圖層中，影格內容是空白的，並不會加入任何內容：

(95)

在現有影格範圍內插入影格

•

若要在現有影格範圍內插入新影格，只要先選取想要插入的影格數量，再按下 [F5] 鍵即可新增影格。

(96)

播放磁頭與影格的關係

•

在時間軸上方有時間軸刻度表，其刻度數就代表影格編號，

而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容。

播放動畫時，播放磁頭會在時間軸刻度表上由左向右移動，

讓我們檢視動畫的播放效果：

(97)

播放磁頭與影格的關係

•

亦可直接拉曳播放磁頭到想要顯示的影格，編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）。此外，播放磁頭只限在動畫長度的範圍內移動。

(98)

選取影格

•

在編輯影格之前，首先要學會如何選取影格，下面我們示範幾種常用的選取方法：

•

在既有的影格中用滑鼠拉曳選取，指標經過的影格都會被選取，此方式只能選取相鄰且連續的影格。

(99)

選取影格

•

按住 [Shift] 鍵，然後再分別按下欲選取影格的頭尾影格，

即使不同圖層也可以一併選取：

•

按一下圖層名稱選取圖層，可將圖層中所有的影格一次選取：

(100)

選取影格

•

選取物件時，所有包含該物件的影格都會自動選取：

•

移除影格

▫

選取要移除的影格，按右鈕執行『移除影格』命

(101)

影格的類型

•

Flash 一共有3 種影格類型，分別為關鍵影格

（key frame）、空白關鍵影格（Blank key frame）與影格（Frame ）。

(102)

•

當我們對動畫中的影格進行編輯，會發現這些影格在時間軸上的圖示將顯示成，這類的影格我們稱之為關鍵影格（key frame）。

•

一般而言，關鍵影格多用在動畫過程中產生變化的影格，可說是動畫的重心。我們可以在關鍵影格加入物件（包括聲音檔）或特效、編輯圖像、編輯元件，或是加入

ActionScript 。

關鍵影格

(103)

空白關鍵影格

•

空白關鍵影格（Blank key frame）是一種特殊的關鍵影格，表示此關鍵影格中沒有任何物件，

其作用是清空前一關鍵影格中的物件，所以多半用在關鍵影格之後；或使用在影格中沒有物件，

但必須加入 ActionScript 或聲音檔的情況中。

(104)

影格

•

關鍵影格和空白關鍵影格之外的影格，都屬於一般的影格（Frame），一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容。

•

當影格之前有個關鍵影格時，影格會呈現灰色，

表示延續前面關鍵影格的內容；若影格之前有個空白關鍵影格，影格呈現白色，表示延續前面空白關鍵影格的內容，也就是一片空白。

(105)

影格

•

結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格，影格上會標示空心小方格，目的是做為標記，讓設計者在製作動畫時容易辨識。

(106)

•

當關鍵影格之間設有補間動畫時，則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格，而隨著補間動畫的類型，又可分為以綠色顯示的形狀影格，與以紫色顯示的移動影格。在補間動畫影格上會顯示箭頭，你可以輕易地分辨出來。

•

補間動畫可由下方屬性面板進行設定。線段或方塊的形

補間動畫影格

(107)

設定關鍵影格

•

設定關鍵影格表示該影格在動畫中具有關鍵性內容。當我們執行『插入關鍵影格』命令時，除了可以在未使用的影格上新增關鍵影格外，也可以將原有的影格轉換為關鍵影格。

•

若在關鍵影格之後新增關鍵影格，則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來。

(108)

設定空白關鍵影格

•

執行『插入空白關鍵影格』命令，編輯區會變成空白，因此當動畫進行到必須將全部的內容更換時，可設定 1 格空白關鍵影格，將影格內容清空，

再接著安排新的動畫內容。

(109)

設定空白關鍵影格

•

我們也可以選取一般的影格，再按滑鼠右鈕執行

『轉換成關鍵影格』或『轉換成空白關鍵影格』

命令，一次將一個或多個影格轉換成關鍵影格或空白關鍵影格。

•

若是在沒有建立影格的部份插入關鍵影格，或是插入空白關鍵影格，等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作。

(110)

清除關鍵影格

•

『清除關鍵影格』命令的作用並不是刪除影格，

而是將關鍵影格（或空白關鍵影格）轉變成一般影格。因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容。

(111)

8-4 複製、搬移與反轉影格

•

複製影格

•

搬移影格

•

反轉影格

(112)

複製影格

•

複製影格（Copy Frame）有兩種方式，最方便的就是用滑鼠拉曳來進行複製，此方式可在同一個動畫檔中複製影格。若要在不同的檔案之間複製影格，就要使用『複製影格』與『貼上影格』

命令。

•

使用滑鼠拉曳的方式來複製影格時，請先將欲複製的影格選取起來，然後按住 [Alt] 鍵，拉曳選取區到要貼上的位置。

(113)

複製影格

•

使用功能表命令複製影格時，同樣請先選取欲複製的影格，在選取區中按下滑鼠右鈕執行

『複製影格』命令，再將指標移至欲貼上影格的地方，然後按下滑鼠右鈕執行『貼上影格』

命令即可。

(114)

搬移影格

•

用滑鼠拉曳的方式來搬移影格（Move Frame）

是再簡單不過的了，只要將欲搬移的影格選取起來，然後拉曳選取區到適當的位置即可。

•

你也可以按下滑鼠右鈕，利用快顯功能表中的

『剪下影格』、『貼上影格』命令來搬移影格。

(115)

移動關鍵影格

•

若需要在影格中移動關鍵影格位置，只要先點選關鍵影格，再拉曳關鍵影格到適當位置即可。

(116)

反轉影格

•

反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒，反過來播放的意思。

(117)

反轉影格

(118)

反轉影格

•

雖然這只是一個簡單的例子，但是在動畫內容很複雜的時候，只要執行『反轉影格』命令，就可以輕鬆地將動畫反轉，相當好用。

•

必須完整選取一段動畫的開始至結束之間的所有影格，才能執行反轉影格的操作，單一影格則無法執行此命令。

(119)

8-5 影格速率與時間軸刻度比例

•

接著我們再來看看時間軸面板上其它的功能。

在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊：

(120)

影格速率

•

影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數，預設是 12 fps（frame per second），也就是每秒播放 12 格影格的意思。

影格速率會影響動畫的流暢性，若速率太低，會明顯感受到播放畫面停格現象。

•

依照人類視覺暫留的特性，若要動畫流暢自然，

12 fps 是最起碼的速率要求；24 fps 則適合製作分解動作精細的動畫，像是電影動畫。一般來說預設的 12 fps 就很足夠了。

(121)

影格速率

•

如果要為動畫設定其它的影格速率，請執行

『修改/文件』命令（或是雙按時間軸面板的影格速率欄），開啟文件屬性交談窗：

(122)

時間軸刻度

•

時間軸刻度表上一個刻度即代表一個影格，刻度大小的檢視比例是可以調整的。

(123)

時間軸刻度

(124)

•

影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中，就好像在看電影或是連續照片的膠捲底片一樣。

•

請按下時間軸面板的鈕，選擇『預覽』或『預覽內容』

這兩個命令，即可在時間軸預覽影格內容：

影格預覽功能

(125)

8-6 描圖紙功能

•

在預設的情況下，舞台中只會顯示單 1 影格的內容。為了方便掌握前後影格內容的位置，Flash 提供了描圖紙（Onion Skin）功能，讓你可以在舞台上同時檢視 2 格以上的影格內容。

(126)

描圖紙模式

•

描圖紙（Onion Skin）鈕，可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容，並以逐漸淡出的色彩表現影格順序，順序愈前面顏色愈淺。

•

若播放磁頭所在的影格為關鍵影格，

則會以原色表現。

(127)

描圖紙外框

•

描圖紙外框（Onion Skin Outlines）鈕，會以播放磁頭所在位置為中心，將前後數個影格的內容，以逐漸淡出的框線顯示出來。

(128)

編輯多個影格

•

編輯多個影格（Edit Multiple Frames）鈕，會以播放磁頭所在位置為中心，以原來的色彩呈現前後數個影格中含有關鍵影格的內容，但不會顯示關鍵影格之間的變化。

•

此外，所有顯示出來的關鍵影格內容都可以選取進行編輯。

(129)

編輯多個影格

•

編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話，既可以看見動畫的變化，又可以編輯關鍵影格的內容。

(130)

•

利用描圖紙功能檢視影格內容時，可用滑鼠拉曳時間軸刻度上的，調整顯示的開始影格；

拉曳調整顯示的結束影格。若是藉由修改描圖紙標記鈕來調整，則可透過命令的方式來調整標記範圍，以下為您一一說明。

調整描圖紙標記範圍

(131)

調整描圖紙標記範圍

•

永久顯示標記（Always Show Makers）：選擇此項，即使不執行描圖紙功能，也會在時間軸刻度表上顯示描圖紙標記範圍。

(132)

調整描圖紙標記範圍

•

鎖定描圖紙（Anchor Onion）：選擇此項，會將時間軸刻度表上的描圖紙標記範圍鎖定。原本描圖紙標記範圍會跟著播放磁頭移動，鎖定之後即使移動播放磁頭，描圖紙標記範圍也不會移動。

(133)

•

描圖 2 格（Onion 2）：將描圖紙標記範圍設定在播放 磁頭前後 2 格影格。

•

描圖5格（Onion 5）：將描圖紙標記範圍設定在播放磁頭前後 5 格影格。

•

描圖全部（Onion All）：將所有的影格都設定在描圖紙標記範圍之內。

調整描圖紙標記範圍

(134)

實做練習－倒數開場

•

倒數開場（exercise/open.fla）

▫

利用元件、圖層編排

(135)

HW03 Flash 卡片

•

Flash 卡片製作，主題不限

▫

開頭顯示：主題、學號與製作人

▫

內容至少 10 秒，不超過 20 秒

▫

內容設計與豐富性皆列入評分

•

完成後請將原始檔 .fla 寄給老師；若檔案中有使用特殊字型，請將 .swf 檔一併寄給老師。