Flash互动电子地图制作手册——入门实例_Flash教程

推荐：FLASH中的移动方法教程和实例集锦
欢迎转载,敬请注明来源--闪吧和作者---sxl001---QQ:285510591在此只探讨用AS语句去控制移动的方法。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内标注，而要调用外部数据库来完成。

　　下一讲中我们将介绍如何通过加载外部XML文件实现海量标注及后台治理的方法。

分享：Flash绘中秋贺卡：快乐月饼大游行
这是一张用CorelDraw、Photoshop、Flash绘制的中秋节贺卡，画面是月色中的月饼大游行，草图中依上而下的是路边的花墙、路灯、驾车的小兔、载月饼的车和兔子乐