基于五维交互融媒体的四美常纺评价系统的设计与实现

基于五维交互融媒体的四美常纺评价系统的设计与实现

0专业级确立了新技术平台的研发随着智能设备的发展，传统多媒体动画生产技术的flash使用量显著减少。这是因为android没有支持flash播放，传统的pc浏览器（如谷歌浏览器和狐虎浏览器）也同意关闭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的四美常纺新型交互融媒体技术展示空间制作。通过测试发现,作品不仅能够给用户带来良好的视觉感受和在线交互的亲身体验,对于