flash地圖的制作教程教學(xué)教材

1、Good is good, but better carries it.精益求精，善益求善。flash地圖的制作教程-關(guān)于HYPERLINK/tuxiangsheji/flash/t_blankflash，大家或多或少都有所了解。比如上網(wǎng)，到處都能看到flHYPERLINK/tag/FlashAS/t_blankash的存在。flash的應(yīng)用也是五花八門。今天我們講的是用flash做電子地圖。現(xiàn)在在網(wǎng)上隨處都能找到電子地圖，其中大部分都是java來HYPERLINK/wangzhankaifa/t_blank開發(fā)的，其實用flash也可以做電子地圖。且界面還比較漂亮?，F(xiàn)在網(wǎng)上已經(jīng)有用flash

2、做的電子地圖了。且呈發(fā)展趨勢。象中國電子地圖網(wǎng)里面的地圖就是用flash做的。還有九江，五邑等地圖也都是用flash來完成的?，F(xiàn)在我們就來學(xué)習(xí)用flash做電子地圖，首先要了解電子地圖的功能，最主要的功能就是方便你查找，還有就是可以有選擇性的顯示。比如我到一個城市，我要去一個地方，如果有一張地圖，你需要一點一點的看，還要找怎么去。而電子地圖就不一樣了，你可以搜索，就直接標(biāo)出那個地方，還可以告訴你幾路公交車到，附近有什么賓館，飯店等等。所以，電子地圖一般要具備的功能是:放大，縮小，移動，地點鏈接(相信介紹)，搜索，等一系列功能。這么大的數(shù)據(jù)量是不肯保存在flash里的，從技術(shù)的層面來說，就是要做

3、到數(shù)據(jù)和HYPERLINK/tag/%CD%BC%B2%E3/t_blank圖層的動態(tài)載入，實現(xiàn)數(shù)據(jù)的HYPERLINK/tag/%C4%A3%BA%FD/t_blank模糊，智能，區(qū)域查詢等功能。廢話少說，首先我們來認(rèn)識flash的mc(影片剪輯)，已經(jīng)做電子地圖所用到的幾個屬性。如下：_x/相對于父級影片剪輯的本地坐標(biāo)的x坐標(biāo)。如果影片剪輯在主時間軸中，則其坐標(biāo)系統(tǒng)將舞臺的左上角作為(0,0)。_y/相對于父級影片剪輯的本地坐標(biāo)的y坐標(biāo)。如果影片剪輯在主時間軸中，則其坐標(biāo)系統(tǒng)將舞臺的左上角作為(0,0)。_width/影片剪輯的寬度，以像素為單位。_height/影片剪輯的高度，以像素為單

4、位。_xscale/確定從影片剪輯注冊點開始應(yīng)用的影片剪輯水平縮放比例。默認(rèn)注冊點為(0,0)。_yscale/設(shè)置從影片剪輯注冊點開始應(yīng)用的影片剪輯垂直縮放比例。默認(rèn)注冊點為(0,0)。利用鼠標(biāo)和鍵盤來完成地圖的放大、縮小、拖動等功能：startDrag函數(shù)/執(zhí)行startDrag()操作后，影片剪輯將保持可拖動狀態(tài)。stopDrag函數(shù)/和startDrag是一對函數(shù)，用于停止當(dāng)前的拖動操作?；旧暇瓦@么多了，一會遇到那個再詳細(xì)講。下面我們一步一步來做電子地圖：一、首先我們打開flash新建一個影片，大小設(shè)為寬：440px高：316。（根據(jù)你的需要來設(shè)定）。二、然后倒入一張你準(zhǔn)備好的地圖，

5、我的是一張880632的（這樣放大時效果會好很多），導(dǎo)入到庫中。然后打開庫，選擇地圖拖入到場景中，轉(zhuǎn)換成影片剪輯，注冊點選則中央，這樣放大縮小就以這個地圖的中央為中心了。取名為map_mc（重要的事下面的名字）。因為程序要控制這個地圖，所以要給他起個名字。三、好了，地圖剪輯建好了，我們就開始用程序控制他了。首先，我們來實現(xiàn)放大縮小。有的介紹的是用_width和_height這兩個屬性，也可以實現(xiàn)，但沒有_xscale和_yscale方便。因為_xscale和_yscale直接就是原大小的百分比。新建一個圖層，選中然后在場景中畫個方塊，轉(zhuǎn)換成按鈕（和地圖一樣，不過次選擇的是按鈕）。給按鈕命名為f

6、angda_btn，選擇這個按鈕，打開動作面板寫上如圖的程序：同理建立縮小和還原的按鈕。放大按鈕上的程序：on(press)/當(dāng)鼠標(biāo)按下的時候執(zhí)行下面的程序map_mc._xscale=map_mc._xscale+10;/地圖在x軸上的百分比增加10map_mc._yscale=map_mc._yscale+10;/地圖在y軸上的百分比增加10縮小按鈕上的程序：on(press)/當(dāng)鼠標(biāo)按下的時候執(zhí)行下面的程序map_mc._xscale=map_mc._xscale-10;/地圖在x軸上的百分比減少10map_mc._yscale=map_mc._yscale-10;/地圖在y軸上的百分比

7、減少10還原按鈕上的程序：on(press)/當(dāng)鼠標(biāo)按下的時候執(zhí)行下面的程序map_mc._xscale=100;/地圖在x軸上的原大小map_mc._yscale=100;/地圖在y軸上的原大小在時間軸上的程序：（因為拖動的四地圖，不用按鈕，當(dāng)然，其他的也可以寫到時間軸上）map_mc.onMouseDown=function()/當(dāng)鼠標(biāo)按下的時候執(zhí)行startDrag(map_mc);/鼠標(biāo)可以拖動地圖map_mc.onMouseUp=function()/當(dāng)鼠標(biāo)彈起（不按時）stopDrag();/停止拖動最后，大家可能會發(fā)現(xiàn)，如果一直縮小，就會出現(xiàn)問題，后來反而變大了，拖動可以把地圖拖

8、出去，這些都不是我們想要的效果，我們下一次會專門講解這個問題，在這先透露一下，我們下一節(jié)講的是限制放大和縮小，移動的邊界。以及內(nèi)容會隨著地圖的放大縮小自動隱藏和顯示等問題。另外，由于本人也不是很精通，如果哪兒出現(xiàn)錯誤或疏漏之處還請給與指正，歡迎大家一起交流探討。不知道大家看了上一篇有什么感覺，也許對高手來說是太簡單了，但對入門者來說應(yīng)該還可以吧。我們一步一步來深入，以到達(dá)真正的電子地圖。如果大家按上一篇HYPERLINK/t_blank教程做了，就會發(fā)現(xiàn)問題，那就是如果一直縮小，就會出現(xiàn)問題，后來反而變大了，拖動可以把地圖拖出去，這些都不是我們想要的效果。今天我們來解決這些問題，另外還有信息的

9、顯示等一些內(nèi)容。容會隨著地圖的放大縮小自動隱藏和顯示等問題。好了，廢話少說，下面我們來看看今天要學(xué)習(xí)的主要內(nèi)容：限制地圖的放大和縮小限制地圖的邊界內(nèi)容的顯示和隱藏兩點間距離的測量主要用到的actionscrHYPERLINK/tag/IP/t_blankipt代碼（除上節(jié)講的以外）如下：_visible一個布爾值，指示影片剪輯是否處于可見狀態(tài)。True為可見false為不可見。也可用0.1表示。Math.floor()返回由參數(shù)x指定的數(shù)字或表達(dá)式的下限值。下限值是小于等于指定數(shù)字或表達(dá)式的最接近的整數(shù)。Math.floor(12.5)的值為12Math.floor(-6.5)的值為-7。Ma

10、th.pow（）計算并返回x的y次冪。Math.pow（x，y）表示x的y次方。Math.sqrt()計算并返回指定數(shù)字的平方根。Math.sqrt(16)的值為4。lineStyle（）設(shè)置線條的樣式。lineStyle（3，0 xff0000，100）表示要畫的線的粗細(xì)為3px，顏色為紅色，透明度為100，不透明。moveTo()將當(dāng)前繪畫位置移動到(x,y)。如果缺少任何一個參數(shù)，則此方法將失敗，并且當(dāng)前繪畫位置不改變。lineTo()使用當(dāng)前線條樣式繪制一條從當(dāng)前繪畫位置到(x,y)的線條；當(dāng)前繪畫位置隨后會設(shè)置為(x,y)。如果正在其中繪制的影片剪輯包含用Flash繪畫工具創(chuàng)建的內(nèi)容

11、，則調(diào)用lineTo()方法將在該內(nèi)容下面進(jìn)行繪制。如果在對moveTo()進(jìn)行任何調(diào)用之前調(diào)用了lineTo()，則當(dāng)前繪畫位置默認(rèn)為(0,0)。如果缺少任何一個參數(shù)，則此方法將失敗，并且當(dāng)前繪畫位置不改變。createEmptyMovieClip()創(chuàng)建一個空影片剪輯作為現(xiàn)有影片剪輯的子級。此方法的行為類似于attachMovie()方法，但是不必為新的影片剪輯提供外部鏈接標(biāo)識符。新創(chuàng)建的空影片剪輯的注冊點為左上角。如果缺少任意一個參數(shù)，則此方法將失敗。createTextField()創(chuàng)建一個新的空文本字段作為在其上調(diào)用此方法的影片剪輯的子級。removeTextField()刪除文本字

12、段。只能對使用MovieClip.createTextField()創(chuàng)建的文本字段執(zhí)行此操作。當(dāng)調(diào)用此方法時，將刪除文本字段。這次的基本上就這么多了，下面我們一步一步來實現(xiàn)今天的內(nèi)容。1、我們要實現(xiàn)的效果就是一步一步實現(xiàn)數(shù)據(jù)顯示和隱藏，首先我們來創(chuàng)建一個地圖元件，命名為map_mc。雙擊進(jìn)去編輯這個元件，再創(chuàng)建4個圖層。一共5個圖層，分別為顯示大路，政府單位，中等路，單位，小路。在各自的圖層分別寫入各自的內(nèi)容。分別命名為：map1_mc、map2_mc、map3_mc、map4_mc、map5_mc。（如右圖）2、這步我們就要建功能按鈕，我們把他們放到左面，我們先來建一個放大的元件，首先畫一個

13、放大的圖標(biāo)，按F8，建一個名為fangda_mc的影片剪輯。雙擊進(jìn)去編輯，如圖所示。（如下圖）3、重復(fù)第2步的步驟，分別創(chuàng)建suoxiao_mc(縮小)、yuantu_mc(還原)、tuodong_mc(拖動)、celiang_mc(測量)。4、放大、縮小、拖動、還原上節(jié)多已經(jīng)講過了，但隨著功能的增多，會越來越亂，所以我們把代碼統(tǒng)一起來。并盡量把代碼寫到時間軸上，以便管理和修改。首先是初始化地圖的代碼和自定義函數(shù)：/停止播放stop();/放大，縮小，還原，拖動，測量的控制變量varchengxu;/所有左邊功能按鈕的初始化函數(shù)（把左邊功能按鈕都停止在第一幀）functionchushi()_

14、root.fangda_mc.gotoAndStop(1);_root.suoxiao_mc.gotoAndStop(1);_root.yuantu_mc.gotoAndStop(1);_root.tuodong_mc.gotoAndStop(1);_root.celiang_mc.gotoAndStop(1);/初始化地圖函數(shù)（把先不要顯示的都隱藏）functionchushimap()_root.map_mc.map2_mc._visible=0;_root.map_mc.map3_mc._visible=0;_root.map_mc.map4_mc._visible=0;_root.ma

15、p_mc.map5_mc._visible=0;/執(zhí)行初始化地圖函數(shù)（把先不要顯示的都隱藏）chushimap();/初始化功能提示函數(shù)functiongongnengtishi()_root.fangda_mc.fangda1._visible=0;_root.suoxiao_mc.suoxiao1._visible=0;_root.yuantu_mc.yuantu1._visible=0;_root.tuodong_mc.tuodong1._visible=0;_root.celiang_mc.celiang1._visible=0;/執(zhí)行初始化功能提示函數(shù)（把提示隱藏）gongnengt

16、ishi();/地圖區(qū)域限制函數(shù)（限制地圖脫離屏幕）functionxianzhi()_root.onEnterFrame=function()if(map_mc._x320*map_mc._xscale/200)map_mc._x=320*map_mc._xscale/200if(map_mc._x240*map_mc._yscale/200)map_mc._y=240*map_mc._yscale/200if(map_mc._y=120)_root.map_mc.map2_mc._visible=1;if(dx=140)_root.map_mc.map3_mc._visible=1;if(

17、dx=160)_root.map_mc.map4_mc._visible=1;if(dx=180)_root.map_mc.map5_mc._visible=1;else_root.map_mc.map5_mc._visible=0;else_root.map_mc.map4_mc._visible=0;_root.map_mc.map5_mc._visible=0;else_root.map_mc.map3_mc._visible=0;_root.map_mc.map4_mc._visible=0;_root.map_mc.map5_mc._visible=0;elsechushimap()

18、;/測量函數(shù)functionceliang()varsx,sy;_root.map_mc.cl_mc.clear();_root.map_mc.cl_mc.cl_txt.removeTextField();sx=_root.map_mc._xmouse;sy=_root.map_mc._ymouse;draw=true;onMouseMove=function()if(draw)_root.map_mc.createEmptyMovieClip(cl_mc,1);_root.map_mc.cl_mc.lineStyle(1,0 x009900,80);_root.map_mc.cl_mc.mo

19、veTo(sx,sy);_root.map_mc.cl_mc.lineTo(_root.map_mc.cl_mc._xmouse,_root.map_mc.cl_mc._ymouse);ttt=Math.floor(Math.sqrt(Math.pow(_root.map_mc.cl_mc._width,2)+Math.pow(_root.map_mc.cl_mc._height,2);_root.map_mc.cl_mc.createTextField(cl_txt,1,_root.map_mc.cl_mc._xmouse,_root.map_mc.cl_mc._ymouse-22,100,

20、22);_root.map_mc.cl_mc.cl_txt.text=ttt+m;onMouseUp=function()draw=false;5、Map_mc功能的代碼如下（map_mc的所有功能）：_root.map_mc.onPress=function()if(chengxu=fangda)if(_root.map_mc._xscale100)_root.map_mc._xscale-=10;_root.map_mc._yscale-=10;xianshi();elseif(chengxu=yuantu)_root.map_mc._xscale=100;_root.map_mc._ys

21、cale=100;_root.map_mc._x=160;_root.map_mc._y=120;chushimap();elseif(chengxu=tuodong)startDrag(_root.map_mc,false);xianzhi();elseif(chengxu=celiang)celiang();_root.map_mc.onRelease=function()stopDrag();6、左邊功能按鈕的功能代碼即功能提示代碼：/left的功能代碼fangda_mc.onPress=function()chushi();_root.fangda_mc.gotoAndStop(2);

22、chengxu=fangda;suoxiao_mc.onPress=function()chushi();_root.suoxiao_mc.gotoAndStop(2);chengxu=suoxiao;yuantu_mc.onPress=function()chushi();_root.yuantu_mc.gotoAndStop(2);chengxu=yuantu;tuodong_mc.onPress=function()chushi();_root.tuodong_mc.gotoAndStop(2);chengxu=tuodong;celiang_mc.onPress=function()chushi();_root.celiang_mc.gotoAndStop(2);chengxu=celiang;/left的功能提示代碼fangda_mc.onRollOver=function()_root.fangda_mc.fangda1._visible=1;suoxiao_mc.onRollOver=function()_root.suoxiao_mc.suoxiao1._visible=1;yuantu_mc.onRollOver=function()_root.yuant