基于HTML5的新型常紡交互融媒體技術展示空間設計

崔恒 顧劍柳 游小榮

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

關鍵詞：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 ?引 ?言

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

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

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

1 ?設計目標

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

2 ?詳細設計

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

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

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

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

（3）內容制作：通過木疙瘩平臺完成腳本內容的設計;

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

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

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

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

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

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

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

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

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

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

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

3 ?結 ?論

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

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

參考文獻：

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

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

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

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

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

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

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