基于HTML5的新型常纺交互融媒体技术展示空间设计

崔恒 顾剑柳 游小荣

摘  要：本文借助于专业级HTML5交互融媒体制作软件，通过全景VR、动画、弹幕和快闪等形式展现四美常纺的风貌，给用户带来良好的视觉感受，为学校对外宣传和招生工作提供有力支撑。作品完成后，支持电脑和手机端通过二维码的方式进行传播，方便快捷，实用性强。

关键词：HTML5;交互融媒体;空间设计制作

中图分类号：TP393.09      文献标识码：A 文章编号：2096-4706（2019）05-0077-03

Abstract：With the help of professional HTML5 interactive media production software，this text presents Changzhou Vocational Institute of Textile and Garments four beautiesfeatures in the form of panoramic VR，animation，bullet screen and flash，which brings good visual experience to users and provides strong support for the institutes external publicity and enrollment work. After the completion of the work，it supports computer and mobile terminal and it communicate through the two-dimensional code. It is convenient，fast and practical.

Keywords：HTML5;interactive media;publicity display

0  引  言

随着智能终端的发展，传统的媒体动画制作技术Flash使用量呈现出明显的下降趋势，这有许多原因，如IOS等不再支持Flash播放，传统的桌面PC浏览器（如Google浏览器和火狐浏览器）也默认将Flash关闭。HTML5狭义上是超文本链接标记语言第5版，单从名字来看并无神奇之处，但广义而言，HTML5代表了新一代的HTML、CSS和JavaScript技术的总和，它可以跨平台，这在屏幕尺寸和分辨率各异的移动设备上具有非常大的优势。自2016年起，使用HTML5技术制作交互融媒体内容变得越来越广泛。2019年1月15日，《县级融媒体中心建设规范》由中共中央宣传部和国家广播电视总局联合发布，文中提出“一次采集、多种生成、全媒传播、移动优先”原则。HTML5技术制作交互融媒体内容正好符合上述要求。

常州纺院当前的网站尽管也采用了部分HTML5技术，但更适合桌面PC，而不适合智能终端，大量的文字对宣传常州纺院没有任何优势，且不便于传播。如今，也有一些部门采用易企秀或微信公众平台等比较简单的HTML5页面制作工具，但与“木疙瘩”的专业开发平台相比，其专业程度相差甚远，制作效果与幻灯片类似，很难打动用户。而“木疙瘩”作为专业级HTML5交互融媒体平台，可实现关键帧动画、表单、视频、绘画板、图片合成保存、幻灯片、长图拖动、擦玻璃以及快闪等功能，方便用户进行品牌宣传、产品宣传、活动邀请、招聘/简历、新闻报道、学习阅读和游戏等。

本文将采用免费的“木疙瘩”专业级HTML5交互融媒体平台完成基于常纺“三优四美”的HTML5展示空间设计。该平台不仅能像Flash工具那样制作各种动画效果，还能实现全景VR、弹幕、快闪等功能，最终生成的软件为HTML5网页，不仅支持PC端，还支持各种智能终端，便于在手机微信、QQ等软件上传播，应用范围广泛，具有较强的实用性。

1  设计目标

本文将采用木疙瘩专业级HTML5交互融媒体内容制作平台，兼容全景VR技术，通过关键帧动画、进度动画、弹幕和快闪等形式完成基于HTML5的“四美”（美德、美景、美食、美人）常纺新型交互融媒体技术展示空间制作，为学校对外宣传和招生工作提供有力支撑。该设计可以兼容常见的Windows、IOS和Android系统，实现“一次采集、多种生成、全媒传播、移动优先”的目标。

2  详细设计

本项目主要内容包括美德、美景、美食和美人四个方面。美德是指通过关键帧、长图的形式展现常纺的美德;美景是指通过全景VR的方式，在手机上呈现至少五个常纺校园地点的VR场景;美食部分是通过直播弹幕和幻灯片等技术手段展现常纺的美食;美人部分通过快闪等技术手段展现常纺良好的师生风貌。

具体开发步骤如下：

（1）需求分析：听取、汇总各方需求，最终确定具体需求;

（2）脚本设计：根据需求编写动画脚本，要求包含画面情节、文案、动画描述、交互与逻辑、音乐与音效、页面切换等细节;

（3）内容制作：通过木疙瘩平台完成脚本内容的设计;

（4）内容测试：在各平台上发布测试，修改错误;

（5）内容发布：正式发布。

工具为木疙瘩专业级HTML5交互融媒体内容制作平台。

本文设计了多个页面，项目页面组成如图1所示，具体包括加载页、过渡页、导航页、美德頁、美食页和美人页，可全方位展示常纺的“四美”形象。

（1）加载页。加载页界面如图2所示，该页面为加载页，常纺图标在图中中上位置，进度条从左往右加载，加载完毕跳往过渡页。

（2）过渡页。过渡页界面如图3所示，该画面为过渡页，以常纺建筑楼顶图为背景，点击中间的“开始浏览”跳往导航页，从虚线画框逐渐变成藏青色的实线框，开始浏览字样弹出，并不断颤抖，背景图会突然变成素描画，出现打雷般的效果，常州纺织服装职业技术学院的字样在左右闪烁，同时播放背景音乐。

（3）导航页。导航页界面如图4所示。飞机飞过常纺背景图，逐渐从灰白变成原色，天空中云朵飘扬，4个导航按钮从右逐个出现至舞台中央;飞机从左边飞往右上角，并逐渐变小，背景图从无色逐渐变成原色，天上云朵开始从左往右飘，四个导航按钮从舞台右边逐个进入舞台;点击“美德”进入美德篇，点击“美景”进入虚拟现实导航，点击“美食”进入美食导航，点击“美人”进入美人快闪。

（4）美德页。美德页界面如图5所示。“美德篇”三个字在长图最顶端，下面是一段描述，全图以长图形式自动向上播放，图片逐渐展开，装饰物从两边逐渐飞入;上下滑动可以快速浏览全图，当互动到长图的底部，出现“返回”的字样，点击“返回”可以回到导航页。

（5）美景页。美景页界面如图6所示。舞台背景为常纺的俯视图，上部有进入虚拟现实的字样，同时左下角有“更多”和“返回”两个按钮;图上有一闪一闪的小蓝点，可以左右拖动俯视图，点击任何一个点都可以进入虚拟现实，点击“更多”可以跳往第三方虚拟现实，点击“返回”可以进入导航页。

（6）美食页。美食页界面如图7所示。舞台上部是各食堂的轮播图，舞台中间各菜品从右往左不停地滚动，舞台下方弹幕不断地从右往左展示;轮播图播放各餐厅的照片，各式各样的菜从右往左播放，大量的弹幕出现;输入弹幕并发送弹幕会弹出一个“再发一遍”和“返回导航”的提示，点击“返回导航”可以返回导航页，点击“再发一条”可以再次发送弹幕。

（7）美人页。美人页界面如图8所示，实现形式为快闪，通过不断切换画面实现快闪的效果;此页面出现时暂停背景音乐，播放快闪专用音乐，播放结束后会出现“返回”按钮，点击即可返回导航页。

3  结  论

本文借助木疙瘩专业级HTML5交互融媒体内容制作平台，围绕“移动可视化、媒体融合、内容创新、用户互动”四个核心内涵，完成了基于HTML5的四美常纺新型交互融媒体技术展示空间制作。通过测试发现，作品不仅能够给用户带来良好的视觉感受和在线交互的亲身体验，对于对外展示学校的形象和招生宣传都可起到一定的作用。此外，该软件自适应支持电脑和手机端屏幕，可通过二维码的形式进行传播，方便快捷。

本项目原创性地完成了常纺“四美”交互融媒体内容制作。项目完成后，通过手机微信、QQ等软件快速传播，很好地起到了宣传常纺校园的目的。

参考文献：

[1] 人民网.《县级融媒体中心省级技术平台规范要求》《县级融媒体中心建设规范》发布 [EB/OL].http：//media.people.com.cn/n1/2019/0115/c14677-30541139.html，2019-01-15.

[2] 李鑫.移动端H5页面快速开发系统的设计与实现 [D].北京：北京邮电大学，2018.

[3] 罗雅丽.基于HTML5网页交互动画创作技术的比较与教学实践 [J].电脑迷，2018（01）：183.

[4] 于中楠，王闰强，肖云.HTML5技术在科普多媒体数字出版物中的应用 [J].信息与电脑（理论版），2017（20）：16-17+21.

[5] 陈伟江.基于HTML5的算法动画可视化平台 [J].电子世界，2017（13）：159.

[6] 常龙.基于HTML5WebGL的3D图形库的设计与实现 [D].南京：东南大学，2017.

作者简介：崔恒（1997-），男，汉族，江苏金坛人，江苏省高等职业院校技能大赛二等奖获得者，主持2018年江蘇省高等学校大学生创新训练计划项目，研究方向：计算机技术和HTML5交互融媒体技术;顾剑柳（1978-），女，汉族，江苏常州人，教务处副处长，副教授，硕士，研究方向：计算机技术和教学管理。