flash地圖的制作教程

1、關(guān)于flash，大家或多或少都有所了解。比如上網(wǎng)，到處都能看到flash的存在。flash的應(yīng)用也是五花八門。今天我們講的是用flash做電子地圖。現(xiàn)在在網(wǎng)上隨處都能找到電子地圖，其中大部分都是java來(lái)開發(fā)的，其實(shí)用flash也可以做電子地圖。且界面還比較漂亮。現(xiàn)在網(wǎng)上已經(jīng)有用flash做的電子地圖了。且呈發(fā)展趨勢(shì)。象"中國(guó)電子地圖網(wǎng)"里面的地圖就是用flash做的。還有九江，五邑等地圖也都是用flash來(lái)完成的?，F(xiàn)在我們就來(lái)學(xué)習(xí)用flash做電子地圖，首先要了解電子地圖的功能，最主要的功能就是方便你查找，還有就是可以有選擇性的顯示。比如我到一個(gè)城市，我要去一個(gè)地方，如果

2、有一張地圖，你需要一點(diǎn)一點(diǎn)的看，還要找怎么去。而電子地圖就不一樣了，你可以搜索，就直接標(biāo)出那個(gè)地方，還可以告訴你幾路公交車到，附近有什么賓館，飯店等等。所以，電子地圖一般要具備的功能是:放大，縮小，移動(dòng)，地點(diǎn)鏈接(相信介紹)，搜索，等一系列功能。這么大的數(shù)據(jù)量是不肯保存在flash里的，從技術(shù)的層面來(lái)說(shuō)，就是要做到數(shù)據(jù)和圖層的動(dòng)態(tài)載入，實(shí)現(xiàn)數(shù)據(jù)的模糊，智能，區(qū)域查詢等功能。廢話少說(shuō)，首先我們來(lái)認(rèn)識(shí)flash的mc(影片剪輯)，已經(jīng)做電子地圖所用到的幾個(gè)屬性。如下：_x /相對(duì)于父級(jí)影片剪輯的本地坐標(biāo)的 x 坐標(biāo)。如果影片剪輯在主時(shí)間軸中，則其坐標(biāo)系統(tǒng)將舞臺(tái)的左 上

3、角作為 (0, 0)。 _y /相對(duì)于父級(jí)影片剪輯的本地坐標(biāo)的 y 坐標(biāo)。如果影片剪輯在主時(shí)間軸中，則其坐標(biāo)系統(tǒng)將舞臺(tái)的左 上角作為 (0, 0)。 _width /影片剪輯的寬度，以像素為單位。 _height /影片剪輯的高度，以像素為單位。 _xscale /確定從影片剪輯注冊(cè)點(diǎn)開始應(yīng)用的影片剪輯水平縮放比例。默認(rèn)注冊(cè)點(diǎn)為 (0,0)。 _yscale /設(shè)置從影片剪輯注冊(cè)點(diǎn)開始應(yīng)用的影片剪輯垂直縮放比例。默認(rèn)注冊(cè)點(diǎn)為 (0,0)。 利用鼠標(biāo)和鍵盤來(lái)完成地圖的

4、放大、縮小、拖動(dòng)等功能： startDrag 函數(shù) /執(zhí)行 startDrag() 操作后，影片剪輯將保持可拖動(dòng)狀態(tài)。 stopDrag 函數(shù) /和startDrag是一對(duì)函數(shù)，用于停止當(dāng)前的拖動(dòng)操作?；旧暇瓦@么多了，一會(huì)遇到那個(gè)再詳細(xì)講。下面我們一步一步來(lái)做電子地圖：一、首先我們打開flash新建一個(gè)影片，大小設(shè)為寬：440px 高：316。（根據(jù)你的需要來(lái)設(shè)定）。二、然后倒入一張你準(zhǔn)備好的地圖，我的是一張880632的（這樣放大時(shí)效果會(huì)好很多），導(dǎo)入到庫(kù)中。然后打開庫(kù)，選擇地圖拖入到場(chǎng)景中，轉(zhuǎn)換成影片剪輯，注冊(cè)點(diǎn)選則中央，這樣放

5、大縮小就以這個(gè)地圖的中央為中心了。取名為map_mc（重要的事下面的名字）。因?yàn)槌绦蛞刂七@個(gè)地圖，所以要給他起個(gè)名字。三、好了，地圖剪輯建好了，我們就開始用程序控制他了。首先，我們來(lái)實(shí)現(xiàn)放大縮小。有的介紹的是用_width和_height這兩個(gè)屬性，也可以實(shí)現(xiàn)，但沒有_xscale和_yscale方便。因?yàn)開xscale和_yscale直接就是原大小的百分比。新建一個(gè)圖層，選中然后在場(chǎng)景中畫個(gè)方塊，轉(zhuǎn)換成按鈕（和地圖一樣，不過(guò)次選擇的是按鈕）。給按鈕命名為fangda_btn，選擇這個(gè)按鈕，打開動(dòng)作面板寫上如圖的程序：同理建立縮小和還原的按鈕。放大按鈕上的程序：on(press) 

6、/當(dāng)鼠標(biāo)按下的時(shí)候執(zhí)行下面的程序 map_mc._xscale=map_mc._xscale+10; /地圖在x軸上的百分比增加10 map_mc._yscale=map_mc._yscale+10; /地圖在y軸上的百分比增加10 縮小按鈕上的程序：on(press) /當(dāng)鼠標(biāo)按下的時(shí)候執(zhí)行下面的程序 map_mc._xscale=map_mc._xscale-10; /地圖在x軸上的百分比減少10 map_mc._yscale=map_mc._yscale-10; /地圖在y軸上的百分比減少10 還原按鈕上的程序：on(press)

7、0;/當(dāng)鼠標(biāo)按下的時(shí)候執(zhí)行下面的程序 map_mc._xscale=100; /地圖在x軸上的原大小 map_mc._yscale=100; /地圖在y軸上的原大小 在時(shí)間軸上的程序：（因?yàn)橥蟿?dòng)的四地圖，不用按鈕，當(dāng)然，其他的也可以寫到時(shí)間軸上）map_mc.onMouseDown = function ()  /當(dāng)鼠標(biāo)按下的時(shí)候執(zhí)行 startDrag(map_mc); /鼠標(biāo)可以拖動(dòng)地圖 map_mc.onMouseUp = function ()  /當(dāng)鼠標(biāo)彈

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

9、程做了，就會(huì)發(fā)現(xiàn)問(wèn)題，那就是如果一直縮小，就會(huì)出現(xiàn)問(wèn)題，后來(lái)反而變大了，拖動(dòng)可以把地圖拖出去，這些都不是我們想要的效果。今天我們來(lái)解決這些問(wèn)題，另外還有信息的顯示等一些內(nèi)容。容會(huì)隨著地圖的放大縮小自動(dòng)隱藏和顯示等問(wèn)題。     好了，廢話少說(shuō)，下面我們來(lái)看看今天要學(xué)習(xí)的主要內(nèi)容：     限制地圖的放大和縮小     限制地圖的邊界     內(nèi)容的顯示和隱藏     兩點(diǎn)間距離的測(cè)量  

10、   主要用到的actionscript代碼（除上節(jié)講的以外）如下：     _visible  一個(gè)布爾值，指示影片剪輯是否處于可見狀態(tài)。True 為可見 false 為不可見。也可用0.1表示。     Math.floor()   返回由參數(shù) x 指定的數(shù)字或表達(dá)式的下限值。下限值是小于等于指定數(shù)字或表達(dá)式的最接近 的整數(shù)。Math.floor(12.5)的值為12 &#

11、160;   Math.floor(-6.5)的值為 -7。     Math.pow（） 計(jì)算并返回 x 的 y 次冪。 Math.pow（x，y）表示x的y次方。     Math.sqrt()    計(jì)算并返回指定數(shù)字的平方根。 Math.sqrt(16) 的值為4。     lineStyle（） &

12、#160;設(shè)置線條的樣式。lineStyle（3，0xff0000，100）表示要畫的線的粗細(xì)為3px，顏色為紅色，                  透明度為100，不透明。     moveTo ()    將當(dāng)前繪畫位置移動(dòng)到 (x, y)。如果缺少任何一個(gè)參數(shù)，則此方法將失敗，并且當(dāng)前繪畫位置 不改變。

13、60;   lineTo ()      使用當(dāng)前線條樣式繪制一條從當(dāng)前繪畫位置到 (x, y) 的線條；當(dāng)前繪畫位置隨后會(huì)設(shè)置為  (x, y)。如果正在其中繪制的影片剪輯包含用 Flash 繪畫工具創(chuàng)建的內(nèi)容，則調(diào)用 lineTo()  方法將在該內(nèi)容下面進(jìn)行繪制。如果在對(duì) moveTo() 進(jìn)行任何調(diào)用之前調(diào)用了 lineTo()，則當(dāng) 前繪畫位置默認(rèn)為 (0,

14、 0)。如果缺少任何一個(gè)參數(shù)，則此方法將失敗，并且當(dāng)前繪畫位置不改 變。     createEmptyMovieClip ()   創(chuàng)建一個(gè)空影片剪輯作為現(xiàn)有影片剪輯的子級(jí)。此方法的行為類似于  attachMovie() 方法，但是不必為新的影片剪輯提供外部鏈接標(biāo)識(shí)符。新 創(chuàng)建的空影片剪輯的注冊(cè)點(diǎn)為左上角。如果缺少任意一個(gè)參數(shù)，則此方法將失敗。     createTextField ()   

15、0;     創(chuàng)建一個(gè)新的空文本字段作為在其上調(diào)用此方法的影片剪輯的子級(jí)。     removeTextField ()        刪除文本字段。只能對(duì)使用 MovieClip.createTextField() 創(chuàng)建的文本字段 執(zhí)行此操作。當(dāng)調(diào)用此方法時(shí)，將刪除文本字段。 這次的基本上就這么多了，下面我們一步一步來(lái)實(shí)現(xiàn)今天的內(nèi)容。 1、我們要實(shí)現(xiàn)的效果就是一步一步實(shí)現(xiàn)數(shù)據(jù)顯示和隱藏，首先我們

16、來(lái)創(chuàng)建一個(gè)地圖元件，命名為map_mc。雙擊進(jìn)去編輯這個(gè)元件，再創(chuàng)建4個(gè)圖層。一共5個(gè)圖層，分別為顯示大路，政府單位，中等路，單位，小路。 在各自的圖層分別寫入各自的內(nèi)容。分別命名為：map1_mc、map2_mc、map3_mc、map4_mc、map5_mc。（如右圖） 2、這步我們就要建功能按鈕，我們把他們放到左面，我們先來(lái)建一個(gè)放大的元件，首先畫一個(gè)放大的圖標(biāo)，按F8，建一個(gè)名為 fangda_mc的影片剪輯。雙擊進(jìn)去編輯，如圖所示。（如下圖）   3、重復(fù)第2步的步驟，分別創(chuàng)建suoxiao_mc(縮小)、yuantu_mc(還原)、tuodo

17、ng_mc(拖動(dòng))、celiang_mc(測(cè)量)。4、放大、縮小、拖動(dòng)、還原上節(jié)多已經(jīng)講過(guò)了，但隨著功能的增多，會(huì)越來(lái)越亂，所以我們把代碼統(tǒng)一起來(lái)。并盡量把代碼寫到時(shí)間軸上，以便管理和修改。首先是初始化地圖的代碼和自定義函數(shù)： /停止播放  stop();  /放大，縮小，還原，拖動(dòng)，測(cè)量的控制變量  var chengxu   /所有左邊功能按鈕的初始化函數(shù)（把左邊功能按鈕都停止在第一幀）  function chushi()        &

18、#160;_root.fangda_mc.gotoAndStop(1);         _root.suoxiao_mc.gotoAndStop(1);         _root.yuantu_mc.gotoAndStop(1);         _root.tuodong_mc.gotoAndStop(1);    

19、60; le = 0;    /執(zhí)行初始化地圖函數(shù)（把先不要顯示的都隱藏）  chushimap();  /初始化功能提示函數(shù)  function gongnengtishi()         _root.fangda_mc.fangda1._visible = 0;         _root.suoxiao_mc.suox

20、iao1._visible = 0;         _root.yuantu_mc.yuantu1._visible = 0;         _root.tuodong_mc.tuodong1._visible = 0;         _root.celiang_mc.celiang1._vi

21、sible = 0;    /執(zhí)行初始化功能提示函數(shù)（把提示隱藏）  gongnengtishi();  /地圖區(qū)域限制函數(shù)（限制地圖脫離屏幕）  function xianzhi()         _root.onEnterFrame = function()         if(map_mc._x>320*map_mc._x

22、scale/200)map_mc._x=320*map_mc._xscale/200         if(map_mc._x<320-320*map_mc._xscale/200)map_mc._x=320-320*map_mc._xscale/200         if(map_mc._y>240*map_mc._yscale/200)map_mc._y=240*map_mc._yscale/200 

23、60;      if(map_mc._y<240-240*map_mc._yscale/200)map_mc._y=240-240*map_mc._yscale/200             /信息的顯示和隱藏函數(shù)（放大顯示和縮小隱藏）  function xianshi()         var dx =

24、 _root.map_mc._xscale;         if(dx >= 120)                _root.map_mc.map2_mc._visible = 1;           &#

25、160;    if(dx >= 140)                       _root.map_mc.map3_mc._visible = 1;            &#

26、160;          if(dx >= 160)                              _root.map_mc.map4_mc._visible 

27、= 1;                              if(dx >= 180)                

28、;                     _root.map_mc.map5_mc._visible = 1;                      &#

29、160;       else                                     _root.map_mc.map5_mc._visible

30、0;= 0;                                                  

31、;   else                              _root.map_mc.map4_mc._visible = 0;          

32、60;          _root.map_mc.map5_mc._visible = 0;                                  

33、;            else                       _root.map_mc.map3_mc._visible = 0;        

34、60;        _root.map_mc.map4_mc._visible = 0;                 _root.map_mc.map5_mc._visible = 0;           

35、60;       elsechushimap();    /測(cè)量函數(shù)  function celiang()  var sx, sy;  _root.map_mc.cl_mc.clear();  _root.map_mc.cl_mc.cl_txt.removeTextField();  sx = _root.map_mc._xmouse;  sy = _root.map_mc._ymo

36、use;  draw = true;  onMouseMove = function ()   if (draw)   _root.map_mc.createEmptyMovieClip("cl_mc",1);  _root.map_mc.cl_mc.lineStyle(1, 0x009900, 80);  _root.map_mc.cl_mc.moveTo(sx, sy);  _root.map

37、_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._

38、xmouse, _root.map_mc.cl_mc._ymouse-22, 100, 22);  _root.map_mc.cl_mc.cl_txt.text = ttt +" m"    ;  onMouseUp = function ()   draw = false;    ; 5、Map_mc功能的代碼如下（map_mc 的所有功能）： _root

39、.map_mc.onPress = function()         if(chengxu = "fangda")                if(_root.map_mc._xscale < 200)       

40、         _root.map_mc._xscale += 10;                _root.map_mc._yscale += 10;              &#

41、160; xianshi();                                  else if(chengxu = "suoxiao")       &

42、#160;        if(_root.map_mc._xscale > 100)                _root.map_mc._xscale -= 10;             

43、60;  _root.map_mc._yscale -= 10;                xianshi();                          

44、       else if(chengxu = "yuantu")                _root.map_mc._xscale = 100;              

45、;  _root.map_mc._yscale = 100;                _root.map_mc._x = 160;                _root.map_mc._y = 120;

46、0;               chushimap();                  else if(chengxu = "tuodong")         &

47、#160;      startDrag(_root.map_mc,false);                xianzhi();                  else if(chengxu =

48、60;"celiang")                celiang();             _root.map_mc.onRelease = function()         stopDrag();  &

49、#160;6、左邊功能按鈕的功能代碼即功能提示代碼： /left的功能代碼  fangda_mc.onPress = function()         chushi();         _root.fangda_mc.gotoAndStop(2);         chengxu = &quo

50、t;fangda"    suoxiao_mc.onPress = function()         chushi();         _root.suoxiao_mc.gotoAndStop(2);         chengxu = "suoxiao"

51、0;   yuantu_mc.onPress = function()         chushi();         _root.yuantu_mc.gotoAndStop(2);         chengxu = "yuantu"    tuodong_mc.

52、onPress = function()         chushi();         _root.tuodong_mc.gotoAndStop(2);         chengxu = "tuodong"    celiang_mc.onPress = function()         chushi();         _root.celiang_mc.gotoAndStop(2);         chengxu = "celiang"    /left的功能提示代碼  fangda