flash地图的制作教程

1、关于flash，大家或多或少都有所了解。比如上网，到处都能看到flash的存在。flash的应用也是五花八门。今天我们讲的是用flash做电子地图。现在在网上随处都能找到电子地图，其中大部分都是java来开发的，其实用flash也可以做电子地图。且界面还比较漂亮。现在网上已经有用flash做的电子地图了。且呈发展趋势。象"中国电子地图网"里面的地图就是用flash做的。还有九江，五邑等地图也都是用flash来完成的。现在我们就来学习用flash做电子地图，首先要了解电子地图的功能，最主要的功能就是方便你查找，还有就是可以有选择性的显示。比如我到一个城市，我要去一个地方，如果

2、有一张地图，你需要一点一点的看，还要找怎么去。而电子地图就不一样了，你可以搜索，就直接标出那个地方，还可以告诉你几路公交车到，附近有什么宾馆，饭店等等。所以，电子地图一般要具备的功能是:放大，缩小，移动，地点链接(相信介绍)，搜索，等一系列功能。这么大的数据量是不肯保存在flash里的，从技术的层面来说，就是要做到数据和图层的动态载入，实现数据的模糊，智能，区域查询等功能。废话少说，首先我们来认识flash的mc(影片剪辑)，已经做电子地图所用到的几个属性。如下：_x /相对于父级影片剪辑的本地坐标的 x 坐标。如果影片剪辑在主时间轴中，则其坐标系统将舞台的左 上

3、角作为 (0, 0)。 _y /相对于父级影片剪辑的本地坐标的 y 坐标。如果影片剪辑在主时间轴中，则其坐标系统将舞台的左 上角作为 (0, 0)。 _width /影片剪辑的宽度，以像素为单位。 _height /影片剪辑的高度，以像素为单位。 _xscale /确定从影片剪辑注册点开始应用的影片剪辑水平缩放比例。默认注册点为 (0,0)。 _yscale /设置从影片剪辑注册点开始应用的影片剪辑垂直缩放比例。默认注册点为 (0,0)。 利用鼠标和键盘来完成地图的

4、放大、缩小、拖动等功能： startDrag 函数 /执行 startDrag() 操作后，影片剪辑将保持可拖动状态。 stopDrag 函数 /和startDrag是一对函数，用于停止当前的拖动操作。基本上就这么多了，一会遇到那个再详细讲。下面我们一步一步来做电子地图：一、首先我们打开flash新建一个影片，大小设为宽：440px 高：316。（根据你的需要来设定）。二、然后倒入一张你准备好的地图，我的是一张880632的（这样放大时效果会好很多），导入到库中。然后打开库，选择地图拖入到场景中，转换成影片剪辑，注册点选则中央，这样放

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

6、/当鼠标按下的时候执行下面的程序 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)

7、0;/当鼠标按下的时候执行下面的程序 map_mc._xscale=100; /地图在x轴上的原大小 map_mc._yscale=100; /地图在y轴上的原大小 在时间轴上的程序：（因为拖动的四地图，不用按钮，当然，其他的也可以写到时间轴上）map_mc.onMouseDown = function ()  /当鼠标按下的时候执行 startDrag(map_mc); /鼠标可以拖动地图 map_mc.onMouseUp = function ()  /当鼠标弹

8、起（不按时） stopDrag(); /停止拖动 最后，大家可能会发现，如果一直缩小，就会出现问题，后来反而变大了，拖动可以把地图拖出去，这些都不是我们想要的效果，我们下一次会专门讲解这个问题，在这先透露一下，我们下一节讲的是限制放大和缩小，移动的边界。以及内容会随着地图的放大缩小自动隐藏和显示等问题。另外，由于本人也不是很精通，如果哪儿出现错误或疏漏之处还请给与指正，欢迎大家一起交流探讨。不知道大家看了上一篇有什么感觉，也许对高手来说是太简单了，但对入门者来说应该还可以吧。我们一步一步来深入，以到达真正的电子地图。     如果大家按上一篇教

9、程做了，就会发现问题，那就是如果一直缩小，就会出现问题，后来反而变大了，拖动可以把地图拖出去，这些都不是我们想要的效果。今天我们来解决这些问题，另外还有信息的显示等一些内容。容会随着地图的放大缩小自动隐藏和显示等问题。     好了，废话少说，下面我们来看看今天要学习的主要内容：     限制地图的放大和缩小     限制地图的边界     内容的显示和隐藏     两点间距离的测量  

10、   主要用到的actionscript代码（除上节讲的以外）如下：     _visible  一个布尔值，指示影片剪辑是否处于可见状态。True 为可见 false 为不可见。也可用0.1表示。     Math.floor()   返回由参数 x 指定的数字或表达式的下限值。下限值是小于等于指定数字或表达式的最接近 的整数。Math.floor(12.5)的值为12 &#

11、160;   Math.floor(-6.5)的值为 -7。     Math.pow（） 计算并返回 x 的 y 次幂。 Math.pow（x，y）表示x的y次方。     Math.sqrt()    计算并返回指定数字的平方根。 Math.sqrt(16) 的值为4。     lineStyle（） &

12、#160;设置线条的样式。lineStyle（3，0xff0000，100）表示要画的线的粗细为3px，颜色为红色，                  透明度为100，不透明。     moveTo ()    将当前绘画位置移动到 (x, y)。如果缺少任何一个参数，则此方法将失败，并且当前绘画位置 不改变。

13、60;   lineTo ()      使用当前线条样式绘制一条从当前绘画位置到 (x, y) 的线条；当前绘画位置随后会设置为  (x, y)。如果正在其中绘制的影片剪辑包含用 Flash 绘画工具创建的内容，则调用 lineTo()  方法将在该内容下面进行绘制。如果在对 moveTo() 进行任何调用之前调用了 lineTo()，则当 前绘画位置默认为 (0,

14、 0)。如果缺少任何一个参数，则此方法将失败，并且当前绘画位置不改 变。     createEmptyMovieClip ()   创建一个空影片剪辑作为现有影片剪辑的子级。此方法的行为类似于  attachMovie() 方法，但是不必为新的影片剪辑提供外部链接标识符。新 创建的空影片剪辑的注册点为左上角。如果缺少任意一个参数，则此方法将失败。     createTextField ()   

15、0;     创建一个新的空文本字段作为在其上调用此方法的影片剪辑的子级。     removeTextField ()        删除文本字段。只能对使用 MovieClip.createTextField() 创建的文本字段 执行此操作。当调用此方法时，将删除文本字段。 这次的基本上就这么多了，下面我们一步一步来实现今天的内容。 1、我们要实现的效果就是一步一步实现数据显示和隐藏，首先我们

16、来创建一个地图元件，命名为map_mc。双击进去编辑这个元件，再创建4个图层。一共5个图层，分别为显示大路，政府单位，中等路，单位，小路。 在各自的图层分别写入各自的内容。分别命名为：map1_mc、map2_mc、map3_mc、map4_mc、map5_mc。（如右图） 2、这步我们就要建功能按钮，我们把他们放到左面，我们先来建一个放大的元件，首先画一个放大的图标，按F8，建一个名为 fangda_mc的影片剪辑。双击进去编辑，如图所示。（如下图）   3、重复第2步的步骤，分别创建suoxiao_mc(缩小)、yuantu_mc(还原)、tuodo

17、ng_mc(拖动)、celiang_mc(测量)。4、放大、缩小、拖动、还原上节多已经讲过了，但随着功能的增多，会越来越乱，所以我们把代码统一起来。并尽量把代码写到时间轴上，以便管理和修改。首先是初始化地图的代码和自定义函数： /停止播放  stop();  /放大，缩小，还原，拖动，测量的控制变量  var chengxu   /所有左边功能按钮的初始化函数（把左边功能按钮都停止在第一帧）  function chushi()        &

18、#160;_root.fangda_mc.gotoAndStop(1);         _root.suoxiao_mc.gotoAndStop(1);         _root.yuantu_mc.gotoAndStop(1);         _root.tuodong_mc.gotoAndStop(1);    

19、60; le = 0;    /执行初始化地图函数（把先不要显示的都隐藏）  chushimap();  /初始化功能提示函数  function gongnengtishi()         _root.fangda_mc.fangda1._visible = 0;         _root.suoxiao_mc.suox

20、iao1._visible = 0;         _root.yuantu_mc.yuantu1._visible = 0;         _root.tuodong_mc.tuodong1._visible = 0;         _root.celiang_mc.celiang1._vi

21、sible = 0;    /执行初始化功能提示函数（把提示隐藏）  gongnengtishi();  /地图区域限制函数（限制地图脱离屏幕）  function xianzhi()         _root.onEnterFrame = function()         if(map_mc._x>320*map_mc._x

22、scale/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 

23、60;      if(map_mc._y<240-240*map_mc._yscale/200)map_mc._y=240-240*map_mc._yscale/200             /信息的显示和隐藏函数（放大显示和缩小隐藏）  function xianshi()         var dx =

24、 _root.map_mc._xscale;         if(dx >= 120)                _root.map_mc.map2_mc._visible = 1;           &#

25、160;    if(dx >= 140)                       _root.map_mc.map3_mc._visible = 1;            &#

26、160;          if(dx >= 160)                              _root.map_mc.map4_mc._visible 

27、= 1;                              if(dx >= 180)                

28、;                     _root.map_mc.map5_mc._visible = 1;                      &#

29、160;       else                                     _root.map_mc.map5_mc._visible

30、0;= 0;                                                  

31、;   else                              _root.map_mc.map4_mc._visible = 0;          

32、60;          _root.map_mc.map5_mc._visible = 0;                                  

33、;            else                       _root.map_mc.map3_mc._visible = 0;        

34、60;        _root.map_mc.map4_mc._visible = 0;                 _root.map_mc.map5_mc._visible = 0;           

35、60;       elsechushimap();    /测量函数  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._ymo

36、use;  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

37、_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._

38、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

39、.map_mc.onPress = function()         if(chengxu = "fangda")                if(_root.map_mc._xscale < 200)       

40、         _root.map_mc._xscale += 10;                _root.map_mc._yscale += 10;              &#

41、160; xianshi();                                  else if(chengxu = "suoxiao")       &

42、#160;        if(_root.map_mc._xscale > 100)                _root.map_mc._xscale -= 10;             

43、60;  _root.map_mc._yscale -= 10;                xianshi();                          

44、       else if(chengxu = "yuantu")                _root.map_mc._xscale = 100;              

45、;  _root.map_mc._yscale = 100;                _root.map_mc._x = 160;                _root.map_mc._y = 120;

46、0;               chushimap();                  else if(chengxu = "tuodong")         &

47、#160;      startDrag(_root.map_mc,false);                xianzhi();                  else if(chengxu =

48、60;"celiang")                celiang();             _root.map_mc.onRelease = function()         stopDrag();  &

49、#160;6、左边功能按钮的功能代码即功能提示代码： /left的功能代码  fangda_mc.onPress = function()         chushi();         _root.fangda_mc.gotoAndStop(2);         chengxu = &quo

50、t;fangda"    suoxiao_mc.onPress = function()         chushi();         _root.suoxiao_mc.gotoAndStop(2);         chengxu = "suoxiao"

51、0;   yuantu_mc.onPress = function()         chushi();         _root.yuantu_mc.gotoAndStop(2);         chengxu = "yuantu"    tuodong_mc.

52、onPress = function()         chushi();         _root.tuodong_mc.gotoAndStop(2);         chengxu = "tuodong"    celiang_mc.onPress = function()         chushi();         _root.celiang_mc.gotoAndStop(2);         chengxu = "celiang"    /left的功能提示代码  fangda