用Flash做电子地图实例讲解

  关于flash,大家或多或少都有所了解。比如上网,到处都能看到flash的存在。flash的应用也是五花八门。今天我们讲的是用flash做电子地图。

  现在在网上随处都能找到电子地图,其中大部分都是java来开发的,其实用flash也可以做电子地图。且界面还比较漂亮。现在网上已经有用flash做的电子地图了。且呈发展趋势。象"中国电子地图网"里面的地图就是用flash做的。还有九江,五邑等地图也都是用flash来完成的。

  现在我们就来学习用flash做电子地图,首先要了解电子地图的功能,最主要的功能就是方便你查找,还有就是可以有选择性的显示。比如我到一个城市,我要去一个地方,如果有一张地图,你需要一点一点的看,还要找怎么去。而电子地图就不一样了,你可以搜索,就直接标出那个地方,还可以告诉你几路公交车到,附近有什么宾馆,饭店等等。所以,电子地图一般要具备的功能是:放大,缩小,移动,地点链接(相信介绍),搜索,等一系列功能。这么大的数据量是不肯保存在flash里的,从技术的层面来说,就是要做到数据和图层的动态载入,实现数据的模糊,智能,区域查询等功能。

  废话少说,首先我们来认识flash的mc(影片剪辑),已经做电子地图所用到的几个属性。如下:

  _x //相对于父级影片剪辑的本地坐标的 x 坐标。如果影片剪辑在主时间轴中,则其坐标系统将舞台的左上角作为 (0, 0)。

  _y //相对于父级影片剪辑的本地坐标的 y 坐标。如果影片剪辑在主时间轴中,则其坐标系统将舞台的左上角作为 (0, 0)。

  _width //影片剪辑的宽度,以像素为单位。

  _height //影片剪辑的高度,以像素为单位。

  _xscale //确定从影片剪辑注册点开始应用的影片剪辑水平缩放比例。默认注册点为 (0,0)。

  _yscale //设置从影片剪辑注册点开始应用的影片剪辑垂直缩放比例。默认注册点为 (0,0)。

  利用鼠标和键盘来完成地图的放大、缩小、拖动等功能:

  startDrag 函数 //执行 startDrag() 操作后,影片剪辑将保持可拖动状态。

  stopDrag 函数 //和startDrag是一对函数,用于停止当前的拖动操作。

  基本上就这么多了,一会遇到那个再详细讲。

  下面我们一步一步来做电子地图:

  一、首先我们打开flash新建一个影片,大小设为宽:440px 高:316。(根据你的需要来设定)。

  二、然后倒入一张你准备好的地图,我的是一张880╳632的(这样放大时效果会好很多),导入到库中。然后打开库,选择地图拖入到场景中,转换成影片剪辑,注册点选则中央,这样放大缩小就以这个地图的中央为中心了。取名为map_mc(重要的事下面的名字)。因为程序要控制这个地图,所以要给他起个名字。

  三、好了,地图剪辑建好了,我们就开始用程序控制他了。首先,我们来实现放大缩小。有的介绍的是用_width和_height这两个属性,也可以实现,但没有_xscale和_yscale方便。因为_xscale和_yscale直接就是原大小的百分比。新建一个图层,选中然后在场景中画个方块,转换成按钮(和地图一样,不过次选择的是按钮)。给按钮命名为fangda_btn,选择这个按钮,打开动作面板写上如图的程序:同理建立缩小和还原的按钮。

  放大按钮上的程序:

on(press){ //当鼠标按下的时候执行下面的程序
map_mc._xscale=map_mc._xscale+10; //地图在x轴上的百分比增加10
map_mc._yscale=map_mc._yscale+10; //地图在y轴上的百分比增加10
}
  缩小按钮上的程序:

on(press){ //当鼠标按下的时候执行下面的程序
map_mc._xscale=map_mc._xscale-10; //地图在x轴上的百分比减少10
map_mc._yscale=map_mc._yscale-10; //地图在y轴上的百分比减少10
}
  还原按钮上的程序:

on(press){ //当鼠标按下的时候执行下面的程序
map_mc._xscale=100; //地图在x轴上的原大小
map_mc._yscale=100; //地图在y轴上的原大小
}
  在时间轴上的程序:(因为拖动的四地图,不用按钮,当然,其他的也可以写到时间轴上)

map_mc.onMouseDown = function () { //当鼠标按下的时候执行
startDrag(map_mc); //鼠标可以拖动地图
}
map_mc.onMouseUp = function () { //当鼠标弹起(不按时)
stopDrag(); //停止拖动
}

  最后,大家可能会发现,如果一直缩小,就会出现问题,后来反而变大了,拖动可以把地图拖出去,这些都不是我们想要的效果,我们下一次会专门讲解这个问题,在这先透露一下,我们下一节讲的是限制放大和缩小,移动的边界。以及内容会随着地图的放大缩小自动隐藏和显示等问题。另外,由于本人也不是很精通,如果哪儿出现错误或疏漏之处还请给与指正,欢迎大家一起交流探讨。

  不知道大家看了上面有什么感觉,也许对高手来说是太简单了,但对入门者来说应该还可以吧。我们一步一步来深入,以到达真正的电子地图。

    如果大家按上一篇教程做了,就会发现问题,那就是如果一直缩小,就会出现问题,后来反而变大了,拖动可以把地图拖出去,这些都不是我们想要的效果。今天我们来解决这些问题,另外还有信息的显示等一些内容。容会随着地图的放大缩小自动隐藏和显示等问题。

    好了,废话少说,下面我们来看看今天要学习的主要内容:

    限制地图的放大和缩小
    限制地图的边界
    内容的显示和隐藏
    两点间距离的测量

    主要用到的actionscript代码(除上节讲的以外)如下:

    _visible  一个布尔值,指示影片剪辑是否处于可见状态。True 为可见 false 为不可见。也可用0.1表示。

    Math.floor()   返回由参数 x 指定的数字或表达式的下限值。下限值是小于等于指定数字或表达式的最接近的整数。Math.floor(12.5)的值为12     Math.floor(-6.5)的值为 -7。

    Math.pow() 计算并返回 x 的 y 次幂。 Math.pow(x,y)表示x的y次方。

    Math.sqrt()    计算并返回指定数字的平方根。 Math.sqrt(16) 的值为4。

    lineStyle()  设置线条的样式。lineStyle(3,0xff0000,100)表示要画的线的粗细为3px,颜色为红色,透明度为100,不透明。

    moveTo ()    将当前绘画位置移动到 (x, y)。如果缺少任何一个参数,则此方法将失败,并且当前绘画位置不改变。

    lineTo ()      使用当前线条样式绘制一条从当前绘画位置到 (x, y) 的线条;当前绘画位置随后会设置为(x, y)。如果正在其中绘制的影片剪辑包含用 Flash 绘画工具创建的内容,则调用 lineTo() 方法将在该内容下面进行绘制。如果在对 moveTo() 进行任何调用之前调用了 lineTo(),则当前绘画位置默认为 (0, 0)。如果缺少任何一个参数,则此方法将失败,并且当前绘画位置不改变。

    createEmptyMovieClip ()   创建一个空影片剪辑作为现有影片剪辑的子级。此方法的行为类似于attachMovie() 方法,但是不必为新的影片剪辑提供外部链接标识符。新创建的空影片剪辑的注册点为左上角。如果缺少任意一个参数,则此方法将失败。

    createTextField ()         创建一个新的空文本字段作为在其上调用此方法的影片剪辑的子级。

    removeTextField ()        删除文本字段。只能对使用 MovieClip.createTextField() 创建的文本字段执行此操作。当调用此方法时,将删除文本字段。

  这次的基本上就这么多了,下面我们一步一步来实现今天的内容。

  1、我们要实现的效果就是一步一步实现数据显示和隐藏,首先我们来创建一个地图元件,命名为map_mc。双击进去编辑这个元件,再创建4个图层。一共5个图层,分别为显示大路,政府单位,中等路,单位,小路。

  在各自的图层分别写入各自的内容。分别命名为:map1_mc、map2_mc、map3_mc、map4_mc、map5_mc。(如右图)

  2、这步我们就要建功能按钮,我们把他们放到左面,我们先来建一个放大的元件,首先画一个放大的图标,按F8,建一个名为 fangda_mc的影片剪辑。双击进去编辑,如图所示。(如下图) 

  3、重复第2步的步骤,分别创建suoxiao_mc(缩小)、yuantu_mc(还原)、tuodong_mc(拖动)、celiang_mc(测量)。

  4、放大、缩小、拖动、还原上节多已经讲过了,但随着功能的增多,会越来越乱,所以我们把代码统一起来。并尽量把代码写到时间轴上,以便管理和修改。首先是初始化地图的代码和自定义函数:

//停止播放 
stop(); 
//放大,缩小,还原,拖动,测量的控制变量 
var chengxu ; 
//所有左边功能按钮的初始化函数(把左边功能按钮都停止在第一帧) 
function chushi(){ 
       _root.fangda_mc.gotoAndStop(1); 
       _root.suoxiao_mc.gotoAndStop(1); 
       _root.yuantu_mc.gotoAndStop(1); 
       _root.tuodong_mc.gotoAndStop(1); 
       _root.celiang_mc.gotoAndStop(1); 

//初始化地图函数(把先不要显示的都隐藏) 
function chushimap(){ 
       _root.map_mc.map2_mc._visible = 0; 
       _root.map_mc.map3_mc._visible = 0; 
       _root.map_mc.map4_mc._visible = 0; 
       _root.map_mc.map5_mc._visible = 0; 

//执行初始化地图函数(把先不要显示的都隐藏) 
chushimap(); 
//初始化功能提示函数 
function gongnengtishi(){ 
       _root.fangda_mc.fangda1._visible = 0; 
       _root.suoxiao_mc.suoxiao1._visible = 0; 
       _root.yuantu_mc.yuantu1._visible = 0; 
       _root.tuodong_mc.tuodong1._visible = 0; 
       _root.celiang_mc.celiang1._visible = 0; 

//执行初始化功能提示函数(把提示隐藏) 
gongnengtishi(); 
//地图区域限制函数(限制地图脱离屏幕) 
function xianzhi(){ 
       _root.onEnterFrame = function(){ 
       if(map_mc._x>320*map_mc._xscale/200){map_mc._x=320*map_mc._xscale/200} 
       if(map_mc._x<320-320*map_mc._xscale/200){map_mc._x=320-320*map_mc._xscale/200} 
       if(map_mc._y>240*map_mc._yscale/200){map_mc._y=240*map_mc._yscale/200} 
       if(map_mc._y<240-240*map_mc._yscale/200){map_mc._y=240-240*map_mc._yscale/200} 
       } 

//信息的显示和隐藏函数(放大显示和缩小隐藏) 
function xianshi(){ 
       var dx = _root.map_mc._xscale; 
       if(dx >= 120){ 
              _root.map_mc.map2_mc._visible = 1; 
              if(dx >= 140){ 
                     _root.map_mc.map3_mc._visible = 1; 
                     if(dx >= 160){ 
                            _root.map_mc.map4_mc._visible = 1; 
                            if(dx >= 180){ 
                                   _root.map_mc.map5_mc._visible = 1; 
                            }else{ 
                                   _root.map_mc.map5_mc._visible = 0; 
                            } 
                     }else{ 
                            _root.map_mc.map4_mc._visible = 0; 
                   _root.map_mc.map5_mc._visible = 0; 
                            } 
              }else{ 
                     _root.map_mc.map3_mc._visible = 0; 
               _root.map_mc.map4_mc._visible = 0; 
               _root.map_mc.map5_mc._visible = 0; 
           } 
    }else{chushimap();} 

//测量函数 
function celiang(){ 
var sx, sy; 
_root.map_mc.cl_mc.clear(); 
_root.map_mc.cl_mc.cl_txt.removeTextField(); 
sx = _root.map_mc._xmouse; 
sy = _root.map_mc._ymouse; 
draw = true; 
onMouseMove = function () { 
if (draw) { 
_root.map_mc.createEmptyMovieClip("cl_mc",1); 
_root.map_mc.cl_mc.lineStyle(1, 0x009900, 80); 
_root.map_mc.cl_mc.moveTo(sx, sy); 
_root.map_mc.cl_mc.lineTo(_root.map_mc.cl_mc._xmouse, _root.map_mc.cl_mc._ymouse); 
ttt = Math.floor(Math.sqrt(Math.pow(_root.map_mc.cl_mc._width, 2)+Math.pow(_root.map_mc.cl_mc._height, 2))); 
_root.map_mc.cl_mc.createTextField("cl_txt",1, _root.map_mc.cl_mc._xmouse, _root.map_mc.cl_mc._ymouse-22, 100, 22); 
_root.map_mc.cl_mc.cl_txt.text = ttt +" m"; 

}; 
onMouseUp = function () { 
draw = false; 

}; 
5、Map_mc功能的代码如下(map_mc 的所有功能):

_root.map_mc.onPress = function(){ 
       if(chengxu == "fangda"){ 
              if(_root.map_mc._xscale < 200){ 
              _root.map_mc._xscale += 10; 
              _root.map_mc._yscale += 10; 
              xianshi(); 
              } 
       } 
       else if(chengxu == "suoxiao"){ 
              if(_root.map_mc._xscale > 100){ 
              _root.map_mc._xscale -= 10; 
              _root.map_mc._yscale -= 10; 
              xianshi(); 
              } 
       } 
       else if(chengxu == "yuantu"){ 
              _root.map_mc._xscale = 100; 
              _root.map_mc._yscale = 100; 
              _root.map_mc._x = 160; 
              _root.map_mc._y = 120; 
              chushimap(); 
       } 
       else if(chengxu == "tuodong"){ 
              startDrag(_root.map_mc,false); 
              xianzhi(); 
       } 
       else if(chengxu == "celiang"){ 
              celiang(); 
       } 

_root.map_mc.onRelease = function(){ 
       stopDrag(); 

6、左边功能按钮的功能代码即功能提示代码: 

//left的功能代码 
fangda_mc.onPress = function(){ 
       chushi(); 
       _root.fangda_mc.gotoAndStop(2); 
       chengxu = "fangda"; 

suoxiao_mc.onPress = function(){ 
       chushi(); 
       _root.suoxiao_mc.gotoAndStop(2); 
       chengxu = "suoxiao"; 

yuantu_mc.onPress = function(){ 
       chushi(); 
       _root.yuantu_mc.gotoAndStop(2); 
       chengxu = "yuantu"; 

tuodong_mc.onPress = function(){ 
       chushi(); 
       _root.tuodong_mc.gotoAndStop(2); 
       chengxu = "tuodong"; 

celiang_mc.onPress = function(){ 
       chushi(); 
       _root.celiang_mc.gotoAndStop(2); 
       chengxu = "celiang"; 

//left的功能提示代码 
fangda_mc.onRollOver = function(){ 
       _root.fangda_mc.fangda1._visible = 1; 

suoxiao_mc.onRollOver = function(){ 
       _root.suoxiao_mc.suoxiao1._visible = 1; 

yuantu_mc.onRollOver = function(){ 
       _root.yuantu_mc.yuantu1._visible = 1; 

tuodong_mc.onRollOver = function(){ 
       _root.tuodong_mc.tuodong1._visible = 1; 

celiang_mc.onRollOver = function(){ 
       _root.celiang_mc.celiang1._visible = 1; 

fangda_mc.onRollOut = function(){ 
       _root.fangda_mc.fangda1._visible = 0; 

suoxiao_mc.onRollOut = function(){ 
       _root.suoxiao_mc.suoxiao1._visible = 0; 

yuantu_mc.onRollOut = function(){ 
       _root.yuantu_mc.yuantu1._visible = 0; 

tuodong_mc.onRollOut = function(){ 
       _root.tuodong_mc.tuodong1._visible = 0; 

celiang_mc.onRollOut = function(){ 
       _root.celiang_mc.celiang1._visible = 0; 

    到目前为止,我们实现了最基最本地图的功能,但还不能在实际中应用。大家知道地图的数据量是很大的,我们不可能都写到flash里。所以我们需要把所有的数据写到数据库里,动态的从数据库调你想要看到或查找的内容。这就是我们下节课的内容了。

  以上就是今天要学习的主要内容了,当然代码没有优化,为了大家能看的更直接。只是用最基本的代码实现了基本的功能。当然也难免有错误或遗漏的地方,还请大家给予指正。欢迎大家一起交流探讨。

时间: 2024-10-31 18:43:43

用Flash做电子地图实例讲解的相关文章

FLASH WEB制作实例讲解(帧标签的使用)

web 大家都知道,我们在做PS图片处理时,同样一种效果,并非只有一种方法能够实现,好比一道数学题有N种解法,同样,在制作FLASH WEB时,实现效果也不是千篇一律的.今天我们就来学学利用帧标签制作FLASH WEB 先看看这个简单的FLASH WEB: 很简单吧.. 看完演示,想必大家头脑会浮现好多种制作思路,的确..可以简单运用goto语句,可以调用外部swf,AS不错的话还可以全部由AS实现.. 我们今天用帧标签来实现..帧标签:帧标签即为帧添加的名称 因为我们这次教程主要讲的是关于帧标

XML辅助Flash互动电子地图标注地名

xml 在上一讲中我们介绍了制作一个最为简单的Flash电子地图的基本步骤(<Flash互动电子地图制作手册--入门实例>).但对于制作数据量较大的大型城市地图,直接在Flash环境中手动创建地名标注内容不仅工作量巨大,而且维护更新非常不便,这样就必须借助外部数据文件来辅助完成其中的地名标注工作.当然,调用数据文件的方法很多,我们这里介绍一种较为简单的,即在FLASH中调用外部XML数据文件. 既然涉及XML文件,就有必要对XML有一个初步的了解. 一.初识XML 1.什么是XML? XML

Dreamweaver 8 新功能图文实例讲解

dreamweaver 第一部分:Dreamweaver 8 新功能概述 和Macromedia Studio 8套件中其它软件一样,Dreamweaver 8也增加了许多让我们欣喜不已的新功能,比如更加先进的工作流程,重新设计的CSS工具,改良后的后台FTP,转换XML文件的工具,文档放大功能,插入Flash视频和FlashPaper,代码折叠功能等等. 今天我们先对Dreamweaver 8的新功能进行简单的介绍. 点击这里下载Dreamweaver 8 (59.7MB) 一.工作流程的改进

实例讲解长尾关键词怎么优化

一般公司里面SEO团队都有那么一个或者几个专门进行网站的长尾关键词优化工作,他们专门研究网站的长尾关键词以及它们的优化推广,笔者曾经就担任过这样的一个职位.索性在笔者操作期间,不仅把长尾关键词排名优化到前三,同时整个网站的权重也随之飙升.所以笔者一直觉得,其实网站不仅仅只有首页权重往下传达的效果,也有内容页面的权重也会给网站首页加权的效果.下面笔者还是主要用实例讲解对于长尾关键词的优化过程吧(首先申明一点,笔者操作的长尾关键词一开始都是没有排名的). 一.先列出长尾关键词优化单 长尾关键词优化单

Flash MX 2004实例制作视频教程(全集)

教程|视频教程 FIF小组隆重推出Flash MX 2004视频教程!该视频教程包括<超速入门系列>和<实例系列>.超速入门视频教程将通过实例讲解,帮助初学者快速掌握Flash基本知识.实例系列视频教程以精彩的实例制作过程,讲解Flash高级制作技巧. 本站将为您提供大量Photoshop, Flash, Dreamweaver, 3DS Max, Office等软件的视频教程,帮助您迅速掌握热门软件! Flash MX 视频 | Dreamweaver视频 | 3DS Max视频

小九SEO:实例讲解企业站内部优化

  一个优化比较到位的网站无不是"内外兼修",既做好了外部优化,又能很好的优化网站内部.笔者经常在A5看大家的文章,但是发现理论讲解的文章居多,很少有真正实际教大家如何做好站内优化的教程,笔者凭一年多的seo经验斗胆在这里写写如何做好站内优化,我这里拿一个企业站www.vdink.com的站内优化作为实例讲解,目前这个站的排名还算可以,还是需要更进一步的提升.本文如有对站内讲解不周到的地方,还望大家多多见谅,下面进入正文. 一.建立sitemap和robots.txt文件 拿到网站后,

ASP+XML编程实例讲解(1)

本文是一篇实例讲解的文章.作为一个普通的程序员,我深知,一个优秀的例程,对于正在学习编程的人是多么的有帮助.本文中使用的例程,是一个联系信息管理程序,我也是写来以方便自己和朋友们互相联系用的.但麻雀虽小,五脏俱全,相信对正在学习ASP+XML编程的朋友们,还是具备一定的参考价值的. 读者可以通过此实例,了解在ASP(Active Server Page)中如何操纵XML文件,并进行数据的各种处理,包括XML节点的建立.修改.删除和保存等等.文中涉及到的技术包括ASP,VBScript,DOM,X

Python使用urllib2获取网络资源实例讲解

      urllib2是Python的一个获取URLs(Uniform Resource Locators)的组件.他以urlopen函数的形式提供了一个非常简单的接口,下面我们用实例讲解他的使用方法 这是具有利用不同协议获取URLs的能力,他同样提供了一个比较复杂的接口来处理一般情况,例如:基础验证,cookies,代理和其他. 它们通过handlers和openers的对象提供. urllib2支持获取不同格式的URLs(在URL的":"前定义的字串,例如:"ftp&

PS产品修图技巧实例讲解

  下面为大家分享一篇PS产品修图技巧实例教程,教程主要是通过杯子的实例讲解向大家详述的,教程比较简单,适合新手来学习,希望能帮到大家! 首先找一个素材杯子(不管是什么都可以). 然后我们想办法把轮廓用钢笔抠出来,反正不管你想什么办法,把轮廓搞出来就可以 就是这样的东西,然后填充颜色,当然和杯子主体颜色一样 因为杯子表面有一点点的东西,所以我们要添加杂色 效果是这样的 感觉是不是杯子的雏形,O(∩_∩)O~萌萌哒 现在画个杯子口,颜色填深一点,稍微加点模糊 感觉很像一个杯子了 接下来我们做细节处