第１０卷第２期 ２０ｌ０年６月 兰州石化职业技术学院学报 Ｊｏｕｒｎａｌ ｏｆ Ｌａｎｚｈｏｕ Ｐｅｔｒｏｃｈｅｍｉｃａｌ Ｃｏｌｌｅｇｅ ｏｆ Ｔｅｃｈｎｏｌｏｇｙ Ｖｏ１．１０ Ｎｏ．２ Ｊｕｎ．，２０１０ 文章编号：１６７１—４０６７（２０１０）０２－００２６－０３ 基于Ｈａｓｈ Ｗｅｂ的校园环境数字化平台的设计与实现 宁静涛 ，苏达新 （１．兰州石化职业技术学院印刷出版工程系，甘肃兰州７３００６０；２．兰州石化公司物资采购管理部，甘肃兰州７３００６０） 摘要：为了满足学生和家长对学校了解的需求，研究基于Ｆｌａｓｈ Ｗｅｂ技术的校园环境 数字化平台的规划设计和制作方法，成功的实现了一个具有丰富的动画效果、视觉冲击 力和人机交互功能的数字化平台，使得学校场景的相关信息、办学硬件条件及校园文化 氛围通过互联网得以展示，提高了学校服务于社会的水平。 关键词：Ｆｌａｓｈ Ｗｅｂ；校园环境；数字化平台；交互式动画 中图分类号：ＴＰ３９３．１ 文献标识码：Ａ 创建基于Ｆｌａｓｈ的校园展示使得想了解学校场 到其余的两个模块。校园外部景观介绍模块的功能 景的相关信息和办学硬件条件的学生及家长通过网 是通过实景图片展示校园真实的外部景观，是用户 络远程感受校园文化氛围。在众多的开发技术中 用了对各个景观的感性认识，同时利用文字介绍相 Ｆｌａｓｈ采用矢量动画的概念，动画中所有的图形基于 应建筑物的功能使用户可以对校园的认识从感性上 矢量的方式，大大缩小了文件量，使得漂亮的动画在 升至理性。校园内部设施展示模块的功能在于通过 网络上也能相对流畅地运行…。而且，Ｆｌａｓｈ Ｐｌａｙｅｒ 实景图片展示学校的教学、生产实训和生活环境，使 几乎无处不在，一些版本被安装的比率占到了所有 用户可以直观的体验到学校的文化氛围。 Ｗｅｂ浏览器的９７％以上【２ Ｊ。笔者选择使用Ｆｌａｓｈ技 术制作一个具有较为出色的视觉效果及兼容性的校 园展示，以期更好的服务学生及家长，同时，可以将 该技术推广。 １ 数字平台的规划与设计 １．１功能模块的划分 校园展示的首要功能是可以让人们通过互联网 图１ 校园展示各功能模块及其导航关系图 上直观的了解学校教学、生活环境和文化氛围，而人 １．２校园展示的交互式动画效果创意 们对事物的认识规律是从宏观到微观，从外部到内 对校园效果图、平面图及导航模块采用相应图 部。结合以上人们对事物认识的规律针对平台的主 片平铺为起始视觉效果，当鼠标移动到某张图片上 要功能将基于Ｆｌａｓｈ的校园展示的功能模块划分为 面可以自动放大该图片便于用户观察的动画效果。 三个主要模块，依次是：校园效果图、平面图及导航 对于校园外部景观介绍模块采用一个画廊展示墙的 模块；校园外部景观介绍模块；校园内部设施展示模 主效果，当鼠标左右移动图片可以平面位移虚拟目 块。各功能模块之间的导航关系如图１所示。校园 光平移的动画效果，当鼠标点击某图片时可以翻转 效果图、平面图及导航模块功能是展示校园全景地 出一个小木牌上面有文字介绍该图片对应的景观。 图，使用户可以对校园环境有个总体的感性认识，结 校园内部设施展示模块采用一个镜头的主效果，将 合效果图和平面图的优势是用户能够体验所处场景 镜头的周围分成几个区域，没有区域的外圆周排列 的现场真实环境 Ｊ，并且通过该模块可以导航跳转 有一些介绍相应区域的小图片，当鼠标点击相应小 图片的时候可以在镜头的中心放大相应图片。最终 收稿日期：２０１０—０３—２１ 视觉效果如图２所示。 基金项目：兰州石化职业技术学院科研项目（Ｋ０９一ｌ１） 作者简介：宁静涛（１９７７一），男，甘肃兰州人，讲师，硕士 宁静涛，苏达新．基于Ｆｌａｓｈ Ｗｅｂ的校园环境数字化平台的设计与实现 ・２７－ 图２ 校园内部设施展示模块视觉效果 ２数字平台的制作 模块的制作主要包括：基本界面绘制、影片剪辑 制作、音效的插入、动画效果制作以及交互的实 现 Ｊ。首先，要在Ｆｌａｓｈ ＣＳ４中为每个文件新建一 个ｎａｓｈ文件，由于Ａｃｔｉｏｎ Ｓｃｒｉｐｔ是Ｆｌａｓｈ内置的脚 本语言，通过其强大功能，可以制造出各种奇妙的动 画效果和网络应用程序 ，并且Ａｃｔｉｏｎ Ｓｃｒｉｐｔ２．０相 对Ａｃｔｉｏｎ Ｓｃｒｉｐｔ３．０ 而言比较简单，所以在此处将 文件的类型设置为Ａｃｔｉｏｎ Ｓｃｒｉｐｔ２．０类型。根据平 台的动画效果设计创意为每个模块绘制基本工作界 面形成各模块的主要显示框架。然后，将图片素材 导入到各模块的Ｆｌａｓｈ文件中，并制成影片剪辑，便 于后期通过Ａｃｔｉｏｎ Ｓｃｉｒｐ程序的编写实现复杂的动 画效果和人机交互。为了便于对音效的控制应该将 每个音频片段插入到的图层中，当然最佳的控 制方案是在声音属性面板中将声音的链接属性设置 成为Ａｃｔｉｏｎ Ｓｃｒｉｐｔ导出、在帧１中导出，同时设置其 标识符用代码进行控制。 ２．１ 用Ａｃｔｉｏｎ Ｓｃｒｉｐｔ实现可交互动画效果 为了实现该人机交互动画效果首先，将展板绘制成 为影片剪辑；然后，并拖放到场景中；最后，在影片剪 辑中添加代码。假设场景的尺寸为７５０ ７５０像素， 展板影片剪辑的尺寸为２３００ ４７０像素，并且将影 片剪辑拖入场景的位置Ｙ轴为一７７５，Ｙ轴为２００。‘ 首先，需要程序判断鼠标的响应范围为ｘ轴：０— ７４９，Ｙ轴：０—６６９。如果在响应范围内，通过鼠标现 在所在的位置计算出一个基准值变量ｂｘ，利用基准 值减去影片剪辑的ｘ轴的位置定义一变量ｓｘ来给 出展板的滚动方向与速度，要求距离中心点越远越 快，随着滚动的逐渐降速，由于此时算出的ｓｘ的值 较大使画面产生跳动感，为了提高视觉效果接下来 需要对ｓｘ处以一个正降低来调节滚动速度，将其结 果定义为步进值变量ｍＸ，最后，对步进值变量进行 判断，如果步进值的绝对值大于一，就在影片剪辑当 前的ｘ轴位置值加步进值作为新的ｘ轴位置。以 上的功能均需要Ａｃｔｉｏｎ Ｓｃｒｉｐｔ，用ｅｎｔｅｒＦｒａｍｅ帧的刷 新将时间维度引人到程序逻辑控制中实现一个循环 结构的方法，具体伪代码如下所示： ｏｎＣｌｉｐＥｖｅｎｔ（ｅｎｔｅｒＦｒａｍｅ） ／／以影片剪 辑的帧频连续触发该动作 ｛ ｉｆ（ｒｏｏｔ．一ｙｍｏｕｓｅ＞２００ ａｎｄ—ｒｏｏｔ．一ｙｍｏｕｓｅ＜ ６５５） ／／判断鼠标的相应范围 ｛ ｂＸ＝一ｒｏｏｔ．一一ｘｍｏｕｓｅ／／Ｏ．４９＋８０； ／／定 义基准值 ｓＸ：ｂＸ一＿ｘ； ／／定义移动方向与速度 ｍＸ：ｓＸ／５７； ／／计算步进值 ｉｆ（Ｍａｔｈ．ａｂｓ（ｍＸ）＞１） ／／判断步进值 是否大于１ ｛ ＿ｘ＋＝ｍｏｖｅＸ；／／当步进值大于１时，让影片 剪辑在ｘ轴方向移动一个步进值 ｝ ｝ ｝ ２．２用文档类集中控制导航器 Ａｃｔｉｏｎ Ｓｃｒｉｐｔ ２．０是一种面向对象的语言，基于 面向对象的思想结合Ａｃｔｉｏｎ Ｓｃｒｉｐｔ语法及功能使用 外部文档类，可以提高代码的健壮性、可重用性，使 校园展示具有较好的扩展性，实现部分的松耦合，便 于对整体校园展示平台的集中管理。首先，需要新 建一个文档类文件，将其命名为Ｎａｖｉｇａｔｉｏｎ．ａｓ，将具 体的导航目标文件的ＵＲＬ作为导航器类的私有属 性进行保存，然后通过编写具体的公有方法来实现 相应的导航功能。假设将所有的功能模块和导航器 的文档类文件放在同一目录下，导航器文档类的伪 代码如下所示： ｃｌａｓｓ Ｎａｖｉｇａｔｉｏｎ ／／定义导航类 ｛ ＭｏｄｕｌｅＯｎｅ：Ｓｔｉｒｎｇ：“ｍａｉｎ．ｓｗｆ”； ／／定义效 果图、平面图及导航模块的ＵＲＬ ＭｏｄｕｌｅＴｗｏ：Ｓｔｒｉｎｇ “ｏｕｔｅｒ．ｓｗｆ”； ／／定义校 园外部景观介绍模块的ＵＲＬ ＭｏｄｕｌｅＴｈｒｅｅ：Ｓｔｒｉｎｇ “Ｉｎｎｅｒ．ｓｗｆ”； ／／定义 校园内部设施展示模块的ＵＲＬ … ／／定义可扩展模块的ＵＲＬ ｐｕｂｌｉｃ ｆｕｎｃｔｉｏｎ ＮａｖｉｇａｔｅＴｏＨｏｍｅ（） ／／导航 到效果图、平面图及导航模块方法 ｛ ｇｅｔＵＲＬ（ＭｏｄｕｌｅＯｎｅ）； ・２８・ 兰州石化职业技术学院学报 ｝ 用即可，对已有功能无须改动。 ｐｕｂｌｉｃ ｆｕｎｃｔｉｏｎ ＮａｖｉｇａｔｅＴｏＯｕｔｅｒ（）／／导航到校园 外部景观介绍模块方法 ｛ ｇｅｔＵＲＬ（ＭｏｄｕｌｅＴｗｏ）； ３ 校园展示的发布与测试 当各模块制作完成并成功发布出．ｓｗｆ文件后， 需要将所有用到的文档类和．ｓｗｆ文件复制到Ｗｅｂ 服务器的同一个相应目录下，通过Ｗｅｂ服务器实现 发布，然后利用ＩＥ等浏览器进行测试，实现网络版 ｝ ｐｕｂｌｉｃ ｆｕｎｃｔｉｏｎ ＮａｖｉｇａｔｅＴｏＩｎｎｅｒ（）／／导航到校园 内部设施展示模块方法 ｛ 的发布与测试。由于ｎａｓｈ并不是依赖于浏览器 ｇｅｔＵＲＬ（ＭｏｄｕｌｅＴｈｒｅｅ）； 的，可以在本地机对平台进行运行测试后，将以上提 ｝ 到的文件打包压缩，提供下载，实现单机版的发布。 … ／／定义导航到可扩展模块的方法 ｝ ４ 结束语 当编写好了文档类后，在每个模块文件中新建 一个导航器调用图层，并在该图层的第一帧上编写 通过对实现基于Ｆｌａｓｈ的校园展示的研究，取 导人文档类的代码如下： 得了以下成果：（１）介绍了能够用于介绍校园环境 ｌ１Ｊ＝ １Ｊ １Ｊ １Ｊ ｉｍｐｏｍ Ｎａｖｉｇａｔｉｏｎ； ／／将文档类导人到Ｆｌａｓｈ 的基于互联网的校园展示的规划、设计及制作流程。 的主文件中 （２）给出了利用Ａｃｔｉｏｎ Ｓｃｒｉｐｔ编程实现Ｆｌａｓｈ校园展 将导航器类导入到各模块的主文件中以备调 示的人机交互动画效果的思想。第三，给出了基于面 用。此时，需要对编写好的导航器文档类进行实例 向对象编程的思想利用文档类事项导航器的方法。 化，如命名一个ｍｙＮａｖｉｇａｔｉｏｎ的代码如下： ｖａｒ ｍｙＮａｖｉｇａｔｉｏｎ：Ｏｂｊｅｃｔ＝ｎｅｗ Ｎａｖｉｇａｔｉｏｎ（）； 参考文献： 对前面介绍的导航器而言，只有对其进行了实 例化以后才可以对其进行相关方法的调用，如ｍｙ— 薛欣．ＡＤＯＢＥ ＦＬＡＳＨ ＣＳ４ ＰＲＯＦＥＳＳＩＯＮＡＬ标准培 Ｎａｖｉｇａｔｉｏｎ实例的相应方法的调用代码如下： 训教材［Ｍ］．北京：人民邮电出版社，２００９． ｍｙＮａｖｉｇａｔｉｏｎ．ＮａｖｉｇａｔｅＴｏＨｏｍｅ（）； ／／导航 Ｊｅｆｆ Ｔａｐｐｅｒ，Ｍｉｃｈａｅｌ Ｌａｂｒｉｏｌａ，Ｍａｔｔｈｅｗ Ｂｏｌｅｓ，Ｊａｍｅｓ 到效果图、平面图及导航模块 Ｔａｌｂｏｔ．Ａｄｏｂｅ Ｆｌｅｘ ３ Ｔｒａｉｎｉｎｇ ｆｒｏｍ ｔｈｅ Ｓｏｕｒｃｅ．Ｂｅｒｋｅｌｅｙ ｍｙＮａｖｉｇａｔｉｏｎ．ＮａｖｉｇａｔｅＴｏＯｕｔｅｒ（） ／／导航到 ［Ｍ］：Ａｄｏｂｅ Ｐｒｅｓｓ，２００８． 校园外部景观介绍模块 梁勇．Ｆｌａｓｈ技术在青岩古镇虚拟游设计中的应用 ［Ｊ］．贵州商业高等专科学校学报，２０１０，２３（１）：３７— ｍｙＮａｖｉｇａｔｉｏｎ．ＮａｖｉｇａｔｅＴｏｌｎｎｅｒ（） ／／导航到 ４Ｏ． 校园内部设施展示模块 任伟杰，靳春华．仿真实验在国家级实验示范中心建 此时，校园展示平台已具有了部分的松耦合性。 设中的作用［Ｊ］．实验室科学，２０１０，１３（２）：１０９—１１１． 如需要修改模块的存储结构，只需要修改导航器类 余鹏．运用Ｆｌａｓｈ Ａｃｉｔｏｎ ｚｘｏｓｒｉｐｔ实现虚拟现实［Ｊ］． 中相应的私有属性无须在各模块中进行修改；如果 科技信息，２００９，（３）：４６ｌ一４６２． 需要扩展功能模块只需在导航器类中添加相应的私 孙颖．Ｆｌａｓｈ Ａｃｔｉｏｎ Ｓｃｒｉｐｔ ３殿堂之路［Ｍ］．北京：电 有属性和公有方法，在相应的模块中添加相应的调 子工业出版社，２００７． Ｔｈｅ ｓｔｕｄｙ ａｎｔｉ Ｐｒａｃｔｉｃｅ ｏｆ Ｆｌａｓｈ Ｗｅｂ－ｂａｓｅｄ Ｃ龇 Ｅｎｖｉｒｏｍｎｅｎｔ Ｄｉｇｉｔａｌ Ｐｌａｔｆｏｒｍ ＮＩＮＧ Ｊｉｎｇ—ｔａｏ ．ＳＵ Ｄａ—ｘｉｎ （１．Ｌａｎｚｈｏｕ Ｐｅｔｒｏｃｈｅｍｉｃａｌ Ｃｏｌｌｅｇｅ ｏｆ Ｖｏｃａｔｉｏｎａｌ Ｔｅｃｈｎｏｌｏｇｙ，Ｌａｎｚｈｏｕ ７３００６０，Ｃｈｉｎａ；２．Ｌａｎｚｈｏｕ Ｐｅｔｒｏｃｈｅｍｉｃａｌ Ｃｏｍｐａｎｙ，ＰｅｔｒｏＣｈｉｎａ，Ｌａｎｚｈｏｕ ７３００６０，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ｉｎ ｏｒｄｅｒ ｔｏ ｍｅｅｔ ｔｈｅ ｎｅｅｄ ｏｆ ｕｎｄｅｒｓｔａｎｄｉｎｇ ｔｈｅ ｃｏＨｅｇｅ ｆｏｒｍ ｓｔｕｄｅｎｔｓ ａｎｄ ｐａｒｅｎｔｓ，ｔｈｒｏｕｇｈ ｓｔｕｄｙｉｎｇ ａｎｄ ｐｒａｃｔｉｃｉｎｇ ｏｎ ｔｈｅ Ｆｌａｓｈ Ｗｅｂ ｂａｓｅｄ ＤＣＥＰ（Ｄｉｇｉｔａｌ Ｃａｍｐｕｓ Ｅｎｖｉｒｏｎｍｅｎｔ Ｐｌａｔｆｏｒｍ），ｔｈｅ ａｕｔｈｏｒｓ ｍａｎａｇｅｄ ｔｏ ｒｅａｌｉｚｅ ａ ｄｉｇｉｔａｌ ｐｌａｔｆｏｒｍ ｔｈａｔ ｉｓ ｒｉｃｈ ｉｎ ａｎｉｍａｔｉｏｎ ｅｆｆｅｃｔｓ ａｎｄ ｖｉｓｕａｌ ｉｍｐａｃｔｓ，ｆｅａｔｕｒｉｎｇ ａｎ ａｂｕｎｄａｎｔ ｍａｎ—ｍａｃｈｉｎｅ ｉｎｔｅｒａｃｔｉｏｎ ａｓ ｗｅｌ１．Ｔｈｅ ｒｅａｌｉｚａｔｉｏｎ ｏｆ ｔｈｅ Ｐｌａｔｆｏｒｍ ｄｉｅｒｃｔｌｙ ｌｅａｄｓ ｔｏ ａ ｌｅａｐ ｉｎ ｔｈｅ ａｂｉｌｉｔｙ ｏｆ ｓｅｒｖｉｎｇ ｔｈｅ ｓｏｃｉｅｔｙ ａｓ ａｎ ｅｄｕｃａｔｉｏｎａｌ ｉｎｓｔｉｔｕｔｅ ａｎｄ ｓｈｏｗｉｎｇ ｔｈｅ Ｃａｍｐｕｓ ｅｎｖｉｒｏｎｍｅｎｔ，ｔｅａｃｈｉｎｇ ｆａｃｉｌｉｔｉｅｓ ｎａｄ ｓｔｕｄｙｉｎｇ ａｔｍｏｓｐｈｅｒｅ ｔｏ Ｐｕｂｌｉｃｓ ｖｉａ Ｉｎｔｅｒｎｅｔ． Ｋｅｙ ｗｏｒｄｓ：Ｆｌａｓｈ Ｗｅｂ；Ｃａｍｐｕｓ Ｅｎｖｉｒｏｎｍｅｎｔ；Ｄｉｇｉｔａｌ Ｐｌａｔｆｏｒｍ；ｉｎｔｅｒａｃｔｉｖｅ ａｎｉｍａｔｉｏｎ １Ｊ
