Flash動(dòng)畫設(shè)計(jì)與制作教學(xué)

Flash動(dòng)畫設(shè)計(jì)與制作任課教師：王亞469134792Flash學(xué)習(xí)交流群探究動(dòng)畫動(dòng)畫原理

光的影像一旦在視網(wǎng)膜上形成,視覺將會(huì)對(duì)該光像的感覺維持0.05至2.0秒的短暫時(shí)間,這種現(xiàn)象被稱為"視覺暫留"現(xiàn)象.動(dòng)畫原理便以人眼的"視覺暫留"特征為基礎(chǔ),通過快速更換靜態(tài)圖像,利用"視覺暫留"特性而在大腦中形成圖像內(nèi)容連續(xù)運(yùn)動(dòng)的感覺.

視覺暫留：人眼在觀察事物時(shí)，光信號(hào)傳入大腦神經(jīng)，需經(jīng)過一段短暫的時(shí)間，光的作用結(jié)束后，視覺現(xiàn)象并不立即消失，視覺的這一現(xiàn)象被稱為視覺暫留。動(dòng)畫原理（1）19世紀(jì)20年代，英國(guó)科學(xué)家發(fā)現(xiàn)了人眼的“視覺暫留”現(xiàn)象（物體被移動(dòng)后其形象在人眼視網(wǎng)膜上還可有約1秒的停留），揭示了連續(xù)分解的動(dòng)作在快速閃現(xiàn)時(shí)產(chǎn)生活動(dòng)影像的原理。動(dòng)畫原理（2）根據(jù)視覺暫留原理，當(dāng)連續(xù)相互關(guān)聯(lián)的圖像（一般把靜止的畫面稱為圖像）快速變化時(shí)（每秒10幀以上，通常取每秒24幀），人眼看到的這個(gè)圖像變化的過程就是視頻。電影、電視、動(dòng)畫和計(jì)算機(jī)視頻都是根據(jù)這個(gè)原理來實(shí)現(xiàn)的。傳統(tǒng)動(dòng)畫的制作

傳統(tǒng)動(dòng)畫使用畫筆繪制一張張不動(dòng)的、但又逐漸變化著的連續(xù)畫面，經(jīng)過攝像機(jī)或攝像機(jī)的逐格拍攝，然后以每秒鐘２４格或２５格的速度連續(xù)播放，這時(shí)，所畫的靜止畫面就在銀幕上“活動(dòng)起來”，這就是傳統(tǒng)動(dòng)畫?！逗谪埦L(zhǎng)》動(dòng)畫片及制作花絮《黑貓警長(zhǎng)》制作過程文字描述第一步：使用畫筆繪制一張張不動(dòng)的、但又逐漸變化著的邊續(xù)畫面。（在這過程中可能需要手繪上萬幅圖片）第二步：然后對(duì)這些圖片使用攝像機(jī)或攝影機(jī)逐格拍攝。第三步：然后以每秒鐘25幀的速度連續(xù)播放，這樣就形成了動(dòng)畫。《大灌籃》片段觀看視頻并思考：女孩在翻書的時(shí)候"周杰倫"是會(huì)動(dòng)的,他是怎么動(dòng)起來的呢?提個(gè)醒：１、如果我們把“相冊(cè)”換成“flash軟件”；２、把相冊(cè)中的每一頁換成flash中的每一個(gè)關(guān)鍵幀；３、把每一頁中的照片換成不同的豹子圖片；４、把快速翻頁換成按時(shí)間軸播放；逐幀動(dòng)畫你會(huì)了嗎？補(bǔ)序++

在網(wǎng)絡(luò)世界的今天，與Fireworks、Dreamweaver并稱為“網(wǎng)絡(luò)三劍客”，組成Macromedia公司“網(wǎng)絡(luò)夢(mèng)之隊(duì)”的Flash，必將越來越流行?！伴W客”的出現(xiàn)，更是豐富了我們的生活。Flash現(xiàn)在早已超出制作簡(jiǎn)單動(dòng)畫的范圍，它更可以：◆◆制作聲光效果絕佳的開場(chǎng)畫面◆◆制作網(wǎng)頁上的廣告◆◆制作交互式網(wǎng)頁的接口◆◆制作各種小游戲◆◆作為電子禮物（舉例）

Flash簡(jiǎn)介

因特網(wǎng)上現(xiàn)在已有成千上萬個(gè)Flash個(gè)站點(diǎn)，著名的微軟MSN新聞?wù)疽约癐ntel、奧迪等世界著名企業(yè)主頁都大量采用了大量的Flash動(dòng)畫。

到現(xiàn)在，F(xiàn)lash已經(jīng)發(fā)展到了FlashCS4，隨著其功能的不斷加強(qiáng)，它已從以前的小插件一躍成為互聯(lián)網(wǎng)動(dòng)畫制作新生力量的代言人。推薦使用flash8中文版，實(shí)用而又穩(wěn)定。Flash以*.fla為其源文件，以*.swf為生成的效果文件（就是平時(shí)網(wǎng)上下載的動(dòng)畫格式）。隨著應(yīng)用的不斷推廣，F(xiàn)lash也可以生成*.exe文件，可以在沒有安裝Flash的機(jī)器上很好的直接運(yùn)行。通過格式的轉(zhuǎn)化，還可以將動(dòng)畫變?yōu)?.html、*.mov等等！一、Flash簡(jiǎn)介Flash是當(dāng)前最流行的動(dòng)畫制作軟件，用它制作的Flash電影已經(jīng)在無數(shù)網(wǎng)站和很多相關(guān)領(lǐng)域廣泛應(yīng)用。很多游戲軟件也是采用Flash制作的。Flash以幀來組織動(dòng)畫,幀與幀之間采用漸變過渡動(dòng)畫.因此,制作動(dòng)畫時(shí),只要將某段動(dòng)畫的第一幀和最后一幀制作出來,中間的移動(dòng)、旋轉(zhuǎn)、變形、顏色改變等過程都可以由Flash自動(dòng)完成，因此，動(dòng)畫制作的過程被大大簡(jiǎn)化了。Flash圖形系統(tǒng)是基于矢量的，只需存儲(chǔ)少量的向量數(shù)據(jù)就可以描述一個(gè)看起來相當(dāng)復(fù)雜的對(duì)象，這樣，其占用的空間很小，與位圖相比具有明顯的優(yōu)勢(shì)，非常適合在低帶寬的互聯(lián)網(wǎng)中使用。使用矢量圖形的另一個(gè)好處還在于，無論將它放大多少倍，圖像都不會(huì)失真。1制作簡(jiǎn)單方便2矢量動(dòng)畫，文件占用空間小（一）Flash的主要特點(diǎn)SWF文件（Flash標(biāo)準(zhǔn)的發(fā)布文件）采用信息流傳送方式，可以邊下載邊播放，不用等待整個(gè)文件全部下載完才能觀看動(dòng)畫。3流式下載方式4強(qiáng)大的交互功能

在Flash中，高級(jí)交互事件的行動(dòng)控制使Flash動(dòng)畫的播放更加精確并容量控制。設(shè)計(jì)者可以動(dòng)畫中加入滾動(dòng)條、復(fù)選按鈕、下拉菜單和拖動(dòng)物體等各種交互組件等等。（二）Flash動(dòng)畫的分類在Flash中可以創(chuàng)建三類動(dòng)畫：1逐幀動(dòng)畫它由若干個(gè)關(guān)鍵幀組成，而每個(gè)關(guān)鍵幀的內(nèi)容都需要制作。逐幀動(dòng)畫適合在每一幀中都要改變不同圖像的動(dòng)畫。2補(bǔ)間動(dòng)畫（補(bǔ)間形狀和補(bǔ)間動(dòng)作）補(bǔ)間動(dòng)畫是指用戶創(chuàng)建了兩個(gè)關(guān)鍵幀后，中間的幀由Flash根據(jù)其屬性的不同自動(dòng)創(chuàng)建出具有過渡效果的動(dòng)畫。二、Flash啟動(dòng)及界面介紹

啟動(dòng)后，系統(tǒng)會(huì)顯示出完整的Flash界面，界面的中間是舞臺(tái)，舞臺(tái)類似于其它軟件中的畫布，我們可定義動(dòng)畫的尺寸和舞臺(tái)的顏色。舞臺(tái)是顯示影片中各個(gè)幀內(nèi)容的區(qū)域，可以在其中直接繪制圖像，也可以在舞臺(tái)中安排導(dǎo)入的圖像。舞臺(tái)的上方是時(shí)間軸，它控制著整個(gè)動(dòng)畫的時(shí)間維度。

時(shí)間軸最重要的組成部分就是幀和圖層。時(shí)間軸的每一個(gè)小方格表示動(dòng)畫中的一幀，一個(gè)動(dòng)畫中可以有幾條并發(fā)的時(shí)間軸，每一條時(shí)間軸對(duì)應(yīng)于一個(gè)運(yùn)動(dòng)實(shí)例。運(yùn)動(dòng)實(shí)例分布在圖層上，不同圖層上的實(shí)例是相互獨(dú)立的，它們的動(dòng)互不影響。3交互式動(dòng)畫

交互式動(dòng)畫也稱為行為動(dòng)畫，它是指在上述兩類動(dòng)畫的基礎(chǔ)上添加ActionScript動(dòng)作腳本，根據(jù)用戶響應(yīng)（例如鍵盤或鼠標(biāo)移動(dòng)到影片中的某一區(qū)域、移動(dòng)對(duì)象、輸入信息）在影片中執(zhí)行交互式動(dòng)作。常用快捷鍵的使用1、Shift：繪制正圓2、Alt：由中心向四周繪制橢圓3、Alt+shift：由中心向四周繪制正圓橢圓工具的使用1、顏料桶工具：用來更改填充色2、墨水瓶工具：用來更改邊框色注：用選擇工具在圖形內(nèi)部雙擊可以將填充和邊框全部選中。更改橢圓的顏色1、散件（圖形）：選中對(duì)象時(shí)出現(xiàn)網(wǎng)紋形狀稱為散件。散件的特點(diǎn)是可以整體選擇移動(dòng)，也可以部分選擇移動(dòng)。2、散件轉(zhuǎn)變成元件快捷鍵：F83、元件的分類：（1）圖形

（2）影片剪輯

（3）按鈕散件如何轉(zhuǎn)變成元件幀的概念1、幀：指的就是圖片或畫面，一幀指的是一張圖片一個(gè)畫面。2、關(guān)鍵幀：指關(guān)鍵的圖片或畫面，也是我們做動(dòng)畫時(shí)主要制作的畫面。3、關(guān)鍵幀的分類（1）有圖像的關(guān)鍵幀（簡(jiǎn)稱關(guān)鍵幀），用●表示。（2）無圖像的關(guān)鍵幀（簡(jiǎn)稱空白關(guān)鍵幀）用○表示。1、幀速率（幀頻率）：所謂幀頻率指的是單位時(shí)間內(nèi)播放多少?gòu)埉嬅婊驁D片。2、幀速率的大小關(guān)系：幀速率越大，表示單位時(shí)間內(nèi)播放的畫面多，也就意味播放的速度快，如果幀速率越小，表示單位時(shí)間內(nèi)播放的畫面少，也就意味播放的速度慢。幀速率1、動(dòng)畫的分類：（1）位移動(dòng)畫（2）形變動(dòng)畫（3）逐幀動(dòng)畫（4）路徑動(dòng)畫（5）蒙版動(dòng)畫（6）腳本動(dòng)畫2、常用快捷鍵Ctrl+2：滿畫布顯示F6：插入關(guān)鍵幀，并且復(fù)制上一關(guān)鍵幀的畫面。Shift：水平或垂直移動(dòng)對(duì)象Enter:用flash軟件播放動(dòng)畫Ctrl+Enter:用flash播放器播放動(dòng)畫。動(dòng)畫實(shí)例—球體移動(dòng)1、常用快捷鍵的使用（1）Shift：繪制正方形（2）Alt：由中心向四周繪制矩形（3）Alt+shift：由中心向四周繪制正方形2、矩形屬性面板（1）矩形屬性面板可以設(shè)置矩形的各種屬性：如：圓角大小等。當(dāng)將圓角值設(shè)為正數(shù)，表示是外圓角，如果數(shù)設(shè)為負(fù)數(shù)，表示是內(nèi)圓角。同時(shí)可以設(shè)置四個(gè)角的圓角度是否同時(shí)設(shè)置。（2）單擊矩形邊框可以選擇一條邊，雙擊可以選擇所有邊。3、多邊形屬性面板（1）利用多邊形工具可以繪制多邊形和星形兩種圖形。（2）可以設(shè)置多邊形的邊數(shù)和星形的角數(shù)。矩形和多邊形工具的使用（1）文檔屬性：可以設(shè)置文檔（舞臺(tái)）的顏色，舞臺(tái)的大小，幀頻率等。（2）散件屬性：可以設(shè)置散件大小、邊框色、填充色、邊框粗細(xì)、邊框的線型等。（3）元件屬性；可以設(shè)置元件的亮度、色調(diào)、Alpha不透明度等。設(shè)置文檔、散件和元件的屬性（1）顏料桶工具可以改變填充色也可以設(shè)置徑向漸變的高光點(diǎn)。（2）在設(shè)置元件屬性時(shí)一定要選中元件對(duì)象。（3）任意變形工具：可以設(shè)置對(duì)象的大小、角度和傾斜角度等。在設(shè)置對(duì)象大小時(shí)按住shift鍵可以等比例調(diào)整對(duì)象大小。（4）放大鏡工具：可以放大視圖，按住alt鍵也可以縮小視圖。動(dòng)畫實(shí)例—球體漸隱漸顯在幀屬性中可以設(shè)置以下參數(shù)（1）緩動(dòng)：改變對(duì)象運(yùn)動(dòng)時(shí)速度的變化。是越來越快還是越來越慢。還是一直保持勻速運(yùn)動(dòng)。（2）旋轉(zhuǎn)：設(shè)置對(duì)象移動(dòng)時(shí)旋轉(zhuǎn)的方向，可以按順時(shí)針旋轉(zhuǎn)也可以按逆時(shí)針旋轉(zhuǎn)。以及旋轉(zhuǎn)圈數(shù)的設(shè)置。幀屬性Ctrl+2：滿畫布顯示動(dòng)畫實(shí)例—球體旋轉(zhuǎn)常用快捷鍵Ctrl+z:撤消F7：插入空白關(guān)鍵幀Ctrl+c：復(fù)制Ctrl+v：粘貼（默認(rèn)是粘貼畫布的中心）Ctrl+shift+v：原位置粘貼動(dòng)畫實(shí)例—球體彈跳鋼

筆

工

具（1）鋼筆工具可以繪制直線也可以繪制曲線（2）為了避免曲線的控制手柄影響后面所繪制的圖形，可以用鋼筆工具在曲線點(diǎn)上單擊減掉一邊控制手柄。（3）構(gòu)成直線的點(diǎn)叫直線點(diǎn)，構(gòu)成曲線的點(diǎn)叫曲線點(diǎn)。直線點(diǎn)無控制手柄，曲線點(diǎn)有控制手柄。（4）鋼筆工具所繪制的圖形如果需要修改可以用部分選取工具。改變圖形的形狀其實(shí)就是修改節(jié)點(diǎn)的位置。鋼筆工具的使用（1）添加錨點(diǎn)工具可以用來在所繪制的圖形（直線和曲線）上加點(diǎn)。（2）刪除錨點(diǎn)工具可以用來在刪除圖形（直線和曲線）上的節(jié)點(diǎn)。（3）轉(zhuǎn)換錨點(diǎn)工具可以實(shí)現(xiàn)直線點(diǎn)和曲線點(diǎn)的相互轉(zhuǎn)換。用轉(zhuǎn)換錨點(diǎn)工具在曲線點(diǎn)上單擊可以將曲線點(diǎn)轉(zhuǎn)換成直線點(diǎn)，在直線點(diǎn)上單擊并拖動(dòng)可以將直線點(diǎn)轉(zhuǎn)換成曲線點(diǎn)。添加、刪除節(jié)點(diǎn)以及直線和曲線的相互轉(zhuǎn)換閉合和不閉合圖形的相互轉(zhuǎn)換（1）閉合圖形變成不閉合圖形：可以選中一條邊或邊中某個(gè)部分直接刪除。（2）不閉合圖形就成閉合圖形：可以使用鋼筆工具畫閉合是用選擇工具。（3）磁鐵工具的使用動(dòng)畫實(shí)例--心動(dòng)1（1）顯示標(biāo)尺：視圖—標(biāo)尺（快捷鍵：ctrl+shift+R）（2）輔助線：可以直接拖動(dòng)標(biāo)尺，不要輔助線可以再拖回去。（3）按住alt鍵用鼠標(biāo)拖動(dòng)圖形可以復(fù)制對(duì)象（4）要想對(duì)物體鏡相可以使用：修改—變形—水平翻轉(zhuǎn)（5）“窗口—顏色”中漸變類形：線型、放射狀（6）漸變編輯：改變顏色、加色、減色。（7）幀屬性中的旋轉(zhuǎn)圈數(shù)只能設(shè)置為整數(shù)，不可以設(shè)置為小數(shù)。（1）F5：加幀（延長(zhǎng)幀）（2）shift+F5：刪除幀動(dòng)畫實(shí)例--心動(dòng)2圖層、庫(kù)與元件（1）圖層：像透明玻璃（2）圖層的作用：方便對(duì)圖形和動(dòng)畫的管理。對(duì)圖形的管理：可以避免散件間重疊時(shí)發(fā)生鏤空影響。對(duì)動(dòng)畫的管理：可以在某一時(shí)刻同時(shí)出現(xiàn)多個(gè)動(dòng)畫。圖

層（1）新建圖層（2）刪除圖層（3）圖層改名：直接放在圖層名稱上雙擊。（4）按住alt鍵單擊表示隱藏或顯示其它所有的圖層。圖

層

（1）鎖定圖層（2）圖層中對(duì)象的顯示方式，是以實(shí)體顯示還是用輪廓顯示（3）按住alt鍵單擊表示設(shè)置其它所有圖層的顯示方式。圖

層

文本工具文本工具

（1）文本的分類：A、靜態(tài)文本B、動(dòng)態(tài)文本C、輸入文本（2）文本的屬性設(shè)置包括：字體、大小、字母間距、對(duì)齊方式、方向、鏈接等。（1）文本的顏色設(shè)置：文本默認(rèn)只能設(shè)置單色，如果想填充漸變，必須將文本轉(zhuǎn)變成散件。（2）對(duì)于一個(gè)文字只需要分離一次就能變成散件，而對(duì)于多于一個(gè)文字以上的需要分離兩次才能變成散件。（3）對(duì)于多個(gè)文字在填充漸變時(shí)默認(rèn)是一個(gè)文字中填充一個(gè)漸變，可以利用顏料桶工具拖動(dòng)將這些文字整體應(yīng)用一個(gè)漸變。注意在拖動(dòng)時(shí)一定要將落點(diǎn)落在文字內(nèi)部，否則將無效。（4）填充變形工具：可以設(shè)置漸變的方向、角度、過渡區(qū)域的大小。文本編輯

（1）文本轉(zhuǎn)換成散件后，文本的屬性將丟失。（2）要想將邊框變成填充可以用：修改—形狀—將線條轉(zhuǎn)換成填充。文本編輯（1）隱藏或顯示輔助線：視圖—輔助線—顯示輔助線。（2）fla：flash的原文件。這種格式的特點(diǎn)是：只能用fllash軟件才能打開，并且會(huì)保留動(dòng)畫的制作方法。（3）swf：swf格式的文件是依賴于flash的播放器打開的。這種格式的文件比較小，適合在互聯(lián)網(wǎng)上傳播。（4）exe：是在swf格式