Flash動畫的設(shè)計(jì)與制作 Flash動畫基礎(chǔ)

Flash動畫的設(shè)計(jì)與制作Flash動畫基礎(chǔ)第1頁/共48頁天下事沒有不勞而獲的東西。Nopain,nogain.

——人生警句2第2頁/共48頁第六章Flash動畫基礎(chǔ)

3Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第3頁/共48頁第六章Flash動畫基礎(chǔ)場景幀

圖層動畫原理及分類逐幀動畫補(bǔ)間形狀動畫傳統(tǒng)補(bǔ)間動畫傳統(tǒng)運(yùn)動引導(dǎo)動畫遮罩動畫高級發(fā)布設(shè)置自定義測試影片的下載速度4Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第4頁/共48頁

6.1場景

場景SETTING場景指整部或部分電影的拍攝場地。在FLASH中可以有多個場景，在不同場景中跳轉(zhuǎn)的可以gotoandplay(“目標(biāo)場景”，幀)。至少要有一個場景）。

動畫場景1場景2

……場景ｎ

形狀元件聲音動作形狀元件聲音動作形狀元件聲音動作5Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第5頁/共48頁

6.1場景

場景選擇“窗口”——“其他面板”——“場景”場景可復(fù)制，可重新命名，可刪除。默認(rèn)情況下，將按照場景的上下順序進(jìn)行播放，另外，使用ActionScript語言可以更靈活地控制場景之間的切換。

6Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第6頁/共48頁

6.2幀

幀

幀是Flash動畫的基本單位，理解幀的概念并靈活得使用它，使創(chuàng)作Flash動畫的關(guān)鍵。幀就是影像動畫中最小單位的單幅影像畫面，相當(dāng)于電影膠片上的每一格鏡頭。一幀就是一副靜止的畫面，連續(xù)的幀就形成動畫，如電視圖象等。

7Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第7頁/共48頁

6.2幀

幀頻簡單的說，就是動畫的播放的速度。以每秒播放的幀數(shù)Fps為度量單位。標(biāo)準(zhǔn)的動畫速率是24Fps，它能夠滿足在網(wǎng)頁或FlashMTV等領(lǐng)域的播放需求，這也是Flash默認(rèn)的幀頻。

8Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第8頁/共48頁

6.2幀

時間軸基礎(chǔ)幀選擇幀編輯幀幀的設(shè)置9Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第9頁/共48頁

6.2幀

時間軸Flash中非常重要的面板，快捷鍵Ctrl+Alt+T，播放頭，當(dāng)前幀，幀速率，運(yùn)行時間，幀居中按鈕10Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路播放頭幀居中按鈕當(dāng)前幀幀速率運(yùn)行時間第10頁/共48頁

6.2幀

基礎(chǔ)幀幀分為兩類，基礎(chǔ)幀和動畫幀?；A(chǔ)幀有三種類型，即關(guān)鍵幀、空白關(guān)鍵幀、延長幀。動畫幀，如傳統(tǒng)補(bǔ)間動畫幀、補(bǔ)間形狀幀等。

空白幀：不包括任何內(nèi)容的幀。

11Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第11頁/共48頁

6.2幀

基礎(chǔ)幀

關(guān)鍵幀：包括任何有意義內(nèi)容的幀，快捷鍵F7

12Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第12頁/共48頁

6.2幀

基礎(chǔ)幀

延長幀：對前一個關(guān)鍵幀的內(nèi)容起到延長其顯示時間的作用。

13Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路延長幀第13頁/共48頁

6.2幀

選擇幀在時間軸上單擊其一幀即可選擇幀。按住Shift鍵并單擊其他幀，可選擇多個連續(xù)的幀。按住Ctral鍵并單擊其他幀，可選擇多個不連續(xù)的幀。選擇所有幀，可選擇“編輯”——“時間軸”——“選擇所有幀”按住鼠標(biāo)左鍵在“時間軸”上拖動，可以將鼠標(biāo)滑過的幀都選中。14Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第14頁/共48頁

6.2幀

編輯幀刪除幀，剪切幀，復(fù)制幀，粘貼幀，清除幀，反轉(zhuǎn)幀，15Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第15頁/共48頁

6.2幀

幀的設(shè)置16Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路繪圖紙外觀按鈕編輯多個幀按鈕修改繪圖紙標(biāo)記按鈕幀居中按鈕繪圖紙外觀輪廓按鈕第16頁/共48頁

6.2幀

幀的設(shè)置制作Flash動畫時，同一時間點(diǎn)只能顯示動畫序列中的一幀內(nèi)容，但有時需要同時查看多個幀，這就要使用到“洋蔥皮”工具。17Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路顯示洋蔥皮范圍第17頁/共48頁

6.2幀

幀的設(shè)置時間軸的顯示模式18Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路取消“彩色顯示幀”選擇“預(yù)覽”模式第18頁/共48頁

6.3圖層

象蓋房子一樣，一層一層的，每一層都有內(nèi)容。相互重疊、覆蓋互不影響“層”的概念在Photoshop中非常重要，它是構(gòu)成圖像的重要組成單位，許多效果可以通過對層的直接操作而得到，用圖層來實(shí)現(xiàn)效果是一種直觀而簡便的方法。19Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第19頁/共48頁

6.3圖層

20Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路鎖定／解鎖所有圖層顯示／隱藏所有圖層圖層顯示區(qū)新建圖層按鈕將所有圖層顯示為輪廓新建文件夾按鈕刪除圖層按鈕第20頁/共48頁

6.3圖層

創(chuàng)建圖層默認(rèn)狀態(tài)下，F(xiàn)lash文件只有一個圖層。創(chuàng)建圖層的方法：1、單擊“時間軸”面板上的“新建圖層”按鈕2、選擇“插入”——“時間軸”——“圖層”默認(rèn)狀態(tài)下，新建圖層的命名為“圖層N”，N為創(chuàng)建新圖層的次數(shù)。21Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第21頁/共48頁

6.3圖層

命名圖層雙擊圖層名稱，待其變?yōu)榭奢斎霠顟B(tài)后，輸入新的圖層名稱，按Enter鍵即可。雙擊需要命名的圖層名稱前的圖標(biāo)，在彈出的“圖層屬性”對話框中輸入新的圖層名稱，單擊“確定”按鈕退出對話框即可。在需要命名的圖層上右擊，再彈出的菜單中選擇“屬性”命令，在彈出的“圖層屬性”對話框中輸入新的圖層名稱，單擊“確定”按鈕退出對話框即可。22Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第22頁/共48頁

6.3圖層

選擇圖層在“時間軸”面板上單擊某一個圖層，即可選中。在“時間軸”面板上單擊某一幀，即可將該幀所在的圖層選中。在工作區(qū)域選擇一個對象，可將該對象所在的圖層選中。按Shift鍵，單擊多圖層，可選擇相鄰的多圖層。按Ctral鍵，單擊多圖層，可選擇不相鄰的多圖層。23Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第23頁/共48頁

6.3圖層

移動圖層在Flash中圖層的順序?qū)Q定重疊對象間的覆蓋情況，而且總是處于上層的對象遮蓋下層的對象。在新建圖層時，新的圖層總是位于當(dāng)前選擇的圖層的上方。復(fù)制圖層通過復(fù)制圖層，可以將該圖層中的所有圖形、圖像及其他對象復(fù)制一份。刪除圖層對不需要的圖層，可以將其刪除，以免有太多圖層干擾操作。24Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第24頁/共48頁

6.3圖層

圖層屬性顯示或隱藏所有圖層按鈕鎖定或解除鎖定所有圖層按鈕將所有圖層顯示為輪廓按鈕圖層文件可以將圖層存放在圖層文件夾中，方便對圖層進(jìn)行分類管理。。而且通過隱藏或鎖定一個圖層文件夾?？梢砸淮涡噪[藏或鎖定文件夾中的所有圖層內(nèi)容，提高圖層的管理效率。25Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第25頁/共48頁

6.4動畫原理及分類

動畫是一系列彼此在視覺效果上相關(guān)的圖畫快速逐幀顯示的效果。由于人的眼睛有0.1秒的視覺殘留，所以看上去就像是物體運(yùn)動起來了。在Flash中，包括傳統(tǒng)補(bǔ)間動畫，補(bǔ)間動畫，補(bǔ)間形狀及逐幀動畫等。無論是哪一種，都需要幀、圖層、場景、舞臺的元素的相互配合。幀是構(gòu)成動畫的基本單位。圖層是用于裝載幀的一個載體。圖層之間還有上下層疊順序的特性，在視覺上可以造成遠(yuǎn)近、前后的距離感。舞臺是展示動畫效果的地方，在播放器中播放，只有在舞臺中的對象被顯示。26Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第26頁/共48頁

6.5逐幀動畫

工作原理在每一幀種插入不同的圖片或在每一幀中改變圖片的部分元素。是Flash動畫制作中最為麻煩，但動畫效果最好的一種。類似于傳統(tǒng)動畫。要求制作者掌握動畫的運(yùn)動規(guī)律。27Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第27頁/共48頁

6.6補(bǔ)間形狀動畫

工作原理補(bǔ)間動畫是某一個對象在一定時間內(nèi)其形狀發(fā)生過渡型補(bǔ)間的動畫。在創(chuàng)建補(bǔ)間動畫時參與動畫制作的對象必須為分解的矢量對象即形狀。補(bǔ)間形狀動畫在時間軸上此類幀表現(xiàn)為綠色底、首尾間以箭頭連接的若干個幀。28Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第28頁/共48頁

6.6補(bǔ)間形狀動畫

設(shè)置變形控制點(diǎn)1、在“時間軸”面板中單擊選擇形狀補(bǔ)間動畫第一幀。2、選擇“修改”——“形狀”——“添加形狀提示”，快捷鍵Ctrl+Shift+H組合鍵，第一幀的形狀對象添加了一個標(biāo)有字母“a”的紅色圓形控制點(diǎn)。3、移動紅色圓形控制點(diǎn)到圖形對象需要標(biāo)記的位置。4、單擊選擇形狀補(bǔ)間動畫的最后一個關(guān)鍵幀，該幀的圖形對象中自動添加了一個標(biāo)有“a”的紅色圓形控制點(diǎn)。5、移動最后一個關(guān)鍵幀中的標(biāo)記到需要與第一幀的標(biāo)記相對應(yīng)的位置，移動后，控制點(diǎn)由紅色變?yōu)榫G色。6、返回到第一幀，此時紅色圓形控制點(diǎn)變?yōu)辄S色。7、重復(fù)操作，可增加控制點(diǎn)?？刂泣c(diǎn)越多，形狀變形的時候會越精確。29Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第29頁/共48頁

6.7傳統(tǒng)補(bǔ)間動畫

Flash中的補(bǔ)間補(bǔ)間是Flash中非常龐大的一個動畫制作手法，它可以通過設(shè)置相應(yīng)的參數(shù)，調(diào)整幀與幀之間的元素的屬性變化，如位置、大小、顏色及透明度。從創(chuàng)建形式上，可分為：

1、傳統(tǒng)補(bǔ)間動畫

2、補(bǔ)間動畫

3、補(bǔ)間形狀動畫傳統(tǒng)補(bǔ)間動畫和補(bǔ)間動畫都可以在元件及文本之間創(chuàng)建。補(bǔ)間形狀動畫必須在普通的圖形之間創(chuàng)建。

30Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第30頁/共48頁

6.7傳統(tǒng)補(bǔ)間動畫

工作原理傳統(tǒng)補(bǔ)間動畫是早期版本運(yùn)用比較廣泛的一種動畫形式。它需要有兩個處于同一圖層中的關(guān)鍵幀，其中必須只能存在一個元件或文本對象。傳統(tǒng)補(bǔ)間動畫顯示為藍(lán)紫色背景，且關(guān)鍵幀之間會有一個箭頭。

31Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第31頁/共48頁

6.7傳統(tǒng)補(bǔ)間動畫

工作原理相關(guān)屬性：幀標(biāo)簽，標(biāo)簽類型，補(bǔ)間，縮放，緩動，編輯緩動，旋轉(zhuǎn)，調(diào)整到路徑，同步，對齊，聲音32Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第32頁/共48頁

6.7傳統(tǒng)補(bǔ)間動畫

工作原理

色彩補(bǔ)間動畫是補(bǔ)間動畫的一個分支。靈活利用元件的色彩、亮度、透明度來變化效果。色彩補(bǔ)間動畫的效果比較適合網(wǎng)頁片頭的一些特效制作。

33Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第33頁/共48頁

6.8傳統(tǒng)運(yùn)動引導(dǎo)動畫

傳統(tǒng)運(yùn)動引導(dǎo)動畫是指一圖層中的對象沿另一圖層中的引導(dǎo)路徑進(jìn)行運(yùn)動的動畫，而且在動畫中不會看到引導(dǎo)路徑的內(nèi)容。引導(dǎo)路徑所在的圖層被稱為“運(yùn)動引導(dǎo)層”。引導(dǎo)路徑只能為形狀，不可以為元件或組件等形式。沿路徑運(yùn)行的對象所在的圖層為“被引導(dǎo)層”一個引導(dǎo)層可以引導(dǎo)多個被引導(dǎo)層。

34Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第34頁/共48頁

6.9遮罩動畫

遮罩動畫

遮罩是Flash的一項(xiàng)最基本的功能，使用遮罩可以制作出很多效果。遮罩動畫的特點(diǎn)：

至少需要兩個圖層，即遮罩層和被遮罩層。常用于創(chuàng)建類似放大鏡、突出主題、逐漸顯現(xiàn)或隱藏等效果的動畫。

35Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第35頁/共48頁

6.10高級發(fā)布設(shè)置

默認(rèn)情況下，按Ctrl+Enter組合鍵預(yù)覽動畫。同時會與當(dāng)前文件相同位置的保存位置創(chuàng)建一個對應(yīng)的Flash動畫文件，即SWF格式動畫文件。除此之外，如果要對發(fā)布的文件進(jìn)行更詳細(xì)的設(shè)置，就需要進(jìn)行發(fā)布設(shè)置。

36Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第36頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為Flash動畫

通過Flash發(fā)布設(shè)置選項(xiàng)，可以設(shè)定SWF文件的版本、加載順序、JPEG格式圖像的品質(zhì)和密碼等參數(shù)。

37Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第37頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為Flash動畫1、設(shè)置發(fā)布版本根據(jù)需要可以將動畫發(fā)布為從Flash1-Flash10及Flash

Lite1.0-FlashLite3.0中的任意一個版本的動畫。注：低版本可以在高版本中演示，高版本不可以在低版本中演示。2、設(shè)置Flash動畫顯示時的順序?yàn)榱吮苊鉃g覽者因?yàn)闀r間緩慢而放棄瀏覽。可以采取設(shè)置“加載順序選項(xiàng)”。由上至下、由下至上。3、設(shè)置發(fā)布的腳本版本

ActionScript3.0與ActionScript2.0有很大程度的改變。

通過ActionScript2.0發(fā)布的不能在ActionScript3.0時正常運(yùn)行。

38Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第38頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為Flash動畫4、加密保護(hù)發(fā)布的Flash動畫給動畫文件設(shè)置保護(hù)模式，可以避免他人剽竊自己的勞動成果。在發(fā)布設(shè)置對話框中，勾選“防止導(dǎo)入”復(fù)選項(xiàng)。還可以在“密碼”中設(shè)入密碼，輸入正確密碼才能導(dǎo)入當(dāng)前文件。5、設(shè)置動畫文件中的位圖質(zhì)量Flash中的位圖是以JPEG的格式存儲的。數(shù)值越大，圖像質(zhì)量與高。6、設(shè)置全局聲音壓縮方式

39Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第39頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為HTML文件

根據(jù)需要，可以將Flash動畫直接發(fā)布為HTML文件，從而減少將Flash動畫文件置入HTML文件的操作步驟。

40Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第40頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為HTML文件

1、選擇HTML文件的模板

Flash提供了數(shù)種生成HTML文件時可用的模板。每個模板都有對應(yīng)的模式選項(xiàng)信息。

41Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第41頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為HTML文件

2、檢測用戶現(xiàn)有版本在發(fā)布設(shè)置對話框中，選擇“檢測Flash版本”選項(xiàng)，則在用戶瀏覽該網(wǎng)頁時，會自動檢測用戶當(dāng)前所用的播放器版本。如果低于Flash文件輸出的版本，則會彈出提示框提醒。

3、設(shè)置Flash動畫尺寸由于Flash采用矢量技術(shù)，因此可以根據(jù)需要改變網(wǎng)頁中Flash動畫尺寸。在發(fā)布設(shè)置對話框中，設(shè)置“寬”和“高”。還可以對“像素”和“百分比”兩種不同的方式進(jìn)行修改。42Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第42頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為HTML文件

4.回放開始時暫停，循環(huán)，顯示菜單，設(shè)備字體（只對靜態(tài)文本有用）5.隱藏Flash動畫右鍵播放控制菜單在發(fā)布設(shè)置對話框中，取消“顯示菜單”復(fù)選框，即可隱藏右鍵哦南瓜子菜單。43Flash動畫設(shè)計(jì)及制作東北大學(xué)藝術(shù)學(xué)院講師高路第43頁/共48頁

6.10高級發(fā)布設(shè)置

發(fā)布為HTML文件

6.設(shè)置Flash動畫的質(zhì)量在“品質(zhì)”下拉列表框中，選擇不同的選項(xiàng)，可以設(shè)置動畫質(zhì)量。低，自動降低，自動升高，中，高，最佳。質(zhì)量低，速度快。7.對齊方式

HTML對齊：默認(rèn)，左對齊，右對齊，頂部，底部等

Flash對齊：“水平”左對齊，居中，右對齊?！按怪薄表敳浚又校撞?。