崔恒 顧劍柳 游小榮

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 ?結(jié) ?論

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

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

參考文獻(xiàn)：

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

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

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

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

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

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

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