文章搜索:
打开支付宝首页搜索“510617664”,即可领红包
  首页--> 计算机--> FLASH教程
 
用flash做电子地图
http://www.xxqqss.com 学习轻松网 点击量:4247
 
 不知道大家看了上一篇有什么感觉,也许对高手来说是太简单了,但对入门者来说应该还可以吧。我们一步一步来深入,以到达真正的电子地图。
    如果大家按上一篇教程做了,就会发现问题,那就是如果一直缩小,就会出现问题,后来反而变大了,拖动可以把地图拖出去,这些都不是我们想要的效果。今天我们来解决这些问题,另外还有信息的显示等一些内容。容会随着地图的放大缩小自动隐藏和显示等问题。
    好了,废话少说,下面我们来看看今天要学习的主要内容:
    限制地图的放大和缩小
    限制地图的边界
    内容的显示和隐藏
    两点间距离的测量
    主要用到的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里。所以我们需要把所有的数据写到数据库里,动态的从数据库调你想要看到或查找的内容。这就是我们下节课的内容了。
以上就是今天要学习的主要内容了,当然代码没有优化,为了大家能看的更直接。只是用最基本的代码实现了基本的功能。当然也难免有错误或遗漏的地方,还请大家给予指正。欢迎大家一起交流探讨。

打印】 【关闭
免责声明 :本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请发送fiyeadwyv@163.com
最热门点击排行
 
版权所有 2006-2021:学习轻松网 Copyright http://www.xxqqss.com All rights reserved 浙ICP备14013707号-1
广告联系电话: 13958357030 联系QQ:9792414 工具条下载