《Flash互动电子地图制作手册》由会员分享，可在线阅读，更多相关《Flash互动电子地图制作手册（24页珍藏版）》请在金锄头文库上搜索。
1、Flash 互动电子地图制作手册互动电子地图制作手册入门实例入门实例2006-10-10 23:14 作者： laoshan 原创 出处： 天极设计在线 责任编辑：Shiny目前网上涌现出众多电子地图，这些电子地图操作方便，具备数据查询、距离测量甚至精确定位等传统地图所不具备的强大功能。现有的电子地图多数用 Java 开发的，功能强大，操作便捷。比较典型就是 Mapbar()与Mapabc()、灵图()。此外，还有一部分是用 Flash 制作的电子地图，比如网格深圳()、九江电子地图()、江门(五邑)地图()、衡阳电子地图()等。Java 与 Flash 相比具有明显的优势，是电子地图技术的主
2、流方向。不过使用 Java 地图的客户端必须安装 Java 虚拟机，对于没有安装相关插件的电脑用户来说，并不能立即使用 Java 电子地图。但对于非专业的爱好者来说，Flash 比 Java 更容易掌握一些。特别对于绘制楼盘、小区或是小城市的地图，并没有太多太强的功能要求，使用 Flash 制作已经足够了。 对于 Flash 电子地图来说，几乎所有的个人电脑都安装了 Flash Player 插件，只要打开浏览器即可正常使用。因此对于非专业的爱好者来说，无论使用或是学习制作 Flash 电子地图更为现实一些。只要掌握了一定 Flash ActionScript 的基础知识，都可以通过学习制作出
3、自己满意的互动电子地图。本系列专题将为大家逐步系统地介绍使用 Macromedia Flash Professional 制作 Flash 电子地图的知识，以供大家交流学习。Flash 互动电子地图制作手册入门实例XML 辅助 Flash 互动电子地图标注地名用 trace 函数实现互动地图后台快速标注地名Flash+ASP 实现电子互动地图在线标注功能Flash+XML 实现电子地图查询及定位功能今天我们就从最简单的电子地图最简单的电子地图开始，我们以制作某地区的地图为例逐步由浅入深讲解制作步骤。完成效果如下。最简单的 Flash 电子地图点击左边五个功能按钮可以得到相应功能测距时用鼠标在地
4、图中需要测距的起点单击按住拖动到终点松开即可一、确定地图功能一、确定地图功能首先，我们必须确定这个电子提图需要实现的功能。一般说来，最常用的功能无非是对地图的缩放、移动、按地名查询和测量距离等。在这里我们只选取比较简单的“放大”、“缩小”、“移动”、“复位”和“测距”。二、制作地图的底图二、制作地图的底图地图的底图可以通过很多的图形图像处理软件来制作，当然也可以用 Flash 制作，在这里不做详解。打开 Macromedia Flash Professional，导入做好的地图图片作为底图。（本例中使用一个用 Flash Professional 制作完成的底图。）三、制作功能按钮、制作功能按
5、钮新建一个新的图层，命名为“按钮”，在该层依次创建“放大”、“缩小”、“移动”、“复位”和“测距”5 个按钮。如下图所示。点击看大图 图 1 创建基本功能按钮四、为按钮分配四、为按钮分配 AS 功能代码功能代码进入“动作面板”，为各个按钮配上以下 ActionScript 功能控制代码。 1、“放大放大”的 ActionScript 代码如下：on (release) /当鼠标释放时执行以下动作 map_mc._xscale *= 1.2; /地图的 X 轴坐标放大 20% map_mc._yscale *= 1.2; /地图的 Y 轴坐标放大 20% 注：其中的_xscalet 和_ysca
6、le 是确定从影片剪辑注册点开始应用的影片剪辑水平及垂直缩放比例 (percentage)。默认注册点为 (0,0)。同时调整这两个属性的值可以达到改变地图大小的目的。 当然，我们还可以使用以下 ActionScript 代码：on (release) /当鼠标释放时执行以下动作 map_mc._width *= 1.2; /地图的宽度放大 20% map_mc._height *= 1.2; /地图的高度放大 20% 注：_width 和_height 影片剪辑的宽度和高度，单位为像素。 2、 “缩小缩小”按钮的 ActionScript 代码如下： on (release) /当鼠标释放时
7、执行以下动作 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.
8、onMouseDown = function () /当鼠标左键按下时 startDrag(map_mc); /开始拖动地图 map_mc map_mc.onMouseUp = function () /当鼠标左键释放时 stopDrag(); /停止拖动地图 map_mc /结束 move()函数的定义注：此处所调用的全局函数 startDrag 可以使影片剪辑在影片播放过程中拖动。一次只能拖动一个影片剪辑。执行 startDrag() 操作后，影片剪辑将保持可拖动状态，直到用 stopDrag() 显式停止拖动为止，或直到对其它影片剪辑调用了 startDrag() 动作为止。 4、“复位
9、复位”按钮的功能是将地图恢复到文件开启时的初始状态，其 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 属性设置，这些设置是以整像
10、素定义的。 5、“测距测距”按钮的功能是测量地图上某两点间的距离，其 ActionScript 代码如下：on (release) /当鼠标释放时执行以下动作 measure (); /调用 measure ()测距函数 function measure () /定义 measure ()函数 this.createEmptyMovieClip(“canvas_mc“, this.getNextHighestDepth(); /创建名为“canvas_mc”的影片剪辑var mouseListener:Object = new Object();/建立一个 mouseListener 侦听器对
11、象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.i
12、sDrawing) /当开始画线时 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=_xm
13、ouse-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.getNextHi
14、ghestDepth(),(this.orig_x+_xmouse)/2-10, this.orig_y+_ymouse)/2-20, 1, 1); /创建文本框，以显示所测量的长度结果 line_mclength+nextDepth+_txt.text = Math.round(l); /显示测量结果 ; Mouse.addListener(mouseListener); 注：注： createEmptyMovieClip 方法是创建一个空影片剪辑作为现有影片剪辑的子级； Math.sqrt 方法是计算并返回指定数字的平方根。 Math.round 方法是将参数的值向上或向下舍入为最接近的整
15、数并返回该值。 Math.pow (x:Number, y:Number)方法是计算并返回 x 的 y 次幂。 通过以上 3 种方法，运用三角形的勾股定理换算出测量长度。五、标注地名五、标注地名再加上地名标注加上地名标注就构成了一个最基本的电子地图框架，效果如下。 图 2 最简单的 Flash 电子地图点击左边五个功能按钮可以得到相应功能测距时用鼠标在地图中需要测距的起点单击按住拖动到终点松开即可如果只是一个小区或是小城市的地图，比如九江电子地图，直接在新建图层上注标地名即可，但如果是要制作类似网格深圳、中国电子地图网等大型城市的地图，其标注内容太多，而且需要经常更新，就不适合在 Flash
16、内标注，而要调用外部数据库来完成。下一讲中我们将介绍如何通过加载外部如何通过加载外部 XML 文件实现海量标注及后台管理文件实现海量标注及后台管理的方法。XML 辅助辅助 Flash 互动电子地图标注地名互动电子地图标注地名2006-10-18 06:10 作者： laoshan 原创 出处： 天极设计在线 责任编辑：Shiny 在上一讲中我们介绍了制作一个最为简单的 Flash 电子地图的基本步骤（Flash 互动电子地图制作手册入门实例）。但对于制作数据量较大的大型城市地图，直接在 Flash 环境中手动创建地名标注内容不仅工作量巨大，而且维护更新非常不便，这样就必须借助外部数据文件来辅助
