基于Flash的城市風(fēng)景動畫設(shè)計(jì)論文

1、 PAGE23 / NUMPAGES23基于Flash的城市風(fēng)景動畫設(shè)計(jì)阮成慶 數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院摘 要：近年來，隨著網(wǎng)絡(luò)的飛速發(fā)展，flash動畫技術(shù)以其容量小，制作成本低，視覺沖擊力等優(yōu)勢走進(jìn)了社會大眾的生活中，主要應(yīng)用于商業(yè)宣傳，故事表現(xiàn)，網(wǎng)絡(luò)游戲，教學(xué)過程模擬等不同行業(yè)的展示活動中。 越來越多的城市開始注重打造城市名片，積極宣傳城市文化，主要以宣傳風(fēng)景為主，以提升城市的知名度和帶動旅游業(yè)，謀取更快地發(fā)展，其中flash動畫是其中主要手段之一。 本文利用Flash工具對城市建設(shè)進(jìn)行交互式動畫設(shè)計(jì)，便于人們了解城市文化，其中伴有PS圖像處理和CoolEdit聲音處理。關(guān)鍵詞：flash，

2、ActionScript,交互式動畫，聲音處理The design of city landscape animation based on FlashAbstract: in recent years, with the rapid development of network, flash animation technology for its small volume, low manufacturing cost, the visual impact of advantage into the social public life, mainly used in commercial

3、 propaganda, the story of the performance, the network game, showing the activities of teaching process simulation in different industries.More and more of the city began to pay attention to build the city card, actively promoting the city culture, mainly in the propaganda of the scenery, in order t

4、o improve the citys visibility and promote tourism, for faster development, in which the flash animation is oneof the methods.In this paper, by means of Flash interactive animation design for city construction, is convenient for people to know the city culture, which accompanied with PS CoolEdit ima

5、ge processing and voice processing.Keywords: flash, ActionScript, interactive animation, sound processing緒論1.1引言 FLASH是由美國Macromedia公司于1996年6月推出的用于矢量圖編輯和動畫創(chuàng)作的專業(yè)軟件。網(wǎng)頁設(shè)計(jì)者可以利用flash軟件制作出既美觀又可以改變大小的導(dǎo)航畫面與其它奇特的效果 。被廣泛的應(yīng)用于多媒體領(lǐng)域 ，如 動畫游戲制作，網(wǎng)絡(luò)構(gòu)件，學(xué)習(xí)課件，廣告設(shè)計(jì)與全flash，工控界面等交互式軟件和產(chǎn)品展示。主要優(yōu)點(diǎn)是制作起來方便，通用性強(qiáng)，文件體積小，支持交互，涉與的領(lǐng)

6、域多，制作出的東西效果都可以做到很棒，不依賴于任何媒體播放器。缺點(diǎn)在于有些效果需要別的軟件輔助制作，不是所有效果都能制作出來。（比如圖片處理，flash就很難做到，只能通過做到剪裁和渲染）Flash是一種交互式矢量多媒體技術(shù)，他的前身是Futureplash，早期網(wǎng)上流行的矢量動畫插件。后來由于Macromedia公司收購了FutureSplash以后便將其改名為Flash2，到現(xiàn)在最新的flashcs3?，F(xiàn)在網(wǎng)上已經(jīng)有成千上萬個Flash站點(diǎn)，著名的如Macromedia專門ShockRave站點(diǎn)，全部采用了ShockwaveFlash和Director?？梢哉fFlash已經(jīng)漸漸成為交互式知

7、量的標(biāo)準(zhǔn)，未來網(wǎng)頁的一大主流。 本文主要用制作一個具有交互性的城市風(fēng)景展示，其中伴有處理圖片和處理聲音。該設(shè)計(jì)主要有兩部分組成交互式動畫和音頻，用Flash軟件做出的動畫作品，其最大的特點(diǎn)是它能夠把一些位圖和按鈕、文字做成交互性很強(qiáng)的動畫，不僅具有視覺和聽覺的雙重感受，使其更具有趣味性和創(chuàng)造性。的相關(guān)概念.什么是動畫動畫是將靜止的畫面變?yōu)閯討B(tài)的藝術(shù)，實(shí)現(xiàn)了由靜止到動態(tài)，主要是靠人眼的視覺殘留效應(yīng)利用人的這種視覺生理特性可制作出具有高度想象力和表現(xiàn)力的動畫影片。動畫以人類視覺的原理為基礎(chǔ)。 如果快速查看一系列相關(guān)的靜態(tài)圖像，那么我們會感覺到這是一個連續(xù)的運(yùn)動。 每一個單獨(dú)圖像稱之為幀。幀是動畫中

8、的單個圖像。.什么是交互式動畫所謂Flash交互式動畫是指通過Flash完成的動畫作品，在播放的同時能夠接受來自外部的實(shí)時控制，其可以是播放人員，同樣也可以是動畫的觀眾。具體來看，就是觀眾能夠通過鼠標(biāo)，以與鍵盤等控制動畫的播放，這樣的全新設(shè)計(jì)就可以讓普通的觀眾演變身份，可以從被動轉(zhuǎn)為主動，這是傳統(tǒng)動畫所不具備的，在Flash中卻能輕松實(shí)現(xiàn) 。另外其實(shí)時傳播接收的信息效果更加良好，其反應(yīng)信息會更加的快速和直接。 1.2.3 關(guān)于actionsciptActionscript 是Flash MX 2004的腳本語言。用腳本語言編寫的程序嵌入到Flash動畫后可以控制影片的播放（即向影片片斷發(fā)送命令

9、、指定動畫執(zhí)行的容、分析用戶操作、顯示反饋信息等），這種雙向交流可生成交互動畫。1.2.4交互式動畫原理交互式動畫是由觸發(fā)動作的事件、事件的目標(biāo)和觸發(fā)事件的動作3個因素組成的，例如單擊按鈕后，影片開始播放這一事件。其中，單擊是觸發(fā)動作的事件，按鈕是事件的目標(biāo)，影片開始播放是觸發(fā)事件的動作。換句話說，事件、目標(biāo)和動作構(gòu)成了一個交互式動畫。在Flash中，事件包括鼠標(biāo)事件、鍵盤事件和幀事件三種。目標(biāo)包括時間軸、按鈕元件和影片剪輯元件三種。而動作就是指控制影片的一系列腳本語言，所以說腳本語言的編寫也就是各種動作的編寫 。概要設(shè)計(jì)3.1 素材收集與圖像處理 選擇幾有關(guān)于城市風(fēng)景的精美圖片，并用phot

10、oshop對其進(jìn)行適當(dāng)?shù)奶幚怼?.2導(dǎo)入圖像 打開flash mx 2004，將處理過的圖片導(dǎo)入庫中，移至新文件夾中，命名為位圖。3.3時尚按鈕的制作 用文本工具制作按鈕文本 將設(shè)置好的按鈕文本轉(zhuǎn)化為圖形元件 將按鈕圖形轉(zhuǎn)化為按鈕元件 利用工具欄的矩形工具制作按鈕的感應(yīng)區(qū) 為各個按鈕的各個動作進(jìn)行設(shè)計(jì)3.4對導(dǎo)入庫的圖像素材進(jìn)行設(shè)計(jì)3.5遮幕層的應(yīng)用3.6舞臺的設(shè)計(jì)與為按鈕加入ActionScript3.7動畫的發(fā)布與測試詳細(xì)設(shè)計(jì)與制作4.1素材收集與圖像處理素材收集與圖像處理過程如下。收集6城市風(fēng)景的精彩圖片利用Adobe Photoshop進(jìn)行圖片處理以符合同樣的大小；圖像大小的設(shè)置，寬度

11、為600像素，高度為250像素利用Adobeshop的漸變工具，對原圖片的色調(diào)加以漸變打開Flash MX 2004,選擇修改菜單下的文檔選項(xiàng)，在彈出的“文檔屬性”對話框，設(shè)置場景尺寸為800*250，“背景顏色”為藍(lán)色，“幀頻”為“120”，“標(biāo)尺單位”為”像素”4.2導(dǎo)入圖像導(dǎo)入圖像的過程如下將利用Photoshop處理過的六圖片導(dǎo)入到庫中。方法是選擇文件菜單下的導(dǎo)入子菜單中的導(dǎo)入到庫選項(xiàng)在彈出的“導(dǎo)入到庫”對話框中，選擇6已經(jīng)處理好的圖片，單擊打開按鈕，完成導(dǎo)入到庫選擇窗口菜單下的庫選項(xiàng)，庫中已經(jīng)有了處理好的6圖片，為了庫中的文件管理，將6圖片移至新文件夾，方法是選擇0106位圖，單擊鼠

12、標(biāo)右鍵，在彈出的快捷菜單中選擇移至新文件夾選項(xiàng)，在彈出的對話框中輸入“位圖”字樣單擊確定按鈕，完成文件夾的建立。雙擊文件夾圖標(biāo)即可關(guān)閉文件夾，再雙擊文件夾圖標(biāo)即可打開文件夾4.3時尚按鈕制作時尚按鈕的制作過程如下。制作城市風(fēng)景動畫的二級按鈕。選擇工具欄中的文本工具，在場景中輸入“SUBMENU_01”字樣，在屬性欄中設(shè)置文字大小為8，字間間距為0.5，其他為默認(rèn)值將設(shè)置好的按鈕文本轉(zhuǎn)化為元件。單擊鼠標(biāo)右鍵，在彈出快捷菜單中選擇轉(zhuǎn)化為元件選項(xiàng)，在彈出的對話框中，設(shè)置“行為”為“圖形”模式，在“名稱”文本框中輸入“SUB01”，單擊確定按鈕，完成設(shè)置選擇場景中的文件元件，在屬性欄中設(shè)置顏色為Alp

13、ha,將Alpha值設(shè)置為50%，其他為默認(rèn)值用同樣的方法再新建SUBMENU_02，SUBMENU_03，SUBMENU_04，MENU_01，MENU_02，MENU_03，MENU_04，MENU_05，MENU_06的元件圖形，然后將它們移至新文件夾。選擇10個元件圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇移至新文件夾選項(xiàng)，在彈出的對話框中輸入“按鈕圖形”字樣下面利用前面做好的文本圖形制作按鈕。選擇插入菜單下的新建元件選項(xiàng)，在彈出的對話框中將“行為”設(shè)置為“按鈕”模式，在“名稱”文本框中輸入“SUBMENU_01”,單擊確定按鈕，完成設(shè)置雙擊“庫”中新建的SUBMENU_01按鈕，這時

14、場景中彈出SUBMENU_01的編輯窗口和時間軸，在時間線上選擇“彈起”選項(xiàng)，然后將庫中的“SUB01”拖動到場景中，注意將SUB01的中心與SUBMENU場景中的中心對齊；在屬性欄中設(shè)置X的位置為-31.3，Y的位置為-6.6，設(shè)置顏色為Alpha，將Alpha值設(shè)置為50%，其他為默認(rèn)值在時間線上的”指針經(jīng)過“，”按下“處插入關(guān)鍵幀，然后用鼠標(biāo)左鍵單擊”指針經(jīng)過“，將庫中的”SUB01“拖動到場景中，注意使SUB01的中心與SUBMENU_1場景中的中心對齊；在屬性欄中設(shè)置X的位置為-31.4，Y的位置為-6.5，設(shè)置顏色為Alpha，將Alpha值設(shè)置為75%，其他為默認(rèn)值利用工具欄中的

15、矩形工具制作按鈕的感應(yīng)區(qū)。在”點(diǎn)擊“的選項(xiàng)的場景中繪制長方形，在屬性欄中設(shè)置寬為67.3，高為15.6，位置X為-33.7，Y為-7.6，顏色為藍(lán)色關(guān)閉按鈕SUBMENU_1，用同樣的方法制作SUBMENU_1，SUBMENU_2,SUBMENU_3,SUBMENU_4按鈕建立首頁面的主按鈕button_1,選擇插入菜單下的新建元件選項(xiàng)，在彈出的對話框中將“行為”設(shè)置為“按鈕”模式，在“名稱”文本框中輸入“button_1”，單擊確定按鈕，完成設(shè)置； 雙擊“庫”中的新建的button_1按鈕，這時場景中彈出button_1的編輯窗口和時間軸，分別在“彈起”，“指針經(jīng)過”，“按下”，“點(diǎn)擊”處按

16、F6鍵插入關(guān)鍵幀，在時間軸上選擇“彈起”選項(xiàng)，然后將“庫”中的“MENU_01”拖動到場景中，在屬性欄中設(shè)置寬為49.2，高為14.3，X的位置為-55.0，Y的位置為-9.6，顏色為“#F5F295“在時間軸上分別選擇”指針經(jīng)過“，”按下“，然后將“MENU_01”的顏色設(shè)置為”#C31294“在時間軸上單擊插入圖層按鈕，在時間軸上就多了一層”圖層2“，然后再”點(diǎn)擊“處按F6鍵插入關(guān)鍵幀，在”指針經(jīng)過“處也插入關(guān)鍵幀；在”彈起“的場景中用工具欄中的矩形工具繪制長方形，在屬性欄中設(shè)置寬為130.0，高為30.0，位置X為-65.0，Y為-14.9，顏色為”白色“將繪制的長方形的顏色設(shè)置為Alp

17、ha，在混色器中將Alpha值設(shè)置為5%選擇”指針經(jīng)過“場景中的長方形，在屬性欄中設(shè)置寬為130.0，高為30.0，位置X為-65.0，Y為-14.9，顏色為”黑色“將設(shè)置好的長方形的顏色設(shè)置為Alpha，在混色器中將Alpha值設(shè)置為5%調(diào)整一下圖層1和圖層2的位置，將圖層1置于圖層2的上面利用一樣的方法制作menu_02，menu_03,menu_04,menu_05,menu_06主要按鈕，在”彈起“處將顏色全部設(shè)置為”#F5F295“，將”指針經(jīng)過“和”按下“處的顏色分別設(shè)置為#5241FF，#F5723C，#309494，#A5F20C和#F59213，選擇窗口菜單下的庫選項(xiàng)4.4將

18、導(dǎo)入的圖像素材進(jìn)行設(shè)計(jì)設(shè)計(jì)導(dǎo)入的圖像素材的過程如下：回到場景1中，選擇插入菜單下的新建元件選項(xiàng)，在彈出的對話框中，設(shè)置”行為“為”圖形“模式，在”名稱”文本框中輸入“1”，單擊確定按鈕完成設(shè)置打開“庫”中的位圖文件夾，拖動位圖01到元件圖形1中，選擇場景中的位圖，下面的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為0.0，Y為0.1選擇“庫”中的按鈕submenu_1,submenu_2,submenu_3,把它們分別拖到元件圖形1中，根據(jù)構(gòu)圖進(jìn)行排列設(shè)計(jì)在時間軸上插入新的圖層2，在圖層2上選擇工具欄中文字工具，在場景中的適當(dāng)位置繪制出“come on”的字樣在時間軸上插入新的圖層，在新

19、圖層上選擇工具欄中的文本工具，在場景中的輸入公司名稱或其他廣告語，在屬性欄中設(shè)置文字的格式以與位置等對整體畫面進(jìn)行細(xì)微的調(diào)整利用上述方法制作出另外5城市風(fēng)景的畫面效果制作上面6圖片的組合圖形元件，選擇插入菜單下新建元件選項(xiàng)，在彈出的對話框中設(shè)置“行為”為“圖形”模式，在“名稱”文本框中輸入“六個”字樣，單擊確定按鈕完成設(shè)置在新建的“六個”圖形場景中，選擇窗口菜單下的庫選項(xiàng)，在彈出的對畫框中選擇“圖形1”拖動到新的場景中，然后在下面的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為0.0，Y為0.1，其他為默認(rèn)值選擇窗口菜單下庫選項(xiàng)，在彈出的對話框中選擇“圖形2”拖動到新的場景中，然后在下面

20、的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為0.0，Y為230.1，其他為默認(rèn)值選擇窗口菜單下的庫選項(xiàng)，在彈出對話框中選擇“圖形3”拖動到新的場景中，然后在下面的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為0.1,Y為460.0，其他為默認(rèn)值選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中選擇“圖形4”拖動到新的場景中，然后在下面的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為670.0，Y為0.1，其他設(shè)置默認(rèn)值選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中選擇“圖形5”拖動到新的場景中，然后在下面的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為670.0，Y為230.0.其

21、他為默認(rèn)值選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框選擇“圖形6”拖動到新的場景中，然后在下面的屬性欄中設(shè)置寬為670.0，高為230.0，位置X為670.0，Y為460.0，其他為默認(rèn)值制作6個圖片的影片剪輯。選擇插入菜單下新建元件選項(xiàng)，在彈出的對話框中設(shè)置“行為”為“影片剪輯”模式，在“名稱“文本框中輸入”script“單擊確定按鈕完成設(shè)置在新建的script的影片剪輯的場景中，選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中選擇”六個”圖形拖動到新的場景中，然后再下面的屬性欄中設(shè)置寬為1340.0，高為690.0，位置X為0.0，Y為0.0，其他為默認(rèn)值單擊場景1按鈕回到場景1，把系統(tǒng)默認(rèn)的圖層1命

22、名為”strip“；選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中選擇影片剪輯”strip“拖動場景1的圖層”strip“中，然后在下面的屬性欄中設(shè)置寬為1340.0，高為690.0，位置X為130.0，Y為0.0，其他為默認(rèn)值單擊插入圖層按鈕，把新建的圖層命名為”strip2“;選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中選擇影片剪輯”strip“拖動到場景1的圖層”strip“中，然后在下面的屬性欄中設(shè)置寬為1340.0，高為690.0，位置X為130.0，Y為0.0，其他為默認(rèn)值單擊插入圖層按鈕，把新建的圖層命名為”strip3“；選擇窗口菜單下庫選項(xiàng)，在彈出的對話框中選擇影片剪輯”strip“拖

23、動到場景1的圖層”strip3“中，然后在下面的屬性欄中設(shè)置寬為1340.0，高為690.0，位置X為130.0，Y為0.1，其他為默認(rèn)值4.5遮罩層的應(yīng)用遮罩層的應(yīng)用步驟如下：單擊插入圖層按鈕，把新建的圖層命名為”遮罩層1”；選擇工具欄中的橢圓工具在場景中繪制出兩組橢圓作為遮罩層之用單擊插入圖層按鈕，把新建的圖層命名為“遮罩層2”；選擇工具欄中的橢圓工具在場景中描繪出兩組橢圓，這里的兩組橢圓要與遮罩層1中橢圓形狀相組合，作為遮罩層用單擊插入圖層按鈕，把新建的圖形命名為“按鈕層”選擇工具欄中矩形工具在場景中繪制長方形然后在屬性欄中設(shè)置寬為130.0，高為230.0，位置X為0.1，Y為0.0，

24、其他為默認(rèn)值4.6舞臺的設(shè)計(jì)與為按鈕加入ActionScript舞臺的設(shè)計(jì)過程如下：單擊插入圖層按鈕，把新建的圖層命名為“按鈕層2”，選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中選擇button_1,button_2,button_3,button_4,button_5,button_6,拖動到“按鈕層2”的場景中單擊插入圖層按鈕，把新建的圖層命名為“文字層”，選擇工具欄的文本工具，在場景中輸入文字或者公司名稱，然后在下面的屬性欄設(shè)置文字的格式，建立一個影片剪輯。選擇插入菜單下的新建元件選項(xiàng)，在彈出的對話框中設(shè)置“行為”為“影片剪輯”模式，在“名稱”文本框輸入“script”，單擊確認(rèn)按鈕完成設(shè)置

25、在script的時間軸的圖層1上，用鼠標(biāo)單擊第5幀，再打開“動作幀”對話框，在對話框中輸入以下動作語句：If(_root.strip._xtargetx)diffrence=_root.strip._x-targetx;Rate=difference/baseRate;_root.strip._x=_root.strip._x-rate;If(_root.strip2._xtqrgetx)difference=_root.strip2._x-targetx;rate=difference/(baseRate*2);_root.strip2._x=_root.strip2._x-rate;If(

26、_root.strip3._xtargetx)difference=_root.strip3._x-targetx;rate=difference/(baseRate*3);_root.strip3._x=_root.strip3._x-rate;/less than xIf(_root.strip._xtargetx)diffrence=targetx_root.strip._x ;Rate=difference/baseRate;_root.strip._x=_root.strip._x+rate;If(_root.strip2._xtargetx)difference=targetx_r

27、oot.strip2._x;rate=difference/(baseRate*2);_root.strip2._x=_root.strip2._x+rate;If(_root.strip3._xtargety)diffrence=_root.strip._y-targety;Rate=difference/baseRate;_root.strip._y=_root.strip._y-rate;If(_root.strip2._ytargety)difference=_root.strip2._y-targety;rate=difference/(baseRate*2);_root.strip

28、2._y=_root.strip2._y-rate;If(_root.strip3._ytargety)difference=_root.strip3._y-targety;rate=difference/(baseRate*3);_root.strip3._y=_root.strip3._y-rate;/less than yIf(_root.strip._ytargety)diffrence=targety-root.strip._y ;Rate=difference/baseRate;_root.strip._y=_root.strip._y+rate;If(_root.strip2._

29、ytargety)difference=targety-root.strip2._yrate=difference/(baseRate*2);_root.strip2._y=_root.strip2._y+rate;If(_root.strip3._ytargety)difference=_root.strip3._y-targety;rate=difference/(baseRate*3);_root.strip3._y=_root.strip3._y+rate;在script的時間軸的圖層1上，用鼠標(biāo)單擊第6幀，再打開“動作-幀”對話框，雙擊左邊的“全局函數(shù)”下“時間軸控制”里的“goto

30、AndPlay”選項(xiàng)，然后在括號輸入5，或直接輸入“gotoAndPlay(5);”語句回到場景1中，單擊script的第一幀，再打“動作-幀”對話框，雙擊左邊的“全局函數(shù)”下的“時間軸控制”里的“stop”選項(xiàng)或者輸入“stop();”語句在script被激活的情況下，選擇窗口菜單下的庫選項(xiàng)，在彈出的對話框中，選擇影片剪輯script拖動到場景1的圖層stript中，然后在下面的屬性欄中設(shè)置寬為0.0，高為0.0，位置X為-127.2，Y為0.0，在影片剪輯下面的文本框輸入“script”名稱，其他為默認(rèn)值將strip2拖動到“遮罩層1”的下面，在“遮罩層1”上面單擊鼠標(biāo)右鍵，在彈出的快捷菜

31、單中選擇遮罩層選項(xiàng)，讓遮罩層1的圓圈形成遮罩效果將strip2拖動到“遮罩層2”的下面，在“遮罩層2“上面單擊鼠標(biāo)右鍵，在彈出快捷菜單中選擇遮罩層選項(xiàng)，讓遮罩層2的圓圈形成遮罩效果打開“按鈕欄2”中的按鈕，單擊button_1，在“動作-按鈕”對話框中輸入以下語句: on(rollOver)script.targetx=130;script.targety=0;script.baseRate=2;script.gotoAndPlay(5);(12)打開“按鈕欄2”中的按鈕，單擊button_2，在“動作-按鈕”對話框中輸入以下語句: on(rollOver)script.targetx=-54

32、0;script.targety=0;script.baseRate=2;script.gotoAndPlay(5);(13)打開“按鈕欄2”中的按鈕，單擊button_3，在“動作-按鈕”對話框中輸入以下語句: on(rollOver)script.targetx=130;script.targety=-230;script.baseRate=2;script.gotoAndPlay(5);(14)打開“按鈕欄2”中的按鈕，單擊button_4，在“動作-按鈕”對話框中輸入以下語句: on(rollOver)script.targetx=-540;script.targety=-230;script.baseRate=2;script.gotoAndPlay(5);(15)打開“按鈕欄2”中的按鈕，單擊button_5，在“動作-按鈕”對話框中輸入以下語句: on(rollOver