數(shù)字化核設(shè)施退役中交互式動(dòng)畫的展現(xiàn)

劉 超 尚可龍 王 麗

（中核四川環(huán)保工程有限責(zé)任公司，四川廣元 628000）

1.技術(shù)概述

1.1 技術(shù)優(yōu)勢(shì)

作為一種全新交互動(dòng)畫方式，計(jì)算機(jī)動(dòng)畫在目前互聯(lián)網(wǎng)技術(shù)的全面發(fā)展過(guò)程中已經(jīng)成為一種全新的網(wǎng)絡(luò)信息傳播方式，因此在信息化水平全面提升背景下，其受重視程度不言而喻。交互式動(dòng)畫借助多媒體技術(shù)，可以對(duì)聲音和視頻圖片能進(jìn)行有效整合，這對(duì)于推進(jìn)人與動(dòng)畫之間的交互性發(fā)展將起到有效影響。

1.1.1 交互動(dòng)畫的設(shè)計(jì)原則

交互動(dòng)畫設(shè)計(jì)原則集中表現(xiàn)為以下幾點(diǎn)：

（1）信息傳達(dá)的準(zhǔn)確性。

（2）以人為本的原則。

（3）傳播途徑的適應(yīng)性。

（4）設(shè)計(jì)中融合藝術(shù)性原則。

1.1.2 交互動(dòng)畫的設(shè)計(jì)優(yōu)勢(shì)

（1）動(dòng)畫不失真。

（2）易于操作，制作成本低。

（3）制作周期短。

1.2 制作工具介紹

Adobe Captivate 2019可以快速創(chuàng)作多種基于HTML5的交互式電子學(xué)習(xí)內(nèi)容。輕松創(chuàng)建滿足輔助功能標(biāo)準(zhǔn)的應(yīng)用程序模擬模型、產(chǎn)品演示、拖放模塊、以及軟技能和合規(guī)培訓(xùn)材料。支持利用智能創(chuàng)作工具征服新的學(xué)習(xí)環(huán)境，讓用戶創(chuàng)建各種完全響應(yīng)式遠(yuǎn)程學(xué)習(xí)內(nèi)容。使用 VR和360°媒體資源輕松設(shè)計(jì)沉浸式學(xué)習(xí)體驗(yàn)，為視頻學(xué)習(xí)添加交互性。Adobe Captivate 2019 版中引入了360°媒體支持，可以虛擬現(xiàn)實(shí)方式向您提供沉浸式遠(yuǎn)程學(xué)習(xí)體驗(yàn)，從而讓學(xué)員在無(wú)風(fēng)險(xiǎn)環(huán)境中體驗(yàn)真實(shí)情況。使用虛擬現(xiàn)實(shí)提供如虛擬瀏覽、安全演習(xí)、產(chǎn)品演練、第一響應(yīng)情況等體驗(yàn)。另外，只需點(diǎn)擊幾下，就可以將遺留的桌面課程轉(zhuǎn)換為移動(dòng)學(xué)習(xí)。記錄你的網(wǎng)絡(luò)攝像頭和電腦屏幕，添加問(wèn)題和互動(dòng)元素，并發(fā)布到HTML5。節(jié)省時(shí)間、金錢和精力，而用戶創(chuàng)建或管理視頻學(xué)習(xí)模塊，以增加學(xué)習(xí)者的保留?？奢p松地將PowerPoint幻燈片轉(zhuǎn)換為交互式eLearning，無(wú)需任何編程。

拖放交互：通過(guò)拖放游戲、測(cè)驗(yàn)和學(xué)習(xí)模塊，用戶可以在桌面和移動(dòng)端上訪問(wèn)拖放互動(dòng)，讓交互變得有趣。根據(jù)拖放目標(biāo)，從各種拖放組合中進(jìn)行選擇接受、拒絕或替換的內(nèi)容，同時(shí)為每個(gè)用戶嘗試提供音頻反饋。

HTML5：對(duì)PowerPoint的HTML5支持將Microsoft PowerPoint項(xiàng)目（包括單獨(dú)的文本、形狀、音頻和動(dòng)畫）導(dǎo)入Adobe Captivate并直接發(fā)布到獨(dú)立的HTML5頁(yè)面。

響應(yīng)項(xiàng)目：有各種主題供客戶選擇，這些主題將背景、樣式、字體和布局巧妙地融合在一起并且采用了可變框。可變框可以輕松為多個(gè)設(shè)備呈現(xiàn)完全響應(yīng)式內(nèi)容。按照客戶的要求自定義主題，或者創(chuàng)建客戶自己的主題。保存主題以在不同項(xiàng)目之間重復(fù)利用。

2.項(xiàng)目探索

2.1 項(xiàng)目需求

本項(xiàng)目通過(guò)全景地圖劃分施工片區(qū)，點(diǎn)擊地圖上的施工片區(qū)進(jìn)入到具體的施工片區(qū)頁(yè)面，在頁(yè)面內(nèi)展示不同方案的核退役施工動(dòng)畫。通過(guò)點(diǎn)擊進(jìn)入次級(jí)頁(yè)面視頻，將交互體驗(yàn)融入到線性新型視頻，并能在Web端直接部署。

2.2 項(xiàng)目應(yīng)用

2.2.1 創(chuàng)建項(xiàng)目

選擇【文件】→【新建項(xiàng)目】→【空白項(xiàng)目】。

2.2.2 創(chuàng)建頁(yè)面

選擇【文件】→【新建項(xiàng)目】→【空白項(xiàng)目】。

2.2.3 添加視頻

（1）選擇【媒體】→【視頻】。

（2）調(diào)整視頻尺寸。頁(yè)面底部存在白色畫布，它的尺寸就是最終展示播放的顯示尺寸。

（3）設(shè)置視頻屬性。視頻添加完畢后設(shè)置對(duì)應(yīng)屬性。

1）視頻類型：可選擇【漸進(jìn)式下載視頻】、【流視頻】、【Adobe流媒體服務(wù)】，除了【漸進(jìn)式下載視頻】可以上傳本地視頻更改視頻文件，其他兩種選擇是依賴關(guān)聯(lián)互聯(lián)網(wǎng)鏈接視頻地址。

2）自動(dòng)播放：通過(guò)勾選可以實(shí)現(xiàn)頁(yè)面加載后，是否第一時(shí)間自動(dòng)播放本視頻，或者等待用戶點(diǎn)擊播放。

3）定時(shí)：設(shè)置視頻在頁(yè)面出現(xiàn)的時(shí)間。

【顯示】：包含【具體時(shí)間】、【剩余的幻燈片】、【剩余的項(xiàng)目】、【視頻持續(xù)的時(shí)間】。

【具體時(shí)間】：出現(xiàn)在0s表示一直顯示在頁(yè)面。

【過(guò)渡】：如果素材畫面切換很突兀，可以選擇【僅淡入】、【僅淡出】、【淡入淡出】，并設(shè)置特效時(shí)間，減少直接切換素材的不適應(yīng)感。

【音頻】：伴隨當(dāng)前頁(yè)面，可以選擇【添加音頻】，音頻支持麥克風(fēng)現(xiàn)場(chǎng)錄制也支持本地音頻文件導(dǎo)入。

能將音頻添加到特定幻燈片。這意味著可以使用音頻菜單中的以下選項(xiàng)導(dǎo)入或編輯系統(tǒng)音頻：

導(dǎo)入到>幻燈片

錄制到>幻燈片

編輯>幻燈片

當(dāng)幻燈片同時(shí)包含旁白和系統(tǒng)音頻時(shí)，時(shí)間軸會(huì)為這兩種音頻波形顯示兩個(gè)不同的層。

（4）時(shí)間線。時(shí)間軸是幻燈片上所有對(duì)象計(jì)時(shí)的直觀表示。時(shí)間線提供了一種簡(jiǎn)單的方式，可以從較高的層次查看幻燈片上的所有對(duì)象及其相互關(guān)系。

通過(guò)時(shí)間軸可以組織對(duì)象并精確控制對(duì)象的計(jì)時(shí)。例如，在包含標(biāo)題、圖像和突出顯示框的幻燈片上，可以顯示標(biāo)題，然后在4s后顯示圖像，然后在2s后顯示突出顯示框。時(shí)間線還顯示與幻燈片或幻燈片上的對(duì)象相關(guān)的任何音頻。用戶可以使用時(shí)間線輕松協(xié)調(diào)音頻和幻燈片的計(jì)時(shí)。

1）顯示/隱藏所有項(xiàng)目；2）鎖定/解鎖所有項(xiàng)目；3）播放頭；4）時(shí)間軸標(biāo)題；5）彈出菜單；6）將播放頭移動(dòng)到開(kāi)始；7）停止；8）播放；9）將播放頭移動(dòng)到結(jié)束；10）靜音；11）經(jīng)過(guò)的時(shí)間；12）選定的開(kāi)始時(shí)間；13）選定的持續(xù)時(shí)間；14）幻燈片持續(xù)時(shí)間；15）縮放幻燈片。

（5）添加交互點(diǎn)。交互點(diǎn)可以自定義樣式，以及顏色形狀。假如需要將圖標(biāo)定義交互按鈕，一定要勾選【用作按鈕】。

設(shè)置動(dòng)作，該交互點(diǎn)動(dòng)作主要分為：【繼續(xù)】、【到上一張幻燈片】、【到下一張幻燈片】、【到上次瀏覽的幻燈片】、【返回測(cè)驗(yàn)】、【轉(zhuǎn)到幻燈片】、【跳轉(zhuǎn)到書簽】、【打開(kāi)URL或文件】、【打開(kāi)另外一個(gè)項(xiàng)目】、【發(fā)送電子郵件到】、【執(zhí)行 JavaScript】、【執(zhí)行高級(jí)動(dòng)作】、【執(zhí)行共享動(dòng)作】、【停止音頻】、【停止觸發(fā)音頻】、【顯示】、【隱藏】、【激活】、【關(guān)閉】、【分配】、【增加】、【減少】、【暫?！俊ⅰ就顺觥?、【應(yīng)用效果】、【切換】、【顯示TOC】、【顯示播放條】、【隱藏 TOC】、【隱藏播放條】、【鎖定 TOC】、【解鎖TOC】、【更改狀態(tài)】、【轉(zhuǎn)到下一個(gè)狀態(tài)】、【轉(zhuǎn)到上一個(gè)狀態(tài)】、【顯示文本】、【無(wú)動(dòng)作】。

這里主要解釋應(yīng)用是：【到上一張幻燈片】、【到下一張幻燈片】、【退出】、【轉(zhuǎn)到幻燈片】。

【到上一張幻燈片】即點(diǎn)擊交互后跳轉(zhuǎn)到上一個(gè)頁(yè)面。

【到下一張幻燈片】即點(diǎn)擊交互后跳轉(zhuǎn)到下一個(gè)頁(yè)面。

【退出】即點(diǎn)擊交互后關(guān)閉整個(gè)交互項(xiàng)目。

【轉(zhuǎn)到幻燈片】即點(diǎn)擊交互后跳轉(zhuǎn)到指定頁(yè)面。

默認(rèn)交互點(diǎn)擊框：

單擊框是幻燈片上用戶必須單擊才能執(zhí)行下一個(gè)操作的區(qū)域?？梢允褂脝螕艨騺?lái)演示應(yīng)用程序的功能，例如，將它們放置在用戶必須單擊的菜單或按鈕上就可以確定用戶成功單擊后會(huì)發(fā)生什么。例如，項(xiàng)目可以前進(jìn)到下一張幻燈片、打開(kāi)URL或發(fā)送電子郵件。

可以插入以下類型的點(diǎn)擊框：

右擊框→左鍵單擊框→雙擊框

除非在屬性中指定為雙擊或右鍵單擊框，否則單擊框?qū)⒊洚?dāng)左鍵單擊框?？梢酝ㄟ^(guò)相關(guān)圖標(biāo)識(shí)別不同類型的點(diǎn)擊框。

2.3 發(fā)布項(xiàng)目

選擇【發(fā)布】→【發(fā)布到電腦】可以保存到本地，發(fā)布版本選擇HTML5，只有在查看托管在Web服務(wù)器上的HTML5輸出時(shí)，才能查看項(xiàng)目中的交互。在計(jì)算機(jī)上本地查看發(fā)布的輸出時(shí)，交互不可見(jiàn)。

發(fā)布后可以獲取源代碼，以便將相關(guān)交互視頻頁(yè)面整合到自己Web頁(yè)面。

2.4 分析項(xiàng)目源碼

2.4.1 發(fā)布源碼

發(fā)布HTML5包含以下源碼：ar文件夾、assets文件夾、callees文件夾、dr文件夾、vr文件夾、以及開(kāi)始結(jié)束html頁(yè)面、project.txt。

ar文件夾：系統(tǒng)自帶音效等素材庫(kù)。

assets文件夾：系統(tǒng)自帶圖標(biāo)等素材庫(kù)。

calless文件夾：script腳本庫(kù)。

dr文件夾：頁(yè)面元素json 數(shù)據(jù)package。

vr文件夾：多媒體庫(kù)。

發(fā)布出的HTML5主頁(yè)上，并沒(méi)有自己之前添加創(chuàng)建的交互按鈕，實(shí)際上交互按鈕反饋以及作為流媒體json package整合到配置文件中，很難在此頁(yè)面進(jìn)行內(nèi)部按鈕的二次開(kāi)發(fā)。

2.4.2 VUE整合HTML5

（1）使用vue 腳手架工具 vue-cli 創(chuàng)建項(xiàng)目：

安裝node.js”安裝后可以打開(kāi)cmd 輸入node -v 顯示版本號(hào)”→安裝webpack”打開(kāi)cmd 輸入npm install webpack -g全局安裝”→安裝vue-cli”npm install vuecli -g”→創(chuàng)建項(xiàng)目”vue init webpack（項(xiàng)目名稱）”。

（2）安裝插件：

1）HTML5考慮自適應(yīng)，安裝一個(gè)px自動(dòng)轉(zhuǎn)換成rem的插件；

2）下載npm i lib-flexible --save在main.js引入 import'lib-flexible/flexible'；

4）npm install px2rem-loader，在build文件中找到util.js，將px2rem-loader添加到cssLoaders中；5）安裝后，可以npm run dev；6）過(guò) npm 安裝 npm i vant -S。

3.結(jié)語(yǔ)

以上案例均按照通用操作撰寫，整個(gè)項(xiàng)目依托于交互式H5動(dòng)畫視頻發(fā)布，無(wú)需更多撰寫前端代碼，高效地完成整個(gè)退役方案支線選擇，提高了用戶體驗(yàn)。

總結(jié)優(yōu)點(diǎn)：

（1）即使在響應(yīng)式項(xiàng)目中，也能創(chuàng)建包括運(yùn)動(dòng)路徑和旋轉(zhuǎn)的流暢對(duì)象過(guò)渡?，F(xiàn)在可以在單個(gè)對(duì)象和對(duì)象組中添加效果。定義線性、自定義和徒手畫運(yùn)動(dòng)路徑，以控制對(duì)象的移動(dòng)方式。鼠標(biāo)懸停即可預(yù)覽動(dòng)畫，在集成的效果和項(xiàng)目時(shí)間軸上查看效果的表現(xiàn)。針對(duì)不同的設(shè)備設(shè)計(jì)不同的效果，從而提供出色的響應(yīng)式體驗(yàn)。

（2）直接發(fā)布到 HTML5 時(shí)保留文本、形狀、音頻和動(dòng)畫。憑借對(duì)可擴(kuò)展 HTML5、移動(dòng)主題、播放欄的完善支持，以及在任何設(shè)備上隨時(shí)、隨地暫停和恢復(fù)的能力，使遠(yuǎn)程學(xué)習(xí)內(nèi)容更具移動(dòng)性。

（3）錄制系統(tǒng)音頻及解說(shuō)，或者導(dǎo)入各種格式的視頻（AVI、MOV、FLV、MPEG）。將音頻或視頻與幻燈片和定時(shí)對(duì)象同步。編輯音頻以改正錯(cuò)誤，添加外部音軌，或者將音效加入單個(gè)對(duì)象。

（4）通過(guò)直觀的 UI 調(diào)用 Adobe Captivate 強(qiáng)大的功能，讓創(chuàng)作過(guò)程輕松高效。界面對(duì)主題專家來(lái)說(shuō)足夠簡(jiǎn)單，對(duì)資深用戶來(lái)說(shuō)又足夠強(qiáng)大。