數字化核設施退役中交互式動畫的展現

劉 超 尚可龍 王 麗

（中核四川環保工程有限責任公司，四川廣元 628000）

1.技術概述

1.1 技術優勢

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

1.1.1 交互動畫的設計原則

交互動畫設計原則集中表現為以下幾點：

（1）信息傳達的準確性。

（2）以人為本的原則。

（3）傳播途徑的適應性。

（4）設計中融合藝術性原則。

1.1.2 交互動畫的設計優勢

（1）動畫不失真。

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

（3）制作周期短。

1.2 制作工具介紹

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

拖放交互：通過拖放游戲、測驗和學習模塊，用戶可以在桌面和移動端上訪問拖放互動，讓交互變得有趣。根據拖放目標，從各種拖放組合中進行選擇接受、拒絕或替換的內容，同時為每個用戶嘗試提供音頻反饋。

HTML5：對PowerPoint的HTML5支持將Microsoft PowerPoint項目（包括單獨的文本、形狀、音頻和動畫）導入Adobe Captivate并直接發布到獨立的HTML5頁面。

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

2.項目探索

2.1 項目需求

本項目通過全景地圖劃分施工片區，點擊地圖上的施工片區進入到具體的施工片區頁面，在頁面內展示不同方案的核退役施工動畫。通過點擊進入次級頁面視頻，將交互體驗融入到線性新型視頻，并能在Web端直接部署。

2.2 項目應用

2.2.1 創建項目

選擇【文件】→【新建項目】→【空白項目】。

2.2.2 創建頁面

選擇【文件】→【新建項目】→【空白項目】。

2.2.3 添加視頻

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

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

（3）設置視頻屬性。視頻添加完畢后設置對應屬性。

1）視頻類型：可選擇【漸進式下載視頻】、【流視頻】、【Adobe流媒體服務】，除了【漸進式下載視頻】可以上傳本地視頻更改視頻文件，其他兩種選擇是依賴關聯互聯網鏈接視頻地址。

2）自動播放：通過勾選可以實現頁面加載后，是否第一時間自動播放本視頻，或者等待用戶點擊播放。

3）定時：設置視頻在頁面出現的時間。

【顯示】：包含【具體時間】、【剩余的幻燈片】、【剩余的項目】、【視頻持續的時間】。

【具體時間】：出現在0s表示一直顯示在頁面。

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

【音頻】：伴隨當前頁面，可以選擇【添加音頻】，音頻支持麥克風現場錄制也支持本地音頻文件導入。

能將音頻添加到特定幻燈片。這意味著可以使用音頻菜單中的以下選項導入或編輯系統音頻：

導入到>幻燈片

錄制到>幻燈片

編輯>幻燈片

當幻燈片同時包含旁白和系統音頻時，時間軸會為這兩種音頻波形顯示兩個不同的層。

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

通過時間軸可以組織對象并精確控制對象的計時。例如，在包含標題、圖像和突出顯示框的幻燈片上，可以顯示標題，然后在4s后顯示圖像，然后在2s后顯示突出顯示框。時間線還顯示與幻燈片或幻燈片上的對象相關的任何音頻。用戶可以使用時間線輕松協調音頻和幻燈片的計時。

1）顯示/隱藏所有項目；2）鎖定/解鎖所有項目；3）播放頭；4）時間軸標題；5）彈出菜單；6）將播放頭移動到開始；7）停止；8）播放；9）將播放頭移動到結束；10）靜音；11）經過的時間；12）選定的開始時間；13）選定的持續時間；14）幻燈片持續時間；15）縮放幻燈片。

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

設置動作，該交互點動作主要分為：【繼續】、【到上一張幻燈片】、【到下一張幻燈片】、【到上次瀏覽的幻燈片】、【返回測驗】、【轉到幻燈片】、【跳轉到書簽】、【打開URL或文件】、【打開另外一個項目】、【發送電子郵件到】、【執行 JavaScript】、【執行高級動作】、【執行共享動作】、【停止音頻】、【停止觸發音頻】、【顯示】、【隱藏】、【激活】、【關閉】、【分配】、【增加】、【減少】、【暫停】、【退出】、【應用效果】、【切換】、【顯示TOC】、【顯示播放條】、【隱藏 TOC】、【隱藏播放條】、【鎖定 TOC】、【解鎖TOC】、【更改狀態】、【轉到下一個狀態】、【轉到上一個狀態】、【顯示文本】、【無動作】。

這里主要解釋應用是：【到上一張幻燈片】、【到下一張幻燈片】、【退出】、【轉到幻燈片】。

【到上一張幻燈片】即點擊交互后跳轉到上一個頁面。

【到下一張幻燈片】即點擊交互后跳轉到下一個頁面。

【退出】即點擊交互后關閉整個交互項目。

【轉到幻燈片】即點擊交互后跳轉到指定頁面。

默認交互點擊框：

單擊框是幻燈片上用戶必須單擊才能執行下一個操作的區域。可以使用單擊框來演示應用程序的功能，例如，將它們放置在用戶必須單擊的菜單或按鈕上就可以確定用戶成功單擊后會發生什么。例如，項目可以前進到下一張幻燈片、打開URL或發送電子郵件。

可以插入以下類型的點擊框：

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

除非在屬性中指定為雙擊或右鍵單擊框，否則單擊框將充當左鍵單擊框。可以通過相關圖標識別不同類型的點擊框。

2.3 發布項目

選擇【發布】→【發布到電腦】可以保存到本地，發布版本選擇HTML5，只有在查看托管在Web服務器上的HTML5輸出時，才能查看項目中的交互。在計算機上本地查看發布的輸出時，交互不可見。

發布后可以獲取源代碼，以便將相關交互視頻頁面整合到自己Web頁面。

2.4 分析項目源碼

2.4.1 發布源碼

發布HTML5包含以下源碼：ar文件夾、assets文件夾、callees文件夾、dr文件夾、vr文件夾、以及開始結束html頁面、project.txt。

ar文件夾：系統自帶音效等素材庫。

assets文件夾：系統自帶圖標等素材庫。

calless文件夾：script腳本庫。

dr文件夾：頁面元素json 數據package。

vr文件夾：多媒體庫。

發布出的HTML5主頁上，并沒有自己之前添加創建的交互按鈕，實際上交互按鈕反饋以及作為流媒體json package整合到配置文件中，很難在此頁面進行內部按鈕的二次開發。

2.4.2 VUE整合HTML5

（1）使用vue 腳手架工具 vue-cli 創建項目：

安裝node.js”安裝后可以打開cmd 輸入node -v 顯示版本號”→安裝webpack”打開cmd 輸入npm install webpack -g全局安裝”→安裝vue-cli”npm install vuecli -g”→創建項目”vue init webpack（項目名稱）”。

（2）安裝插件：

1）HTML5考慮自適應，安裝一個px自動轉換成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）過 npm 安裝 npm i vant -S。

3.結語

以上案例均按照通用操作撰寫，整個項目依托于交互式H5動畫視頻發布，無需更多撰寫前端代碼，高效地完成整個退役方案支線選擇，提高了用戶體驗。

總結優點：

（1）即使在響應式項目中，也能創建包括運動路徑和旋轉的流暢對象過渡。現在可以在單個對象和對象組中添加效果。定義線性、自定義和徒手畫運動路徑，以控制對象的移動方式。鼠標懸停即可預覽動畫，在集成的效果和項目時間軸上查看效果的表現。針對不同的設備設計不同的效果，從而提供出色的響應式體驗。

（2）直接發布到 HTML5 時保留文本、形狀、音頻和動畫。憑借對可擴展 HTML5、移動主題、播放欄的完善支持，以及在任何設備上隨時、隨地暫停和恢復的能力，使遠程學習內容更具移動性。

（3）錄制系統音頻及解說，或者導入各種格式的視頻（AVI、MOV、FLV、MPEG）。將音頻或視頻與幻燈片和定時對象同步。編輯音頻以改正錯誤，添加外部音軌，或者將音效加入單個對象。

（4）通過直觀的 UI 調用 Adobe Captivate 強大的功能，讓創作過程輕松高效。界面對主題專家來說足夠簡單，對資深用戶來說又足夠強大。