程寶玉 朱夢(mèng)玲 吳小勝 舒鵬飛

摘 ?要：新媒體環(huán)境下，融合H5交互技術(shù)進(jìn)行防震減災(zāi)科普宣傳，具有個(gè)性化、趣味性和豐富性的特點(diǎn)，信息傳遞方式也真正實(shí)現(xiàn)由單向傳播轉(zhuǎn)變?yōu)榛?dòng)傳播，同時(shí)借助微信平臺(tái)龐大的用戶基礎(chǔ)，達(dá)到普及面廣、效率高的科普宣傳效果。文章研究了H5交互技術(shù)在防震減災(zāi)科普宣傳中的應(yīng)用方法，分析了H5交互作品借助微信平臺(tái)進(jìn)行科普宣傳的效果，并將其與傳統(tǒng)媒體科普教育方式進(jìn)行比較，總結(jié)了運(yùn)用H5交互進(jìn)行防震減災(zāi)科普宣傳能夠有效增強(qiáng)公眾防震減災(zāi)意識(shí)，提升自然災(zāi)害預(yù)警能力與自我保護(hù)能力。

關(guān)鍵詞：H5交互技術(shù)；Mugeda；防震減災(zāi)

中圖分類號(hào)：TP39 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A ? 文章編號(hào)：2096-4706（2023）14-0099-05

Research on Application of H5 Interaction in the Science Publicity of

Earthquake Prevention and Disaster Reduction

CHENG Baoyu， ZHU Mengling， WU Xiaosheng， SHU Pengfei

（Chizhou University， Chizhou ?247000， China）

Abstract： This paper combines H5 technology for earthquake prevention and disaster reduction science publicity under the new media environment， which has the characteristics of personalized， interesting and rich. The mode of information transmission is truly realized from one-way communication to interactive communication. With the help of the huge user base of WeChat platform， it achieves a wide range of popularization and high efficiency of science publicity effect. This paper studies the application method of H5 interactive technology in the science publicity of earthquake prevention and disaster reduction， and analyzes the effect of H5 interactive works with the help of WeChat platform. And it compares H5 technology with traditional media science education methods， summarizes that the use of H5 interaction for science publicity in earthquake prevention and disaster reduction can effectively enhance the public awareness of earthquake prevention and disaster reduction， enhance the ability of natural disaster early warning and self-protection ability.

Keywords： H5 interactive technology; Mugeda; earthquake prevention and disaster reduction

0 ?引 ?言

自然災(zāi)害發(fā)生時(shí)，只有做好自救措施，才能撐起安全的保護(hù)傘。人的生命在各種自然災(zāi)害面前是脆弱的，所以平時(shí)更要有所防范，未雨綢繆，做好準(zhǔn)備。地震作為一種突發(fā)性的自然災(zāi)害，嚴(yán)重威脅著社會(huì)與經(jīng)濟(jì)的穩(wěn)定發(fā)展，嚴(yán)重的情況下還會(huì)造成大量人員的傷亡，面對(duì)自然災(zāi)害的挑戰(zhàn)，科普宣傳已經(jīng)成為一項(xiàng)緊迫任務(wù)，需要全社會(huì)共同參與，同擔(dān)責(zé)任為創(chuàng)造和諧、平衡、安全、穩(wěn)定的生存環(huán)境奉獻(xiàn)自己的力量。傳統(tǒng)媒體采用圖文結(jié)合的紙質(zhì)宣傳方式正在逐漸淡出我們的視野，過(guò)多的文字讓我們感覺(jué)枯燥乏味；而5G、大數(shù)據(jù)人工智能、虛擬現(xiàn)實(shí)、交互應(yīng)用等技術(shù)的不斷發(fā)展，也給傳統(tǒng)的防震減災(zāi)科普宣傳方式帶來(lái)一定的沖擊與挑戰(zhàn)；各種實(shí)踐也證明只有充分運(yùn)用順應(yīng)時(shí)代發(fā)展潮流的信息載體，傳播大眾喜聞樂(lè)見(jiàn)的內(nèi)容和形式，并不失時(shí)機(jī)地滲透到各種社會(huì)活動(dòng)與交流之中，才能起到更加深刻有意義的教育作用，被大眾所接受[1]。

1 ?防震減災(zāi)科普宣傳的現(xiàn)狀分析

傳統(tǒng)的防震減災(zāi)科普一般都是采用廣播、報(bào)紙、電視等媒介進(jìn)行科普宣傳教育，但是由于其內(nèi)容的專業(yè)復(fù)雜性以及枯燥無(wú)味性導(dǎo)致許多受眾持排斥態(tài)度，且以科普書(shū)籍、科普雜志為代表的作品內(nèi)容形式單一、傳播面比較狹窄。而事實(shí)證明，只有受眾自覺(jué)主動(dòng)接收的知識(shí)才能更加容易被受眾吸收、接納、傳播，所以如何使枯燥無(wú)味的科普知識(shí)變得生動(dòng)有趣又容易被接受成為許多專業(yè)人士關(guān)注的問(wèn)題。

近年來(lái)，防震減災(zāi)教育愈來(lái)愈受到重視，也逐漸成為社區(qū)科普教育中重要的一部分，一些社區(qū)街道、企事業(yè)單位和社會(huì)公益組織時(shí)常會(huì)組織開(kāi)展各類防震減災(zāi)應(yīng)急演練活動(dòng)，幫助大眾掌握各種地震發(fā)生時(shí)的逃生方法與技巧，爭(zhēng)取當(dāng)災(zāi)害真正來(lái)臨時(shí)盡可能保證人身安全和減少經(jīng)濟(jì)損失。雖然實(shí)地演習(xí)在一定范圍內(nèi)起到了較好的普及作用，但是依舊存在實(shí)地演習(xí)成本高、參加演習(xí)人數(shù)有限、演練形式受客觀條件限制等較多不足[2]。

2 ?基于H5交互技術(shù)的防震減災(zāi)科普教育

2.1 ?H5交互技術(shù)特點(diǎn)

H5，即HTML5，是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)視頻、音頻、圖像、動(dòng)畫(huà)內(nèi)容以及與設(shè)備交互的一種語(yǔ)言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一[3]。H5技術(shù)自發(fā)布以來(lái)贏得了眾多網(wǎng)民的喜愛(ài)，成為當(dāng)下非常有效的新媒體呈現(xiàn)形式和推廣手段，其推廣火爆的原因離不開(kāi)微信這一擁有龐大用戶基數(shù)的平臺(tái)。H5最大的優(yōu)勢(shì)在于利用基于重力感應(yīng)、人臉識(shí)別、地理位置、多屏互動(dòng)等形式豐富的交互元素吸引用戶使用，從而把作品內(nèi)容傳播出去。H5另一個(gè)優(yōu)勢(shì)就是跨平臺(tái)，一方面開(kāi)發(fā)者無(wú)需做過(guò)多的平臺(tái)適配工作，另一方面終端用戶無(wú)需下載，只要使用微信“掃一掃”功能掃描H5作品的二維碼或者在瀏覽器中打開(kāi)H5作品的網(wǎng)址鏈接即可隨時(shí)隨地參與互動(dòng)。

2.2 ?基于H5交互技術(shù)的防震減災(zāi)科普教育的特點(diǎn)

對(duì)于防震減災(zāi)科普教育來(lái)說(shuō)，基于微信H5的自然災(zāi)害模擬應(yīng)急演練交互作品的運(yùn)用，不僅是針對(duì)實(shí)地演練不足之處所采用的較好的技術(shù)補(bǔ)充手段，而且其制作便捷，推廣效果好，能達(dá)到有效普及的目的。

1）H5支持呈現(xiàn)文本、圖像、視頻、動(dòng)畫(huà)、交互等各種形式的媒體內(nèi)容，頁(yè)面設(shè)計(jì)簡(jiǎn)約精致、內(nèi)容短小精悍，將枯燥無(wú)味的科普知識(shí)利用動(dòng)畫(huà)、小游戲等形式呈現(xiàn)出來(lái)，不僅提升了受眾的學(xué)習(xí)興趣，達(dá)到“寓教于樂(lè)”的目的；而且使用戶通過(guò)自然災(zāi)害常識(shí)的學(xué)習(xí)與設(shè)身處地的逃脫防護(hù)演練，在視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)等多種感官上產(chǎn)生強(qiáng)烈的共鳴，不斷拓寬視野，增強(qiáng)自我保護(hù)意識(shí)，提高災(zāi)害應(yīng)急的能力，傳播效果逐漸增強(qiáng)，在一定程度上也增加了平臺(tái)與用戶之間的黏性。

2）信息技術(shù)支持下的教育、學(xué)習(xí)不再表現(xiàn)為單一的行為，而是多元變化的情境創(chuàng)設(shè)過(guò)程，每個(gè)學(xué)習(xí)者都是教育活動(dòng)的主體，自發(fā)主動(dòng)地參與教學(xué)活動(dòng)，構(gòu)建豐富多元的學(xué)習(xí)情境，探索未知的學(xué)習(xí)領(lǐng)域，喚起好奇心和樂(lè)趣，激發(fā)靈感和想象力[4]。將H5技術(shù)與防震減災(zāi)科普教育相結(jié)合，利用這種新型傳播方式傳播科普文化，不僅可以讓用戶利用碎片化學(xué)習(xí)的時(shí)間，通過(guò)一點(diǎn)一滴信息獲取、知識(shí)積累和交流思考，達(dá)到熟悉情況、擴(kuò)充知識(shí)、提高技能，走在時(shí)代前沿的目的；而且可以利用可循環(huán)演習(xí)的特點(diǎn)，節(jié)省人力、物力、財(cái)力，增加互動(dòng)趣味性。

3 ?防震減災(zāi)H5交互動(dòng)畫(huà)創(chuàng)作

通過(guò)H5交互動(dòng)畫(huà)創(chuàng)作將自然災(zāi)害防護(hù)知識(shí)與模擬演練相結(jié)合，幫助受眾掌握災(zāi)難發(fā)生時(shí)的緊急救援知識(shí)、緊急應(yīng)對(duì)本領(lǐng)、自救互救能力等，傳遞科學(xué)文化，提高自我保護(hù)意識(shí)。

3.1 ?創(chuàng)作思路

1）收集、整理防震減災(zāi)相關(guān)資料和素材，包括各種自然災(zāi)害的形成、特征、主要影響等，以及遇到自然災(zāi)害時(shí)，人們需要掌握的緊急救援知識(shí)、緊急應(yīng)對(duì)本領(lǐng)、自救互救能力等，并根據(jù)需要繪制相關(guān)圖像素材。

2）制作H5交互動(dòng)畫(huà)，首先將各種自然災(zāi)害的形成、特征、主要影響等知識(shí)內(nèi)容以“科普小課堂”的形式生動(dòng)形象地呈現(xiàn)出來(lái)，然后通過(guò)設(shè)置測(cè)試題提供用戶自主檢測(cè)掌握知識(shí)的程度。

3）設(shè)計(jì)H5交互小游戲，模擬自然災(zāi)害應(yīng)急演練，演示災(zāi)害發(fā)生時(shí)的一些征兆，然后允許用戶通過(guò)選擇災(zāi)害應(yīng)急方式、逃脫路線等系列操作，完成模擬災(zāi)害應(yīng)急演練。

4）系統(tǒng)化所有H5作品，主要包括兩個(gè)方面：一是以自然災(zāi)害的類別為主線，以每種災(zāi)害的科普和模擬應(yīng)急演練為從線，編制作品的目錄結(jié)構(gòu)，設(shè)計(jì)作品的主題界面，形成樹(shù)狀結(jié)構(gòu)的系統(tǒng)應(yīng)用，如圖1所示。二是將所有自然災(zāi)害模擬應(yīng)急演練的作品按照游戲難度的順序，從易到難構(gòu)成完整的線性結(jié)構(gòu)游戲關(guān)卡，并設(shè)計(jì)手游APP程序外殼，提供用戶系統(tǒng)、完整的應(yīng)用體驗(yàn)。

3.2 ?主要?jiǎng)?chuàng)作步驟

3.2.1 ?總體設(shè)計(jì)

作品先通過(guò)豐富多彩的動(dòng)畫(huà)展示，向用戶科普自然災(zāi)害基本知識(shí)，再通過(guò)小游戲的方式邀請(qǐng)用戶參與挑戰(zhàn)，既可以激發(fā)用戶的學(xué)習(xí)興趣，更好地達(dá)到寓教于樂(lè)的目的[5，6]，又可以順應(yīng)時(shí)代的發(fā)展，利用新興技術(shù)傳遞科學(xué)文化知識(shí)，助力科學(xué)文化的繁榮發(fā)展。

3.2.2 ?動(dòng)畫(huà)設(shè)計(jì)

H5互動(dòng)作品中的動(dòng)畫(huà)具有兩個(gè)作用，一是給予用戶生動(dòng)活潑的直觀感受，從而吸引用戶的興趣和關(guān)注；二是與交互相結(jié)合，構(gòu)成H5小游戲中的動(dòng)畫(huà)表現(xiàn)形式。

1）預(yù)置動(dòng)畫(huà)設(shè)計(jì)?！癕ugeda”H5交互動(dòng)畫(huà)設(shè)計(jì)平臺(tái)提供“預(yù)置動(dòng)畫(huà)”功能，包括“緩入”“移入”等數(shù)十種類型的動(dòng)畫(huà)效果，操作便捷。預(yù)置動(dòng)畫(huà)是“Mugeda”針對(duì)精細(xì)程度和交互要求不高的二維動(dòng)畫(huà)設(shè)計(jì)需求，在平臺(tái)內(nèi)部框架中預(yù)置的動(dòng)畫(huà)效果，這些動(dòng)畫(huà)效果也可使用關(guān)鍵幀動(dòng)畫(huà)來(lái)實(shí)現(xiàn)，但二者不可同時(shí)出現(xiàn)。首先選中舞臺(tái)上的“卡通人物”素材，然后點(diǎn)擊其右邊的“添加預(yù)置動(dòng)畫(huà)”按鈕，如圖2所

示；然后，在彈出的“添加預(yù)置動(dòng)畫(huà)”設(shè)置面板中選擇“進(jìn)入”“浮入”，表示該素材進(jìn)入舞臺(tái)時(shí)的動(dòng)畫(huà)呈現(xiàn)形式為“浮入”，如圖3所示；最后，需要注意的是，當(dāng)為同一個(gè)關(guān)鍵幀中的不同素材使用預(yù)置動(dòng)畫(huà)時(shí)，這幾個(gè)素材的動(dòng)畫(huà)是同時(shí)出現(xiàn)的，所以，對(duì)于這種情況要調(diào)整各個(gè)預(yù)置動(dòng)畫(huà)的出現(xiàn)時(shí)間和持續(xù)時(shí)長(zhǎng)，使其有先后順序，設(shè)置方法如圖4所示。

2）自定義動(dòng)畫(huà)設(shè)計(jì)?！癕ugeda”H5交互動(dòng)畫(huà)設(shè)計(jì)平臺(tái)針對(duì)二維動(dòng)畫(huà)更多復(fù)雜的設(shè)計(jì)需要，集成了“關(guān)鍵幀動(dòng)畫(huà)”“路徑動(dòng)畫(huà)”“進(jìn)度動(dòng)畫(huà)”“變形動(dòng)畫(huà)”等功能分類非常清晰的交互動(dòng)畫(huà)設(shè)計(jì)功能，通過(guò)這些自定義動(dòng)畫(huà)設(shè)計(jì)，可以實(shí)現(xiàn)效果豐富、交互性強(qiáng)的動(dòng)畫(huà)效果。

此外，“Mugeda”還提供了元件動(dòng)畫(huà)功能，元件作為一個(gè)整體在舞臺(tái)上展現(xiàn)的同時(shí)，其內(nèi)部的動(dòng)畫(huà)也可以同時(shí)播放。并且每一個(gè)元件都是一個(gè)獨(dú)立的完整動(dòng)畫(huà)，在舞臺(tái)上可以重復(fù)使用。

以作品中人物角色下樓梯元件的關(guān)鍵幀動(dòng)畫(huà)設(shè)計(jì)為例，如圖5所示，首先在時(shí)間軸人物角色動(dòng)畫(huà)層的第一幀插入人物角色素材，此時(shí)第一幀的標(biāo)識(shí)由白色圓點(diǎn)變成黑色圓點(diǎn)；然后在第一幀上點(diǎn)擊鼠標(biāo)右鍵，在彈出菜單中選擇“插入關(guān)鍵幀動(dòng)畫(huà)”，此時(shí)以時(shí)間軸所有層中最多的幀數(shù)為參照，在人物角色動(dòng)畫(huà)層的最后一幀自動(dòng)插入一個(gè)關(guān)鍵幀，該幀以紅色菱形標(biāo)識(shí)；接著使用鼠標(biāo)將最后一個(gè)關(guān)鍵幀拖到第五幀；最后定位到第五幀，在舞臺(tái)上調(diào)整人物角色的位置，直到兩個(gè)關(guān)鍵幀之間人物角色的運(yùn)動(dòng)自然流暢。按同樣的方法設(shè)置后續(xù)的關(guān)鍵幀及其相應(yīng)人物角色的舞臺(tái)位置，直到人物角色從樓梯自上而下一級(jí)級(jí)走下來(lái)，完成整個(gè)關(guān)鍵幀動(dòng)畫(huà)的設(shè)計(jì)。

3.2.3 ?場(chǎng)景交互設(shè)計(jì)

場(chǎng)景交互設(shè)計(jì)模擬各種災(zāi)害現(xiàn)場(chǎng)，通過(guò)人機(jī)交互，使用戶以第一人稱的視角融入災(zāi)害場(chǎng)景中學(xué)習(xí)自救互救知識(shí)等。系統(tǒng)選擇多種具有代表性地理環(huán)境的現(xiàn)場(chǎng)，主要包括廚房、臥室、電影院、高樓、電梯等場(chǎng)景。用戶以第一人稱視角融入災(zāi)害場(chǎng)景時(shí)，必須在系統(tǒng)提供的多種自救互救方案或逃生路線中，每次都能選擇正確的選項(xiàng)，才能“安全逃脫”。

以地震災(zāi)害模擬演練為例，設(shè)計(jì)災(zāi)害應(yīng)急演練主要場(chǎng)景交互設(shè)計(jì)步驟如下：

1）以教室為場(chǎng)景、黑板為背景，使用動(dòng)畫(huà)展示地震逃生小技巧，用戶可通過(guò)交互操作反復(fù)查看該內(nèi)容。

2）教室場(chǎng)景發(fā)生震動(dòng)，用戶以第一人稱視角融入場(chǎng)景，在系統(tǒng)提供的多條路線中，用戶必須每次都能選擇正確的逃生路線，才能“安全逃脫”。用戶“逃生”過(guò)程中，系統(tǒng)結(jié)合房間、樓梯、家具、道路等場(chǎng)景不同特征，設(shè)置相應(yīng)障礙或道具，干擾或輔助用戶進(jìn)行選擇，從而使用戶最終掌握科學(xué)、有效的地震逃生能力。

交互設(shè)計(jì)中為舞臺(tái)或元件中的一個(gè)素材添加交互時(shí)，首先選中舞臺(tái)上素材，然后點(diǎn)擊其右邊的“添加/編輯行為”按鈕，如圖6所示；然后，在彈出的

“編輯行為”設(shè)置面板的左邊“行為”列表中選擇需要的交互類型，如圖7所示；最后，在彈出的交互“參數(shù)”設(shè)置面板中根據(jù)需要設(shè)置該交互的系列參數(shù)，如圖8所示是“跳轉(zhuǎn)到幀并播放”交互類型的參數(shù)設(shè)置。

4 ?作品推廣

4.1 ?推廣方式

1）通過(guò)各種渠道對(duì)制作好的H5作品進(jìn)行推廣，包括微信群、微信朋友圈發(fā)布信息，設(shè)計(jì)微信公眾號(hào)輔助推廣。在推廣的過(guò)程中不斷地發(fā)現(xiàn)作品存在的問(wèn)題，結(jié)合用戶意見(jiàn)完成作品的修改完善工作。

2）將最終的H5展示動(dòng)畫(huà)利用錄屏的方式制作演示視頻，投放于各種新媒體平臺(tái)，增加瀏覽量，提高受眾面的廣度與作品的宣傳力度，擴(kuò)大影響力。

4.2 ?推廣效果

1）通過(guò)生動(dòng)形象的H5場(chǎng)景設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)模擬自然災(zāi)害的產(chǎn)生、危害以及災(zāi)害發(fā)生的現(xiàn)實(shí)場(chǎng)景，達(dá)到科普常識(shí)、預(yù)防預(yù)警的目的。

2）通過(guò)形式豐富的H5交互設(shè)計(jì)，提升自然災(zāi)害模擬應(yīng)急演練的趣味性、互動(dòng)性，人們利用一部手機(jī)或一臺(tái)電腦即可方便快捷地參與，使防災(zāi)減災(zāi)教育的受眾更豐富，應(yīng)急演練教育的實(shí)踐更全面。

3）利用微信平臺(tái)進(jìn)行傳播，受眾面廣，一方面使人們?cè)鰪?qiáng)自我保護(hù)意識(shí)，提升災(zāi)害應(yīng)急能力；另一方面達(dá)到增強(qiáng)人們應(yīng)對(duì)自然災(zāi)害的心理素質(zhì)、輔助調(diào)節(jié)受災(zāi)群眾災(zāi)后心理創(chuàng)傷恢復(fù)的目的。

5 ?結(jié) ?論

隨著時(shí)代的發(fā)展以及科技的不斷創(chuàng)新，科普宣傳方式也在不斷創(chuàng)新融合與發(fā)展，尤其是新媒體環(huán)境下利用大眾喜聞樂(lè)見(jiàn)的方式進(jìn)行傳播，不僅在傳播范圍、傳播形式等方面優(yōu)于傳統(tǒng)科普，而且在利用效率、受眾喜愛(ài)程度、與受眾之間保持互動(dòng)性等方面都得到了很大的提升。將科普內(nèi)容以圖片、文字、聲音、視頻、動(dòng)畫(huà)等形式生動(dòng)形象地呈現(xiàn)出來(lái)，同時(shí)結(jié)合虛擬現(xiàn)實(shí)技術(shù)、H5交互技術(shù)增強(qiáng)立體感，為社會(huì)公眾呈現(xiàn)出更為全面豐富、更具有深度研究?jī)r(jià)值、更加簡(jiǎn)單易懂的信息內(nèi)容，這不僅可以大大提高科普宣傳工作的質(zhì)量與效率，而且對(duì)于新時(shí)代科技創(chuàng)新的發(fā)展也是非常有益的，也是新媒體時(shí)代科普宣傳工作快速發(fā)展的一種潮流與趨勢(shì)。

參考文獻(xiàn)：

[1] 衛(wèi)露媛.太原市防震減災(zāi)科普宣傳現(xiàn)狀及改進(jìn)對(duì)策 [J].山西地震，2021（1）：54-56.

[2] 李霞，張方浩，杜浩國(guó)，等.云南省地震局防震減災(zāi)科普宣傳進(jìn)社區(qū)實(shí)踐探索 [J].四川地震，2022（2）：44-47.

[3] 黃家昶.HTML5廣告設(shè)計(jì)及5G技術(shù)下未來(lái)趨勢(shì)研究 [J].傳播力研究，2019，3（30）：166-167.

[4] 李桂霞.信息技術(shù)支持下的“寓教于樂(lè)” [J].清風(fēng)，2021（8）：2.

[5] 李夢(mèng)媛，吳國(guó)業(yè)，林志峰，等.基于H5技術(shù)的交互課件設(shè)計(jì)與實(shí)現(xiàn) [J].無(wú)線互聯(lián)科技，2020，17（17）：92-93+113.

[6] 陳穎娣.新媒體環(huán)境下如何提升科普宣傳的有效性 [J].中國(guó)報(bào)業(yè)，2021（16）：30-31.

作者簡(jiǎn)介：程寶玉（1999.09—），女，漢族，安徽六安人，本科，研究方向：網(wǎng)絡(luò)與新媒體；通訊作者：吳小勝（1979.10—），男，漢族，安徽池州人，高級(jí)實(shí)驗(yàn)師，碩士，研究方向：新媒體技術(shù)及應(yīng)用。