Flash互動電子地圖製作手冊

現有的電子地圖多數用Java開發的,功能強大,操作便捷。比較典型就是Mapbar(mapbar.com)與Mapabc(mapabc.com)、靈圖(lingtu.com)。
  此外,還有一部分是用Flash製作的電子地圖,比如網格深圳(wanggesz.com)、九江電子地圖(jjmap.cn)、江門(五邑)地圖(5emap.com)、衡陽電子地圖(hyemap.com)等。

  Java與Flash相比具有明顯的優勢,是電子地圖技術的主流方向。不過使用Java地圖的客戶端必須安裝Java虛擬機,對於沒有安裝相關插件的電腦用戶來說,並不能立即使用Java電子地圖。

  但對於非專業的愛好者來說,Flash比Java更容易掌握一些。特別對於繪製樓盤、小區或是小城市的地圖,並沒有太多太強的功能要求,使用Flash製作已經足夠了。
  對於Flash電子地圖來說,幾乎所有的個人電腦都安裝了Flash Player插件,只要打開瀏覽器即可正常使用。因此對於非專業的愛好者來說,無論使用或是學習製作Flash電子地圖更爲現實一些。只要掌握了一定Flash ActionScript的基礎知識,都可以通過學習製作出自己滿意的互動電子地圖。
  
  本系列專題將爲大家逐步系統地介紹使用Macromedia Flash Professional製作Flash電子地圖的知識,以供大家交流學習。
  今天我們就從最簡單的電子地圖開始,我們以製作某地區的地圖爲例逐步由淺入深講解制作步驟。完成效果如下。

                                                                                                                
最簡單的Flash電子地圖
點擊左邊五個功能按鈕可以得到相應功能
測距時用鼠標在地圖中需要測距的起點單擊按住拖動到終點鬆開即可

  一、確定地圖功能

  
首先,我們必須確定這個電子提圖需要實現的功能。一般說來,最常用的功能無非是對地圖的縮放、移動、按地名查詢和測量距離等。在這裏我們只選取比較簡單的“放大”、“縮小”、“移動”、“復位”和“測距”。

  二、製作地圖的底圖
  地圖的底圖可以通過很多的圖形圖像處理軟件來製作,當然也可以用Flash 製作,在這裏不做詳解。
  打開Macromedia Flash Professional,導入做好的地圖圖片作爲底圖。(本例中使用一個用Flash Professional製作完成的底圖。)
  、製作功能按鈕
  新建一個新的圖層,命名爲“按鈕”,在該層依次創建“放大”、“縮小”、“移動”、“復位”和“測距”5個按鈕。如下圖所示。


圖1 創建基本功能按鈕

  四、爲按鈕分配AS功能代碼

  進入“動作面板”,爲各個按鈕配上以下ActionScript功能控制代碼。
  1、“放大”的ActionScript代碼如下:

  on (release) { //當鼠標釋放時執行以下動作
     map_mc._xscale *= 1.2; //地圖的 X 軸座標放大20%
     map_mc._yscale *= 1.2; //地圖的 Y 軸座標放大20%
  }
   注:其中的_xscalet和_yscale是確定從影片剪輯註冊點開始應用的影片剪輯水平及垂直縮放比例 (percentage)。默認註冊點爲 (0,0)。同時調整這兩個屬性的值可以達到改變地圖大小的目的。
   當然,我們還可以使用以下ActionScript代碼:

  on (release) { //當鼠標釋放時執行以下動作
     map_mc._width *= 1.2; //地圖的寬度放大20%
     map_mc._height *= 1.2; //地圖的高度放大20%
  }
   注:_width和_height影片剪輯的寬度和高度,單位爲像素。
  2、 “縮小”按鈕的ActionScript代碼如下:


  on (release) { //當鼠標釋放時執行以下動作
     map_mc._xscale *= 0.8; //地圖的 X 軸座標縮小20%
     map_mc._yscale *= 0.8; //地圖的 Y 軸座標縮小20%
  }
   或者:


  on (release) { //當鼠標釋放時執行以下動作
     map_mc._width *= 0.8; //地圖的寬度縮小20%
     map_mc._height *= 0.8; //地圖的高度縮小20%
  }
   3、“移動”的ActionScript代碼如下:


 on (release) { //當鼠標釋放時執行以下動作
  move(); //調用move()函數
 }
 function move() { //定義move()函數
    map_mc.onMouseDown = function () { //當鼠標左鍵按下時
    startDrag(map_mc); //開始拖動地圖map_mc
   }
   map_mc.onMouseUp = function () { //當鼠標左鍵釋放時
    stopDrag(); //停止拖動地圖map_mc
   }
  } //結束move()函數的定義
   注:此處所調用的全局函數startDrag可以使影片剪輯在影片播放過程中拖動。一次只能拖動一個影片剪輯。執行 startDrag() 操作後,影片剪輯將保持可拖動狀態,直到用 stopDrag() 顯式停止拖動爲止,或直到對其它影片剪輯調用了 startDrag() 動作爲止。
   4、“復位”按鈕的功能是將地圖恢復到文件開啓時的初始狀態,其ActionScript代碼如下:


 on (release) { //當鼠標釋放時執行以下動作
  map_mc._xscale = 100; //將地圖map_mc的X軸縮放比率還原至原始大小
  map_mc._yscale = 100; //將地圖map_mc的Y軸縮放比率還原至原始大小
  map_mc._x = 200; //將地圖map_mc的註冊點X座標還原至中心點
  map_mc._y = 150; //將地圖map_mc的註冊點Y座標還原至中心點
  }
   注:縮放本地座標系統將影響 _x 和 _y 屬性設置,這些設置是以整像素定義的。
   5、“測距”按鈕的功能是測量地圖上某兩點間的距離,其ActionScript代碼如下:


 on (release) { //當鼠標釋放時執行以下動作
  measure (); //調用measure ()測距函數
 }
 function measure (){ //定義measure ()函數
  this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth());
   //創建名爲“canvas_mc”的影片剪輯
  var mouseListener:Object = new Object();//建立一個mouseListener偵聽器對象
  mouseListener.onMouseDown = function() { //當鼠標左鍵按下時
   this.isDrawing = true; //開始畫線
   this.orig_x = _xmouse; //記錄此時的鼠標指針的X座標
   this.orig_y = _ymouse; //記錄此時的鼠標指針的Y座標
   this.target_mc = canvas_mc.createEmptyMovieClip("", canvas_mc.getNextHighestDepth());
  }
  mouseListener.onMouseMove = function() { //當鼠標移動時
   if (this.isDrawing) { //當開始畫線時
    this.target_mc.clear(); //清除上一次所畫的線條
    this.target_mc.lineStyle(1, 0xFF0000, 100); //設定線條的式樣
    this.target_mc.moveTo(this.orig_x, this.orig_y); //設定所畫線條的起點
    this.target_mc.lineTo(_xmouse, _ymouse); //設定所畫線條的終點
   }
   updateAfterEvent();
  }
  mouseListener.onMouseUp = function() { //當鼠標左鍵釋放時
    line_width=_xmouse-this.orig_x; //畫線終點與原點X軸座標的距離
    line_height=_ymouse-this.orig_y; //畫線終點與原點Y軸座標的距離
    this.isDrawing = false; //停止畫線
    var l:Number = Math.sqrt(Math.pow(line_width, 2)+Math.pow(line_height, 2))*2500/map_mc._xscale;  //計算出線條的長度,並換算成實際長度
  line_mc.createTextField("length"+nextDepth+"_txt",canvas_mc.getNextHighestDepth(),(this.orig_x+_xmouse)/2-10, this.orig_y+_ymouse)/2-20, 1, 1); //創建文本框,以顯示所測量的長度結果
  line_mc['length'+nextDepth+'_txt'].text = Math.round(l); //顯示測量結果
  }
 };
  Mouse.addListener(mouseListener);
}
   注: createEmptyMovieClip方法是創建一個空影片剪輯作爲現有影片剪輯的子級;
   Math.sqrt 方法是計算並返回指定數字的平方根。
   Math.round 方法是將參數的值向上或向下舍入爲最接近的整數並返回該值。
   Math.pow (x:Number, y:Number)方法是計算並返回 x 的 y 次冪。
   通過以上3種方法,運用三角形的勾股定理換算出測量長度。
  五、標註地名
   再加上地名標註就構成了一個最基本的電子地圖框架,效果如下。

                                                                                                          
圖2 最簡單的Flash電子地圖
點擊左邊五個功能按鈕可以得到相應功能
測距時用鼠標在地圖中需要測距的起點單擊按住拖動到終點鬆開即可

   如果只是一個小區或是小城市的地圖,比如九江電子地圖,直接在新建圖層上註標地名即可,但如果是要製作類似網格深圳、中國電子地圖網等大型城市的地圖,其標註內容太多,而且需要經常更新,就不適合在Flash內標註,而要調用外部數據庫來完成。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章