flash地圖的制作教程

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

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

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

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

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

6、/當(dāng)鼠標按下的時候執(zhí)行下面的程序 map_mc._xscale=map_mc._xscale+10; /地圖在x軸上的百分比增加10 map_mc._yscale=map_mc._yscale+10; /地圖在y軸上的百分比增加10 縮小按鈕上的程序：on(press) /當(dāng)鼠標按下的時候執(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)鼠標按下的時候執(zhí)行下面的程序 map_mc._xscale=100; /地圖在x軸上的原大小 map_mc._yscale=100; /地圖在y軸上的原大小 在時間軸上的程序：（因為拖動的四地圖，不用按鈕，當(dāng)然，其他的也可以寫到時間軸上）map_mc.onMouseDown = function ()  /當(dāng)鼠標按下的時候執(zhí)行 startDrag(map_mc); /鼠標可以拖動地圖 map_mc.onMouseUp = function ()  /當(dāng)鼠標彈

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

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

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

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

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

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

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

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

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

17、ng_mc(拖動)、celiang_mc(測量)。4、放大、縮小、拖動、還原上節(jié)多已經(jīng)講過了，但隨著功能的增多，會越來越亂，所以我們把代碼統(tǒng)一起來。并盡量把代碼寫到時間軸上，以便管理和修改。首先是初始化地圖的代碼和自定義函數(shù)： /停止播放  stop();  /放大，縮小，還原，拖動，測量的控制變量  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();    /測量函數(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