時間軸 (Timeline) 面板、 圖層 (Layer) 與 影格 (Frame)

Presentation on theme: "時間軸 (Timeline) 面板、 圖層 (Layer) 與 影格 (Frame)"— Presentation transcript:

1 時間軸 (Timeline) 面板、 圖層 (Layer) 與 影格 (Frame)
第 9 章 時間軸 (Timeline) 面板、 圖層 (Layer) 與 影格 (Frame) 著作權所有 © 旗標出版股份有限公司

2 本章提要 圖層 (Layer) 的狀態設定 影格 (Frame) 的新增、選取與刪除 影格 (Frame) 的類型
影格速率與時間軸刻度比例 描圖紙 (Onion Skin) 功能 動畫原理與製作 Flash 動畫的重要概念 認識時間軸 (Timeline) 面板、圖層 (Layer) 與影格 (Frame) 圖層 (Layer) 的操作與管理

3 動畫原理與製作 Flash 動畫 的重要概念 提到「動畫」, 大多數人都可直接聯想到「迪士尼」或是「宮崎駿」的眾多卡通動畫電影, 不過動畫到底是利用什麼原理製作出來的, 可能就沒幾個人說得出個所以然囉。 動畫基本原理 使用 Flash 製作動畫的注意事項

4 動畫基本原理 動畫的基本原理, 是將數張靜態的圖片, 以很快的速度連續播放 (通常是每秒 24 ~ 30 張), 利用人類眼睛「視覺暫留」 無法分辨出上一張畫面與下一張畫面間隔的特性, 當連續播放這些靜態圖片時, 看起來就變成連續的動畫囉：

5 動畫基本原理

6 動畫基本原理 Flash 亦是利用相同的原理來製作動畫的, 將上圖一格一格的圖片對照在 Flash 中, 其實就是時間軸 (Timeline) 上一格一格的影格 (Frame)。 Flash 將動畫內容分解成一格一格的影格來製作, 最後透過快速播放, 就成了 Flash 動畫了：

7 動畫基本原理

8 使用 Flash 製作動畫的注意事項 由於 Flash 動畫最常應用在網頁上, 所以它比一般動畫更需要注意如何節省動畫檔的體積。想要節省動畫檔的體積, 下面有幾個概念提醒您： 多運用補間動畫 來設計動畫效果, 並減少動畫中關鍵影格的數量。 多利用元件, 少用匯入點陣圖的方式來製作動畫。

9 使用 Flash 製作動畫的注意事項 動畫中的靜態、動態部分, 以及 ActionScript 程式、聲音、視訊, 儘量都分開在不同圖層 (Layer) 中製作較好。 匯出含有聲音的 Flash 影片時, 利用 MP3 格式來壓縮聲音可以有效降低檔案大小。 注意字型的使用, 儘量使用裝置字體, 且不要使用太多種字型以免增加檔案體積。

10 認識時間軸 (Timeline) 面板、 圖層 (Layer) 與影格 (Frame)

11 何謂時間軸 (Timeline) 動畫檔案視窗中的時間軸 (Timeline, 以下簡稱時間軸) 面板, 主要顯示出圖層 (Layer, 以下簡稱圖層) 以及影格 (Frame, 以下簡稱影格)。 時間軸面板的各項元件說明如下：

12 時間軸面板的各項元件 在 Flash 的動畫視窗中若沒有看見時間軸面板, 請確定『視窗 / 時間軸』命令是否已勾選。

13 時間軸 (Timeline) 時間軸面板若有未能顯示的圖層, 請用滑鼠拉曳右側的捲軸即可顯示其他圖層：

14 何謂圖層 (Layer) 製作卡通動畫的時候, 為了製作上的方便, 常會將畫面中的背景與角色分別製作, 例如將人物、背景分別繪製在不同的透明賽璐璐片上, 當背景與人物交疊時便成為完整的畫面；若要呈現人物原地跳躍的動作時, 只要更換人物的賽璐璐片即可。此觀念運用在 Flash 動畫中, 就是「圖層」！

15 ch09-1.fla Flash 動畫可以將背景、物件分別放置在不同的圖層上：

16 何謂影格 (Frame) Flash 時間軸面板上一格格的影格, 就如同卡通動畫影片的單格畫面一樣, 而影格順序則代表 Flash 動畫行進的程序, 我們必須根據演出順序製作影格內容；不過, 影格內容並非放置在時間軸面板內, 而是顯示在舞台之中。 一部Flash 動畫的演出全看如何在時間軸面板上設計與安排影格：

17 ch09-2.fla

18 圖層 (Layer) 的操作與管理 圖層的原理與作用, 就如同一張透明的賽璐璐片, 你可以將動畫中的每項物件, 放置在不同圖層中, 圖層交疊就形成完整的畫面。 在各圖層中的物件, 做任何的移動或變化, 都不會相互干擾影響, 所以當你編輯一樣物件時, 只要在物件所在的圖層進行操作即可, 大幅降低了製作過程的複雜度與難度。

19 選取圖層 (Layer) 當你想要對圖層進行任何編輯動作時, 首先必須選取正確的圖層, 而選取的方式有下列 3 種：

20 新增圖層 (Layer) 新建立的動畫檔預設只有一個圖層, 所以要新增圖層就得自己來；而新增的圖層會出現在選取的圖層之上。
新增圖層的方式如下：

21 將圖層 (Layer) 重新命名 Flash 會自動將新增圖層依序命名為圖層 ＊ (＊ 為 1、2、3 ... 等數字)。
若要為圖層重新命名, 可在雙按圖層名稱後, 直接輸入新名稱即可：

22 刪除圖層 (Layer) 想要刪除不用的圖層, 也可以在時間軸面板上直接進行：

23 改變圖層 (Layer) 順序 時間軸面板中圖層的上下位置, 代表了圖層中的物件在編輯區域的前後次序關係。
在時間軸面板愈上方的圖層內容, 就位於編輯區域愈上層, 而背景就是放置在最底層的圖層。 想要變動圖層的順序, 請如下進行：

24 ch09-4.fla

25 使用圖層資料夾 (Layer Folder) 管理圖層
圖層資料夾的使用方法如下：

26 ch09-5.fla (STEP 1 & 2)

27 ch09-5.fla (STEP 3)

28 ch09-5.fla (STEP 4 & 5)

29 ch09-5.fla (STEP 6)

30 圖層 (Layer) 的狀態設定 圖層 (Layer) 的 4 種狀態 切換圖層 (Layer) 狀態 設定圖層物件的外框色彩 作用中的圖層
隱藏的圖層 鎖定的圖層 圖層中的物件顯示成外框 切換圖層 (Layer) 狀態 設定圖層物件的外框色彩

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

32 作用中的圖層 表示目前正在進行編輯的圖層。不論有幾個圖層, 都只會有 1 個作用圖層。
作用中圖層除了圖層名稱右方會顯示 圖示外, 圖層也呈現被選取的狀態。當你要在圖層中繪製新的圖形、插入實體或是執行『貼上』命令時, 該圖層都必須是在作用狀態下才行。

33 隱藏的圖層 表示該圖層的物件不會顯示出來, 當然也就不能進行編輯的工作。當你正在編輯某一個圖層時, 就可將其他圖層都設定為隱藏的圖層, 像是在做「清場」一樣, 以便順利進行該圖層的編輯動作。 若選取的圖層被設定成隱藏、或鎖定的狀態, 該圖層就無法做任何編輯或變動, 而圖層上會顯示出 圖示。

34 鎖定的圖層 表示該圖層無法執行任何編輯動作, 但圖層中的物件仍可正常顯示。當你正在編輯某一圖層時, 亦可將其他圖層設為鎖定的圖層, 以免不小心動到不該動的圖層內容。

35 圖層中的物件顯示成外框 表示該圖層的所有物件都以外框線條來顯示, 既能看見圖層中的內容, 也可以執行編輯工作。
若你的動畫內容複雜, 但編輯時又想看見其他圖層的內容, 可將圖層設定為此狀態, 就不用擔心編輯的物件被上面圖層內容遮住, 並可了解各圖層物件的相對位置, 兼顧編輯時的方便性。

36 ch09-5.fla

37 切換圖層 (Layer) 狀態 若要將圖層切換成作用中的圖層, 只要選取該圖層即可。
以下為您說明其餘圖層狀態的切換方法, 我們以切換成隱藏的圖層來做示範：

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

39 同時切換所有圖層的隱藏 或顯示狀態 按一下隱藏圖層狀態欄最上方的 圖示, 可以同時切換所有圖層的隱藏或顯示狀態：

40 切換其他圖層的隱藏或顯示狀態 按住 鍵不放, 再按一下圖層名稱右方的隱藏圖層狀態欄, 可以切換其他圖層的隱藏或顯示狀態：

41 設定圖層物件的外框色彩 設定以外框顯示圖層內容, 可使圖層中的物件以外框顯示, 除了可以清楚看見圖層的內容, 還可以用來區別圖層的內容。
若是你把每個圖層的外框色彩都設為不同, 就可以一眼判別物件是屬於哪一個圖層, 幫助我們的編輯工作進行地更順利！

42 設定圖層物件的外框色彩 Flash 預設的圖層外框色彩雖不相同, 但在新增到第 9 個圖層的時候, 外框的顏色就會開始循環重複了。
若想要改變外框的顏色, 請在圖層名稱上按下滑鼠右鈕, 執行『屬性』命令：

43 設定圖層物件的外框色彩

44 影格 (Frame) 的新增、 選取與刪除 新增影格 (Frame) 播放磁頭 選取影格 (Frame) 移除影格 (Frame)
在現有影格範圍內插入影格 播放磁頭 置中播放磁頭 選取影格 (Frame) 移除影格 (Frame)

45 新增影格 (Frame) 在 Flash 中開啟一個新檔案時, 其時間軸刻度表上只有 1 格影格：

46 新增影格方法 我們可透過以下的方法來新增影格：

47 新增影格的內容 新增影格的內容為延續前一關鍵影格的內容。以本例而言, 就是影格 1 的內容：

48 新增影格的內容 而往後所新增的圖層, 也會自動建立好相同數目的影格, 非常地方便：

49 在現有影格範圍內插入影格 若要在現有影格範圍內插入新影格, 只要選取插入位置所在的影格, 直接按下 鍵, 即可新增影格：

50 播放磁頭 在時間軸面板上方的時間軸刻度表, 上面的刻度數就代表影格編號。播放動畫的時候, 時間軸刻度表上的播放磁頭會由左向右移動, 我們可由播放磁頭知道目前舞台播放的是哪一格影格的內容。 直接拉曳播放磁頭到想要顯示的影格, 編輯區域就會顯示出該影格內容 (或者直接按下時間軸刻度表上的影格刻度也可以), 播放磁頭只限在動畫長度的範圍 (即有設置影格的部份) 內移動：

51 播放磁頭 使用鍵盤的 鍵可以將播放磁頭往右移動一格； 鍵則可以往左移動一格：

52 置中播放磁頭 如果動畫長度很長, 時間軸面板無法顯示所有的影格時, 就需要你拉曳時間軸面板下方的捲軸來捲動影格。為了增加編輯上的便利, Flash 提供一個置中影格鈕, 可快速將播放磁頭所在的影格, 放置在時間軸面板中央的位置, 以方便進行編輯。

53 置中播放磁頭

54 選取影格 (Frame) 在編輯影格之前, 首先要了解如何選取影格, 下面我們示範幾種常用的選取方法：

55 選取影格 (Frame)

56 移除影格 (Frame) 選取要移除的影格, 按右鈕執行『移除影格』命令即可移除影格：

57 影格 (Frame) 的類型 Flash 的 3 種影格 (Frame) 設定關鍵影格 (keyframe)
設定空白關鍵影格 (Blank keyframe) 清除關鍵影格 (Clear keyframe)

58 Flash 的 3 種影格 (Frame) Flash 一共有 3 種影格類型, 分別為關鍵影格 (keyframe)、空白關鍵影格 (Blank keyframe) 與影格 (Frame)。 關鍵影格 (keyframe) 空白關鍵影格 (Blank keyframe) 影格 (Frame) 補間動畫影格

59 關鍵影格 (keyframe) 當我們對動畫中的一些影格進行過編輯作業, 我們會發現這些影格在時間軸面板的圖示會變成 。
當我們對動畫中的一些影格進行過編輯作業, 我們會發現這些影格在時間軸面板的圖示會變成 。 這類的影格我們稱之為關鍵影格。一般而言, 關鍵影格多用在動畫過程中產生變化的影格, 堪稱動畫的重心。我們可以在關鍵影格上加入物件 (包括聲音檔) 或特效、編輯圖像、編輯元件, 以及加入 ActionScript。

60 關鍵影格

61 空白關鍵影格 (Blank keyframe)
空白關鍵影格是一種特殊的關鍵影格, 表示此關鍵影格中沒有任何物件, 其作用為清空前一關鍵影格中的物件, 所以多伴隨在關鍵影格之後；或使用在影格中沒有物件, 但必須加入 ActionScript 或聲音檔的情況中：

62 空白關鍵影格 (Blank keyframe)

63 影格 (Frame) 關鍵影格和空白關鍵影格之外的影格都屬於一般的影格。
一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容。當影格之前有個關鍵影格時, 它呈現灰色, 表示延續前面關鍵影格的內容；若影格之前有個空白關鍵影格, 它呈現白色, 也表示它延續著前面的空白關鍵影格的內容, 也就是一片空白：

64 影格 (Frame)

65 結束影格 結束影格是指含有空心小方格的影格, 是關鍵影格與關鍵影格 (或空白關鍵影格) 之間動畫的最後一格, 僅為標記作用, 好讓設計者在製作動畫時容易辨識。

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

67 補間動畫影格

68 設定關鍵影格 (keyframe) 設定關鍵影格並不一定是新增影格, 而是表示該影格在動畫中具有關鍵性內容。
當我們執行『插入關鍵影格』命令時, 除了可以在未使用的影格上新增 1 格關鍵影格之外, 也可以將原有的影格設定為關鍵影格。 若在關鍵影格之後的影格新增關鍵影格, 則此新的關鍵影格將會自動地把前一個關鍵影格的內容複製過來：

69 設定關鍵影格 (keyframe)

70 設定關鍵影格 (keyframe) 但若在空白關鍵影格之後新增關鍵影格, 則因為自動複製的結果, 影格內容還是空白的, 所以就成為空白關鍵影格囉：

71 設定關鍵影格 (keyframe)

72 設定空白關鍵影格 (Blank keyframe)
執行『插入空白關鍵影格』命令之後, 編輯區會變成空白無內容。因此當動畫進行到必須將全部的內容更換時, 可設定 1 格空白關鍵影格, 將影格內容清空, 接著就可以直接安排新的動畫內容了 。 還可以選取一般的影格之後, 按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令, 一次將一個或多個影格轉換成關鍵影格或空白關鍵影格：

73 設定空白關鍵影格

74 同時新增影格與設定關鍵影格 若你在圖層沒有建立影格的部分插入關鍵影格或是插入空白關鍵影格, 等於是同時進行了新增影格與設定關鍵影格 (或空白關鍵影格) 的動作哦：

75 清除關鍵影格 (Clear keyframe)
執行『清除關鍵影格』命令的作用並不是刪除影格, 而是將關鍵影格 (或空白關鍵影格) 變成一般影格。因此影格的內容將會轉變成為前 1 格關鍵影格 (或空白關鍵影格) 的內容。 若選取一般影格後按滑鼠右鈕執行『清除影格』命令, 則可將該影格之內容刪除, 轉為空白關鍵影格：

76 清除關鍵影格 (Clear keyframe)

77 影格 (Frame) 的複製、 搬移與反轉 複製影格 (Copy Frame) 搬移影格 (Move Frame)
反轉影格 (Reverse Frame)

78 複製影格 (Copy Frame) 複製影格有兩種方式, 最方便的就是用滑鼠拉曳的方式複製影格, 此方式可在同一個動畫檔中複製影格；若要在不同的檔案之間複製影格, 就要使用『複製影格』與『貼上影格』命令。

79 使用滑鼠拉曳複製影格 (Frame) 將欲複製的影格選取起來, 然後按住 鍵, 拉曳選取區到要貼上的位置：

80 使用滑鼠拉曳複製影格 (Frame) 放開滑鼠鈕, 影格立即複製完成。

81 使用功能表命令複製影格 (Frame)

82 使用功能表命令複製影格 (Frame)

83 搬移影格 (Move Frame) 用滑鼠拉曳的方式來搬移影格是再簡單也不過了。只要將欲搬移的影格選取起來, 然後拉曳選取區到適當的位置即可。 你也可以按下滑鼠右鈕, 利用快顯功能表中的『剪下影格』、『貼上影格』命令來搬移影格：

84 搬移影格 (Move Frame)

85 移動關鍵影格 若需要在影格中移動關鍵影格位置, 只要先點選關鍵影格後, 再拉曳該關鍵影格到適當位置即可：

86 反轉影格 (Reverse Frame) 反轉是把動畫的頭尾順序顛倒, 反過來播放的意思。我們先來看看下面這個例子 (ch09-11.fla) 。 這個動畫的前半段 (從 F 變成 FLASH) 跟後半段 (從 FLASH 變成 F ) 剛好是相反的, 當我們碰到這樣的情形時, 其實後半段的動畫可以不用重新設定, 只要靠複製、搬移跟反轉動畫的命令便可以完成。

87 反轉影格 (Reverse Frame) 雖然這只是一個簡單的例子, 但是在動畫內容很複雜的時候, 只要執行『反轉影格』命令, 就可以輕鬆地將動畫反轉, 相當好用呢！ 必須完整選取一 段動畫的開始至 結束之間的所有影格, 才能執行反轉影格的操作：

88 反轉影格 (Reverse Frame)

89 反轉影格 (Reverse Frame)

90 反轉影格 (Reverse Frame)

91 影格速率與時間軸刻度比例 在時間軸面板下方會顯示出設定的影格速率 (Frame Rate) 等資訊：

92 影格速率 影格速率是指 Flash 動畫每秒鐘播放的影格數, Flash 預設是 12 fps (frame per second), 也就是每秒播放 12 格影格的意思。影格速率會影響動畫流暢性, 若速率太低, 則會明顯感受到播放畫面有停格現象。 如果要為動畫設定其他的影格速率, 請執行『修改 / 文件』命令 (或是在時間軸面板的每秒播放速率顯示處 雙按亦可), 即可開啟文件屬性交談窗：

93 影格速率

94 時間軸 (Timeline) 刻度面板 時間軸刻度表上一個刻度即代表一個影格, 刻度大小的檢視比例是可以改變的：

95 時間軸 (Timeline) 刻度面板

96 影格預覽 (Frame Preview) 功能
影格預覽功能可以將影格中的內容顯示在時間軸面板的影格中, 就好像在看電影或是連續照片的膠捲底片一樣：

97 影格預覽 (Frame Preview) 功能

98 描圖紙 (Onion Skin) 功能 一般而言，在舞台上只能顯示 1 格影格的內容。為了方便掌握前後影格內容的位置, Flash 提供了描圖紙 (Onion Skin) 功能, 讓你可以在舞台上同時檢視 2 格以上的影格內 容：

99 描圖紙 (Onion Skin) 功能

100 2 種描圖紙 (Onion Skin) 模式 在描圖紙模式下, 你只能選取播放磁頭所在影格的內容,其餘的影格, 只看得見, 但無法選取及編輯。 描圖紙 描圖紙外框

101 描圖紙 在編輯區域同時顯示出以原本播放磁頭所在位置為中心的前後數個影格內容。並以逐漸淡出的色彩表現影格的順序, 順序在最前面的影格, 內容顏色最淺。若播放磁頭所在的影格為關鍵影格, 則會以原色表現：

102 ch09-13.fla

103 描圖紙外框 以原本播放磁頭所在位置為中心, 前後數個影格內容會以逐漸淡出的框線顯示出來：

104 編輯多個影格 以原本播放磁頭所在位置為中心, 以原色呈現前後數個影格內容中含有關鍵影格的內容, 而不會顯示出 2 格關鍵影格之間的變化。另外, 所有顯示出來的關鍵影格內容都可以選取進行編輯哦！ 鈕配合 鈕或 鈕使用的話, 既可以看見動畫的變化情況, 又可以編輯關鍵影格的內容：

105 調整描圖紙標記範圍 按下時間軸面板上的 鈕, 會彈出一個功能表, 可以用來調整時間軸刻度表上描圖紙的標記範圍：

106 永久顯示標記 (Always Show Makers)
勾選此項, 即使不執行描圖紙功能, 也會在時間軸刻度表上顯示描圖紙標記範圍：

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

108 描圖 2 格 (Onion 2) 將描圖紙標記範圍設定在播放磁頭前後 2 個影格之內：

109 描圖 5 格 (Onion 5) 將描圖紙標記範圍設定在播放磁頭前後 5 個影格之內：

110 描圖全部 (Onion All) 將所有的影格都歸在描圖紙標記範圍之內：

111 自訂描圖紙標記範圍 除了上述利用功能表來設定描圖紙標記範圍之外, 拉曳描圖紙標記範圍兩側的調整鈕, 也可以自訂描圖紙標記範圍：