flash動畫設計第6章.ppt

1、第6章,創(chuàng)建動畫,第6章 創(chuàng)建動畫,2,學習目標 熟悉補間動畫與逐幀動畫 掌握創(chuàng)建補間動作動畫 掌握創(chuàng)建補間形狀動畫 掌握創(chuàng)建逐幀動畫 掌握編輯動畫,第6章 創(chuàng)建動畫,3,6.1補間動畫與逐幀動畫 6.2創(chuàng)建補間動作動畫 6.3創(chuàng)建補間形狀動畫 6.4創(chuàng)建逐幀動畫 6.5編輯動畫,第6章 創(chuàng)建動畫,4,6.1補間動畫與逐幀動畫 動畫是一個創(chuàng)建動作或其隨時間變化的幻覺的過程。,在Flash中可以創(chuàng)建兩種類型的動畫，即逐幀動畫和補間動畫。 “逐幀動畫”是制作好每一幀畫面，然后生成動畫效果，傳統(tǒng)的 動畫都是這么做出來的。 “補間動畫”則是制作好若干關鍵幀的畫面，由Flash通過計算生 成中間各幀，使

2、得畫面從一個關鍵幀過渡到另一個關鍵幀。,第6章 創(chuàng)建動畫,5,“補間”動畫又可細分為兩類，一類是“補間動作”動畫，一類是 “補間形狀”動畫。這兩種類型動畫的特點如下： 對于補間動作動畫來說，用戶可以分別在不同時間定義實例、群 組、文本塊的位置、尺寸或方向。此外，也可創(chuàng)建沿路徑運動的 漸變動畫。 補間形狀動畫中，用戶可以分別在不同的時間改變形狀或繪制 其他形狀，F(xiàn)lash會自動在兩個時間點之間創(chuàng)建中間形狀。,第6章 創(chuàng)建動畫,6,6.2創(chuàng)建補間動作動畫,為了創(chuàng)建補間動作動畫，可使用如下兩種方法： 為動畫創(chuàng)建開始關鍵幀與結(jié)束關鍵幀，并在“幀”屬性面板中 “補間”下拉列表框中選擇“動作”選項。 創(chuàng)建

3、動畫的第1個關鍵幀，選擇【插入】【創(chuàng)建補間動畫】 菜單，在希望結(jié)束的幀上加入一幀，移動對象到新位置， Flash將自動創(chuàng)建結(jié)束關鍵幀。 【操作實例1】創(chuàng)建補間動作動畫,第6章 創(chuàng)建動畫,7,6.2.2創(chuàng)建沿路徑運動的補間動作動畫 在制作補間動作動畫時，用戶可以通過設置運動路徑，使補 間實例、組或文本塊沿繪制的路徑進行運動。在設置沿路徑運動 的補間動作動畫時，需要先創(chuàng)建特定的運動引導圖層，并繪制運 動路徑，然后將動畫對象設置于運動路徑上即可。 【操作實例3】創(chuàng)建沿路徑運動的補間動作動畫,第6章 創(chuàng)建動畫,8,6.3創(chuàng)建補間形狀動畫 通過創(chuàng)建補間形狀動畫，可創(chuàng)建類似變形效果。對象最初以 某一形狀出

4、現(xiàn)，隨著時間的推移，起初的形狀將逐步轉(zhuǎn)變?yōu)榱硗?的一個形狀。同時，F(xiàn)lash還可以對形狀的位置、大小和顏色進 行過渡。,第6章 創(chuàng)建動畫,9,6.3.1創(chuàng)建補間形狀動畫 用戶要創(chuàng)建補間形狀動畫，可先在舞臺上創(chuàng)建一個形狀。然 后創(chuàng)建動畫的結(jié)束關鍵幀，并在該關鍵幀上創(chuàng)建一個新的形狀或 改變原有的形狀。最后選擇起始關鍵幀和結(jié)束關鍵之間的任意 一幀，在“幀”屬性面板中的“補間”下拉列表框中選擇了“形狀” 選項即可 . 【操作實例4】創(chuàng)建補間形狀動畫,第6章 創(chuàng)建動畫,10,6.3.2使用形狀提示 形狀提示就是在變形的初始圖形與結(jié)束圖形上，分別指定一 些變形關鍵點，并使這些點在起始幀中和結(jié)束幀中一一對應

5、， 這樣Flash就會根據(jù)這些點的對應關系來計算變形的過程。使 用形狀提示可以控制較為復雜的形狀漸變。 【操作實例5】使用形狀提示控制補間形狀動畫。,第6章 創(chuàng)建動畫,11,6.4創(chuàng)建逐幀動畫 “逐幀”動畫是最傳統(tǒng)的動畫創(chuàng)建形式，也是Flash動畫的另 一個重要類型。“逐幀”動畫適于創(chuàng)建非常復雜的動畫，它的每一 幀都是關鍵幀，每一幀都需要由設計者確定，而不是由Flash通 過計算得到。與補間動畫相比，“逐幀”動畫的文件尺寸增大得 很快。 【操作實例6】創(chuàng)建逐幀動畫,第6章 創(chuàng)建動畫,12,6.5編輯動畫 創(chuàng)建一個幀或關鍵幀之后，可以把它移動到同圖層或另一個 圖層的任何位置，也可以刪除它。但是，

6、用戶只能夠編輯關鍵幀， 對于補間幀，只能查看而不能編輯。要修改補間幀的內(nèi)容，只能 通過修改關鍵幀或者在開始關鍵幀和結(jié)束關鍵幀之間插入新的關 鍵幀。此外，要同時顯示和編輯多個幀，可以使用繪圖紙外觀功 能,即“洋蔥皮”技術。,第6章 創(chuàng)建動畫,13,6.5.1插入、刪除和修改幀 6.5.2使用繪圖紙外觀功能 通常情況下，F(xiàn)lash在舞臺中一次只顯示動畫序列的一個幀。 為了幫助用戶定位和編輯逐幀動畫，并在舞臺中一次查看兩個或 多個幀，可以使用【繪圖紙外觀】按鈕。此時，播放頭下面的幀 用全彩色顯示，但其余幀是暗淡的，看起來就好像每個幀是畫在 一張半透明的繪圖紙上，而且這些繪圖紙相互層疊在一起。,第6章

7、 創(chuàng)建動畫,14,6.5.3移動整個動畫 要移動舞臺中的整個動畫，必須一次移動所有幀和圖層中的 圖形，以避免重新對齊所有的對象。在移動整個動畫之前，需要 先解除所有鎖定圖層；若要移動某個或多個圖層中的內(nèi)容而不移 動其他圖層上的內(nèi)容，可鎖定或隱藏不希望移動的圖層。,第6章 創(chuàng)建動畫,15,6.6上機操作綜合指導 上機操作指導1 操作要求： 在FlashMX中創(chuàng)建一個蝴蝶煽動翅膀的逐幀動畫，然后使用 該動畫創(chuàng)建一個沿橢圓飛翔的動畫，,第6章 創(chuàng)建動畫,16,操作步驟 第一步：創(chuàng)建蝴蝶影片剪輯元件 1.啟動Flash MX程序，選擇【文件】【新建】命令，建立一個 新的Flash文檔。 2.選擇【插入

8、】【新建元件】菜單命令，打開【創(chuàng)建新元件】 對話框，輸入如圖6.30所示的內(nèi)容，單擊【確定】按鈕，創(chuàng)建蝴 蝶元件。,圖6.30創(chuàng)建蝴蝶元件,第6章 創(chuàng)建動畫,17,3.此時，進入蝴蝶元件的編輯窗口，然后選擇【文件】【導入】 命令，打開【導入】對話框，在對話框中選擇一幅圖片，單擊 【打開】按鈕將其導入到當前的Flash文檔中。如果導入的圖片 是一個序列，將在彈出的對話框中選擇【是】即可，創(chuàng)建了 “蝴蝶元件”的逐幀動畫，如圖6.31所示。也可以參照6.4節(jié)來創(chuàng) 建逐幀動畫。,631創(chuàng)建“蝴蝶元件”的逐幀動畫,第6章 創(chuàng)建動畫,18,第二步：利用蝴蝶影片剪輯元件創(chuàng)建補間動作動畫 4.單擊【場景1】標

9、簽進入場景1，來創(chuàng)建沿封閉路徑運動的補間 動作動畫。選擇【窗口】【庫】打開【庫面板】，選擇 【蝴蝶元件】將其拖入到當前的Flash文檔中。 5.選擇【時間軸】面板上的30幀，單擊鼠標右鍵選擇【插入關 鍵幀】命令，選擇2個關鍵幀之間的任一幀，在幀屬性面板中的 【補間】下拉列表框中選擇【動作】選項，創(chuàng)建補間動作動畫。 此時，在開始關鍵幀和結(jié)束關鍵幀之間，將出現(xiàn)一個淡紫色背 景箭頭，如圖6.32所示。,第6章 創(chuàng)建動畫,19,圖6.32創(chuàng)建一個補間動畫,第6章 創(chuàng)建動畫,20,第三步：添加運動引導層創(chuàng)建沿封閉路徑運動的補間動作動畫 6在時間軸面板中單擊【添加運動引導層】按鈕，來創(chuàng)建一個運 動引導層。

10、 7使用工具面板中的【橢圓工具】，在運動引導層中繪制一個填 充色為透明色的橢圓圖形，作為蝴蝶運動的路徑。,第6章 創(chuàng)建動畫,21,8使用工具面板中的【橡皮擦工具】 ，在其【選項】區(qū)域中選 擇最小的橡皮擦形狀，將橢圓圖形擦出一個非常小的豁口， 如圖6.33所示。,圖633將橢圓圖形擦出個豁口,第6章 創(chuàng)建動畫,22,9按照6.2.2節(jié)中介紹的創(chuàng)建沿路徑運動的動畫的方法，在時間 軸面板中選擇【圖層1】，分別將起始幀和結(jié)束關鍵幀上的蝴蝶 元件移至豁口的兩個端點處，設置該元件實例沿路徑運動的動畫， 如圖6.34所示。,圖6.34設置元件實例的位置,第6章 創(chuàng)建動畫,23,上機操作指導2 操作要求： 在

11、FlashMX中創(chuàng)建一個旋轉(zhuǎn)的風車動畫 .,操作步驟 第一步：創(chuàng)建風車圖形元件 1.啟動Flash MX程序，選擇【文件】【新建】命令，建立一個 新的Flash文檔。 2.選擇【插入】【新建元件】菜單命令，打開【創(chuàng)建新元件】 對話框，輸入如圖6.36所示的內(nèi)容，單擊【確定】按鈕，創(chuàng)建 風車圖形元件。,圖6.36建立圖形符號,第6章 創(chuàng)建動畫,24,3.選擇菜單【查看】【網(wǎng)格】【編輯網(wǎng)格】，在打開的對話 框中選中顯示網(wǎng)格和對齊網(wǎng)格兩個復選框，并如圖 6.37 所示設 置網(wǎng)格的大小。然后單擊確定按紐。,圖6.37設置網(wǎng)格參數(shù),第6章 創(chuàng)建動畫,25,4.選擇工具面板工具箱中的【橢圓工具】 ，在屬性

12、監(jiān)視器中把筆 觸顏色設為黑色，填充顏色設為另外一種顏色。確認橢圓工具屬 性窗口中的線條類型是直線型，線條寬度為4如圖6.38所示。,圖6.38設置線條屬性,5.按住【shift】鍵，在工作區(qū)的中央繪制一個圓，大小適中即可. 6選擇工具箱中的【直線工具】，借助網(wǎng)格線把圓劃分成8個等份,第6章 創(chuàng)建動畫,26,7選擇工具箱中的【顏料桶工具】，給互不相鄰的4個扇形填充上 不同的顏色，如圖6.41所示。,圖6.41為互不相鄰的4個扇形填色,第6章 創(chuàng)建動畫,27,8選擇工具箱中的【箭頭工具】，選中剛才沒有被填色的其他 扇形，按【Delete】鍵刪除掉。然后在黑色線條上雙擊鼠標選取 所有線條，按【Del

13、ete】鍵刪除掉。完成后的風車如圖6.42所示。,圖6.42 風車圖形符號,第6章 創(chuàng)建動畫,28,第二步：利用風車圖形元件創(chuàng)建補間動作動畫 9單擊工作區(qū)窗口左上角的場景1標簽，回到影片的編輯窗口。 10選擇【窗口】【庫】菜單命令，此時庫窗口中將列出前面 創(chuàng)建的“風車”圖形符號，如圖6.43所示。從庫窗口向當前的Flash 文檔中拖放一個“風車”符號實例。,圖6.43包含“風車”圖形符號的庫窗口,第6章 創(chuàng)建動畫,29,11在時間軸窗口第30幀的位置，單擊鼠標右鍵，執(zhí)行彈出菜單中 【插入關鍵幀】命令插入關鍵幀，然后在屬性面板中選擇“補間”為 【動作】選項，選擇【旋轉(zhuǎn)】為順時針，在旁邊的輸入框中

14、輸入3， 即旋轉(zhuǎn)3圈，,圖6.44設置動畫,第6章 創(chuàng)建動畫,30,12.此時，在開始關鍵幀和結(jié)束關鍵幀之間，將出現(xiàn)一個淡紫色背 景箭頭，表明二者之間存在動畫.,13.用鼠標選中第30幀中的“風車”實例，然后單擊鼠標右鍵，在彈 出的菜單中選擇【任意變形】命令，此時，“風車”實例的四周會 出現(xiàn)縮放手柄。拖動直角頂點處的縮放手柄，適當縮小圖形的尺 寸，如圖6.46所示。,圖6.46縮小實例尺寸的前后,第6章 創(chuàng)建動畫,31,第三步：創(chuàng)建多個風車 15.單擊時間軸層窗口下方的按鈕，添加新的一層，在新增加的 層中重復（10）（15）步，可以創(chuàng)建第2個風車。按照同樣的 方法可以創(chuàng)建多個風車。 第四步：測試影片,第6章 創(chuàng)建動畫,32,小結(jié)與提高 在FlashMX中有三種用來創(chuàng)建動畫效果的基本方式，包括逐幀 動畫、補間動作動畫和補間形狀動畫。 補間相對逐幀動畫來說對文件大小增加得很少，因為此時Flash 主要是對關鍵幀之間的不同進行計算，并不需要為序列中的每一幀 存儲其信息。 創(chuàng)建逐幀動畫時，可以插入關鍵幀（F6）并對每一幀上的內(nèi)容