第 1 章 Flash 基礎 入門操作.

Presentation on theme: "第 1 章 Flash 基礎 入門操作."— Presentation transcript:

1 第 1 章 Flash 基礎 入門操作

2 本堂課重點提要 1-1 認識 Flash 環境與建檔、開檔、存檔操作 1-2 動畫編輯視窗的操作 1-3 Flash 面板的操作
1-4 場景與動畫文件屬性 1-5 認識時間軸、影格及圖層

3 1-1 認識 Flash 環境與建檔、 開檔、存檔操作
請執行 『開始/所有程式/Adobe Flash CS3 Professional』 命令啟動 Flash,預設會顯示歡迎螢幕的選單畫面, 選單內容依類型分為 3 個區域, 分別是「開啟最近使用的檔案」、「建立新檔案」和「從範本建立檔案」, 提供使用者自行選擇要執行的動作：

4 認識 Flash 環境與建檔、 開檔、存檔操作

5 認識 Flash 環境與建檔、 開檔、存檔操作
建立新檔案、開啟舊檔與儲存檔案 建立新檔案 開啟既有的檔案 儲存檔案

6 認識 Flash 的主畫面 請按下歡迎螢幕中新增區的 Flash檔案 (ActionScript 3.0) 項目, 即可看到如下圖的預設版面配置, 我們透過它來認識 Flash 的操作環境。Flash 的操作環境主要分成 3 大部份, 分別是：Flash 主視窗、動畫編輯視窗以及分佈各處的面板：

7 認識 Flash 的主畫面

8 建立新檔案、開啟舊檔與儲存檔案 進入 Flash 的工作環境後, 首先來學習如何建立新檔案、開啟既有的檔案, 以及儲存檔案等基本的操作。

9 建立新檔案 在歡迎螢幕中選擇 Flash 檔案項目, 或在 Flash 主視窗執行『檔案/新增』命令皆可建立新檔案。兩者的差異是前者在開啟時, 會立即建立一個新的空白檔案；執行後者的命令, 則會出現如下的新增文件交談窗, 讓您選擇要開啟的檔案類型：

10 建立新檔案

11 開啟既有的檔案 新的空白檔案預設會命名為未命名-1, 若繼續開啟新檔案, 則會命名為未命名-2、未命名-3...依此類推, 而當您儲存檔案 (後述) 時, Flash 則允許您自行命名為較有意義的名稱。

12 儲存檔案 要開啟既有的動畫檔做編輯, 請執行『檔案/開啟舊檔』命令將檔案重新載入Flash；或是在歡迎螢幕中選擇開啟最近使用的項目區下方的開啟, 同樣會顯示開啟舊檔交談窗讓您選擇要開啟的檔案。在此可以試著練習開啟書附光碟中,Ch01 資料夾下的練習檔 01-ex01.fla。

13 儲存檔案

14 儲存檔案 要儲存 Flash 動畫檔案, 可執行『檔案/儲存檔案』命令；若是還未儲存過的Flash 動畫, 在執行命令後會顯示另存新檔交談窗, 讓您為檔案命名後再存檔；已經命名的檔案在執行儲存動作時, 則會直接儲存起來, 若要以其它檔名儲存,請改執行『檔案/另存新檔』命令, 為動畫重新命名再儲存。Flsah 所儲存的檔案格式是 .fla, 這是 Flash 動畫的原生檔案格式, 可在 Flash 中編輯、修改。

15 儲存檔案 編輯完畢並儲存檔案後, 可執行『檔案/關閉』命令, 或是按下動畫編輯視窗標題列右側的 鈕關閉檔案。

16 1-2 動畫編輯視窗的操作 動畫編輯視窗是製作動畫內容的地方, 在開始製作動畫之前, 應該花點時間來認識並熟悉這個工作視窗, 了解其內部的組成, 並熟悉檢視動畫的技巧。 動畫編輯視窗主要分成兩大部份, 上方的時間軸面板, 與下方的編輯區, 我們可以在編輯區繪圖、編輯動畫內容。編輯區又分為兩個部份：中間白色的區塊是舞台, 即動畫真正的播放範圍；灰色部份稱為工作區域, 實際播放動畫時, 不會看到工作區域的內容。

17 動畫編輯視窗的操作

18 動畫編輯視窗的操作 切換動畫編輯視窗 調整顯示比例 使用縮放工具調整顯示比例 使用手掌工具移動畫面

19 切換動畫編輯視窗 前文已經介紹了建立、開啟檔案的方法, 如果我們同時開啟了多個檔案, 則會以頁次標籤的方式來呈現：

20 切換動畫編輯視窗 除了頁次標籤會顯示檔案名稱, 也可以在『視窗』功能表 (執行『視窗』命令) 的最下方看到目前開啟的檔案清單, 選取檔案名稱也能切換到該檔案來編輯。

21 調整顯示比例 我們可以從編輯區右上方的顯示比例列示窗, 或執行『檢視/顯示比例』命令後, 從子功能表中選擇編輯區的顯示比例：

22 調整顯示比例 從上圖中可以看到, 除了以數值改變顯示的比例外, 也可以選擇顯示影格、顯示全部與符合視窗大小 3 個選項來改變顯示的比例。我們以範例檔案 01-ex02.fla 來練習, 將更容易了解 3 個選項的差異： 顯示影格：將完整地顯示出舞台, 即使工作區域有內容也不會全部顯示。

23 調整顯示比例

24 調整顯示比例 顯示全部：會顯示整個編輯區中的物件, 並將其填滿視窗。

25 調整顯示比例 符合視窗大小：會將舞台縮放至動畫編輯視窗的最大比例 (此時會將捲動軸隱藏起來)。

26 使用縮放工具調整顯示比例 編輯動畫時可能需要進行細微的調整, 例如範例檔 01-ex03.fla 中, 我們希望將「煙」移動到煙囪的上方, 位置又不能偏離煙囪太多。此時利用工具面板上的縮放工具 , 則可針對煙囪附近的區域縮放, 要檢視細部內容時, 可放大畫面；若要瀏覽整體的畫面, 則可縮小來檢視：

27 使用縮放工具調整顯示比例

28 使用縮放工具調整顯示比例

29 使用手掌工具移動畫面 放大顯示後往往只能看到部份的範圍, 為了方便編輯, 我們可以使用工具面板上的手掌工具 拉曳編輯區的畫面, 以顯示出想要檢視的部份, 而且不會改變顯示比例：

30 1-3 Flash 面板的操作 我們再來看看 Flash 主視窗的工作環境。Flash 的操作環境可以彈性配置, 只要靈活調度各式面板, 就可以打造舒適又適合自己的編輯環境。 展開與收合面板固定槽 開啟、切換與關閉面板

31 展開與收合面板固定槽 首先我們來看看如何展開／收合主視窗右側的固定槽。在製作動畫時, 可能會覺得面板區佔了太多的空間, 編輯區的空間實在不夠用。此時可按下固定槽最右上角的 鈕, 將右側的固定槽收合起來：

32 展開與收合面板固定槽 在固定槽以外的地方按一下, 面板也會再次收合成圖示, 對於需要較大的編輯空間時非常實用。

33 開啟、切換與關閉面板 如果想要使用的面板沒有開啟, 我們可以執行 『視窗』 命令來其開啟：

34 開啟、切換與關閉面板 各面板都有對應的快速鍵, 所以您也可以利用快速鍵來展開或收合面板, 例如按下 Ctrl + K 鍵 (Windows) / + K (Mac) 鍵, 可開啟對齊面板。 若面板中同時包含 2 至 3 個面板標題列, 稱為面板群組, 按下群組內的面板標題, 即可切換至該面板進行設定。

35 開啟、切換與關閉面板 如果想要暫時隱藏所有的面板, 可按 F4 鍵或執行『視窗/隱藏面板』命令, 將目前操作環境中所有已開啟的面板全部隱藏起來；再按一次 F4 鍵, 又可恢復到原來的編輯狀態。

36 1-4 場景與動畫文件屬性 在較大型的動畫中, 可能會運用到場景來分鏡, 增加動畫的劇情變化, 這一節我們就來認識一下 Flash 中的場景。 場景是 Flash 動畫中的一個重要的概念, 簡單的解釋, 場景就是指整個影片中的一個片段。例如我們在電影中, 看到男主角帶著一束花走進電梯, 畫面一轉,女主角家的門鈴響了, 一開門就看到男主角帶著花站在門口：

37 場景與動畫文件屬性

38 場景與動畫文件屬性 上圖中我們就看到了兩個場景, 第 1 個場景是 「男主角走進電梯」, 第 2 個場景是 「女主角開門後看到男主角」。
製作 Flash 動畫時, 我們可以想像昰是在拍一部電影或一段影片, 可以安排許多場景, 用來區隔不同的段落, 以便安排故事情節。

39 場景與動畫文件屬性 新增與切換場景 場景的安排與操作 動畫文件屬性的設定

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

41 場景的安排與操作 使用場景面板可以新增、複製、刪除、重新命名場景, 以及調整各場景的順序。請執行『視窗/其他面板/場景』命令來開啟場景面板：

42 動畫文件屬性的設定 舞台是動畫實際播放的畫面, 所以舞台的大小與寬高比例對將來動畫的呈現有很大的影響。Flash 預設的舞台尺寸是 550 像素 × 400 像素, 背景為白色,如果要更改舞台大小與背景色, 可執行 『修改/文件』命令, 或雙按時間軸面板上的 , 開啟文件屬性交談窗來設定：

43 動畫文件屬性的設定

44 動畫文件屬性的設定 值得注意的是, 無論 Flash 動畫內有多少個場景, 每個場景的文件屬性 (大小、背景色、播放速率...等) 都是一致的。 由於將 Flash 動畫發佈成網頁時, 還可以另行調整顯示區域、大小...等, 所以若一開始不知如何決定舞台尺寸, 使用預設值 (550 像素 × 400 像素) 即可。

45 1-5 認識時間軸、影格及圖層 時間軸的主要功能, 是安排動畫畫面行進的順序、管理圖層, 以及設定各種動畫效果；而圖層與影格就像是動畫中安排場景及演員位置的兩大功臣, 以下我們從時間軸開始說明。

46 認識時間軸、影格及圖層 時間軸面板 何謂影格 影格的類型 何謂圖層 改變圖層順序和新增、刪除圖層

47 時間軸面板 動畫編輯視窗中的時間軸面板, 主要顯示出圖層以及影格中的所有內容。請開啟範例檔 01-ex04.fla, 我們要藉由這個範例來認識時間軸的各項功能：

48 何謂影格 我們利用傳統動畫與 Flash 動畫的製作過程, 來對照說明影格的觀念, 比較容易了解影格的作用。
傳統動畫是先在透明的賽璐璐膠片 (類似簡報用的透明投影片) 上繪製圖形,然後將其掃描成單格畫面, 剪輯成為具有連貫性的影片。Flash 時間軸上一格格的影格, 就如同動畫影片的單格畫面一樣, 而影格順序則代表 Flash 動畫行進的程序, 我們必須根據演出順序製作影格內容。不過, 影格內容並非放置在時間軸內, 而是顯示在舞台之中。

49 何謂影格

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

51 影格的類型 Flash 的影格分為關鍵影格、空白關鍵影格及影格 3 種。
關鍵影格 ：關鍵影格通常使用在動畫過程中產生變化的影格, 可說是動畫的重心。 空白關鍵影格 ：這是一種特殊的關鍵影格, 表示此關鍵影格中沒有任何物件,其作用是清空前一關鍵影格中的物件, 所以多半用在關鍵影格之後；或使用在影格中沒有物件, 但必須加入 ActionScript 程式或聲音檔的情況。

52 影格的類型 影格 ：關鍵影格和空白關鍵影格之外的影格, 都屬於一般的影格, 影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容。當影格之前有個關鍵影格時,影格會呈現灰色, 表示延續前面關鍵影格的內容；若影格之前有個空白關鍵影格, 影格呈現白色, 表示延續前面空白關鍵影格的內容, 也就是一片空白。 請您開啟範例檔 01-ex04.fla, 我們來看看這 3 種影格有什麼不同。

53 影格的類型

54 影格的類型

55 影格的類型 如前文所述, 影格會延續之前的關鍵影格的內容, 因此沒有變化。我們再來看另一個例子：

56 影格的類型

57 影格的類型

58 影格的類型 由此可知, 關鍵影格的內容是獨立的, 而我們正是利用這個特性, 讓動畫的內容要產生變化 (例如讓煙向右移動位置)。不過, 您是否注意到剛才點選的關鍵影格旁, 有一種 樣子的影格, 這又是怎麼回事？

59 影格的類型 如果影格上有箭頭, 表示這個 (或這些) 影格使用了補間動畫。補間動畫可以透過軟體的運算, 將物件的動態畫面補足, 是 Flash 用來製作動畫一項很重要、很常用的工具。在爾後各章的內容中, 我們會藉由實際操作讓大家對這 3 種影格的用法, 及其與補間動畫的關係有更深的認識。

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

61 何謂圖層 圖層的作用就如同一張張透明的賽璐璐片, 您可以將動畫中的每項物件, 放置在不同圖層中, 圖層交疊就形成完整的畫面。請開啟範例檔 01-ex05.fla, 我們來看看圖層在 Flash 中是怎麼運用的：

62 何謂圖層

63 何謂圖層

64 何謂圖層 當您讓每個圖層顯示出來時, 像不像拿著繪製好圖案的透明膠片, 一張張的往舞台上疊？使用圖層的好處, 就是當我們要編輯某個物件時, 只要在物件所在的圖層進行操作, 就可以大幅降低製作的難度, 也不會影響其它的物件。假設我們對背景不滿意, 只要將背景圖層換掉就行了, 其它在各圖層中的物件就可以保持原樣了。

65 改變圖層順序和新增、刪除圖層 在剛才的操作中, 您應該發現了有些圖層的物件重疊在一起, 像房屋與走道圖層就疊在背景之上, 而選單文字疊在花之上。是什麼決定這些圖重疊的上下位置呢？聰明的您一定早就發現了, 不就是圖層排列的順序嗎？剛才由下往上逐層顯示圖層時, 愈上方的圖層, 就位於舞台的愈上層, 而背景則是放置在最底下的圖層, 所以所有物件都疊在它之上。如果想要變更圖層的順序, 該怎麼做呢？請您開啟範例檔 01-ex06.fla, 我們要將範例檔中, 歡迎文字圖層, 移動到選單文字圖層的下方：

66 改變圖層順序和新增、刪除圖層

67 改變圖層順序和新增、刪除圖層 這一堂課帶領大家熟悉 Flash 的工作環境, 算是暖身。下一堂課, 我們要開始製作 Flash 動畫, 讓您實際體驗製作動畫的樂趣。