面向智能終端的富媒體內容自助轉化技術研究

摘 要 針對目前數字內容出版行業碰到的開發周期周期長、開發成本高等困難，提出一種無需編寫代碼、可快速低成本進行富媒體數字內容App創建、發布與管理的自助模式，并結合內容發布過程，具體講述了各個環節的實現機制。

關鍵詞 數字內容出版 移動平臺 App iOS/Android 自助出版

中圖分類號：TN929.5 文獻標識碼：A

1 數字內容出版情況概述和分析

目前數字內容出版具有如下幾個特征：

（1）以App方式發布數字內容成為移動平臺的主要模式。移動平臺的內容發布特點不同于桌面時代的web方式，是以富媒體App應用程序方式進行發布，App開發模式可以充分根據設備的屏幕尺寸進行UI優化，能夠充分利用設備硬件性能、包括使用移動設備的傳感器、攝像頭等硬件資源，以App方式，可以開發出具有極佳用戶體驗的富媒體交互數字內容，但終端系統具有多樣化、尺寸的差異化等特點，這些因素大大提高了開發數字內容App 的難度和轉化成本。

（2）眾多內容企業缺少移動技術開發能力。目前除了大型出版機構擁有自己的移動開發技術團隊外，眾多出版機構及內容原創企業并沒有移動應用開發能力，熟悉移動領域開發的專業人才極其缺乏并且代價高昂，對于二、三線城市出版機構甚至很難在本地找到移動開發團隊。目前出版機構只能將內容交給為數不多的內容銷售平臺，但目前銷售平臺僅僅支持簡單的以文字為主的epub格式及pdf格式，無法滿足具有良好體驗的富媒體數字內容發布，造成了眾多優質內容無法進入移動渠道。

（3）傳統開發模式無成本和效率優勢，制約行業發展。目前，移動富媒體內容App的開發模式，是由內容資源所有者依托于專業的移動開發團隊為其創建富媒體App，然后發布到iOS、Android平臺，由于移動平臺的開發團隊并不熟悉數字媒體的呈現方式，造成了開發周期長，溝通成本、開發成本居高不下的狀況，高啟的開發成本及漫長的開發周期嚴重制約了數字內容出版行業的發展 。

基于上述分析，本文提出了針對性的解決方案——無需編寫代碼便可快速、低成本進行富媒體數字內容App創建、發布與管理的自助模式，并結合軟件開發過程，具體講述了各個環節的實現機制。

通過該自助模式，用戶可將圖像、文字、動畫、音視頻等內容素材復合使用，并選擇內容動畫模塊，自助將自己的數字內容創建為跨平臺富媒體程序（Web，App），并可在主流移動平臺iOS、Android上發布，用戶無須了解程序開發，也無須與各個平臺技術開發團隊合作另行開發跨平臺內容，從而極大地節省了成本、提高了作業效率。

2 富媒體數字內容自助出版模式

2.1 總體思路

本文圍繞富媒體內容自助創建及管理并與移動平臺技術相結合的概念展開研究，“無需編寫代碼，開發跨終端交互富媒體”，“所見即所得的實時測試”。自助開發流程示意（如圖1）：

圖1 可視化交互富媒體內容創建方式

圖1中創建者使用創建工具在線編輯交互內容，經過系統轉換，變成可支持Web和App預覽和發布的數字化內容。

本文主要內容包括數字內容交互方式結構化定義、Web編輯設定生成交互數據，跨終端數據解析展現技術，具體說明如下：（1）研究交互式富媒體內容數據格式定義：結構化數據除了定義基本的內容元數據、版式信息外，對內容動畫方式、交互方式等進行數據結構定義。（2）可視化在線創建、編輯工具及結構化交互數據轉換機制：實現用戶通過可視化工具，無需代碼自由設定富媒體內容的排版設計、交互設計、呈現效果設計，媒體類型將支持文本、圖片、音視頻、map、html5等富媒體格式，并將根據用戶的設定輸出成結構化交互數據用于后端處理。（3）研究可解析結構化交互數據，跨終端展現技術。解析數據并調用相關定義好的展現模塊，按用戶定義的效果、功能進行自動呈現。

2.2 實踐研究

為了便于框架的擴展性，上文三個模塊之間采用 API方式調用，減低耦合性，同時，還支持通過合適的適配方法讓各模塊應用于其他系統。

2.2.1 交互式富媒體內容數據格式定義

本文采用的數據格式為JSON，①主要因為JSON與javascript通信的便捷性，以及網絡傳輸方面的考慮。交互數據定義包括以下三種類型：

（1）Overlay：用于描述物體自身信息，“物體”表示一個或一組素材。具體說明如表1：

（2）Animation：用于記錄物體動畫信息，overlay與animation是一對多的關系，表示一個物體可以由多個動畫組合出豐富的展示方式。

（3）Action：用于記錄物體接受用戶控制信息，事件驅動播放動畫組。

在數據組織結構上采用內容集與多層結構的方法定義；結合靜態元素與動態行為，描述數字內容的具體演繹規則，可將富媒體分解成融合內容、排版、行為、層次等因素的內容演繹元數據的定義。

2.2.2 可視化在線編輯工具

Web端使用javascript MVC框架Backbone，②其特點適合的應用場景是單頁面應用，并且頁面上有大量數據模型，模型之間需要進行復雜的信息溝通。Backbone 在這種場景下，能很好的實現模塊間松耦合和事件驅動。

Backbone 的優點和一些經驗 Tip：

o View 的劃分將頁面上的視圖元素解耦，粒度細化。View 間通過事件和 Model 通訊，避免了 DOM 事件的濫用。

o Model 和 RESTful③的通訊方式對于后端人員非常友好。

o MVC 架構清晰

o Collection/Model 抽象了以前雜亂的 AJAX④請求，CRUD⑤請求變得非常非常方便。

o 建議 View -> Model 單向依賴。

o 配上模塊化加載器使用例如 SeaJS。

服務器支持RESTFul協議，NoSQL⑥數據庫，RESTFul支持CRUD與Backbone完美的結合，減少了大量開發量。

Web編輯工具的基本布局如圖2所示：

主要分為四塊區域：（1）頁面列表：通過頁面列表切換不同頁面對其進行編輯。（2）交互組件區域：通過點擊組件按鈕在編輯區域添加各類交互組件（3）組件屬性設置區域：添加了組件后，可以通過屬性設置來設定組件的基本數值、動畫效果、播放次序等。Overlay，Animation，Action的數據編輯設定區域。（4）交互內容編輯區域：白色部分為可視的編輯區域。

每一個添加的交互元素（Overlay）都可以通過右側組件屬性設置欄進行組件的基本信息設定。圖3為組件屬性設定圖解：

動畫（Animation）的創建與編輯：使用者可以選擇已完成基本設置的組件在ANIMATIONS中創建與編輯該組件的交互動畫效果。同一個組件可以創建多個交互動畫效果，使用者可以根據需要對每一個動畫效果進行單獨編輯（如圖4所示）。

2.2.3 終端展現技術

展現層采用單態Factory模式⑦將overlay按照坐標、層次信息創建相應的View，本文將重點講述Animation與Action之間的管理模式，動畫支持時間觸發、交互觸發機制，支持單一動畫控制及組動畫控制，支持動畫多分支控制。從動畫定義、動畫組織、動畫觸發機制到動畫屬性交互設定人機界面，意派科技已實現完整的架構開發與功能呈現。

（1）動畫概念說明：

- sprit life Cycle：元素生命周期

- sprit animation：元素動畫，元素生命周期內改變元素屬性（大小、位置、角度、透明度）。

- sprit animation timeControl：元素動畫控制器，控制元素動畫的播放狀態。

- stage timeControl：動畫組控制器，由動畫組控制器控制其下的所有元素動畫播放狀態。

- stage sub timeControl：子動畫組控制器，實現動畫組的嵌套控制。

（2）動畫管理及觸發機制設定：

- 每個物體的動畫屬性：

出現：設定life cycle起始點，默認為timeline起始點

消失：設定life cycle終點，默認為timeline終點

動作（動畫）：在life cycle時間段內改變物體屬性。

- 初始狀態：

element：出現

animation：不播放

- 時間觸發器（timeline）：

以時間線來觸發物體的出現、動作、消失時間。

- 交互腳本觸發器（action）：

以交互來觸發、設定物體的動作?？舍槍imeline和元素設定交互觸發。

3 總結

本文通過研究交互式數字內容的演繹模式，針對富媒體內容特點，提出了一套的交互數據結構，在此數據開發了一套包含了在線編輯工具和展現工具（Web，App）的內容管理系統WCMS，降低了交互式內容創建中的技術難點。

注釋

① JSON： 即 JavaScript. Object Natation，它是一種輕量級的數據交換格式，非常適合于服務器與 JavaScript. 的交互。

② Backbone： 是一種重量級javascript MVC 應用框架，通過Models進行key-value綁定及custom事件處理，通過Collections提供一套豐富的API用于枚舉功能，通過 Views來進行事件處理及與現有的Application通過RESTful JSON接口進行交互。

③ RESTful： 表征狀態轉移（Representational State Transfer，簡稱REST）是Roy Fielding博士在2000年他的博士論文中提出來的一種軟件架構風格。

④ AJAX： 為“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術）。

⑤ CRUD： Create（創建）、Read（讀?。pdate（更新）、Delete（刪除）。

⑥ NoSQL： 是對不同于傳統的關系型數據庫的數據庫管理系統的統稱。

⑦ Factory 模式： 工廠方法模式（Factory method pattern）是一種實現了“工廠”概念的面向對象設計模式。 工廠方法模式通過定義一個單獨的創建對象的方法來解決這些問題。由子類實現這個方法來創建具體類型的對象。

參考文獻

[1] 韋伯.帕拉斯泰迪斯.魯濱遜.REST實戰：中文版超媒體和系統架構.中國：東南大學出版社，2011

[2] Addy Osmani.Backbone.js Application.USA： O'REILLY 2013.

[3] 新視角文化行.Flash-CS6動畫制作實戰從入門到精通.中國：人民郵電出版社，2013.