第1章Flash動(dòng)畫(huà)制作基礎(chǔ)

1、Flash CS5動(dòng)畫(huà)制作案例教程,教學(xué)課件,Flash動(dòng)畫(huà)概述 圖像的基礎(chǔ)知識(shí) Flash CS5的工作環(huán)境 Flash CS5的基本操作方法 Flash專業(yè)快捷鍵應(yīng)用,本章要點(diǎn),Flash CS5動(dòng)畫(huà)制作 案例教程,第1章 Flash動(dòng)畫(huà)制作基礎(chǔ),1.1Flash動(dòng)畫(huà)概述,1.1.1動(dòng)畫(huà)的概念與制作流程 動(dòng)畫(huà)是利用人的“視覺(jué)暫留”特性，連續(xù)播放一系列畫(huà)面，給視覺(jué)造成連續(xù)變化的圖畫(huà)，如圖所示。它的基本原理與電影、電視一樣，都是視覺(jué)原理。,其中，“視覺(jué)暫留”特性是人的眼睛看到一幅畫(huà)或一個(gè)物體后，在1/24秒內(nèi)不會(huì)消失。利用這一原理，在一幅畫(huà)還沒(méi)有消失前播放出下一幅畫(huà)，就會(huì)給人造成一種流暢的視覺(jué)

2、變化效果。,1.1Flash動(dòng)畫(huà)概述,制作流程 1.前期策劃與籌備階段 前期策劃包括選題報(bào)告、形象素材籌備，故事腳本（文學(xué)劇本） 、角色與環(huán)境設(shè)定、畫(huà)面分鏡頭初稿、生產(chǎn)進(jìn)度日程安排圖表。 2.中期創(chuàng)作與制作階段 主要包括原畫(huà)、動(dòng)畫(huà)、背景繪制、掃描、修線填色、合成及編輯等。原畫(huà)與動(dòng)畫(huà)以及背景主要依靠鉛筆和紙繪出草稿再掃描數(shù)字化?，F(xiàn)在開(kāi)始使用無(wú)紙動(dòng)畫(huà)這一制作方式。即使用鼠標(biāo)、壓感筆和數(shù)位板。 3.后期加工階段 最終將二維動(dòng)畫(huà)軟件的作品輸出為視頻文件再對(duì)這些視頻文件進(jìn)行一些合成以及剪輯工作就成為了動(dòng)畫(huà)片。,1.1Flash動(dòng)畫(huà)概述,1.1.2 Flash動(dòng)畫(huà)及特點(diǎn),動(dòng)畫(huà)短小 Flash動(dòng)畫(huà)受網(wǎng)絡(luò)資源

3、的制約一般比較短小，但繪制的畫(huà)面是矢量格式，無(wú)論把它放大多少倍都不會(huì)失真。 交互性強(qiáng) Flash動(dòng)畫(huà)具有交互性優(yōu)勢(shì)，可以通過(guò)單擊、選擇等動(dòng)作決定動(dòng)畫(huà)的運(yùn)行過(guò)程和結(jié)果，是傳統(tǒng)動(dòng)畫(huà)所無(wú)法比擬的。 具有廣泛傳播性 Flash動(dòng)畫(huà)由于文件小、傳輸速度快、播放采用流式技術(shù)的特點(diǎn)，所以在網(wǎng)上供人欣賞和下載，具有較好的廣泛傳播性。 輕便與靈巧 Flash動(dòng)畫(huà)有嶄新的視覺(jué)效果，成為一種新時(shí)代的藝術(shù)表現(xiàn)形式。比傳統(tǒng)的動(dòng)畫(huà)更加輕便與靈巧。 人力少，成本低 Flash動(dòng)畫(huà)制作的成本非常低，使用Flash制作的動(dòng)畫(huà)能夠大大地減少人力、物力資源的消耗。同時(shí)，在制作時(shí)間上也會(huì)大大減少。,1.1Flash動(dòng)畫(huà)概述,1.1.

4、3 Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域,網(wǎng)絡(luò)廣告,注:本廣告動(dòng)畫(huà)來(lái)自新浪網(wǎng),1.1Flash動(dòng)畫(huà)概述,1.1.3 Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域,網(wǎng)站建設(shè),注:本圖片來(lái)自中國(guó)網(wǎng)頁(yè)設(shè)計(jì)聯(lián)盟網(wǎng) 瀏覽網(wǎng)站,1.1Flash動(dòng)畫(huà)概述,1.1.3 Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域,網(wǎng)站片頭,注:本廣告動(dòng)畫(huà)來(lái)自安踏運(yùn)動(dòng)鞋網(wǎng)站片頭,1.1Flash動(dòng)畫(huà)概述,1.1.3 Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域,網(wǎng)站短片,1.1Flash動(dòng)畫(huà)概述,1.1.3 Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域,原理演示,1.1Flash動(dòng)畫(huà)概述,1.1.3 Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域,原理演示,1.2圖像的基礎(chǔ)知識(shí),1.2.1像素和分辨率 像素是構(gòu)成圖像的最小單位，它的形態(tài)是

5、一個(gè)小方點(diǎn)。很多個(gè)像素組合在一起就構(gòu)成了一幅圖像，組合成圖像的每一個(gè)像素只顯示一種顏色。由于圖像能記錄下每一個(gè)像素的數(shù)據(jù)信息，因而可以精確的記錄色調(diào)豐富的圖像，逼真地表現(xiàn)自然界的景觀。,1.2圖像的基礎(chǔ)知識(shí),分辨率是圖像處理中一個(gè)非常重要的概念，它是指位圖圖像在每英寸上所包含的像素?cái)?shù)量，單位使用每英寸的像素?cái)?shù)PPI（Pixels/Inch）來(lái)表示。圖像分辨率的高低直接影響圖像的質(zhì)量，分辨率越高，文件也就越大，圖像也會(huì)越清晰，（300PPI）所示，處理速度也會(huì)變慢；反之，分辨率越低，圖像就越模糊，（72PPI）所示，文件也會(huì)越小。,分辨率高的圖像 分辨率低的圖像,1.2圖像的基礎(chǔ)知識(shí),1.2.2

6、位圖與矢量圖 位圖又稱為點(diǎn)陣圖，是由許多點(diǎn)組成，這些點(diǎn)為像素（pixel）。當(dāng)許多不同顏色的點(diǎn)（即像素）組合在一起后，便構(gòu)成了一幅完整的圖像。 位圖可以記錄每一個(gè)點(diǎn)的數(shù)據(jù)信息，因而可以精確地制作出色彩和色調(diào)變化豐富的圖像，可以逼真地表現(xiàn)自然界的景象，達(dá)到照片般的品質(zhì)。但是，它由于所包含的圖像像素?cái)?shù)目是一定的，若將圖像放大到一定程度后，圖像就會(huì)失真，邊緣會(huì)出現(xiàn)鋸齒，如圖1-4所示。,位圖的原效果與放大后的效果,1.2圖像的基礎(chǔ)知識(shí),矢量圖形也稱為向量式圖形，它用數(shù)學(xué)的矢量方式來(lái)記錄圖像內(nèi)容，以線條和色塊為主，這類對(duì)象的線條非常光滑、流暢，可以進(jìn)行無(wú)限的放大、縮小或旋轉(zhuǎn)等操作，并且不會(huì)失真，如圖所

7、示。矢量圖不宜制作色調(diào)豐富或者色彩變化太多的圖形，而且繪制出來(lái)的圖形無(wú)法像位圖那樣精確地描繪各種絢麗的景象。,矢量圖的原效果與放大后的效果,1.3 Flash CS5的工作環(huán)境,從模板創(chuàng)建,新建,學(xué)習(xí),打開(kāi)最近的項(xiàng)目,官方資源的快速訪問(wèn),開(kāi)始頁(yè),1.3 Flash CS5的工作環(huán)境,面板組,舞臺(tái),工具欄,時(shí)間軸,菜單欄,文件選項(xiàng)卡,工作區(qū),工作窗口,1.3 Flash CS5的工作環(huán)境,時(shí)間軸,工具箱,1.3 Flash CS5的工作環(huán)境,面板演示,“屬性”面板,“庫(kù)”面板,“庫(kù)”面板,1.3 Flash CS5的工作環(huán)境,面板演示,“信息”面板,“變形”面板,“變形”面板,1.3 Flash

8、 CS5的工作環(huán)境,網(wǎng)格、標(biāo)尺和輔助線,執(zhí)行“視圖”“網(wǎng)格”“顯示網(wǎng)格”命令，可以顯示網(wǎng)格線，如圖所示,1.3 Flash CS5的工作環(huán)境,網(wǎng)格、標(biāo)尺和輔助線,執(zhí)行“視圖”“網(wǎng)格”“編輯網(wǎng)格”命令，打開(kāi)“網(wǎng)格”對(duì)話框，如圖所示,1.3 Flash CS5的工作環(huán)境,網(wǎng)格、標(biāo)尺和輔助線,選擇“視圖”“標(biāo)尺”命令，可以顯示或隱藏標(biāo)尺，如圖所示,1.3 Flash CS5的工作環(huán)境,網(wǎng)格、標(biāo)尺和輔助線,標(biāo)尺狀態(tài)的輔助線，如圖所示。,1.3 Flash CS5的基本操作方法,1.4.1 Flash動(dòng)畫(huà)的制作流程,1準(zhǔn)備素材 根據(jù)動(dòng)畫(huà)的內(nèi)容需要準(zhǔn)備一些動(dòng)畫(huà)素材，包括音頻素材（聲效、音效）、圖像素材、視

9、頻素材等。一般情況下，需要對(duì)這些素材進(jìn)行采集、編輯與整理，以滿足動(dòng)畫(huà)制作的需求。 2新建Flash影片文檔 Flash影片文檔有兩種創(chuàng)建方法。一種是新建空白影片文檔，另一種是從模板創(chuàng)建影片文檔。在Flash CS5中，新建空白影片文檔有兩種類型，一種是“Flash文件（ActionScript3.0）”，另一種是“Flash文件（ActionScript2.0）”，這兩種類型的影片文檔不同之處在于前一個(gè)的動(dòng)作腳本語(yǔ)言是ActionScript3.0，后一個(gè)的腳本語(yǔ)言是ActionScript2.0。,1.3 Flash CS5的基本操作方法,1.4.1 Flash動(dòng)畫(huà)的制作流程,3設(shè)置文檔屬性

10、 在正式動(dòng)畫(huà)制作之前，要先設(shè)置好尺寸（舞臺(tái)的尺寸）、背景顏色（舞臺(tái)背景色）、幀頻（每秒鐘播放的幀數(shù)）等文檔屬性。這些操作要在“文檔屬性”對(duì)話框中進(jìn)行。 4制作動(dòng)畫(huà) 這是完成動(dòng)畫(huà)效果制作的最主要的步驟。一般情況下，需要先創(chuàng)建動(dòng)畫(huà)角色，可以用繪圖工具繪制，也可以導(dǎo)入外部的素材，然后在時(shí)間軸上組織和編輯動(dòng)畫(huà)效果。,1.3 Flash CS5的基本操作方法,1.4.1 Flash動(dòng)畫(huà)的制作流程,5測(cè)試和保存動(dòng)畫(huà) 動(dòng)畫(huà)制作完成后，可以執(zhí)行“控制”“測(cè)試影片”命令（快捷鍵）對(duì)影片效果進(jìn)行測(cè)試，如果滿意可以執(zhí)行“文件”“保存”命令（或按）保存影片。為了安全，在動(dòng)畫(huà)制作過(guò)程中要經(jīng)常保存文件。按可以快速保存文件

11、。 6導(dǎo)出和發(fā)布影片 如果對(duì)制作的動(dòng)畫(huà)效果比較滿意了，組后可以導(dǎo)出或者發(fā)布影片。執(zhí)行“文件”“導(dǎo)出”“導(dǎo)出影片”命令，可以導(dǎo)出影片。執(zhí)行“文件”“發(fā)布”命令可以發(fā)布影片，通過(guò)發(fā)布影片可以得到更多類型的目標(biāo)文件。,1.3 Flash CS5的基本操作方法,1.4.1 Flash動(dòng)畫(huà)的制作流程,制作第一個(gè)Flash影片,1.5 Flash專業(yè)快捷鍵應(yīng)用,1.3.1快捷鍵指法應(yīng)用 1指法介紹 平面設(shè)計(jì)的中Flash軟件的快捷鍵相當(dāng)豐富，在這里舉幾個(gè)例子來(lái)說(shuō)明快捷鍵的使用方法與技巧： 快捷鍵的功能是選擇全部。 操作含義：按下鍵不松手，然后按一下鍵，最后松開(kāi)所有按鍵。 操作要點(diǎn)：按下第一個(gè)組合鍵時(shí)不可松手，確保在按下它的前提下，去按第二個(gè)組合鍵，同樣在按二個(gè)組合鍵時(shí)第一個(gè)組合鍵不可松開(kāi)。 操作指法（以左手操作鍵盤，右手操作鼠標(biāo)為例），如圖所示,快捷鍵的指法操作技巧,1.5 Flash專業(yè)快捷鍵應(yīng)用,1.5.2常用快捷鍵,