基于HTML5的新型常紡交互融媒體技術(shù)展示空間設(shè)計(jì)

崔恒 顧劍柳 游小榮

摘 ?要：本文借助于專業(yè)級(jí)HTML5交互融媒體制作軟件，通過(guò)全景VR、動(dòng)畫、彈幕和快閃等形式展現(xiàn)四美常紡的風(fēng)貌，給用戶帶來(lái)良好的視覺(jué)感受，為學(xué)校對(duì)外宣傳和招生工作提供有力支撐。作品完成后，支持電腦和手機(jī)端通過(guò)二維碼的方式進(jìn)行傳播，方便快捷，實(shí)用性強(qiáng)。

關(guān)鍵詞：HTML5;交互融媒體;空間設(shè)計(jì)制作

中圖分類號(hào)：TP393.09 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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 ?引 ?言

隨著智能終端的發(fā)展，傳統(tǒng)的媒體動(dòng)畫制作技術(shù)Flash使用量呈現(xiàn)出明顯的下降趨勢(shì)，這有許多原因，如IOS等不再支持Flash播放，傳統(tǒng)的桌面PC瀏覽器（如Google瀏覽器和火狐瀏覽器）也默認(rèn)將Flash關(guān)閉。HTML5狹義上是超文本鏈接標(biāo)記語(yǔ)言第5版，單從名字來(lái)看并無(wú)神奇之處，但廣義而言，HTML5代表了新一代的HTML、CSS和JavaScript技術(shù)的總和，它可以跨平臺(tái)，這在屏幕尺寸和分辨率各異的移動(dòng)設(shè)備上具有非常大的優(yōu)勢(shì)。自2016年起，使用HTML5技術(shù)制作交互融媒體內(nèi)容變得越來(lái)越廣泛。2019年1月15日，《縣級(jí)融媒體中心建設(shè)規(guī)范》由中共中央宣傳部和國(guó)家廣播電視總局聯(lián)合發(fā)布，文中提出“一次采集、多種生成、全媒傳播、移動(dòng)優(yōu)先”原則。HTML5技術(shù)制作交互融媒體內(nèi)容正好符合上述要求。

常州紡院當(dāng)前的網(wǎng)站盡管也采用了部分HTML5技術(shù)，但更適合桌面PC，而不適合智能終端，大量的文字對(duì)宣傳常州紡院沒(méi)有任何優(yōu)勢(shì)，且不便于傳播。如今，也有一些部門采用易企秀或微信公眾平臺(tái)等比較簡(jiǎn)單的HTML5頁(yè)面制作工具，但與“木疙瘩”的專業(yè)開(kāi)發(fā)平臺(tái)相比，其專業(yè)程度相差甚遠(yuǎn)，制作效果與幻燈片類似，很難打動(dòng)用戶。而“木疙瘩”作為專業(yè)級(jí)HTML5交互融媒體平臺(tái)，可實(shí)現(xiàn)關(guān)鍵幀動(dòng)畫、表單、視頻、繪畫板、圖片合成保存、幻燈片、長(zhǎng)圖拖動(dòng)、擦玻璃以及快閃等功能，方便用戶進(jìn)行品牌宣傳、產(chǎn)品宣傳、活動(dòng)邀請(qǐng)、招聘/簡(jiǎn)歷、新聞報(bào)道、學(xué)習(xí)閱讀和游戲等。

本文將采用免費(fèi)的“木疙瘩”專業(yè)級(jí)HTML5交互融媒體平臺(tái)完成基于常紡“三優(yōu)四美”的HTML5展示空間設(shè)計(jì)。該平臺(tái)不僅能像Flash工具那樣制作各種動(dòng)畫效果，還能實(shí)現(xiàn)全景VR、彈幕、快閃等功能，最終生成的軟件為HTML5網(wǎng)頁(yè)，不僅支持PC端，還支持各種智能終端，便于在手機(jī)微信、QQ等軟件上傳播，應(yīng)用范圍廣泛，具有較強(qiáng)的實(shí)用性。

1 ?設(shè)計(jì)目標(biāo)

本文將采用木疙瘩專業(yè)級(jí)HTML5交互融媒體內(nèi)容制作平臺(tái)，兼容全景VR技術(shù)，通過(guò)關(guān)鍵幀動(dòng)畫、進(jìn)度動(dòng)畫、彈幕和快閃等形式完成基于HTML5的“四美”（美德、美景、美食、美人）常紡新型交互融媒體技術(shù)展示空間制作，為學(xué)校對(duì)外宣傳和招生工作提供有力支撐。該設(shè)計(jì)可以兼容常見(jiàn)的Windows、IOS和Android系統(tǒng)，實(shí)現(xiàn)“一次采集、多種生成、全媒傳播、移動(dòng)優(yōu)先”的目標(biāo)。

2 ?詳細(xì)設(shè)計(jì)

本項(xiàng)目主要內(nèi)容包括美德、美景、美食和美人四個(gè)方面。美德是指通過(guò)關(guān)鍵幀、長(zhǎng)圖的形式展現(xiàn)常紡的美德;美景是指通過(guò)全景VR的方式，在手機(jī)上呈現(xiàn)至少五個(gè)常紡校園地點(diǎn)的VR場(chǎng)景;美食部分是通過(guò)直播彈幕和幻燈片等技術(shù)手段展現(xiàn)常紡的美食;美人部分通過(guò)快閃等技術(shù)手段展現(xiàn)常紡良好的師生風(fēng)貌。

具體開(kāi)發(fā)步驟如下：

（1）需求分析：聽(tīng)取、匯總各方需求，最終確定具體需求;

（2）腳本設(shè)計(jì)：根據(jù)需求編寫動(dòng)畫腳本，要求包含畫面情節(jié)、文案、動(dòng)畫描述、交互與邏輯、音樂(lè)與音效、頁(yè)面切換等細(xì)節(jié);

（3）內(nèi)容制作：通過(guò)木疙瘩平臺(tái)完成腳本內(nèi)容的設(shè)計(jì);

（4）內(nèi)容測(cè)試：在各平臺(tái)上發(fā)布測(cè)試，修改錯(cuò)誤;

（5）內(nèi)容發(fā)布：正式發(fā)布。

工具為木疙瘩專業(yè)級(jí)HTML5交互融媒體內(nèi)容制作平臺(tái)。

本文設(shè)計(jì)了多個(gè)頁(yè)面，項(xiàng)目頁(yè)面組成如圖1所示，具體包括加載頁(yè)、過(guò)渡頁(yè)、導(dǎo)航頁(yè)、美德頁(yè)、美食頁(yè)和美人頁(yè)，可全方位展示常紡的“四美”形象。

（1）加載頁(yè)。加載頁(yè)界面如圖2所示，該頁(yè)面為加載頁(yè)，常紡圖標(biāo)在圖中中上位置，進(jìn)度條從左往右加載，加載完畢跳往過(guò)渡頁(yè)。

（2）過(guò)渡頁(yè)。過(guò)渡頁(yè)界面如圖3所示，該畫面為過(guò)渡頁(yè)，以常紡建筑樓頂圖為背景，點(diǎn)擊中間的“開(kāi)始瀏覽”跳往導(dǎo)航頁(yè)，從虛線畫框逐漸變成藏青色的實(shí)線框，開(kāi)始瀏覽字樣彈出，并不斷顫抖，背景圖會(huì)突然變成素描畫，出現(xiàn)打雷般的效果，常州紡織服裝職業(yè)技術(shù)學(xué)院的字樣在左右閃爍，同時(shí)播放背景音樂(lè)。

（3）導(dǎo)航頁(yè)。導(dǎo)航頁(yè)界面如圖4所示。飛機(jī)飛過(guò)常紡背景圖，逐漸從灰白變成原色，天空中云朵飄揚(yáng)，4個(gè)導(dǎo)航按鈕從右逐個(gè)出現(xiàn)至舞臺(tái)中央;飛機(jī)從左邊飛往右上角，并逐漸變小，背景圖從無(wú)色逐漸變成原色，天上云朵開(kāi)始從左往右飄，四個(gè)導(dǎo)航按鈕從舞臺(tái)右邊逐個(gè)進(jìn)入舞臺(tái);點(diǎn)擊“美德”進(jìn)入美德篇，點(diǎn)擊“美景”進(jìn)入虛擬現(xiàn)實(shí)導(dǎo)航，點(diǎn)擊“美食”進(jìn)入美食導(dǎo)航，點(diǎn)擊“美人”進(jìn)入美人快閃。

（4）美德頁(yè)。美德頁(yè)界面如圖5所示?！懊赖缕比齻€(gè)字在長(zhǎng)圖最頂端，下面是一段描述，全圖以長(zhǎng)圖形式自動(dòng)向上播放，圖片逐漸展開(kāi)，裝飾物從兩邊逐漸飛入;上下滑動(dòng)可以快速瀏覽全圖，當(dāng)互動(dòng)到長(zhǎng)圖的底部，出現(xiàn)“返回”的字樣，點(diǎn)擊“返回”可以回到導(dǎo)航頁(yè)。

（5）美景頁(yè)。美景頁(yè)界面如圖6所示。舞臺(tái)背景為常紡的俯視圖，上部有進(jìn)入虛擬現(xiàn)實(shí)的字樣，同時(shí)左下角有“更多”和“返回”兩個(gè)按鈕;圖上有一閃一閃的小藍(lán)點(diǎn)，可以左右拖動(dòng)俯視圖，點(diǎn)擊任何一個(gè)點(diǎn)都可以進(jìn)入虛擬現(xiàn)實(shí)，點(diǎn)擊“更多”可以跳往第三方虛擬現(xiàn)實(shí)，點(diǎn)擊“返回”可以進(jìn)入導(dǎo)航頁(yè)。

（6）美食頁(yè)。美食頁(yè)界面如圖7所示。舞臺(tái)上部是各食堂的輪播圖，舞臺(tái)中間各菜品從右往左不停地滾動(dòng)，舞臺(tái)下方彈幕不斷地從右往左展示;輪播圖播放各餐廳的照片，各式各樣的菜從右往左播放，大量的彈幕出現(xiàn);輸入彈幕并發(fā)送彈幕會(huì)彈出一個(gè)“再發(fā)一遍”和“返回導(dǎo)航”的提示，點(diǎn)擊“返回導(dǎo)航”可以返回導(dǎo)航頁(yè)，點(diǎn)擊“再發(fā)一條”可以再次發(fā)送彈幕。

（7）美人頁(yè)。美人頁(yè)界面如圖8所示，實(shí)現(xiàn)形式為快閃，通過(guò)不斷切換畫面實(shí)現(xiàn)快閃的效果;此頁(yè)面出現(xiàn)時(shí)暫停背景音樂(lè)，播放快閃專用音樂(lè)，播放結(jié)束后會(huì)出現(xiàn)“返回”按鈕，點(diǎn)擊即可返回導(dǎo)航頁(yè)。

3 ?結(jié) ?論

本文借助木疙瘩專業(yè)級(jí)HTML5交互融媒體內(nèi)容制作平臺(tái)，圍繞“移動(dòng)可視化、媒體融合、內(nèi)容創(chuàng)新、用戶互動(dòng)”四個(gè)核心內(nèi)涵，完成了基于HTML5的四美常紡新型交互融媒體技術(shù)展示空間制作。通過(guò)測(cè)試發(fā)現(xiàn)，作品不僅能夠給用戶帶來(lái)良好的視覺(jué)感受和在線交互的親身體驗(yàn)，對(duì)于對(duì)外展示學(xué)校的形象和招生宣傳都可起到一定的作用。此外，該軟件自適應(yīng)支持電腦和手機(jī)端屏幕，可通過(guò)二維碼的形式進(jìn)行傳播，方便快捷。

本項(xiàng)目原創(chuàng)性地完成了常紡“四美”交互融媒體內(nèi)容制作。項(xiàng)目完成后，通過(guò)手機(jī)微信、QQ等軟件快速傳播，很好地起到了宣傳常紡校園的目的。

參考文獻(xiàn)：

[1] 人民網(wǎng).《縣級(jí)融媒體中心省級(jí)技術(shù)平臺(tái)規(guī)范要求》《縣級(jí)融媒體中心建設(shè)規(guī)范》發(fā)布 [EB/OL].http：//media.people.com.cn/n1/2019/0115/c14677-30541139.html，2019-01-15.

[2] 李鑫.移動(dòng)端H5頁(yè)面快速開(kāi)發(fā)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [D].北京：北京郵電大學(xué)，2018.

[3] 羅雅麗.基于HTML5網(wǎng)頁(yè)交互動(dòng)畫創(chuàng)作技術(shù)的比較與教學(xué)實(shí)踐 [J].電腦迷，2018（01）：183.

[4] 于中楠，王閏強(qiáng)，肖云.HTML5技術(shù)在科普多媒體數(shù)字出版物中的應(yīng)用 [J].信息與電腦（理論版），2017（20）：16-17+21.

[5] 陳偉江.基于HTML5的算法動(dòng)畫可視化平臺(tái) [J].電子世界，2017（13）：159.

[6] 常龍.基于HTML5WebGL的3D圖形庫(kù)的設(shè)計(jì)與實(shí)現(xiàn) [D].南京：東南大學(xué)，2017.

作者簡(jiǎn)介：崔恒（1997-），男，漢族，江蘇金壇人，江蘇省高等職業(yè)院校技能大賽二等獎(jiǎng)獲得者，主持2018年江蘇省高等學(xué)校大學(xué)生創(chuàng)新訓(xùn)練計(jì)劃項(xiàng)目，研究方向：計(jì)算機(jī)技術(shù)和HTML5交互融媒體技術(shù);顧劍柳（1978-），女，漢族，江蘇常州人，教務(wù)處副處長(zhǎng)，副教授，碩士，研究方向：計(jì)算機(jī)技術(shù)和教學(xué)管理。