FLASH地圖畢業(yè)論文

1、目錄1 flash概述21.1 flash發(fā)展史21.1.1 總體走向21.1.2 版本演變21.1.3 可能發(fā)展方向31.2 用flash開(kāi)發(fā)地圖的優(yōu)點(diǎn)42 flash地圖總體結(jié)構(gòu)、功能及開(kāi)發(fā)環(huán)境42.1 總體結(jié)構(gòu)42.2 功能42.3 開(kāi)發(fā)環(huán)境53 制作flash地圖的主要步棸53.1 準(zhǔn)備基礎(chǔ)元件53.2 拼制全國(guó)地圖73.3 實(shí)現(xiàn)單擊事件83.4 詳細(xì)地圖114 制作flash地圖的主要技巧125 flash地圖測(cè)試描述136 結(jié)論156.1 結(jié)論156.2 不足和改進(jìn)15致謝16參考文獻(xiàn)16摘要：本文主要研究了中國(guó)flash地圖的設(shè)計(jì)與開(kāi)發(fā)，研究該課題的主要目的是便于查看中國(guó)各地地圖

2、，用戶通過(guò)該地圖了解全國(guó)省份、道路分布情況，學(xué)習(xí)地理知識(shí)，實(shí)現(xiàn)可視化教學(xué)，提高中小學(xué)生學(xué)習(xí)地理知識(shí)的興趣。地圖主要用flash cs3技術(shù)來(lái)實(shí)現(xiàn)，通過(guò)和actionscript搭配使用來(lái)實(shí)現(xiàn)一些功能。關(guān)鍵字：flash 中國(guó)地圖 actionscript 幀跳轉(zhuǎn)1 flash概述1.1 flash發(fā)展史1.1.1 總體走向flash的前身叫做futuresplash，當(dāng)時(shí)futuresplash最大的兩個(gè)用戶是microsoft和disney【1】。1996年11月，futuresplash正式賣給mm（m），改名為flash1.0 （網(wǎng)上也有信息稱是flash2.0）。1.1.2 版本演變1

3、998年5月31日 macromedia 推出了flash3.0 。1999年6月15日 macromedia 推出了flash4.0 。自 flash 進(jìn)入4.0 版以后，原本的 shockwave 播放器便變成了僅供 director 使用。flash 4.0開(kāi)始有了自己專用的播放器，稱為“flash player”，不過(guò)為了保持向下相容性，flash 制作出的動(dòng)畫則仍舊沿用了原有的 .swf文件名（shockwave flash）。2000年6月24日 macromedia 推出了flash5.0 （支持的播放器為 flash player 5）flash 5.0中的actionscri

4、pt已有了長(zhǎng)足的進(jìn)步，并且開(kāi)始了對(duì)xml和smart clip（智能影片剪輯）的支持。actionscript的語(yǔ)法已經(jīng)開(kāi)始定位為發(fā)展成一種完整的面向?qū)ο蟮恼Z(yǔ)言，并且遵循ecmascript的標(biāo)準(zhǔn)（就像javascript那樣）。2002年3月15日 macromedia 推出了flash mx （也就是測(cè)試版中的6.0，后來(lái)為了配合mx產(chǎn)品線，正式命名為mx，支持的播放器為 flash player 6）。falsh6開(kāi)始了對(duì)外部jpg和mp3的調(diào)入支持。同時(shí)也增加了更多的內(nèi)建對(duì)象（ 如直接的繪畫控制）。提供了對(duì)html文本的更精確控制。setinterval 超頻幀的概念。同時(shí)也改進(jìn)了sw

5、f文件的壓縮技術(shù)。2003年8月25日 macromedia 推出了flash mx 2004（支持用 flash mx 2004創(chuàng)建的swf的播放器的版本被命名為 flash player 7）。flash mx 2004增加了許多新的功能【2】：對(duì)移動(dòng)設(shè)備和手機(jī)、pocket pc的支持（以及像素字體的清晰顯示）；flash player 運(yùn)行時(shí)性能提高了 2 至 5 倍；對(duì)html文本中內(nèi)嵌圖像和swf（swf中的獨(dú)立swf）的支持；flv外部視頻的支持（與quicktime的集成）；對(duì)adobe pdf及其它文檔的支持；基于屏幕的可視開(kāi)發(fā)環(huán)境；可視編程環(huán)境；高級(jí)可控制外觀組件支持；數(shù)據(jù)

6、綁定；web 服務(wù)和 xml 的預(yù)建數(shù)據(jù)連接器；項(xiàng)目管理功能；源代碼控制系統(tǒng)，同時(shí)開(kāi)始了對(duì)flash本身制作軟件的控制和插件開(kāi)放jsfl（macromedia flash javascript api），macromedia無(wú)疑在開(kāi)始調(diào)動(dòng)internet上flasher們的巨大力量和集體智慧。1.1.3 可能發(fā)展方向flash被稱為是“最為靈活的前臺(tái)”。由于其獨(dú)特和時(shí)間片段分割（timeline）和重組（mc嵌套）技術(shù)，結(jié)合actionscitp的對(duì)象和流程控制。使得在靈活的界面設(shè)計(jì)和動(dòng)畫設(shè)計(jì)中成為可能，但一直還未形成一套在flash中的界面設(shè)計(jì)理論。同時(shí)它也是最為小巧的前臺(tái)。 flash具有

7、跨平臺(tái)的特性（這點(diǎn)和java一樣），所以無(wú)論你處于處于何種平臺(tái)，只要你安裝有支持的flash player。你就能保證它們的最終顯示效果都一致。而不必像在以前的網(wǎng)頁(yè)設(shè)計(jì)中那樣為ie和mozilla或netspace各設(shè)計(jì)一個(gè)版本。同java一樣。它的可移植性很強(qiáng)。特別是在小型網(wǎng)絡(luò)中和小型設(shè)備中（當(dāng)然大型網(wǎng)絡(luò)已不用說(shuō)），最近具有的手機(jī)支持功能可以讓你為自已的手機(jī)設(shè)計(jì)你喜愛(ài)的功能。當(dāng)然你必需要有技持flash的手機(jī)。當(dāng)然它還可以應(yīng)用于pocket pc上。那么，flash可能的發(fā)展方向究竟如何？我不能說(shuō)這些方向中的所有都會(huì)實(shí)現(xiàn)，因?yàn)檫@也取決于macromedia的決心，而更多的是flasher們的

8、努力。(1) 應(yīng)用程序：由于其獨(dú)特的跨平臺(tái)物性和在界面控制以及多媒體的功能使用得使用flash來(lái)制作的應(yīng)用程序具有很強(qiáng)的生命力。在與用戶的交流方面具有其它任何方式都無(wú)可比擬的優(yōu)勢(shì)。當(dāng)然，某些功能你可能還要依賴于xml或者其它諸如javascript的客戶端技術(shù)來(lái)實(shí)現(xiàn)，但你能方便在它們的實(shí)現(xiàn)數(shù)據(jù)通信。(2) 操作系統(tǒng)界面：flash對(duì)于界面元素的可控性和它所有表達(dá)的效果無(wú)疑具有很大的誘惑。對(duì)于一個(gè)系統(tǒng)的界面你可能要花更多的時(shí)間關(guān)注它們的接口和界面顯示能力間的驅(qū)動(dòng)。另外一個(gè)需要關(guān)注的就是你的內(nèi)存使用和執(zhí)行效率。(3) 手機(jī)領(lǐng)域的開(kāi)發(fā)：轉(zhuǎn)向手機(jī)領(lǐng)域的開(kāi)發(fā)將會(huì)要求你對(duì)精確（像素級(jí)）的界面設(shè)計(jì)和cpu的

9、使用分布的操控能力更高。但也意味更大更廣泛的使用空間。事實(shí)上手機(jī)和pocket pc的分界已越來(lái)越不明顯，你必須為每一款手機(jī)（或pocket pc）設(shè)計(jì)一個(gè)不同的界面，因?yàn)樗鼈兊钠聊淮笮「饔胁煌?。?dāng)然你的內(nèi)核可能是相同的，所要注意的是你的各類手機(jī)的cpu的計(jì)算能力和內(nèi)存的大小。這無(wú)疑是些很苛刻的要求。(4) 游戲開(kāi)發(fā)：事實(shí)上，flash中的游戲開(kāi)發(fā)已經(jīng)進(jìn)行了多年的嘗試。但至今為止仍然停留在中、小型游戲的開(kāi)發(fā)上。游戲開(kāi)發(fā)的很大一部份都受限于它的cpu能力和大量代碼的管理。不過(guò)可喜的是，flash player 7 運(yùn)行時(shí)性能提高了 2 至 5 倍；而且基于 java 類的結(jié)構(gòu)的類的開(kāi)始也奠定了這

10、些基礎(chǔ)。(5) 多媒體娛樂(lè)：在這方面的內(nèi)容我想我已不用再多說(shuō)什么。盡管它的發(fā)展速度沒(méi)有像當(dāng)初預(yù)言的那樣迅速（就像計(jì)算機(jī)那樣），但它仍然還在不斷前進(jìn)，全新功能也正在擴(kuò)大它的應(yīng)用范圍。使用這一點(diǎn)無(wú)疑很優(yōu)秀，并且可以為你節(jié)約大量的成本。flash本身就以多媒體和可交互性而廣為推崇。1.2 用flash開(kāi)發(fā)地圖的優(yōu)點(diǎn)java與flash相比具有明顯的優(yōu)勢(shì)，是電子地圖技術(shù)的主流方向。不過(guò)使用java地圖的客戶端必須安裝java虛擬機(jī)，對(duì)于沒(méi)有安裝相關(guān)插件的電腦用戶來(lái)說(shuō)，并不能立即使用java電子地圖。但對(duì)于非專業(yè)的愛(ài)好者來(lái)說(shuō)，flash比java更輕易把握一些。非凡對(duì)于繪制樓盤、小區(qū)或是小城市的地圖，并

11、沒(méi)有太多太強(qiáng)的功能要求，使用flash制作已經(jīng)足夠了。對(duì)于flash電子地圖來(lái)說(shuō)，幾乎所有的個(gè)人電腦都安裝了flash player插件，只要打開(kāi)瀏覽器即可正常使用。因此對(duì)于非專業(yè)的愛(ài)好者來(lái)說(shuō)，無(wú)論使用或是學(xué)習(xí)制作flash電子地圖更為現(xiàn)實(shí)一些。只要把握了一定flash actionscript的基礎(chǔ)知識(shí)，都可以通過(guò)學(xué)習(xí)制作出自己滿足的互動(dòng)電子地圖。2 flash地圖總體結(jié)構(gòu)、功能及開(kāi)發(fā)環(huán)境2.1 總體結(jié)構(gòu)包含一主要的場(chǎng)景，每一個(gè)省份都是一個(gè)按鈕，默認(rèn)情況下顯示藍(lán)色，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)變成橙色，鼠標(biāo)單擊時(shí)彈出對(duì)話框提示內(nèi)容,當(dāng)鼠標(biāo)移動(dòng)時(shí)對(duì)話框自動(dòng)隱藏。單擊黑龍江省時(shí)會(huì)直接跳轉(zhuǎn)到黑龍江省的各地級(jí)市、各

12、高速公路、國(guó)道、河流的分布情況，當(dāng)單擊縮放按鈕時(shí)有放大縮小功能，單擊返回按鈕可以返回到主頁(yè)。2.2 功能具有查看全國(guó)各省之間位置相對(duì)關(guān)系，各省主要情況，以及黑龍江省的詳細(xì)地圖。2.3 開(kāi)發(fā)環(huán)境開(kāi)發(fā)環(huán)境：flash cs3；運(yùn)行環(huán)境：flash player9.0。3 制作flash地圖的主要步棸3.1 準(zhǔn)備基礎(chǔ)元件新建flash文件，把舞臺(tái)大小設(shè)置成800*850像素，用photoshop畫出一個(gè)背景圖像，然后導(dǎo)入到flash庫(kù)中，并把其轉(zhuǎn)換成元件，并拖入舞臺(tái)。如下圖：圖 3-1-1 flash地圖的背景圖像從網(wǎng)上下載一幅中國(guó)地圖，并把其導(dǎo)入到flash庫(kù)中，然后新建元件，起名叫“中國(guó)全圖”，

13、把此位圖拖入到元件中，然后用鋼筆工具勾勒出全國(guó)的國(guó)界，并把其填充成深藍(lán)色。效果如下圖：圖 3-1-2 勾勒出的中國(guó)全圖用同樣的方法畫出各省的省圖，并填充上顏色，其中一省的省圖：圖 3-1-3 安徽省省圖3.2 拼制全國(guó)地圖把3.1中制作的各省省圖分別制作成按鈕，當(dāng)按鈕彈起的時(shí)候顏色為藍(lán)色，指針經(jīng)過(guò)、按下、點(diǎn)擊的時(shí)候顏色一率為橙紅色。效果如下圖所示： 圖 3-2-1 按鈕彈起、指針經(jīng)過(guò)時(shí)示意圖把做好的按鈕統(tǒng)一的移到3.1中勾勒的中國(guó)全圖上面，并用適當(dāng)?shù)淖煮w寫出各省的名稱，調(diào)整好他們的相對(duì)位置，效果如下圖：圖 3-2-2 拼湊好的中國(guó)全圖3.3 實(shí)現(xiàn)單擊事件用photoshop畫出彈出對(duì)話框【3】

14、，并把其導(dǎo)入到flash庫(kù)中，然后添加方格，并轉(zhuǎn)換成影片剪輯，效果如下圖：圖 3-3-1 彈出對(duì)話框新建影片剪輯，用直線工具畫出下拉條，并線性填充顏色為白色、透明度為15%，顏色為白色、透明度為30%。效果如下圖：圖 3-3-2 漸變下拉條把做成的對(duì)話框和漸變下拉條分別拖入到舞臺(tái)，調(diào)整其和各省的相對(duì)位置，并在對(duì)話框中寫入相應(yīng)的內(nèi)容，重復(fù)以上操作，為各省都做一個(gè)下拉對(duì)話框。下圖給出其中一省的效果：圖 3-3-3 下拉對(duì)話框?qū)⑸鲜鰣?chǎng)景中的按鈕按照省名全稱起名，下拉條按照省名全稱+1起名，對(duì)話框按照省名全稱+2起名，文字按照省名全稱+3起名。然后在相應(yīng)的幀中寫上如下所示的代碼【4】（以安徽省為例）：

15、anhui1.visible=false;anhui2.visible=false;anhui3.visible=false;function anhuistart(event:mouseevent):voidanhui1.visible=true;anhui2.visible=true;anhui3.visible=true;anhui.addeventlistener(mouseevent.click,anhuistart);function anhuiend(event:mouseevent):voidanhui1.visible=false;anhui2.visible=false;a

16、nhui3.visible=false;anhui.addeventlistener(mouseevent.mouse_move,anhuiend);以上就完成了單擊事件的功能。3.4 詳細(xì)地圖從網(wǎng)絡(luò)上找到一幅黑龍江省地圖導(dǎo)入到庫(kù)中，然后用鋼筆工具勾勒出省界、國(guó)道、高速、河流以及各地級(jí)市之間的相對(duì)位置，并添加放縮和返回按鈕。以上放到場(chǎng)景的第二幀。為實(shí)現(xiàn)第一幀和第二幀之間實(shí)現(xiàn)跳轉(zhuǎn)在第一幀中寫入代碼【5】：stop();function gotomovie(event:mouseevent):voidgotoandplay(2);heilongjiang.addeventlistener(mous

17、eevent.click,gotomovie);在縮放按鈕中寫入代碼：stop();function endmovie1(event:mouseevent):voidthis.play();a.addeventlistener(mouseevent.click,endmovie1);在返回首頁(yè)按鈕中寫入代碼：stop();function gotomovie2(event:mouseevent):voidgotoandplay(1);g.addeventlistener(mouseevent.click,gotomovie2);效果如下圖：圖 3-4-1 黑龍江省詳細(xì)地圖4 制作flash地圖

18、的主要技巧通過(guò)做這次地圖我從中總結(jié)了幾條技巧供大家參考：(1) 在畫全國(guó)地圖和各省地圖時(shí)應(yīng)導(dǎo)入一張位圖，然后用鋼筆工具勾勒出線條，等勾勒完成之后再把位圖刪除掉即可。(2) 按鈕可以是規(guī)則的，同樣也可以是任意形狀，也可以是圖片，所以當(dāng)遇到點(diǎn)擊、掠過(guò)、按下鼠標(biāo)時(shí)按鈕是一條捷徑。(3) 當(dāng)在舞臺(tái)上有好多對(duì)話框要調(diào)整位置的時(shí)候，應(yīng)該一個(gè)一個(gè)的調(diào)整，然后再隱藏相應(yīng)的圖層，以免相互覆蓋。(4) 在寫繁瑣的actionscript時(shí)應(yīng)盡量構(gòu)造一個(gè)函數(shù)，這樣會(huì)使操作簡(jiǎn)單。5 flash地圖測(cè)試描述當(dāng)鼠標(biāo)掠每個(gè)省份時(shí)，顏色會(huì)變【6】，效果如下：圖 5-1-1 鼠標(biāo)掠過(guò)效果當(dāng)單擊每個(gè)省份時(shí)都會(huì)彈出一個(gè)提示框，效果

19、如下圖：圖 5-1-2 鼠標(biāo)單擊效果當(dāng)單擊黑龍江省份時(shí)幀會(huì)自動(dòng)跳轉(zhuǎn)到第二幀，并且顯示黑龍江省詳細(xì)地圖，當(dāng)單擊“縮放”按鈕時(shí)地圖會(huì)放大縮小，單擊“返回首頁(yè)”按鈕時(shí)地圖會(huì)自動(dòng)跳轉(zhuǎn)到圖5-1-1，效果如下圖所示：圖 5-1-3 黑龍江省詳細(xì)地圖6 結(jié)論6.1 結(jié)論通過(guò)本次畢業(yè)設(shè)計(jì)使我懂得了要想做一個(gè)合格的作品不是單純想象的那么簡(jiǎn)單，也不是隨便的從網(wǎng)絡(luò)上下載一個(gè)敷衍了事，只有通過(guò)真正的做了一遍才能使原本雜亂無(wú)章、支離破碎的知識(shí)有了一個(gè)很好的融會(huì)貫通，并初步形成了一個(gè)知識(shí)體系，對(duì)按鈕、actionscript、圖層、鋼筆工具有了進(jìn)一步的認(rèn)識(shí)，這次flash地圖設(shè)計(jì)要處理的元件、影片剪輯、按鈕、圖層眾多，

20、它培養(yǎng)了我們處理眾多元件、理清眾多圖層之間的先后關(guān)系的能力，同時(shí)也在無(wú)形中培養(yǎng)了我們的處理復(fù)雜問(wèn)題、分清輕重緩急的能力。雖然有時(shí)候感覺(jué)整天坐在那里畫圖形是一個(gè)很無(wú)聊的工作，但是當(dāng)一種心里想的東西用線條勾勒出來(lái)那種成功的喜悅是其他事情無(wú)所替代的，有時(shí)候遇到不會(huì)的問(wèn)題、陌生的功能的時(shí)候，我會(huì)主動(dòng)的去網(wǎng)上、圖書館查閱相關(guān)的資料，或者懇請(qǐng)老師答疑，在這期間多多少少的培養(yǎng)了我的自學(xué)能力和遇到困難時(shí)那種主動(dòng)解決困難的態(tài)度，有句話說(shuō)得好“細(xì)節(jié)決定成敗，態(tài)度決定命運(yùn)”，然而我們平時(shí)對(duì)細(xì)節(jié)、態(tài)度觀的形成就是通過(guò)好多好多的小事情來(lái)實(shí)現(xiàn)的，所以我很珍惜這次畢業(yè)設(shè)計(jì)的機(jī)會(huì)，雖然時(shí)間不是很長(zhǎng)，但是它在微觀上讓我明白了想畫好一個(gè)讓客戶滿意