下一个更精彩：用flash做电子地图（1）

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

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

好了，废话少说，下面我们来看看今天要学习的主要内容：限制地图的放大和缩小；限制地图的边界；内容的显示和隐藏；两点间距离的测量。

主要用到的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里。所以我们需要把所有的数据写到数据库里，动态的从数据库调你想要看到或查找的内容。这就是我们下节课的内容了。

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

最新热门评论

·我不是李宇春
·1030丝瓜
·相识就是缘
·慢慢的放弃
·1030蔷薇
·1030葡萄
·1029梅花
·我是高子zndr1314
·酷☆宝宝
·111牡丹图
·勒克司飞机