《《Flash動(dòng)畫制作》PPT課件.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《《Flash動(dòng)畫制作》PPT課件.ppt（38頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、Flash動(dòng)畫制作,Flash 概述、工作界面、基本術(shù)語(yǔ) 基本操作：繪制輪廓線、填充、畫圓、畫方框、擦除圖形、移動(dòng)圖形 動(dòng)畫制作：逐幀動(dòng)畫、過渡動(dòng)畫、引導(dǎo)層動(dòng)畫、遮罩動(dòng)畫、Alpha通道、聲音的導(dǎo)入、發(fā)布與輸出,Flash 概述 工作界面 基本術(shù)語(yǔ),Flash 概述,Flash 是美國(guó)Macromedia公司推出的一款非常優(yōu)秀的基于矢量圖形的交互式動(dòng)畫設(shè)計(jì)軟件。 它可以將音樂、聲效、動(dòng)畫以及富有新意的界面等多媒體元素融合在一起，制作出高品質(zhì)的動(dòng)畫效果。 它可應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)、MTV、電子賀卡、廣告制作、游戲制作以及課件制作。,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程

2、,,Flash 8 工作界面,,,Flash基本術(shù)語(yǔ),時(shí)間軸 幀 圖層 場(chǎng)景 元件、實(shí)例 對(duì)象,時(shí)間軸,時(shí)間軸位于主工具欄的下面，是用來進(jìn)行動(dòng)畫創(chuàng)作和編輯的主要工具，分為兩大部分：層控制區(qū)和時(shí)間軸控制區(qū)，如圖所示。,,圖示,幀（Frame） 構(gòu)成Flash動(dòng)畫的基本組成元素,幾種類型:,圖層(Layer ),圖層就像透明的膠片，每個(gè)圖層上所繪制的對(duì)象按一定的順序重疊在一起，形成復(fù)雜的動(dòng)畫。每個(gè)每個(gè)圖層都有各自的時(shí)間軸。在Flash 中圖層分為普通層、遮罩層、運(yùn)動(dòng)引導(dǎo)層。,圖2 場(chǎng)景面板,場(chǎng)景（Scene） 場(chǎng)景如同拍電影的不同場(chǎng)所，一個(gè)影片可以有一個(gè)也可以有多個(gè)場(chǎng)景，每個(gè)場(chǎng)景是Flash作品中

3、相對(duì)獨(dú)立的一段動(dòng)畫內(nèi)容.,元件、實(shí)例,元件：存放在庫(kù)中可反復(fù)取出使用動(dòng)畫元素 實(shí)例：將元件從庫(kù)中拖到舞臺(tái)上就形成了這個(gè)元件的一個(gè)實(shí)例. 一個(gè)元件可以產(chǎn)生多個(gè)實(shí)例，當(dāng)元件更新后，舞臺(tái)上的所有實(shí)例全部更新，但修改實(shí)例的屬性對(duì)元件沒有絲毫影響。 說明：為了方便，在場(chǎng)景中引入的實(shí)例也簡(jiǎn)稱為元件。,圖示,圖 示,對(duì)象（Object） Falsh中的動(dòng)畫都是由對(duì)象組成的，對(duì)象可以分為: 形狀 通過繪圖工具繪制產(chǎn)生的如園、矩形等形狀；對(duì)象被選中，以網(wǎng)點(diǎn)所覆蓋，對(duì)象不是整體，各部分的形狀、大小都可以改變。 組 將形狀通過“修改|組合”命令轉(zhuǎn)換成為組對(duì)象，對(duì)象是個(gè)整體，只能改變組對(duì)象的大小、角度等操作。組對(duì)象通

4、過“修改|分離”命令打散轉(zhuǎn)變?yōu)樾螤顚?duì)象。 元件 通過“插入”菜單的“|新建元件”或“轉(zhuǎn)換為元件”命令創(chuàng)建的元件，在場(chǎng)景中引用，其實(shí)質(zhì)也是組。 文本 通過工具箱的“文本工具”產(chǎn)生。,基本操作： 繪制輪廓線、填充、畫圓、畫方框、擦除圖形、移動(dòng)圖形,界面特點(diǎn)與繪制工具,,(1) 雙擊 Flash軟件圖標(biāo),(2) 選擇“文件 / 新建”菜單 (此步不可省略，否則窗口尺寸有誤),,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,,設(shè)置動(dòng)畫尺寸及其他,(1) 單擊底部“屬性”工具條,,, 操作步驟,,,(2) 單擊“尺寸”按鈕,(3) 輸入“尺寸”數(shù)值,(5) 輸入“幀頻” fps (取值

5、1225),,,,(4) 單擊“背景顏色”框 確定動(dòng)畫窗口背景色,,(6) 確定標(biāo)尺單位 (像素、英寸、厘米、毫米等),,(7) 單擊“設(shè)為默認(rèn)值”按鈕，保存當(dāng)前設(shè)置,,(8) 單擊“確定”按鈕,,(9) 單擊“屬性”標(biāo)題欄，關(guān)閉,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,動(dòng)畫的畫法,,(1) 選擇鉛筆工具,(2) 選擇鉛筆顏色,(3) 選擇輪廓模式,(4) 描繪輪廓,, 繪制輪廓線,,,,,(1) 選擇顏料桶工具,(2) 選擇填充模式 (漸變、單色均可),(3) 選擇封閉模式,(4) 單擊圖形內(nèi)部 填充顏色,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

6、,,,教學(xué)進(jìn)程,,畫圖形,(2) 選擇圓內(nèi)單色或漸變色,(3) 畫圓 (鼠標(biāo)橢圓 /Shift+鼠標(biāo)正圓),(1) 選擇畫圓工具,(2) 選擇單色或漸變色,(3) 單擊“圓角” 按鈕，設(shè)置圓角,,,,,, 畫圓,,(4) 畫方框 (鼠標(biāo)任意 /Shift+鼠標(biāo)正方),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,處理圖形,(1) 選擇橡皮工具,(3) 選擇橡皮尺寸,(2) 選擇擦除模式,(4) 擦除圖形,(2) 移動(dòng)圖形,, 擦除圖形,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,北京 BEIJING,輸入文字,(1) 選擇文本工具,(

7、2) 鼠標(biāo)左鍵劃出文本框,(3) 輸入文本內(nèi)容,(4) 光標(biāo)條覆蓋文本,(6) 鼠標(biāo)對(duì)準(zhǔn)文本輸入框，移動(dòng)文字,(7) 單擊非文本輸入?yún)^(qū)結(jié)束,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,動(dòng)畫制作,1.逐幀動(dòng)畫 2.過渡動(dòng)畫(形狀補(bǔ)間、動(dòng)作補(bǔ)間) 3.引導(dǎo)層動(dòng)畫 4.遮罩層動(dòng)畫 5.添加聲音,逐幀動(dòng)畫,逐幀動(dòng)畫: 每一幀的畫面都需要自己制作。逐幀動(dòng)畫的體積一般比較大。 例8.10 ：顯示數(shù)字計(jì)數(shù)器，在顯示數(shù)字5這幀時(shí)停留時(shí)間長(zhǎng)些。 設(shè)計(jì)思想： (1)在時(shí)間軸第1幀輸入數(shù)字1 ，其它幀插入關(guān)鍵幀，將數(shù)字改變，在數(shù)字5后的幀間隔長(zhǎng)一些； (2)“修改|文檔”將幀的播

8、放速度由默認(rèn)12改為4，使顯示速度慢一些。 例：制作文字滾動(dòng)的動(dòng)畫文字 在關(guān)鍵幀依次增加文字,過渡動(dòng)畫,過渡動(dòng)畫:可以做出位移、旋轉(zhuǎn)、縮放、顏色改變等動(dòng)畫效果。 制作方法:改變兩個(gè)關(guān)鍵幀的位置、形狀、顏色和大小等屬性來完成。也可通過幾個(gè)層之間動(dòng)畫的疊加來實(shí)現(xiàn)。 實(shí)現(xiàn)過渡動(dòng)畫:通過“補(bǔ)間”來實(shí)現(xiàn)兩個(gè)關(guān)鍵幀之間的動(dòng)畫變化；有兩種“補(bǔ)間”： “動(dòng)作補(bǔ)間”：關(guān)鍵幀是矢量圖（組、元件）； “動(dòng)畫補(bǔ)間”：關(guān)鍵幀是分離的圖形。,例8.11 “形狀補(bǔ)間” ，使用改變幀形狀的方法制作由圓形變?yōu)榉叫巍⑷切蔚膭?dòng)畫。 例8.12 “動(dòng)畫補(bǔ)間” 利用兩個(gè)圖層實(shí)現(xiàn)兩個(gè)球碰撞的效果。 設(shè)計(jì)思想：利用元件、兩個(gè)圖層的時(shí)間

9、軸實(shí)現(xiàn)兩球碰撞的模擬； 場(chǎng)景中的網(wǎng)格便于定位，通過“查看|網(wǎng)格|顯示網(wǎng)格”來設(shè)置。,引導(dǎo)層動(dòng)畫,引導(dǎo)層動(dòng)畫: 使運(yùn)動(dòng)的對(duì)象沿著特定的路徑運(yùn)動(dòng)，運(yùn)動(dòng)的對(duì)象可以是實(shí)例、組合及文本塊，而引導(dǎo)層中的路徑必須是矢量圖形。 例8.13 利用引導(dǎo)層使對(duì)象沿指定曲線運(yùn)動(dòng)的動(dòng)畫。 設(shè)計(jì)思想： “插入|新建元件” 建立一個(gè)元件，作為運(yùn)動(dòng)對(duì)象； 在圖層1不同幀引用元件； 添加運(yùn)動(dòng)層，用鉛筆畫一條光滑運(yùn)動(dòng)軌跡； 在圖層1對(duì)象定位在運(yùn)動(dòng)曲線上，作”動(dòng)作補(bǔ)間”。,遮罩層動(dòng)畫,遮罩層動(dòng)畫:遮罩層的內(nèi)容就好比一個(gè)洞，透過這個(gè)洞，我們可以看到下面的層。遮罩層的對(duì)象可以是填充的形狀、文字和實(shí)例。 例8.14 制作探照燈效

10、果的動(dòng)畫。 設(shè)計(jì)思想：利用遮罩層運(yùn)動(dòng)的圓遮罩下面的文字，形成探照燈的效果。 例8.16 使用圖層的遮罩技術(shù)滾動(dòng)顯示彩色文字，文字顏色使用一幅圖片來填充。 設(shè)計(jì)思想：在圖層1有運(yùn)動(dòng)的圖片； 在圖層2有所需的文字，設(shè)置為遮罩層。,Alpha通道應(yīng)用,Alpha通道:是指元件對(duì)象顏色的透明度，應(yīng)用在對(duì)象由近到遠(yuǎn)逐漸變淡的過程。 例8.15 通過改變文本的位置、顏色和大小的方法制作逐漸消失的文字。 注意： 使用Alpha通道屬性的對(duì)象必須是元件或組，不能是分散的圖形。,聲音的導(dǎo)入與使用,聲音在動(dòng)畫中占有相當(dāng)重要的地位，它在整個(gè)動(dòng)畫過程中起著畫龍點(diǎn)睛的作用。一個(gè)精彩的的動(dòng)畫，配以合適的背景音樂

11、，將會(huì)使作品生動(dòng)起來，變得更加精彩。 添加聲音過程 1. 導(dǎo)入聲音 2. 在場(chǎng)景中加入使用聲音 3. 聲音屬性設(shè)置（音效、播放）,1.導(dǎo)入聲音,使用“文件”“導(dǎo)入”命令; 選擇.wav或.mp3格式的文件，將其導(dǎo)入到庫(kù)中; 如果想獲得較好的音效，可導(dǎo)入22kHz、16位立體聲格式的聲音文件；如果為了提高動(dòng)畫文件的傳輸速度，則應(yīng)導(dǎo)入8kHz、8位單聲道格式的聲音文件。,2.在場(chǎng)景中加入聲音,庫(kù)面板中將聲音文件拖到關(guān)鍵幀上,3.聲音屬性設(shè)置,效果：有淡入淡出等 同步方式四種： 事件：某個(gè)動(dòng)作觸發(fā)；播放前必須下載完才播放;動(dòng)畫 停止，聲音也要播完; 可能會(huì)同時(shí)聽到多個(gè)聲音。 開始：與事件相似

12、；區(qū)別是要播完原來的； 不會(huì)同時(shí)聽到多個(gè)聲音 停止：立即停止播放當(dāng)前幀的聲音; 數(shù)據(jù)流：邊下載邊播放；動(dòng)畫停止，聲音停止。,發(fā)布與輸出,制作完動(dòng)畫之后，可以把生成的動(dòng)畫導(dǎo)出為后綴名為.swf的動(dòng)畫播放文件，也可以把它發(fā)布為影片，生成網(wǎng)頁(yè)瀏覽器支持的HTML、GIF、JPEG文件。 當(dāng)動(dòng)畫導(dǎo)出為影片或者是完成HTML文檔的創(chuàng)建后，就可以上載給有MIME類型文件、能識(shí)別Flash影片的瀏覽器，任何帶有Flash播放器（Shockwave Flash Player）的瀏覽器都可以播放它。,,發(fā)布的過程為： 發(fā)布設(shè)置 選擇“文件|發(fā)布設(shè)置”命令，指定要發(fā)布的文件格式和文件名。每種圖形格式都有相應(yīng)的選

13、項(xiàng)，在選擇了一種圖形格式發(fā)布時(shí)Flash會(huì)自動(dòng)嵌入該圖形的HTML代碼。 發(fā)布 設(shè)置完成后可直接單擊發(fā)布按鈕，或關(guān)閉對(duì)話框后選擇“文件|發(fā)布”命令。,制作幀動(dòng)畫, 繪制圖形,,7.1.3,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,制作自動(dòng)動(dòng)畫, 直線移動(dòng)動(dòng)畫,(4) 鼠標(biāo)右鍵單擊第1幀，選擇“創(chuàng)建動(dòng)畫動(dòng)作”,(6) 預(yù)覽動(dòng)畫效果，圖形從第1幀的位置移動(dòng)到第20幀的位置,,7.1.4,,,,(1) 在第1幀中畫 一個(gè)圖形,(2) 鼠標(biāo)右鍵單擊某一幀，如第20幀 選擇“插入關(guān)鍵幀”,,,(5) 鼠標(biāo)右鍵單擊第20幀，選擇“創(chuàng)建動(dòng)畫動(dòng)作”,,,,,,,,,,,,,,,,

14、,,,,,,,,,,,,教學(xué)進(jìn)程,,自由路徑移動(dòng)動(dòng)畫,,(3) 單擊鉛筆工具,(10) 預(yù)覽動(dòng)畫效果,,,,(1) 制作直線 移動(dòng)動(dòng)畫,,(5) 畫自由路徑,(2) 單擊 (添加引導(dǎo)圖層)按鈕,(4) 選擇“平滑”效果,,,,(6) 單擊圖形圖層,,,(8) 單擊第1幀，把圖形置于路徑的起始位置,(9) 單擊最后1幀，把圖形置于路徑的終了位置,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,為動(dòng)畫添加聲音,(2) 指定文件類型和聲音文件,(3) 單擊“打開”按鈕,(4) 單擊某個(gè)動(dòng)畫圖層, 操作步驟,(5) 單擊“屬性”工具欄,(6) 在“聲音”框中指定聲音文件,(

15、7) 指定“同步”對(duì)象 (事件、開始、停止、數(shù)據(jù)流),(8) 預(yù)覽動(dòng)畫 (可聽到聲音),,,,,,7.1.5,(1) 選擇“文件/導(dǎo)入”,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,保存動(dòng)畫, 保存可編輯文件 fla,(1) 選擇“文件/另存為”,(2) 輸入文件名,(3) 單擊“保存”按鈕,,,,,7.1.6,,(3) 單擊“保存”按鈕,(1) 選擇“文件/導(dǎo)出影片”菜單,,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,,動(dòng)畫制作舉例,, 幀數(shù)：5 動(dòng)畫文件格式：GIF,,,,操作步驟 (1) 設(shè)置動(dòng)畫尺寸及其他 (2) 繪制輪廓線 (3) 增加關(guān)鍵幀 (4) 重復(fù)步驟(2)、(3) (5) 保存, 繪制一組蟲子爬行的畫面,,,,,,,,,,,,,,,,,,,,,,,,,,,,教學(xué)進(jìn)程,,