校园电子地图的制作

文/范燕婷 李瑶婷 黄可苗 潘琪 孙宇梁

校园电子地图的制作

文/范燕婷 李瑶婷 黄可苗 潘琪 孙宇梁

近几年来校园内各类建筑变动较大，为方便广大师生，需要制作新的校园地图。本文以湖州师范学院为例，介绍了使用Flash软件设计制作校园电子地图的方法。所设计的地图界面美观、操作便捷，不仅具有地图的基本指示功能，而且有一段精彩的开场动画，对各个建筑还配有相应的文字介绍和风景图片。该电子地图在方便师生校园生活的同时，让师生感受到了校园的美丽，并起到了宣传学校的效果。

校园地图 电子地图 Flash

1 引言

近几年来，由于新设施的建立、旧设施的拆除、学院的搬迁等因素，校园内各类建筑变动较大，师生们对师院校园的认识需要及时更新。此外，对于新入学的大一新生，对于新环境的适应需要一个过程，陌生的校园总会带来一些不便，在他们入学时就需要一份地图来熟悉校园。因此，为了方便广大师生的学习和生活，制作一版新的师院地图十分必要的。

为了制作出一款界面美观、绿色环保、查询便捷、功能全面的地图，我们选择制作一款电子地图，并需具有以下功能：

（1）为了能够赢得广大师生的欢迎，所设计地图除了有基本的指示功能外，还需界面美观，色彩绚丽。

（2）对于一些景点应配有相应的文字介绍和风景图片，既能帮助同学识别地图上的建筑，还能让学生感受到师院校园的美丽。

（3）为了能够随时随地使用地图，所设计的电子地图应能够在电脑、手机等诸多电子设备上使用，并且操作便捷。

Flash是制作网络多媒体动画的专业软件,它使原本无声无息的网页能够轻而易举地变得有声有色。本项目用Flash制作电子地图，所制作出的地图是一种矢量化的电子地图，具有图形数据量小，精度高，交互性好等优点[1]。相对于专业的电子地图软件，Flash电子地图具有简单、快捷、成本低等优点，在对数据库要求不高、动态数据较少的情况下完全可行，且开发出来的地图美观生动、交互性强[2,3]。

2 制作过程

图1：画卷展开动画

图2：蝴蝶飞入动画

图3：初始界面

通过以下步骤完成电子地图的制作：

（1）收集校园里各个建筑物的位置信息，拍摄对应照片，手绘地图草图。

（2）使用Photoshop等绘图软件绘制所需的图片。

（3）使用Flash软件制作电子地图。这一步骤将在下一节中具体介绍。

（4）将设计好的地图生成可运行文件，在电脑、手机等电子设计上使用，修改所出现的错误，并通过同学的建议不断改进。

3 电子地图介绍及制作方法

以湖州师范学院为例，对电子地图的制作方法进行介绍。

3.1 开场动画

为了达到引人入胜的目的,在地图刚开始运行时设计有一段炫丽的开场动画，该动画包括了画卷展开和蝴蝶飞入两个特效。

画卷展开指的是通过用画卷展开的方式把地图逐渐展现出来（图1），这里利用了Flash软件中的遮罩功能，需要注意的是，右边的卷轴需单独放置在一个图层，对其制作运动的补间动画时需保证卷轴和画卷展开速度一致。

图4：西校区地图

图5：恩泽碑按钮元件

画卷完全展开后，有一个蝴蝶飞入的效果（图2）。预先做有一个蝴蝶抖动翅膀的影片剪辑，对其制作运动的补间动画即可产生蝴蝶抖动翅膀飞入的效果。蝴蝶飞入地图之后并不会消失，而是停留在地图上，当鼠标停留在上方时蝴蝶都抖动翅膀，并且通过点击鼠标左键可实现对蝴蝶的拖拽，通过移动蝴蝶实现对某一位置的标记。这是因为，在蝴蝶飞入地图之后，原先的影片剪辑被替换成同样蝴蝶图形的按钮元件，并且在按钮元件的第2帧（指针经过）放有原先的影片剪辑，这样就实现了鼠标停留在上方时蝴蝶都抖动翅膀。对按钮元件的动作脚本编辑程序：

on press{startDrag(butter fl y,true);}实现鼠标对其的拖拽功能。

3.2 初始界面

开场动画结束后，会进入初始界面（图3），此场景中有三个按钮，点击按钮可跳转到相应校区的地图。

3.3 具体地图

以西校区为例对地图功能进行介绍。图4为所制作的西校区地图，图中的每个建筑图形都是预先在元件库里制作好的按钮元件，例如，图5为恩泽碑所对应的按钮元件。在制作地图时，先在一个图层绘制好道路，再新建一个图层，从元件库中把各建筑对应的元件拖到相应位置上即可。

将建筑图形做成按钮元件的目的是为了实现点击建筑时可以出现该建筑对应的文字介绍和配图，起到了宣传学校的效果。例如，图6为某建筑的介绍和配图，点击左下角的“Go back”按钮可返回地图界面。

4 总结

在对校园各建筑进行取景、绘制草图之后，使用Flash软件设计制作了一款新版的校园电子地图。所设计的地图界面美观，操作便捷，不仅具有地图的基本指示功能，而且有一段精彩的开场动画，对各个建筑还配有相应的文字介绍和风景图片。该电子地图在方便师生校园生活的同时，让师生感受到了校园的美丽，并起到了宣传学校的效果。

图6：某建筑的介绍和配图

（通讯作者：孙宇梁）

[1]何正国,陈锦昌,陈亮.基于Flash的网络电子地图[J].北京工程图学学报,2003(03)：77-82.

[2]任福,蔡忠亮.基于Flash 技术的专业互动多媒体网络地图的构建[J].测绘信息与工程,2002,27(03)：14-16.

[3]张 可 可.Flash电 子 地 图 制 作 方法的研究[J].测绘与空间地理信,2013,36(05)：192-194.

作者单位 湖州师范学院理学院 浙江省湖州市 313000

湖州师范学院2016年度“大学生创新创业训练计划”科研项目(118)。