Flash互动电子地图制作手册.docx
- 文档编号:11107053
- 上传时间:2023-02-25
- 格式:DOCX
- 页数:22
- 大小:515.99KB
Flash互动电子地图制作手册.docx
《Flash互动电子地图制作手册.docx》由会员分享,可在线阅读,更多相关《Flash互动电子地图制作手册.docx(22页珍藏版)》请在冰豆网上搜索。
Flash互动电子地图制作手册
目前网上涌现出众多电子地图,这些电子地图操作方便,具备数据查询、距离测量甚至精确定位等传统地图所不具备的强大功能。
现有的电子地图多数用Java开发的,功能强大,操作便捷。
比较典型就是Mapbar()与Mapabc()、灵图()。
此外,还有一部分是用Flash制作的电子地图,比如网格深圳()、九江电子地图()、江门(五邑)地图()、衡阳电子地图()等。
Java与Flash相比具有明显的优势,是电子地图技术的主流方向。
不过使用Java地图的客户端必须安装Java虚拟机,对于没有安装相关插件的电脑用户来说,并不能立即使用Java电子地图。
但对于非专业的爱好者来说,Flash比Java更容易掌握一些。
特别对于绘制楼盘、小区或是小城市的地图,并没有太多太强的功能要求,使用Flash制作已经足够了。
对于Flash电子地图来说,几乎所有的个人电脑都安装了FlashPlayer插件,只要打开浏览器即可正常使用。
因此对于非专业的爱好者来说,无论使用或是学习制作Flash电子地图更为现实一些。
只要掌握了一定FlashActionScript的基础知识,都可以通过学习制作出自己满意的互动电子地图。
本系列专题将为大家逐步系统地介绍使用MacromediaFlashProfessional制作Flash电子地图的知识,以供大家交流学习。
今天我们就从最简单的电子地图开始,我们以制作某地区的地图为例逐步由浅入深讲解制作步骤。
完成效果如下。
最简单的Flash电子地图
点击左边五个功能按钮可以得到相应功能
测距时用鼠标在地图中需要测距的起点单击按住拖动到终点松开即可
一、确定地图功能
首先,我们必须确定这个电子提图需要实现的功能。
一般说来,最常用的功能无非是对地图的缩放、移动、按地名查询和测量距离等。
在这里我们只选取比较简单的“放大”、“缩小”、“移动”、“复位”和“测距”。
二、制作地图的底图
地图的底图可以通过很多的图形图像处理软件来制作,当然也可以用Flash制作,在这里不做详解。
打开MacromediaFlashProfessional,导入做好的地图图片作为底图。
(本例中使用一个用FlashProfessional制作完成的底图。
)
三、制作功能按钮
新建一个新的图层,命名为“按钮”,在该层依次创建“放大”、“缩小”、“移动”、“复位”和“测距”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()函数
}
functionmove(){//定义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()测距函数
}
functionmeasure(){//定义measure()函数
this.createEmptyMovieClip("canvas_mc",this.getNextHighestDepth());
//创建名为“canvas_mc”的影片剪辑
varmouseListener:
Object=newObject();//建立一个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;//停止画线
varl:
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互动电子地图标注地名
在上一讲中我们介绍了制作一个最为简单的Flash电子地图的基本步骤(《Flash互动电子地图制作手册——入门实例》)。
但对于制作数据量较大的大型城市地图,直接在Flash环境中手动创建地名标注内容不仅工作量巨大,而且维护更新非常不便,这样就必须借助外部数据文件来辅助完成其中的地名标注工作。
当然,调用数据文件的方法很多,我们这里介绍一种较为简单的,即在FLASH中调用外部XML数据文件。
既然涉及XML文件,就有必要对XML有一个初步的了解。
一、初识XML
1、什么是XML?
XML是英文ExtensibleMarkupLanguage的缩写,中文意为可扩展的标记语言。
XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识。
它也是元标记语言,即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。
2、XML文件式样
以下为一个XML文件结构,有些类似HTML语言:
xmlversion="1.0"encoding="utf-8"?
>
0-33
34-66
67-99
二、Flash调用XML文件的方法
Flash中的ActionScript2.0关于调用XML的全局函数与方法属性较多,以下只介绍本例中涉及的内容:
1、建立XML对象:
varmyXML=newXML();
2、引用XML文件:
myXML.load("data.xml");
3、忽略空格:
myXML.ignoreWhite=true;//默认的为false
4、处理XML对象的load(XML.load方法)
publicload(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文档时由FlashPlayer调用。
如果成功接收了XML文档,则success参数为true。
如果未收到该文档,或从服务器接收响应时出现错误,则success参数为false。
默认情况下,此方法的实现不处于活动状态。
若要覆盖默认实现,必须指定一个包含自定义动作的函数。
三、实例制作
在初步了解了以上XML的基础后,我们就可以紧接上一例的步骤完成地名标注工作:
1、创建用于地名标注的XML文件:
首先我们要创建一个包含关于需要标注的地名信息文件,即包含地名称、地名坐标等基本信息。
本例中我们只创建一个示范性的地名信息数据文件,其格式为XML文件格式,内容如下:
xmlversion="1.0"encoding="iso-8859-1"?
>
注:
其中
2、Flash调用的代码
打开FlashProfessional,在上一讲中的地图底图所在层的时间轴上,再补入以下ActionScript代码:
varroad_xml:
XML=newXML();//建立XML对象
road_xml.ignoreWhite=true;//忽略空格:
road_xml.onLoad=function(success:
Boolean):
Void{
if(success){//如果调用成功
varchildItems:
Array=road_xml.firstChild.childNodes;//定义数据组
varf=0;//定义MC深度的变量
for(vari:
Number=0;i varx=childItems[i].childNodes[1].childNodes[0].nodeValue//获取X坐标值 vary=childItems[i].childNodes[2].childNodes[0].nodeValue//获取Y坐标值 _root.map_mc.bzmap_mc.createTextField("road"+i,f,x,y,1,1);//创建地名文本 p=eval("road"+i);//将文本框变量的名称赋给p p.autoSize="left";//指定文本的对齐方式 p.text=childItems[i].childNodes[0].childNodes[0].nodeValue;//获取地名名称 f=f+1;//MC深度自动加1 } } } road_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()函数只能在“调试播放器”中生效;而在正式发布后,在FlashPlayer或是Html文件中运行的SWF文件是无法显示输出结果的;因此,这只是一个对地图开发者有效的后台操作的方法。 制作步骤: 1、创建标注按钮及对话窗口 首先我们要创建一个“标注”的按钮元件,一个名为“input_mc”的影片剪辑作为对话窗口,以及一个名为“input_txt”的动态文本框用以手动输入地名名称;如图1所示: 图1创建标注对话窗口 2、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash 互动 电子地图 制作 手册