flash as 实用的地图放大及信息显示做法

实用的地图放大及信息显示做法

多个朋友因工作或爱好的需要,询问如何用flash在有限的页面内制作大的地图,并链接、显示有关地点的信息,为此将我自己做的一个记录旅游地点的flash地图略作精简、修改,做了这个flash,并将关键部分做法介绍如下(原有的那个包括显示信息中的文字和采用的旅游照片,将近10 M,太大了,无法上传)。

作品见下方(好久没发帖了,不知该怎么发swf文件了,把考屏图放下面方便了解)

 

源文件:地图放大信息显示.rar

特点:
缩小地图以适应页面大小的局限,用放大镜来放大缩小了的地图,使能清晰的看到需要的细节。使用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个拉萨的信息因被遮挡放右边。

如果页面合适,也可以让文字、图片信息同时在地图窗口之外的右边或下面显示,但要在左边、上边显示,则地图坐标的计算会复杂许多,没有必要。

时间: 2024-10-03 08:09:16

flash as 实用的地图放大及信息显示做法的相关文章

Flash MX实用编程百例解读一

编程 前些日子在网上下了<Flash MX 实用编程百例>,打开源代码看了一下,总的感觉例子还行,但代码太老,有的还是flash 4格式的,遂想将这些代码改编一下,一则也是一种学习,二则趁机将自己已有的知识梳理一下. Flash 实用编程百例解读一----透明度 放大及缩小 高品质和低品质 可见性 步骤 1.打开Flash MX 2004,新建文档,设置文档大小为300*300像素2.新建一按钮,将按钮拖至舞台上,复制6份,共产生7个按钮实例,并将它们排列好.3.用文字工具和线条工具在这些按钮

Flash制作实用别致的导航菜单

菜单|导航 演示效果: 点击这里下载源文件 当我们点击一个按钮时,希望保持它的激活样式,让用户知道现在是处于哪个模块,并且在点击其他按钮后返回未激活的样式.有兴趣的跟我通过简单的AS代码来实现这样的效果. 1.首先在时间轴上新建一层,命名为:action;在第一帧上书写如下代码: lastMC = index;//记录当前激活按钮.function hideButton(ID) {lastMC._visible = true;onEnterFrame = function () {if (las

jquery仿flash 个性实用的新闻图片联动标题效果

说明:一轮结束后从头开始. 图片说明一 图片说明二 图片说明三 图片说明四 图片说明五 图片说明六 图片说明七 图片说明八 图片说明九 图片说明十

Android平台全新Ui定制 百度云Rom刷机体验

百度云Rom来袭 Android系统以其高度的开放性受到了众多玩机用户的青睐,而也正因为此,Android平台上有着众多的第三方Rom.但是很多个人Rom都是在成熟Rom的基础上进行修改的,真正做到全新Ui定制,全新功能整合的Rom只有大厂团队才能完成,比如今天要体验的--百度云Rom. 在百度云Rom支持刷入的手机中,小编选择了一款配置相对较低的机型作为体验对象,这样可以了解百度云Rom对于低端配置的支持情况. 手机型号:华为 C8812 操作系统:Android OS 4.0 CPU型号:高

制作简单实用的FLASH导航菜单

菜单     相信大家都对现在的FLASH导航情有独钟,但是对一些的FLASH特效望尘莫及(我就是其中一位:),特别是复杂的AS动作脚本.不过,通过自己的学习发现,一些很难理解的程序可以通过简单的AS动作脚本表现出同样的效果,今天我就来讲一个例子,可以让一些和我一样的FLASH的初学者(懂基础AS动作脚本程序的FLASHER)!希望大家有所体会,有所收获(在下献丑了-_-!) 预览: 先来说说知名的<闪客帝国>的导航栏: 这种效果的导航栏在国内国外的例子很多的,很实用!只不过他们表现的形式不一

简单实用的FLASH导航菜单制作

菜单|导航 相信大家都对现在的FLASH导航情有独钟,但是对一些的FLASH特效望尘莫及(我就是其中一位:),特别是复杂的AS动作脚本.不过,通过自己的学习发现,一些很难理解的程序可以通过简单的AS动作脚本表现出同样的效果,今天我就来讲一个例子,可以让一些和我一样的FLASH的初学者(懂基础AS动作脚本程序的FLASHER)!希望大家有所体会,有所收获. 预览: 源文件下载 先来说说知名的<闪客帝国>的导航栏: 这种效果的导航栏在国内国外的例子很多的,很实用!只不过他们表现的形式不一样罢了,比

Flash实用技巧:动感星形遮罩

动感|技巧 本例的这个效果做起来就比较简单,我们只需要做的是把两个图片放在不同的图层,然后,上面的图片做一遮罩层,遮罩层最终能覆盖上面整个图片,图像切换完成了.     具体做法如下:     1.新建一FLASH文档,创建三个图层.     2.导入两个图片(最好大小一样),分别放在下面的两个图层,让上面图片刚好能覆盖下面的图片.     3.在第三层里画一小正方形,转换为元件MC,命名为MASKFIELD,实例名一样.     4.双击MASKFIELD,进入编辑状态,让元件的原点跟正方形的

Flash 实用编程百例解读

编程 前言:网络中的swf影片是可以实现边下载边播放的,由于受到当前网络传输的制约,对于大容量的影片,这种实时播放并不理想.为避免受众尴尬的等待,flash制作人员往往设计一个加载(loading)的画面,等影片的全部字节下载到本地后再播放,从而保证影片的播放质量.本文将介绍一种较为标准的loading制作方法. 步骤: 1.打开Flash MX 2004,选择矩形工具,在主场景中画出下一个只有边框有矩形,本例该矩形大小为350*16像素. 2.再在主场景中仍用矩形工具画出一个只有填充而无边框的

Flash 实用编程解读

编程 简介:    网络中的swf影片是可以实现边下载边播放的,由于受到当前网络传输的制约,对于大容量的影片,这种实时播放并不理想.为避免受众尴尬的等待,flash制作人员往往设计一个加载(loading)的画面,等影片的全部字节下载到本地后再播放,从而保证影片的播放质量. 步骤:1.打开Flash MX 2004,选择矩形工具,在主场景中画出下一个只有边框有矩形,本例该矩形大小为350*16像素.2.再在主场景中仍用矩形工具画出一个只有填充而无边框的矩形,并按F8键将其转换为影片剪辑(注:其注