flash動(dòng)畫設(shè)計(jì)第6章.ppt

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

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

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

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

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

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

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

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

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

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

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

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

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

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