汇出动画与发布网页课件

1本章重點本章重點19-1 Flash 基本操作與動畫製作概念19-2 繪製圖形與群組、排列圖形19-3 動畫範例實作 跑步的娃娃19-4 匯出動畫與發佈網頁219-1 Flash 基本操作與動畫製作概基本操作與動畫製作概念念我們先從認識 Flash 操作環境開始,接著逐步進入動畫製作的核心,了解動畫運作的原理與分類方式。19-1-1 基本操作19-1-2 時間軸、圖層與影格的作用19-1-3 圖層的操作與管理19-1-4 影格的新增、選取與刪除19-1-5 影格的類型19-1-6 動畫元件、實體、與元件庫的概念319-1-1 基本操作基本操作認識操作環境開新檔案開啟舊檔與關閉檔案儲存檔案4認識操作環境認識操作環境請執行開始/所有程式/Macromedia/Macromedia Flash 8命令啟動 Flash,預設在程式啟動時會顯示起始頁的開啟檔選案單畫面,選單內容依類型分為 3 個區域,分別是開啟最近使用的檔案、建立新檔案和從樣板建立,供使用者選擇要執行的檔案。5認識操作環境認識操作環境6認識操作環境認識操作環境請按下起始頁中建立新檔案區的 Flash 文件,即可看到如下圖的預設版面配置,我們就透過它來認識 Flash 的操作環境：7認識操作環境認識操作環境8認識操作環境認識操作環境Flash 的操作環境主要分成 3 大部分,分別是：Flash 主視窗、動畫文件視窗以及散布四處的面板。主視窗界定出 Flash 程式的工作範圍,動畫文件視窗是編輯動畫內容的場所,而面板則是製作動畫時所使用的各種工具箱。9開新檔案開新檔案進入 Flash 的工作環境後,我們首先來學習如何建立新文件、開啟舊檔及儲存檔案。在起始頁中選擇 Flash 文件項目,或在 Flash 主視窗執行檔案/開新檔案命令皆可建立新檔案；兩者的差異是選擇前者的方式開啟,會立即建立一個新的空白文件檔,而執行後者的命令,則會出現如下的新增文件交談窗,讓您選擇要開啟的檔案類型：10開新檔案開新檔案11開新檔案開新檔案檔案預設會從未命名-1 開始編號,接著是未命名-2、未命名-3依此類推,當您儲存檔案時,Flash 則會讓您重新為檔案命名。12開啟舊檔與關閉檔案開啟舊檔與關閉檔案要開啟儲存在磁碟中的動畫檔,可執行檔案/開啟舊檔命令,將檔案重新載入 Flash 中編輯,也可以在起始頁中選擇開啟最近使用的檔案項目或開啟舊檔,同樣可由開啟舊檔交談窗讓您選擇要開啟的檔案。編輯完畢並儲存檔案後,可執行檔案/關閉舊檔命令(或按下動畫文件視窗標題列右側的 鈕)關閉。13儲存檔案儲存檔案做好的 Flash 動畫一定要儲存起來,以後才能再載入 Flash 中繼續編輯。您只要執行檔案/儲存檔案命令便可存檔,而從未存過檔的 Flash 動畫在執行檔案/儲存檔案命令後,會顯示另存新檔交談窗,讓您為檔案命名後再存檔,之後即直接儲存。要以其他檔案儲存時,請執行檔案/另存新檔命令,為動畫重新命名再儲存。14儲存檔案儲存檔案Flash 所儲存的檔案格式為.fla,這是 Flash 動畫的原始檔案格式,只有這個格式的檔案才能在 Flash 中編輯與修改。若是要將動畫應用在網頁上,請參考 19-4 節的說明來匯出動畫與發佈成網頁。1519-1-2 時間軸、圖層與影格的作用時間軸、圖層與影格的作用接下來要介紹 Flash 動畫製作的核心：時間軸、圖層與影格。時間軸的主要功能,就是安排動畫畫面行進的順序和效果,而圖層與影格則像是動畫中安排場景及演員位置的兩大功臣,我們必須先了解如何操作它們,才能開始著手製作動畫。16何謂時間軸何謂時間軸動畫檔案視窗中的時間軸主要用來顯示出圖層與影格。時間軸面板的各項元件說明如下：17何謂圖層何謂圖層專業的卡通動畫製作公司在製作動畫時,常會將畫面中的背景與角色分別製作,例如將人物與背景分別繪製在不同的透明賽璐璐片上,當背景與人物重疊時便成為完整的畫面；若要呈現人物原地跳躍的動作時,只要更換人物的賽璐璐片就可以了。此觀念運用在 Flash 動畫中,就是圖層了！Flash 動畫可將背景與物件分別放置在不同的圖層上(可開啟範例檔案 Ch19-01 來觀看)：18何謂圖層何謂圖層19何謂圖層何謂圖層20何謂影格何謂影格我們利用卡通動畫與 Flash 動畫的製作過程,來對照說明影格的觀念,可以比較容易了解影格的作用。卡通動畫將多個連貫的單格畫面連續播放,即成為我們觀賞的卡通影片,Flash 時間軸面板上的每個影格,就如同卡通動畫影片中的單格畫面一樣,而影格順序則代表 Flash 動畫行進的程序,我們必須根據演出順序製作影格內容,連續播放 Flash 時間軸上的影格,即形成 Flash 動畫。21何謂影格何謂影格您可以開啟範例檔案 Ch19-02 來觀看：2219-1-3 圖層的操作與管理圖層的操作與管理新增、刪除圖層改變圖層順序圖層的狀態23新增、刪除圖層新增、刪除圖層新建立的動畫檔預設只有一個圖層,因此要新增圖層就得自己來；而新增的圖層會出現在選取的圖層之上。新增圖層的方式如下：24新增、刪除圖層新增、刪除圖層若想刪除不用的圖層,則按一下圖層名稱以選取圖層,再按下時間軸面板上的刪除圖層鈕,就可以刪除該圖層了。25改變圖層順序改變圖層順序時間軸面板中圖層的上下位置,代表了圖層中的物件在編輯區域的前後次序關係。在時間軸面板愈上方的圖層內容,就位於編輯區域愈上層,而背景就是放置在最底層的圖層。想要變動圖層的順序,只要直接拉曳欲移動的圖層到想要的位置即可：26改變圖層順序改變圖層順序27改變圖層順序改變圖層順序28圖層的狀態圖層的狀態在圖層名稱右方有圖層狀態欄,以圖示來顯示該圖層的圖層狀態,一共有 4 種圖層狀態,其代表的意義如下：29圖層的狀態圖層的狀態作用中的圖層：表示目前正在進行編輯的圖層,故不論有幾個圖層,都只會有 1 個作用圖層。若要將圖層切換成作用中的圖層,只要選取該圖層即可。隱藏的圖層：表示該圖層的物件不會顯示出來,當然也就不能進行編輯的工作。按一下圖層名稱右方的隱藏圖層狀態欄,就可以切換圖層的隱藏或顯示狀態。鎖定的圖層：表示該圖層無法執行任何選取與編輯的動作,但圖層中的物件仍可正常顯示。30圖層的狀態圖層的狀態所以當你正在編輯某一圖層時,可將其他圖層設為鎖定的圖層,以免動到不該動的圖層內容。再按一下可取消鎖定狀態。圖層中的物件顯示成外框：表示該圖層的所有物件都以外框線條來顯示,既能看見圖層中的內容,也可以執行編輯工作。3119-1-4 影格的新增、選取與刪除影格的新增、選取與刪除新增影格選取影格移除影格32新增影格新增影格在 Flash 中開啟一個新檔案時,其時間軸刻度表上只有 1 格影格,我們可透過以下的方法來新增影格：33新增影格新增影格新增影格的內容為延續前一關鍵影格的內容,以本例而言,就是影格 1 的內容,而往後所新增的圖層,也會自動建立好相同數目的影格,非常方便！34選取影格選取影格在編輯影格之前,要了解如何選取影格,下面我們示範幾種常用的選取方法(可開啟範例檔案 Ch19-04 來操作)：35選取影格選取影格36移除影格移除影格只要選取要移除的影格,按右鈕執行移除影格命令,即可移除影格。3719-1-5 影格的類型影格的類型Flash 的 3 種影格設定關鍵影格設定空白關鍵影格清除關鍵影格38Flash 的的 3 種影格種影格Flash 一共有 3 種影格類型,分別為關鍵影格、空白關鍵影格以及影格。關鍵影格：關鍵影格多用在動畫過程中產生變化的影格,我們可在關鍵影格上編輯圖像、加入物件或特效(包括聲音檔),這些影格在時間軸面板的圖示為 ,堪稱動畫的重心。空白關鍵影格：空白關鍵影格是一種特殊的關鍵影格,表示此關鍵影格中沒有任何物件,常用來清空前一關鍵影格中的物件,所以多伴隨在關鍵影格之後。39Flash 的的 3 種影格種影格影格：關鍵影格和空白關鍵影格之外的影格都屬於一般影格。一般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容。當影格之前有個關鍵影格時,它呈現灰色,表示延續前面關鍵影格的內容；若影格之前有個空白關鍵影格,它呈現白色,也表示它延續著前面的空白關鍵影格的內容,也就是一片空白！40Flash 的的 3 種影格種影格41設定關鍵影格設定關鍵影格設定關鍵影格並不一定是新增影格,而是表示該影格在動畫中具有關鍵性內容。當我們選取影格按右鈕執行插入關鍵影格命令(或按 F6)時,除了可以在未使用的影格上新增 1 格關鍵影格之外,也可以將原有的影格設定為關鍵影格。若在關鍵影格之後新增關鍵影格,則此新的關鍵影格將會自動把前一個關鍵影格的內容複製過來(可開啟範例檔案 Ch19-05 來操作)。42設定關鍵影格設定關鍵影格43設定關鍵影格設定關鍵影格44設定空白關鍵影格設定空白關鍵影格選取影格按右鈕執行插入空白關鍵影格命令(或按 F7)之後,編輯區會變成空白無內容。因此當動畫進行到必須將全部的內容更換時,可設定一格空白關鍵影格,將影格內容清空。接著就可以直接安排新的動畫內容了。45清除關鍵影格清除關鍵影格執行清除關鍵影格命令並不是要刪除影格,而是將關鍵影格(或空白關鍵影格)變成一般影格,因此影格的內容也轉變成為前一個關鍵影格(或空白關鍵影格)的內容：46清除關鍵影格清除關鍵影格47清除關鍵影格清除關鍵影格4819-1-6 動畫元件、實體、與元件庫動畫元件、實體、與元件庫的概念的概念元件與實體元件庫的使用49元件與實體元件與實體在 Flash 中,您可以將可能會重複使用的物件製作成元件,存放在動畫文件的元件庫中,當你需要使用該元件時,再從元件庫中將元件拉曳出來使用即可,而不必再重新製作。而此時被拉曳到編輯區中進行編輯的便是元件的分身：實體。例如,您可以將一朵花的圖片轉成元件,並自元件庫重複拉曳此元件至編輯區中成為一片花園,如此可節省重新繪製的時間,也可繼續針對每朵實體花做不同的色彩、大小設定：50元件與實體元件與實體51元件與實體元件與實體在編輯區的每個實體都是獨立的個體,您可以任意編輯、更改它的屬性而不會影響到相同元件的其他實體。但如果是來源的元件做了變更,則所有的實體也會同時更新喔！52元件庫的使用元件庫的使用簡單來說,元件庫就是存放 Flash 動畫元件的地方。所有元件一經建立,就會存放在元件庫裡。若執行檔案/匯入/匯入至元件庫命令,可自外部檔案匯入點陣圖、聲音、視訊等物件,這些物件也會儲存在該動畫檔的元件庫中,方便你取用。Flash 的元件庫分兩種：每個動畫專屬的元件庫與內建元件庫,皆可透過視窗功能表來開啟：53元件庫的使用元件庫的使用5419-2 繪製圖形與群組、排列圖形繪製圖形與群組、排列圖形製作動畫的第 1 步當然就是準備好動畫中的元件。Flash 本身即提供相當完備的繪圖工具,可讓我們自由繪製各種線條、形狀、幾何圖形。而除了繪製元件的外型,還有填色、配色也是很重要的,底下以繪製一個娃娃為例,教你使用 Flash 的繪圖工具。5519-2-1 使用繪圖工具繪製幾何圖形使用繪圖工具繪製幾何圖形娃娃是由多個幾何圖形組合而成,只要利用橢圓形工具、鉛筆工具、與油漆桶工具便可分別製作出娃娃的頭部、手臂、身體、腳部。舉例來說,娃娃的身體與腳部就是利用鉛筆工具畫出線條,接著再利用油漆桶工具填上深藍色、綠色而成。56使用繪圖工具繪製幾何圖形使用繪圖工具繪製幾何圖形至於頭部與手部就更簡單了,只要按下工具面板的橢圓形工具鈕,在顏色區中選好線條及填色區的色彩來繪製,再利用選取工具調整外形便可完成。57使用繪圖工具繪製幾何圖形使用繪圖工具繪製幾何圖形5819-2-2 群組幾何圖形的線條與填色群組幾何圖形的線條與填色區區若您以選取工具點選繪製的圖形,會發現線條和填色區是可以分別選取的兩個獨立圖形。為了方便移動與組合,我們可以把每個幾何圖形的線條與填色區群組在一起。以群組頭部的幾何圖形為例,只要先框選頭部(紅色圓形的填色區與線條),然後執行修改/群組命令群組物件即可：59群組幾何圖形的線條與填色區群組幾何圖形的線條與填色區6019-2-3 排列及組合幾何圖形排列及組合幾何