flash在有限的页面内制作大的地图 |
|
多个朋友因工作或 爱好的需求，询问如何用flash在有限的页面内制作大的地图，并链接、显示有关地点的信息，为此将我自己做的一个记录 遨游地点的flash地图略作精简、 批改，做了这个flash，并将 要害 部分做法介绍如下(原有的那个包含显示信息中的文字和采纳的 遨游照片，将近10 M，太大了， 无奈上传) 。 作品见下方( 许久没发帖了，不知该怎么发swf文件了，把考屏图放下面容易了解)
特色： 缩短地图以适应页面大小的局限，用放大镜来放大缩短了的地图，使能清楚的看到需求的细节 。 使用AS纠正一般遮罩制作放大镜错位较大的缺点，放大 部分在镜片的 核心(红十字处)没有错位 。用鼠标 通过、离开按钮的AS来操纵显示有关需求的信息(作品中鼠标在放大镜的 核心红十字处) 。 由于地图窗口大小同选的地图长宽要成比例，假如页面 合适，也 可以让信息同时在地图窗口的右边或下面显示，我自己做的记录 遨游地点的地图，文字信息是在右边显示，用组件加滚动条；照片用MC元件，位置在地图窗口内，循环播放，这样显示的信息量 可以十分大 。图一(信息显示另一做法)
本作品仅作为示意，1、各地的朋友千万不要在地理问题上拍砖哦 。2、一些 间隔太近的城市偷懒没设定信息显示链接(解决 步骤是缩短按钮的 反响面积) 。3、为便于上传，地图只放大了1倍，图片的品质也选定得很低 。4、同样，示意中惟独北京同时采纳显示1张图片 。 做法简介： 1、各图层拷屏如图2，为了容易看清做法，图层分得细了些 。 舞台(或地图窗口)大小同选的地图长宽要成比例(便于满舞台显示不变形)，我用的舞台是400*330，地图是800*660(这2个尺寸在下面帧动作中要用)，只放大1倍 。放大倍数可自己确定， 惟独在步骤7的帧动作AS中 改变相应数据即可 。 友情 揭示：假如地图窗口小于舞台，地图窗口的坐标应该是(0，0) 。图二：
2、新建电影剪辑元件(即MC)“地图元件”，把选定的地图图片导入，图片的X、Y坐标都是0，即左上角对着元件界面的 + 处 。 容易 步骤是选中图片， 打开属性面板，把X、Y 都改为0， 而后用Enter键确定 。 3、把做好的MC拖入场景“小图”图层中，在场景的属性中设定MC坐标为(0，0)，宽、高数值同舞台 统一， 而后用Enter键确定 。 4、把做好的MC再拖入场景“大图”图层中，MC在场景中的坐标也设定为(0，0)，选中“大图”图层中的MC，在属性中命名为aa， 5、做放大镜 新建MC元件“放大镜元件”，画圆，圆的左右上下均必须居中 。用剪切、粘贴到目前位置的 步骤，把圆的色块和边框分别放在2个图层中 。把镜片图层中的 色彩块转换为MC元件“镜片元件” 。在“放大镜元件” 当选中镜片MC，在属性中命名为ee 。 色彩块是做遮罩用的，在swf文件中看不到它，只不过在有 色彩的 部分能看到被遮蔽的“大图”图层中的画面，所以 色彩任意 。镜框在swf文件中是看得到的， 色彩、式样自定 。再添加1个图层放十字线，同镜框一样在swf文件中是看得到的 。用“极细”线 。 友情 揭示：假如工作中需求比例尺，也可 通过计算，把十字线设定为比例尺，计算法如下： 每格标注的 间隔=每格对应的地图上两点间实际 间隔*每格像素/地图上该 间隔的像素 。 实际操作， 可以测定在地图上已知 间隔的水平(或竖直)的两点中间的像素值，计算出1个像素在地图上是多少公里，再确定镜片上每格几个像素，标定比例尺 。 6、把“放大镜元件”MC拖入场景放大镜图层 。选中放大镜MC，命名为ff 。 7、AS 回忆一下，上面已经分别为3个MC命名了，命名应该同下面AS中 统一，不能搞错 。 场景中大地图MC命名为aa， 场景中放大镜MC，命名为ff 。 放大镜元件中放大镜镜片MC，命名为ee， 在AS图层选中帧，写如下帧动作 _root.onEnterFrame = function() { Mouse.hide();// 潜藏鼠标 startDrag("_root.ff", true);// 操纵望远镜ff随鼠标移动 _root.aa.setMask(_root.ff.ee) //用ff中的ee遮蔽aa _root.aa._x=_root._xmouse*(1-80/40);//用鼠标坐标操纵大画面x坐标尾随 _root.aa._y=_root._ymouse*(1-66/33);//用鼠标坐标操纵大画面y坐标尾随 } 由于放大镜中有看得见与看不见的两种图形，所以用AS脚本操纵遮罩， _root.aa.setMask(_root.ff.ee) 即用ff中的ee遮蔽aa——括号内的是遮蔽MC，前边的是被遮蔽MC 。 用鼠标坐标操纵大画面尾随 _root.aa._x=_root._xmouse*(1-800/400);//用鼠标坐标操纵大画面x坐标尾随 _root.aa._y=_root._ymouse*(1-660/330);//用鼠标坐标操纵大画面y坐标尾随 按我的计算，要 维持不错位，放大图片aa的x坐标应该是：(1—放大倍数)乘以鼠标的x坐标值(同样，y坐标也是这么计算)，现在画面的放大倍数是800/400， 因此 _root.aa._x=_root._xmouse*(1-800/400); 800是本作品的地图宽，400是flash舞台宽度( 可以约分，怕 注明太 麻烦了)，制作时要依据自己作品的地图和flash的实际像素大小更改 。 同样，_root._ymouse*(1-660/330)中也这样 。 8、在“地图元件”中添加按钮，在“地图元件”中添加1个图层放按钮 。分别选中每一个按钮，写上AS 。以“北京”为例，AS如下： on (rollOver) { _root.gotoAndStop(2); } on (rollOut) { _root.gotoAndStop(1); } 由于按键设在MC地图元件中，却是操纵场景的动作，所以在AS中加了_root.，on (rollOver)时， gotoAndStop哪一帧，就在那帧上制作需求的信息 。本作品北京的信息制作在第2帧， 因此gotoAndStop(2)，共在31个城市制作了信息示意 。on (rollOut)都是回到第1帧 。 友情 揭示； 按上面的操纵地图移动的 步骤，鼠标要停留在某一个特定的点上(例如本例中闪动的红圆)，实际上不得不是在flash中的一个特定的位置上 。 因此， 惟独避开这个位置，尽 可以 随便 调度需求显示的信息的位置、大小及数量 。本例中惟独1个拉萨的信息因被遮挡放右边 。 假如页面 合适，也 可以让文字、图片信息同时在地图窗口之外的右边或下面显示，但要在左边、上边显示，则地图坐标的计算会复杂许多，没有必要 。 |
