Flash互动电子地图制作手册.doc

目前网上涌现出众多电子地图，这些电子地图操作方便，具备数据查询、距离测量甚至精确定位等传统地图所不具备的强大功能。现有的电子地图多数用Java开发的，功能强大，操作便捷。比较典型就是Mapbar()与Mapabc()、灵图()。此外，还有一部分是用Flash制作的电子地图，比如网格深圳()、九江电子地图()、江门(五邑)地图(5)、衡阳电子地图()等。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_mclength+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互动电子地图标注地名在上一讲中我们介绍了制作一个最为简单的Flash电子地图的基本步骤（Flash互动电子地图制作手册入门实例）。但对于制作数据量较大的大型城市地图，直接在Flash环境中手动创建地名标注内容不仅工作量巨大，而且维护更新非常不便，这样就必须借助外部数据文件来辅助完成其中的地名标注工作。当然，调用数据文件的方法很多，我们这里介绍一种较为简单的，即在FLASH中调用外部XML数据文件。既然涉及XML文件，就有必要对XML有一个初步的了解。 一、初识XML1、什么是XML？XML 是英文Extensible Markup Language的缩写，中文意为可扩展的标记语言。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言，即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。 2、XML文件式样以下为一个XML文件结构，有些类似HTML语言：0 - 33fed97634 - 66feb24c67 - 99fd8d3c 二、Flash调用XML文件的方法Flash中的ActionScript2.0关于调用XML的全局函数与方法属性较多，以下只介绍本例中涉及的内容： 1、建立XML对象：var myXML = new XML();2、引用XML文件：myXML.load(data.xml);3、忽略空格：myXML.ignoreWhite = true;/默认的为false4、处理XML对象的load（XML.load 方法）public load(url:String) : Boolean从指定的 URL 中加载 XML 文档，并使用下载的 XML 数据替换指定 XML 对象的内容。该 URL 是相对 URL，并使用 HTTP 进行调用。加载过程是异步的；它不会在执行 load() 方法后立即结束。执行 load() 方法时，XML 对象的 loaded 属性被设置为 false。在 XML 数据下载完毕后，loaded 属性被设置为 true，并调用 onLoad 事件处理函数。直到 XML 数据完全下载后，才开始分析。如果该 XML 对象以前包含任何 XML 树，它们将被放弃。您可以定义一个在调用 XML 对象的 onLoad 事件处理函数时执行的自定义函数。 5、处理XML对象的onLoad（XML.onLoad 处理函数）onLoad = function(success:Boolean) 收到来自服务器的 XML 文档时由 Flash Player 调用。如果成功接收了 XML 文档，则 success 参数为 true。如果未收到该文档，或从服务器接收响应时出现错误，则 success 参数为 false。默认情况下，此方法的实现不处于活动状态。若要覆盖默认实现，必须指定一个包含自定义动作的函数。 三、实例制作在初步了解了以上XML的基础后，我们就可以紧接上一例的步骤完成地名标注工作：1、创建用于地名标注的XML文件：首先我们要创建一个包含关于需要标注的地名信息文件，即包含地名称、地名坐标等基本信息。本例中我们只创建一个示范性的地名信息数据文件，其格式为XML文件格式，内容如下：大清湖37264环15467城16467西17569路18472环289101城297107东309114路321117中23195心232114南233135路234158中22918心23334北23547路23458某某市政府23988城中影剧院27184新华书店17160城9287环10498一121110路134124大清湖旅游区36223百丈峰12430东城新村340158南城新村287189新颀花园29270人民公园14442动物园140105东城广场34273百天花园9255花峰小区346189高名新村375146风台花苑210185城中大厦219111佳好大楼185109天启工业大厦12263晨光商贸大厦26562华侨电子大厦20984佳好商城19649 注：其中与项为地名名称；122与63项为地名标注的X轴与Y轴坐标，至于其坐标值的得来将在以后的实例中详细讲解。 2、Flash调用的代码 打开Flash Professional，在上一讲中的地图底图所在层的时间轴上，再补入以下ActionScript代码：var road_xml:XML = new XML(); /建立XML对象road_xml.ignoreWhite = true; /忽略空格：road_xml.onLoad = function (success:Boolean):Void if (success) /如果调用成功var childItems:Array = road_xml.firstChild.childNodes; /定义数据组var f=0; /定义MC深度的变量for (var i:Number = 0; i childItems.length; i+) var x=childItemsi.childNodes1.childNodes0.nodeValue /获取X坐标值var y=childItemsi.childNodes2.childNodes0.nodeValue /获取Y坐标值_root.map_mc.bzmap_mc.createTextField(road+i, f, x, y, 1, 1); /创建地名文本p=eval(road+i); /将文本框变量的名称赋给pp.autoSize = left; /指定文本的对齐方式p.text = childItemsi.childNodes0.childNodes0.nodeValue ; /获取地名名称f=f+1; /MC深度自动加1road_xml.load(road.xml); /调用XML文件： 注：其中XML文件的路径使用了相对路径，此路径是XML文件相对于调用Flash文件的网页文件的路径，即在本例中，调用Flash地图文件的网页文件必须与Road.xml文件置于相同的路径下，否则Flash将无法调用XML文件。 这样，Flash文件只提供电子地图的基本构架，由外部的road.xml文件提供地名标注信息，如对地名进行删减、增加、纠错等操作时，只需要对XML文件进行相应的更改就可以了，而Flash文件不需要做任何的改动。这样就大大减小了维护、更新的工作量。以上就是Flash调用外部XML文件的基本步骤；当然我们在本例中调用是已经编辑好的XML数据文件，而获取海量地名在地图上的坐标值也同样可以在Flash环境中获得。用trace函数实现互动地图后台快速标注地名了解trace函数 首先我们了解一下trace函数； 我们可以使用 Flash 调试播放器捕获来自 trace() 函数的输出并显示结果。在测试 SWF 文件时，使用此语句可在输出面板中记录编程注释或显示消息。使用 expression 参数可以检查是否存在某种条件，或在输出面板中显示值。trace() 语句类似于 JavaScript 中的 alert 函数。可以使用发布设置对话框中的省略跟踪动作命令将 trace() 动作从导出的 SWF 文件中删除。 需要重点提示的是trace()函数只能在“调试播放器”中生效；而在正式发布后，在Flash Player或是Html文件中运行的 SWF 文件是无法显示输出结果的；因此，这只是一个对地图开发者有效的后台操作的方法。 制作步骤：1、创建标注按钮及对话窗口 首先我们要创建一个“标注”的按钮元件，一个名为“input_mc”的影片剪辑作为对话窗口，以及一个名为“input_txt”的动态文本框用以手动输入地名名称；如图1所示：图1 创建标注对话窗口2、编写相关的ActionScript代码 打开“标注”按钮的动作面板，输入以下ActionScript代码：on (release) /鼠标释放时触发input_mc._visible = 1; /开启标注的对话窗口 打开“拾取标注点”按钮的动作面板，输入以下ActionScript代码：on (release) /鼠标释放时触发_root.map_mc.onMouseDown = function () /当鼠标按下时触发事件 var inputX = _xmouse; /用变量inputX 记录下当前鼠标指针的 X 轴坐标var inputY = _ymouse; /用变量inputY记录下当前鼠标指针的 Y 轴坐标 注：上述代码中捕捉鼠标指针的XY坐标值只是示意性的，事实上在实用的地图中远远没有这么简单；因为我们通常是在指定的地点上标注地名名称，因而需要对地图进行缩放、移动等操作；而单纯用_xmouse和_ymouse是无法捕捉正确的坐标值，必须依靠_xscale、_yscale、_width、_hight、_x、_y等属性值去纠正因操作地图产生的偏差。而相关的公式因不同的地图结构各不相同，无法在本例中给出通用的代码。以下是笔者在制作深圳地图时使用的相关捕捉点的公式，仅能作概念性的参考；_global.bzX = Math.round(15868.48*(_root._xmouse-_root.map_mc._x+825*_root.map_mc._xscale/100)/_root.map_mc._xscale); /捕捉X轴坐标 _global.bzY = Math.round(15868.48*(_root._ymouse-_root.map_mc._y+426*_root.map_mc._xscale/100)/_root.map_mc._xscale); /捕捉Y轴坐标 而在捕捉到指针坐标的同时还可以直接在地图上显示一个标记，可以加入以下代码，用一个红色的圆点表示：_root.map_mc.createEmptyMovieClip(dzpot_mc, this.getNextHighestDepth(); /画一个圆点_root.map_mc.dzpot_mc.lineStyle(2, 0xff0000, 100); /圆点为红色，粗细磅值为2_root.map_mc.dzpot_mc.moveTo(0, 0);_root.map_mc.dzpot_mc.lineTo(0, 0.1);_root.map_mc.dzpot_mc._width = _root.map_mc.dzpot_mc._height = 1000/_root.map_mc._xscale; /调整圆点的大小_root.map_mc.dzpot_mc._x = _root.map_mc._xmouse; /圆点坐标与捕捉点重合_root.map_mc.dzpot_mc._y = _root.map_mc._ymouse; /圆点坐标与捕捉点重合 打开“完成”按钮的动作面板，输入以下ActionScript代码：on (release) /鼠标释放时触发 var inputName = input_txt.text /用变量inputName记录下输入的地名名称race(+inputName+inputX+inputY+/n);/在输出面板中显示XML文件格式的代码 3、在调试播放器中标注地名： 点击菜单“发布预览”/“Flash”，打开调试播放器，在其中进行标注，如图2所示； 图2 在调试播放器中的进行标注 如此反复操作，在输出面板中会持续地输出相应的XML文件代码，如图3所示；图3 在调试播放器中的输出面板中显示输出结果 注：由于本例只能在调试播放器中生效，因此在网页中无法演示。依照本例的方法，地图的开发者可以在后台迅速地标注地名。但是这往往只限于通用的路名或是地名，而对于大量的公司、商辅等地名信息，开发者却无法进行海量标注，必须通过其它途径由客户端的操作者自行进行在线标注。这样就必须借助数据库和ASP等协助实现，在下一讲中，我们将学习Flash+XML+ASP实现客户端的在线地名标注功能。Flash+ASP实现电子互动地图在线标注功能1、基本的通信过程图1 SWF+XML与服务器的通信过程示意图点击看大图 图1展示的是本例中的通信过程示意。在 Flash 和数据库之间传递信息的服务器端脚本以 XML 格式读写数据。可用 ActionScript 将 SWF 文件中收集到的信息转换成一个 XML 对象，然后将数据作为 XML 文档发送到服务器端脚本。您还可以使用ActionScript 将服务器返回的 XML 文档加载到 XML 对象中，以在 SWF 文件中使用该文档。其中在本例中，保存相关的XML数据是由服务器的脚本程序来完成的，这也是本例的重点学习内容。2、flash与ASP间的通信方法 flash与ASP通信之间可以使用多种通信方法，本例中使用了LoadVars对象。LoadVars可以通过使用POST方法提供了一种向服务器输送变量。3、服务器脚本 服务器脚本可以由多种程序编写，本例中以ASP为例编写相关的脚本。Microsoft Active Server Pages (ASP) 是服务器端脚本编写环境，使用它可以创建和运行动态、交互的 Web服务器应用程序。编写脚本程序要使用相关的脚本语言；脚本语言是介于 HTML 和 Java、C+ 和 Visual Basic 之类的编程语言 之间的语言。HTML 通常用于格式化文本和链接网页。编程语言通常用于向计算机发送一系列复杂指令。脚本语言也可用来向计算机发送指令，但它们的语法和规则没有可编译的编程语言那样严格和复杂。脚本语言主要用于格式化文本和使用以编程语言编写的已编译好的组件。 ASP使 Web 开发商用多种脚本语言编写完整的过程成为可能。事实上，在单个 .asp 文件内部就可以使用多种脚本语言。 我们可以使用任意一种其相应的脚本引擎已安装在 Web 服务器上的脚本语言。通常使用VBScript和JavaScript这两种语言；其中，ASP默认的脚本语言为VBScript。本例就用VBScript编写脚本。实例制作：1、Flash端首先创建如下界面，捕捉标注点的代码在上一讲中已经提到，本例只是除了地名名称之外，再增加一些基本的信息，方法雷同，这里就不再重复；最终将需要保存的代码赋给字符串变量SendData_srt。 图2 SWF文件界面1图3 SWF文件界面2 以一个名为Link的变量来接受来自服务器的消息。如果其值为1，表明与服务器端的通信连接成功。使用LoadVars，再使用sendAndLoad方法将一个LoadVars的实体下的数据发送出去。 打开时间轴的动作面板，输入以下ActionScript代码： function SendData():Void /定义发送数据的函数 var SendData = new LoadVars(); /构造一个新的LoadVars对象 SendData.Check = 1; /设定Check的动作，用于服务器验证 SendData.data = SendData_srt; /将待发送的数据变量SendData_srt赋给data output_txt.text = 请稍候; /状态文本显示为请稍候 SendData.onLoad = function(success) /验证和服务器连接的函数 if (success) /如果和服务器成功连接 if (this.Link= 1) /如果验证动作成功 output_txt.text = 成功标注！审核后即可生效。; /状态文本显示为成功 else output_txt.text = 服务器忙，请稍后再试！; /如果和服务器连接不成功则返回失败消 ; SendData.sendAndLoad(/XMLData/Save.asp, SendData, post);/以post方式发送待保存数据2、编写服务器脚本（ASP） 创建一个ASP文件，其内容如下： 这样我们依次完成了对地图的操作、地名的标注等功能；而在地图的使用过程中，用地名名称进行查询及定位是也一个必不可少的常用功能。下一讲中我们学习电子互动地图中查询及定位功能的实现。本例要实现的功能分成“查询”和“定位”两部分，查询功能通过调用XML文件的数据一一比对实现。定位功能通过将地图进行适当的缩放和移动，将被查询到的地名显示在窗口的中央位置来实现。制作步骤：制作如图所示的界面； 图1 查询功能的界面 用input_txt动态文本框接收输入的地名名称。用载入的外部文件XMLData.xml，依次将地名与input_txt.text比较，如果两个地名相符，取相对应的X、Y轴坐标值，将地图做相应的缩放及移动操作。在本例中地图将做放大50倍，同时将地图中心移动至被查询的地名。XMLData.xml的内容如下：（略）金鼎辉煌世纪3748833882文锦大厦3819433651联城联合大厦3840233771外贸轻工大厦3823332624友联工业大厦1380243238罗湖中学3722534520东莞外贸大厦3731433971丽都大厦3744233995东乐大厦3774633549鸿昌广场3799633