Embed Size (px)
Citation preview
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
元件實體與元件庫
講師陳昭源
October 21 2007
Page 2Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
7-1 認識元件與實體
7-2 認識元件庫與內建元件庫
7-3 元件的類型
7-4 建立元件
7-5 元件編輯的環境7-6 元件庫的操作7-7 實體屬性設定
Page 3Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-1 認識元件與實體
在 Flash 製作動畫時我們可以將會重複使用到的物件如圖像物件群組物件文字物件等製作成元件（Symbol）存放在動畫文件的元件庫（Library）中當你需要使用該元件時便可自元件庫將它拉曳出來使用此時被放入編輯區中進行編輯的便是該元件的實體（Instance）
Page 4Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
例如你可以將花朵的圖片轉換成元件並重複拉曳此元件至舞台中用這些複製出來的實體來建立一個花園你還可以經由改變顏色屬性大小等來變化這些實體的外觀省卻一一繪製的功夫可說是方便又實用
Page 5Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
在編輯區中的每個實體都是獨立個體你可任意編輯更改它的屬性而不會影響到相同元件的其它實體但如果進入元件的編輯模式進行修改則所有的實體也會同時更新
Page 6Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種一種是每個動畫專屬的元件庫（Library）另一種則是內建元件庫（Common Libraries）兩者皆可透過『視窗』功能表來開啟以下即為您說明
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 2Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
7-1 認識元件與實體
7-2 認識元件庫與內建元件庫
7-3 元件的類型
7-4 建立元件
7-5 元件編輯的環境7-6 元件庫的操作7-7 實體屬性設定
Page 3Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-1 認識元件與實體
在 Flash 製作動畫時我們可以將會重複使用到的物件如圖像物件群組物件文字物件等製作成元件（Symbol）存放在動畫文件的元件庫（Library）中當你需要使用該元件時便可自元件庫將它拉曳出來使用此時被放入編輯區中進行編輯的便是該元件的實體（Instance）
Page 4Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
例如你可以將花朵的圖片轉換成元件並重複拉曳此元件至舞台中用這些複製出來的實體來建立一個花園你還可以經由改變顏色屬性大小等來變化這些實體的外觀省卻一一繪製的功夫可說是方便又實用
Page 5Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
在編輯區中的每個實體都是獨立個體你可任意編輯更改它的屬性而不會影響到相同元件的其它實體但如果進入元件的編輯模式進行修改則所有的實體也會同時更新
Page 6Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種一種是每個動畫專屬的元件庫（Library）另一種則是內建元件庫（Common Libraries）兩者皆可透過『視窗』功能表來開啟以下即為您說明
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 3Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-1 認識元件與實體
在 Flash 製作動畫時我們可以將會重複使用到的物件如圖像物件群組物件文字物件等製作成元件（Symbol）存放在動畫文件的元件庫（Library）中當你需要使用該元件時便可自元件庫將它拉曳出來使用此時被放入編輯區中進行編輯的便是該元件的實體（Instance）
Page 4Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
例如你可以將花朵的圖片轉換成元件並重複拉曳此元件至舞台中用這些複製出來的實體來建立一個花園你還可以經由改變顏色屬性大小等來變化這些實體的外觀省卻一一繪製的功夫可說是方便又實用
Page 5Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
在編輯區中的每個實體都是獨立個體你可任意編輯更改它的屬性而不會影響到相同元件的其它實體但如果進入元件的編輯模式進行修改則所有的實體也會同時更新
Page 6Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種一種是每個動畫專屬的元件庫（Library）另一種則是內建元件庫（Common Libraries）兩者皆可透過『視窗』功能表來開啟以下即為您說明
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 4Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
例如你可以將花朵的圖片轉換成元件並重複拉曳此元件至舞台中用這些複製出來的實體來建立一個花園你還可以經由改變顏色屬性大小等來變化這些實體的外觀省卻一一繪製的功夫可說是方便又實用
Page 5Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
在編輯區中的每個實體都是獨立個體你可任意編輯更改它的屬性而不會影響到相同元件的其它實體但如果進入元件的編輯模式進行修改則所有的實體也會同時更新
Page 6Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種一種是每個動畫專屬的元件庫（Library）另一種則是內建元件庫（Common Libraries）兩者皆可透過『視窗』功能表來開啟以下即為您說明
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 5Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
認識元件與實體
在編輯區中的每個實體都是獨立個體你可任意編輯更改它的屬性而不會影響到相同元件的其它實體但如果進入元件的編輯模式進行修改則所有的實體也會同時更新
Page 6Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種一種是每個動畫專屬的元件庫（Library）另一種則是內建元件庫（Common Libraries）兩者皆可透過『視窗』功能表來開啟以下即為您說明
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 6Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種一種是每個動畫專屬的元件庫（Library）另一種則是內建元件庫（Common Libraries）兩者皆可透過『視窗』功能表來開啟以下即為您說明
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 7Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件庫
元件庫面板（Library）是存放元件點陣圖聲音視訊組件等物件的工具箱所有元件一經建立就會存放在元件庫中執行『檔案匯入』命令可自外部匯入點陣圖聲音視訊等物件這些物件也會儲存在元件庫因此動畫元件的新增複製編輯等操作也都是依賴元件庫來進行與管理
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 8Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫（Common Libraries）則存放了 Flash 提供的元件讓使用者自由使用Flash 內建的元件庫共有 3 種執行『視窗內建元件庫』命令可看到 Flash 提供的元件類別
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 9Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
這 3 種內建元件庫的差異
按鈕（Buttons）提供各種具有按鈕功能的元件
類別（Classes）提供連接資料庫或其它Web Services 所使用的元件課程互動（Learning Interactions）提供現成的線上互動物件主要用於教學方面
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 10Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的但將其拉曳到舞台上後會自動在文件的元件庫中複製一份複製到元件庫的元件就和你自行建立的一樣可以自由編輯應用
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 11Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-3 元件的類型
Flash 的元件包含圖像元件（Graphic Symbol）按鈕元件（Button Symbol）影片片段元件（Movie Clip Symbol）字體元件（Font）與組件（Components）5 種類型我們一一說明如下
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 12Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
圖像元件（Graphic Symbol）可以是一般靜態的圖檔也可以是一段動畫
圖像元件最大的特色是必須隨著動畫的主時間軸來播放
舉例來說若你建立了一個含有 10 格影格的圖像元件將其放置於 20 格影格的主動畫中動畫將重複播放兩次圖像元件
如果將 10 格影格的元件放置在只有 1 格影格的主動畫中主動畫將會在播放圖像元件的第 1 格影格後結束
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 13Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 14Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
按鈕元件（Button Symbol）可製作按鈕功能的動畫並透過 ActionScript 或行為指令（Behavior）與瀏覽者的滑鼠或鍵盤事件產生互動每個按鈕元件都是由 4 格影格組成分別代表按鈕的 4 種狀態（後述）此外按鈕元件內可以包含影片片段元件和圖像元件
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 15Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件
我們在場景 1 看到按鈕呈現立體及光暈效果在按鈕元件的編輯模式卻只看到平面圖形這是因為我們在主動畫按鈕上套用了濾鏡效果
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 16Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
影片片段元件（Movie Clip Symbol）本身即是一段獨立的動畫我們可以利用ActionScript 和行為指令（Behavior）來控制影片片段元件且影片片段元件擁有自己獨立的時間軸不受主動畫影格數的影響甚至當你透過控制器停止主動畫的播放後影片片段元件仍可繼續播放
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 17Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件
要預覽影片片段元件必須先將動畫發佈成 swf 檔（按下 [Ctrl] + [Enter] 鍵）才看得到此外影片片段元件可以包含圖片聲音或另一個元件甚至可以設定滑鼠的動作事件或當做按鈕來使用可說是應用範圍最廣的一種元件
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 18Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
字體元件
字體元件（Font）可以單純做靜態的文字顯示也可以成為與瀏覽者溝通用的輸入欄位或做為動態顯示之用
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 19Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
組件
組件（Components）是另一種影片片段元件你可以使用 Flash 內建的組件或直接下載別人做好的組件甚至是自已開發組件來使用使用組件最大的好處是可以透過組件參數的設定將組件直接應用在動畫中而不需自行撰寫 ActionScript
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 20Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-4 建立元件
建立元件（Symbol）的方式有 2 種你可以從無到有的建立一個新元件或是選取現成的圖像物件群組物件點陣圖或文字物件再按下 [F8] 鍵將其轉換成元件
使用這兩種方式建立元件的不同點在於將現成的物件轉換成元件時該元件不僅會儲存在元件庫中還會自動將舞台上的原物件變成實體若是建立一個全新的元件此元件不會出現在舞台上而是直接儲存在元件庫內
建立元件的大致步驟如下
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 21Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
請開啟一個空白文件再執行『插入新增元件』命令（或按 [Ctrl] + [F8] 鍵）在建立新元件交談窗中替元件命名後決定元件的類型然後進入元件編輯模式編輯這個新增的空白元件
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 22Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
建立一個新元件
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 23Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
你可以將既有的圖像群組文字視訊或匯入的圖片建立成元件請選取要轉換成元件的物件然後執行『視窗元件庫』命令開啟元件庫面板
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 24Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 25Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將現成物件轉換成元件
使用現成物件所建立的元件通常是只有 1 格影格的靜態元件你可以雙按舞台上的實體進入元件編輯模式進行其它編輯當你編輯元件時所有在舞台上的實體也會隨著改變
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 26Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
當我們將圖形轉換成元件時可設定元件的註冊點註冊點是以十字準線ldquo＋來表示其代表的意義就是元件的原點（xy = 00）作用則是讓我們使用 ActioinScript 來控制該元件時能正確找到元件的座標若要製作導引線動畫啟動貼齊功能後也必須使註冊點吸附到移動路徑上元件才能隨著導引線移動
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 27Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 28Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的註冊點
在一般的情況下如果是執行『插入新增元件』命令從無到有繪製一個新元件我們會以註冊點為中心來繪製元件因此元件的註冊點常與圖形的中心點重疊呈 狀若是將繪製好的圖形轉換成元件在轉換成元件交談窗中預設的註冊點會在左上角因此轉換後的元件註冊點會顯示在左上角也可以自行設定於中央
無論是用哪一種方式建立元件我們都可以在建立成元件後再切換至元件的編輯模式下視需要來調整註冊點的位置
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 29Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座標位置這對於日後製作精確的動畫效果或是想以 ActionScript 控制實體時非常有幫助
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 30Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
利用選取工具點選舞台上的實體會看到實體中央有一個空心圓這就是中心點在變形旋轉物件時預設會以元件的中心點為基準來進行變形或旋轉此時中心點亦稱為變形點
若要更改變形點的位置可先按下自由變形工具當指標移至中心點附近呈 狀將變形點拉曳至目的位置即可改變圖形旋轉的基準點
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 31Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
元件的中心點
若要將實體的中心點（變形點）與註冊點設定在一起請先按下自由變形工具將指標移至中心點（變形點）上當指標呈 狀時雙按中心點（變形點）實體的中心點（變形點）就會移至註冊點上並顯示為 （註冊點 + 中心點）
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 32Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時該選擇什麼元件類型我們將元件的性質表列如下供你做個參考
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 33Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高而按鈕元件大多只能應用在按鈕類功能上故一般都建議使用影片片段類型以增加動畫修改的彈性
如果建立時選擇了不適用的元件類型可在元件庫內該元件的名稱上按右鈕執行『類型』命令從中選取適當的元件類型
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 34Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
元件製作與使用
練習一開啟 sample04fla將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二開啟 sample06_exfla製作蹦跳老爺車
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 35Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-5 元件編輯的環境
將圖形轉換為元件後想要編輯元件的內容必須切換到該元件的編輯模式下才能進行元件的編輯模式有下列 3 種以下分別為您介紹
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 36Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
依便利性高低依序排列
雙按元件庫面板中元件名稱的圖示或選取該元件再雙按預覽窗格
直接按下動畫文件視窗右上角的編輯元件鈕由其中選擇要編輯的元件
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 37Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕執行的『編輯』命令
選取編輯區中的實體執行『編輯編輯元件』命令（或按 [Ctrl] + [E] 鍵）
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 38Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點預設在畫面的中央位置若是想要改變元件註冊點的位置請選取全部的圖形再以註冊點為中心將圖形拉曳至目的位置例如將圖形拉曳至註冊點的右下角表示該元件的註冊點將移至左上角
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 39Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在實體位置上編輯
若想直接在舞台中編輯該元件可選擇在實體位置上編輯以便和舞台中其它物件進行比對請直接在舞台上雙按實體或按右鈕執行『在原地編輯』命令進入此編輯狀態
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 40Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件省去在場景和元件間切換的手續請在實體上按滑鼠右鈕執行『在新視窗中編輯』命令開啟一個新視窗來編輯元件
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 41Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧為了使繪製的圖形不受其它物件的影響在繪製時可以啟動繪圖物件功能或是將圖形群組在一起你可能也注意到了繪圖物件與元件有些許相似之處例如選取時都會顯示藍色框線雙按可進入編輯狀態等為了讓您的觀念更清楚我們再做個詳細的比較
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 42Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中繪圖物件則不會出現在元件庫內且繪圖物件只是靜態的圖片非動態效果
元件和繪圖物件在選取時雖都會顯示藍色選取框線但元件會顯示註冊點繪圖物件則沒有註冊點
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 43Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按皆可進入編輯環境此時可由圖示來辨別目前物件的型態
繪圖物件的圖示為 元件會顯示成（影片片段） （圖像元件）（按鈕）
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 44Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
繪圖物件與元件的差異
想要編輯繪圖物件時只要選取舞台上的物件（不需雙按進入編輯狀態）即可變更物件的填色框線外形等編輯元件時則一定要進入元件的編輯狀態其編輯的動作才會有作用
以上我們只是列出幾個方便您區分兩者的技巧在使用的原則上若是動畫中經常要出現的物件需要設定為動畫（或按鈕）想設定 ActionScript 等還是將其轉換成元件會比較方便
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 45Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-6 元件庫的操作每個 Flash 動畫檔都有一個專屬的元件庫（Library）元件庫的目的在於讓我們檢視儲存動畫中的項目（元件聲音影片圖檔等）並進行管理的工作
要在動畫中使用元件庫內的元件相信您已經相當熟悉了只要開啟元件庫面板將其中的項目拉曳到編輯區即可使用該元件
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 46Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件可同時開啟 AB 兩個動畫檔案再由元件庫面板切換至要使用的檔案元件庫例如目前在 B 動畫檔案要使用 A 檔案元件庫中的元件
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 47Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
共用元件庫
使用其它檔案元件庫中的元件後亦會自動複製一份在目前使用中的檔案元件庫你也可以利用『複製』和『貼上』命令將其它檔案元件庫中的元件複製到目前檔案的元件庫中
除了與目前已開啟的檔案共用元件庫外也可以僅開啟檔案的元件庫來利用而不須開啟動畫檔案請執行『檔案匯入共用元件庫』命令選取要使用的檔案元件庫後即可使用該檔案元件庫內的元件
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 48Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
除了上述功能外元件庫面板還有很多功能我們一一說明如下
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 49Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕在與其它檔案共用元件庫時按下此鈕可固定要選用的檔案元件庫
新元件庫面板鈕按下此鈕可將目前的檔案元件庫獨立開啟成另一個元件庫面板讓您方便在不同的元件庫面板中複製要使用的元件
項目列示窗列出元件庫面板內所有的項目每個項目前方均有其代表圖示
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 50Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
新增元件鈕按此鈕可建立新的元件功能與執行『插入新增元件』命令相同
新增資料夾鈕按此鈕可在元件庫面板中建立資料夾你可以建立各類資料夾然後把同類的項目拉曳置入同一資料夾中讓項目的管理更有條不紊
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 51Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 52Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
「元件庫」面板的基本操作
替換排列順序鈕按此鈕可切換遞增或遞減排列代表目前排列方式是遞增排列則是遞減排列
屬性鈕更改選取項目的屬性選取元件後按下此鈕可開啟元件屬性交談窗讓您重新選擇元件的類型
刪除鈕刪除目前選取的項目或資料夾（資料夾內的項目亦會一併刪除）
寬窄元件庫檢視鈕切換元件庫的顯示模式預設為窄元件庫檢視模式
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 53Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後接著我們再來討論元件的分身－實體的相關事項
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 54Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
屬性變更
所有實體的屬性都可以在屬性面板中調整屬性面板會依實體的類型而顯示對應的設定項目
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 55Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體再執行『視窗屬性』命令（也可以按 [Ctrl] + [F3] 鍵）開啟屬性面板
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 56Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
按鈕元件的實體屬性
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 57Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影片片段元件的實體屬性
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 58Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
替換把目前選取的實體換成另一個元件的實體
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 59Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
寬高設定實體的寬高度
X Y設定實體的X Y 軸位置X 軸是距離舞台左邊框的距離Y 軸是距離舞台上邊框的距離
顏色可用來設定實體的色彩亮度透明度等
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 60Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
我們以一個實際的應用來說明請開啟練習檔 Sample01fla並執行『視窗元件庫』命令（或按 [F11] 鍵）開啟元件庫面板其中我們儲存了一個花朵的圖像元件請將它拉曳到舞台中適當的位置可多拉曳幾個實體營造出花園的畫面
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 61Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色請選取舞台中的任一花朵實體再開啟屬性面板如下圖進行設定
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 62Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
在屬性面板調整色調時會呈現原來顏色加上目前填色的結果當著色量的數值愈低愈能顯現原來的色彩（此例為紅色）著色量高表示將偏重色調所設定的顏色若設定 100將完全捨棄元件原來的顏色顯示目前色調所選擇的色彩
若要回復原來的顏色請將顏色欄位設定為無
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 63Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線條可以選取舞台上的實體再執行『修改打散』命令（或按 [Ctrl] + [B] 鍵）將實體轉換為一般圖像既能自由填色編輯又不影響其它實體及元件
被打散的實體將不再是實體也不具有元件的特性例如無法設定 ActionScript 來控制修改元件庫面板中的元件時亦無法修改已打散的實體
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 64Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 65Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
各類元件的共同實體屬性
因此建議您在確定該實體不需要保有元件的特性再進行打散的步驟萬一後悔將實體打散了也不用太擔心別忘了元件庫面板裡還儲存了一份可以隨時取用的元件本尊哦
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司著作權所有 copy 旗標出版股份有限公司
FrontPage amp Flash動態網頁設計入門
時間軸圖層與影格
講師陳昭源
October 21 2007
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 67Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
本章提要
8-1 認識時間軸面板圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製搬移與反轉影格8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 68Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-1 認識時間軸圖層與影格
何謂時間軸
何謂圖層
何謂影格
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 69Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
動畫檔案視窗中的時間軸面板（Timeline以下簡稱時間軸）主要顯示出圖層（Layer以下簡稱圖層）以及影格（Frame以下簡稱影格）中的所有內容時間軸面板的各項元件說明如下
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 70Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂時間軸
時間軸中若有未能顯示的圖層可用滑鼠拉曳右側的捲軸來顯示其它圖層
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 71Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
製作傳統動畫的時候為了製作上的方便常會將畫面中的背景與角色分別製作例如將人物背景分別繪製在不同的透明賽璐璐片上當背景與人物交疊時便成為完整的畫面若要呈現人物原地跳躍的動作時只要更換人物的賽璐璐片即可此觀念運用在Flash 動畫中就是圖層
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 72Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂圖層
Flash 動畫可以將背景物件分別放置在不同的圖層上
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 73Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程來對照說明影格的觀念可以比較容易了解影格的作用
傳統動畫是先在賽璐璐片上繪製圖形然後將其掃描成單格畫面剪輯成為具有連貫性的影片Flash 時間軸上一格格的影格就如同動畫影片的單格畫面一樣而影格順序則代表 Flash 動畫行進的程序我們必須根據演出順序製作影格內容不過影格內容並非放置在時間軸內而是顯示在舞台之中
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 74Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫面連續播放而連續播放Flash 時間軸上的影格即形成 Flash 動畫一部 Flash 動畫的演出全看如何在時間軸上設計與安排影格
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 75Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在 Flash 製作動畫的注意事項多運用補間動畫（Tweened）來設計動畫效果並減少動畫中關鍵影格的數量
多利用元件（Symbol）少用匯入點陣圖的方式來製作動畫
動畫中的靜態動態部分及 ActionScript 程式聲音視訊儘量都分開在不同圖層中製作較好
匯出含有聲音的 Flash 影片時利用 MP3 格式來壓縮聲音可有效降低檔案大小
注意使用的字型使用裝置字體可有效降低檔案大小若是不想使用裝置字型則不要使用太多種字型以免增加檔案體積
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 76Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片你可以將動畫中的每項物件放置在不同圖層中圖層交疊就形成完整的畫面在各圖層中的物件做任何的移動或變化都不會相互干擾所以當你編輯一個物件時只要在物件所在的圖層進行操作將可大幅降低製作過程的複雜度與難度
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 77Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層新增圖層的方式如下
刪除圖層
若是有不需要使用的圖層可先按一下圖層名稱再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕上皆可刪除圖層
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 78Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層（為1 2 3 等依序編號）為了方便日後的編輯工作建議您為圖層重新更改為容易辨識的名稱為圖層重新命名時請雙按圖層名稱即可輸入新的圖層名稱
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 79Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取圖層
當你想要對圖層進行任何編輯動作時必須先選取圖層而選取的方式有如右 2 種
此外想要選取多個圖層時可按住 [Shift] 鍵不放再接續按下其它圖層名稱
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 80Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後關係在愈上方的圖層就位於編輯區域愈上層而背景則是放置在最底層的圖層想要變更圖層的順序請如下進行
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 81Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
實做練習
圖層的使用
開啟 sample06_exfla製作飛機與汽車同時橫越舞臺之動畫飛機與汽車之速度不同
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 82Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候圖層太多可能造成操作尋找上的不方便這時候就可以利用圖層資料夾（Layer Folder ）將相關的圖層放在同一圖層資料夾下管理起來就會方便許多圖層資料夾的使用方法如下
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 83Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 84Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 85Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層以精簡時間軸的空間再按一下圖層資料夾前方小三角形可再次開啟圖層資料夾
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 86Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄以圖示來顯示該圖層的圖層狀態一共有 4 種圖層狀態其代表的意義如下
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 87Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
作用中的圖層目前正在進行編輯的圖層
不論有幾個圖層都只會有 1 個作用圖層作用中圖層除了圖層名稱右方會顯示 圖示外圖層也會呈現被選取的狀態
當你要在圖層中繪製新的圖形插入實體或是執行『貼上』命令時該圖層都必須是在作用狀態下才行
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 88Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
隱藏的圖層表示該圖層的物件不會顯示出來也不能進行編輯的工作當你正在編輯某一個圖層時可以將其它圖層設定為隱藏以便在不受干擾的環境下順利進行編輯動作
鎖定的圖層表示該圖層無法執行任何編輯動作但圖層中的物件仍可正常顯示當你正在編輯某一圖層時可以將其它圖層設為鎖定避免不小心更動到其它圖層的內容
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 89Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框表示該圖層中的所有物件都會以外框線條來顯示當動畫的內容複雜需要隨時參考其它圖層的內容可將圖層設定為此狀態就不用擔心編輯的物件會被上面圖層遮住並可了解各圖層物件的相對位置兼顧編輯時的方便性
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 90Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
圖層的 4 種狀態
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 91Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
若要將圖層切換成作用中的圖層只要選取該圖層即可
接下來為您說明其餘圖層狀態的切換方法我們以切換成隱藏的圖層來做示範而鎖定顯示成外框的操作也都相同
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 92Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏單一圖層按一下圖層名稱右方的隱藏圖層狀態欄可以切換圖層的隱藏或顯示狀態
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 93Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示所有圖層按下圖層狀態欄的圖示可同時隱藏或顯示所有的圖層
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 94Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
切換圖層狀態
隱藏或顯示其它圖層按住 [Alt] 鍵再按一下圖層名稱右方的隱藏圖層狀態欄可以切換其他圖層的隱藏或顯示狀態
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 95Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 96Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
在 Flash 中開啟一個新檔案時其時間軸刻度表上只有 1 格影格我們可透過以下的方法來新增影格假設我們要新增影格至影格15 的位置
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 97Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
新增影格
新增的影格會延續前一關鍵影格（影格類型將在稍後說明）的內容以本例而言就是影格 1 與影格 2 ~ 14 中的內容都一樣往後若是新增圖層將會自動建立好相同數目的影格但在新增的圖層中影格內容是空白的並不會加入任何內容
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 98Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格只要先選取想要插入的影格數量再按下 [F5] 鍵即可新增影格
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 99Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表其刻度數就代表影格編號而播放磁頭會指出目前編輯區顯示的是哪一格影格的內容播放動畫時播放磁頭會在時間軸刻度表上由左向右移動讓我們檢視動畫的播放效果
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 100Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格編輯區會顯示該影格內容（或者直接按下時間軸刻度表上的影格刻度）此外播放磁頭只限在動畫長度的範圍內移動
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 101Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
在編輯影格之前首先要學會如何選取影格下面我們示範幾種常用的選取方法
在既有的影格中用滑鼠拉曳選取指標經過的影格都會被選取此方式只能選取相鄰且連續的影格
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 102Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
按住 [Shift] 鍵然後再分別按下欲選取影格的頭尾影格即使不同圖層也可以一併選取
按一下圖層名稱選取圖層可將圖層中所有的影格一次選取
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 103Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
選取影格
選取物件時所有包含該物件的影格都會自動選取
移除影格
選取要移除的影格按右鈕執行『移除影格』命令可移除影格
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 104Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格的類型
Flash 一共有3 種影格類型分別為關鍵影格（key frame）空白關鍵影格（Blank key frame）與影格（Frame ）
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 105Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
關鍵影格
當我們對動畫中的影格進行編輯會發現這些影格在時間軸上的圖示將顯示成 這類的影格我們稱之為關鍵影格（key frame）一般而言關鍵影格多用在動畫過程中產生變化的影格可說是動畫的重心我們可以在關鍵影格加入物件（包括聲音檔）或特效編輯圖像編輯元件或是加入ActionScript
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 106Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
空白關鍵影格
空白關鍵影格（Blank key frame）是一種特殊的關鍵影格表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件所以多半用在關鍵影格之後或使用在影格中沒有物件但必須加入 ActionScript 或聲音檔的情況中
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 107Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
關鍵影格和空白關鍵影格之外的影格都屬於一般的影格（Frame）一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容
當影格之前有個關鍵影格時影格會呈現灰色表示延續前面關鍵影格的內容若影格之前有個空白關鍵影格影格呈現白色表示延續前面空白關鍵影格的內容也就是一片空白
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 108Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格
結束影格是關鍵影格與關鍵影格（或空白關鍵影格）間動畫的最後一格影格上會標示空心小方格目的是做為標記讓設計者在製作動畫時容易辨識
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 109Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
補間動畫影格
當關鍵影格之間設有補間動畫時則關鍵影格至下一個關鍵影格之間的影格稱為補間動畫影格而隨著補間動畫的類型又可分為以綠色顯示的形狀影格與以紫色顯示的移動影格在補間動畫影格上會顯示箭頭你可以輕易地分辨出來
補間動畫可由下方屬性面板進行設定線段或方塊的形狀變化較適合於角度型變化因其在變化過程中較明顯的角和直線
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 110Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容當我們執行『插入關鍵影格』命令時除了可以在未使用的影格上新增關鍵影格外也可以將原有的影格轉換為關鍵影格
若在關鍵影格之後新增關鍵影格則新的關鍵影格將會自動把前一個關鍵影格的內容複製過來
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 111Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令編輯區會變成空白因此當動畫進行到必須將全部的內容更換時可設定 1 格空白關鍵影格將影格內容清空再接著安排新的動畫內容
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 112Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
設定空白關鍵影格
我們也可以選取一般的影格再按滑鼠右鈕執行『轉換成關鍵影格』或『轉換成空白關鍵影格』命令一次將一個或多個影格轉換成關鍵影格或空白關鍵影格
若是在沒有建立影格的部份插入關鍵影格或是插入空白關鍵影格等於是同時進行新增影格與設定關鍵影格（或空白關鍵影格）的動作
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 113Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影格而是將關鍵影格（或空白關鍵影格）轉變成一般影格因此影格的內容將會轉變成前 1 格關鍵影格（或空白關鍵影格）的內容
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 114Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-4 複製搬移與反轉影格
複製影格
搬移影格
反轉影格
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 115Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
複製影格（Copy Frame）有兩種方式最方便的就是用滑鼠拉曳來進行複製此方式可在同一個動畫檔中複製影格若要在不同的檔案之間複製影格就要使用『複製影格』與『貼上影格』命令
使用滑鼠拉曳的方式來複製影格時請先將欲複製的影格選取起來然後按住 [Alt] 鍵拉曳選取區到要貼上的位置
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 116Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
複製影格
使用功能表命令複製影格時同樣請先選取欲複製的影格在選取區中按下滑鼠右鈕執行『複製影格』命令再將指標移至欲貼上影格的地方然後按下滑鼠右鈕執行『貼上影格』命令即可
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 117Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
搬移影格
用滑鼠拉曳的方式來搬移影格（Move Frame）是再簡單不過的了只要將欲搬移的影格選取起來然後拉曳選取區到適當的位置即可
你也可以按下滑鼠右鈕利用快顯功能表中的『剪下影格』『貼上影格』命令來搬移影格
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 118Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置只要先點選關鍵影格再拉曳關鍵影格到適當位置即可
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 119Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
反轉影格（Reverse Frame）是把動畫的頭尾順序顛倒反過來播放的意思
我們來看看這個範例（Sample08）
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 120Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 121Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
反轉影格
雖然這只是一個簡單的例子但是在動畫內容很複雜的時候只要執行『反轉影格』命令就可以輕鬆地將動畫反轉相當好用
必須完整選取一段動畫的開始至結束之間的所有影格才能執行反轉影格的操作單一影格則無法執行此命令
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 122Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能在時間軸面板下方會顯示目前動畫所設定的影格速率（Frame Rate ）等資訊
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 123Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
影格速率（Frame Rate ）是指 Flash 動畫每秒鐘播放的影格數預設是 12 fps（frame per second）也就是每秒播放 12 格影格的意思影格速率會影響動畫的流暢性若速率太低會明顯感受到播放畫面停格現象
依照人類視覺暫留的特性若要動畫流暢自然12 fps 是最起碼的速率要求24 fps 則適合製作分解動作精細的動畫像是電影動畫一般來說預設的 12 fps 就很足夠了
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 124Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格速率
如果要為動畫設定其它的影格速率請執行『修改文件』命令（或是雙按時間軸面板的影格速率欄）開啟文件屬性交談窗
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 125Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格刻度大小的檢視比例是可以調整的
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 126Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
時間軸刻度
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 127Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
影格預覽功能
影格預覽（Frame Preview ）功能可以將關鍵影格中的內容顯示在時間軸面板中就好像在看電影或是連續照片的膠捲底片一樣
請按下時間軸面板的 鈕選擇『預覽』或『預覽內容』這兩個命令即可在時間軸預覽影格內容
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 128Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
8-6 描圖紙功能
在預設的情況下舞台中只會顯示單 1 影格的內容為了方便掌握前後影格內容的位置Flash 提供了描圖紙（Onion Skin）功能讓你可以在舞台上同時檢視 2 格以上的影格內容
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 129Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙模式
描圖紙（Onion Skin）鈕可在編輯區域同時顯示以播放磁頭為中心的前後數個影格內容並以逐漸淡出的色彩表現影格順序順序愈前面顏色愈淺
若播放磁頭所在的影格為關鍵影格則會以原色表現
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 130Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
描圖紙外框
描圖紙外框（Onion Skin Outlines）鈕會以播放磁頭所在位置為中心將前後數個影格的內容以逐漸淡出的框線顯示出來
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 131Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格（Edit Multiple Frames）鈕會以播放磁頭所在位置為中心以原來的色彩呈現前後數個影格中含有關鍵影格的內容但不會顯示關鍵影格之間的變化
此外所有顯示出來的關鍵影格內容都可以選取進行編輯
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 132Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外框鈕使用的話既可以看見動畫的變化又可以編輯關鍵影格的內容
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 133Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時可用滑鼠拉曳時間軸刻度上的 調整顯示的開始影格拉曳 調整顯示的結束影格若是藉由修改描圖紙標記鈕來調整則可透過命令的方式來調整標記範圍以下為您一一說明
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 134Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
永久顯示標記（Always Show Makers）選擇此項即使不執行描圖紙功能也會在時間軸刻度表上顯示描圖紙標記範圍
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 135Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
鎖定描圖紙（Anchor Onion）選擇此項會將時間軸刻度表上的描圖紙標記範圍鎖定原本描圖紙標記範圍會跟著播放磁頭移動鎖定之後即使移動播放磁頭描圖紙標記範圍也不會移動
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
Page 136Dept of Computer Science amp Information EngineeringNational Taiwan University October 21 2007
調整描圖紙標記範圍
描圖 2 格（Onion 2）將描圖紙標記範圍設定在播放磁頭前後 2 格影格
描圖5格（Onion 5）將描圖紙標記範圍設定在播放磁頭前後 5 格影格
描圖全部（Onion All）將所有的影格都設定在描圖紙標記範圍之內
