flash地圖的制作教程_第1頁(yè)
flash地圖的制作教程_第2頁(yè)
flash地圖的制作教程_第3頁(yè)
flash地圖的制作教程_第4頁(yè)
flash地圖的制作教程_第5頁(yè)
已閱讀5頁(yè),還剩5頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論