多終端數(shù)字皮影交互系統(tǒng)的設計與實現(xiàn)

蔡森

（北京工業(yè)大學北京100124）

多終端數(shù)字皮影交互系統(tǒng)的設計與實現(xiàn)

蔡森

（北京工業(yè)大學北京100124）

為拯救皮影這門傳統(tǒng)藝術，筆者將自己已有研究成果，與市場上幾款廣受年輕人喜愛的手機應用相結合，設計開發(fā)了多終端數(shù)字皮影交互系統(tǒng)；此系統(tǒng)運用Adobe AIR跨平臺技術，采用ActionScript3.0以及Java程序設計語言進行客戶端與服務器端開發(fā)；分控端運行在Android或iOS操作系統(tǒng)的移動終端之上，主控端運行在PC或筆記本電腦之上；分控端通過無線網(wǎng)絡控制主控端場景中的人物，實現(xiàn)了跨平臺多設備聯(lián)合皮影表演的可能。

數(shù)字皮影；跨平臺；移動互聯(lián)；人機交互；多點觸控

皮影是中國的一種傳統(tǒng)藝術，擁有近千年的歷史，是古代中國的一種表演形式。皮影戲于2006年入選中國非物質文化遺產(chǎn)名錄，于2011年入選世界非物質文化遺產(chǎn)名錄［1］。

然而現(xiàn)如今，隨著科技的發(fā)展，比起畫面絢麗的網(wǎng)絡游戲、極具視覺與心靈沖擊力的電影以及各類霓虹燈照射下的舞臺，傳統(tǒng)的皮影表演已經(jīng)無法給人以太多的娛樂享受，皮影必須要融入現(xiàn)代科技元素，才能擁有更加長遠的傳承與發(fā)展［2_3］。

數(shù)字藝術與皮影結合，可以讓皮影重新煥發(fā)自己的活力［4］。近些年，隨著數(shù)字藝術與計算機圖形學領域的進一步發(fā)展，在計算機上制作皮影，并制作動態(tài)的交互已不再是難題。近年來，社會上也出現(xiàn)了如《桃花源記》、《梁山伯與祝英臺》等等優(yōu)秀的數(shù)字皮影作品。

但是，目前數(shù)字皮影還沒有像曾經(jīng)的傳統(tǒng)皮影那樣受到廣大人民的歡迎，皮影的制作、動作的錄制等方面還沒有形成自己的一套體系。而且大多數(shù)作品擁有空間的限制，無法充分利用現(xiàn)在發(fā)達的互聯(lián)網(wǎng)系統(tǒng)，這些都是有待解決的問題［5_6］。

1　系統(tǒng)概述

本系統(tǒng)硬件總體架構設計如圖1所示，用戶只需在手機或平板中安裝此系統(tǒng)的分控端應用，并通過無線網(wǎng)絡連接到筆記本電腦之上，即可用手指在手機或平板之上，控制筆記本電腦上的皮影人物，進而控制幕布上的皮影人物進行表演。

系統(tǒng)的主控設備由一臺筆記本電腦控制，組網(wǎng)設備由一臺路由器擔任，分控設備由手機或平板終端擔任，可使用Android或iOS操作系統(tǒng)，投影設備由投影儀或任意高清輸出設備擔任，并由高清視頻輸出線與電腦連接。

圖1　系統(tǒng)總體架構圖

1.1客戶端架構

本系統(tǒng)客戶端分為主控端與分控端兩部分，兩部分設備各自安裝不同的軟件，并對相同的IP地址與端口進行監(jiān)聽。

主控端軟件主要進行實時表演的呈現(xiàn)、錄制和回放，包括歡迎界面、網(wǎng)絡配置界面、場景選擇界面以及實時表演界面。

分控端軟件主要進行皮影背景知識的介紹、影人的自由定制、快速選擇，包括歡迎界面、主菜單界面、自由定制界面、快速選擇界面、幫助界面、服務器連接界面以及表演界面。

1.2服務器端架構

服務器端的設計使用的是Java程序設計語言。服務器共包括一個窗口，兩個按鈕，一個文本框。架構中，窗口由JFrame控件實現(xiàn)，負責承載整個服務器界面，是按鈕與文本框的載體。按鈕將使用JBttton實現(xiàn)，通過點擊按鈕可以執(zhí)行不同的事件。在此服務器中，其中一個按鈕為啟動服務器選項，另一個為停止服務器選項，分別控制服務器的啟動和停止；顯示文字的標簽將使用JLabe1實現(xiàn)，用于標注服務器當前的運行狀態(tài)。

2　系統(tǒng)客戶端設計與實現(xiàn)

系統(tǒng)客戶端將使用Adobe AIR跨平臺工具，在Windows上運用F1ash Professiona1 CS6進行美術素材與界面布局的設計，使用ActionScript3.0腳本語言，將設計好的各類素材組合在一起，并針對主控端和分控端的不同需求，對網(wǎng)絡連接、界面切換等功能進行編程開發(fā)。開發(fā)完畢后發(fā)布的應用可在Windows、Android、iOS操作系統(tǒng)下運行。

客戶端整體設計圖2所示，圖中，系統(tǒng)客戶端被分成主控端與分控端兩部分，自由定制模塊為分控端獨有模塊，錄制回放模塊為主控端獨有模塊，實時表演模塊為兩端共有模塊，但功能各不相同。

圖2　系統(tǒng)硬件結構圖

下方的7個界面中，有4個界面分屬于以上3大模塊，分別具有各自的功能，而另外3個沒有直線連接的界面為輔助界面，將3大核心功能串聯(lián)起來形成一個完整的應用軟件。

下面就對此應用系統(tǒng)所使用的關鍵技術，分模塊進行一一闡釋。

3　關鍵技術的實現(xiàn)

此系統(tǒng)在客戶端共分為3大模塊，每一模塊均由F1ash中的美術素材，配合ActionScript3.0腳本語言配合進行開發(fā)，現(xiàn)一一詳述如下：

3.1基本概念介紹

為便于讀者理解，在介紹具體實現(xiàn)方法之前，筆者需要介紹F1ash中特有的一些基本概念：時間軸、影片剪輯和骨骼。

F1ash中的時間軸指的是隨著時間變化的一組美術素材序列，每一個時間點單位成為“幀”，每一幀的美術素材可相同，也可不同。整個時間軸所有幀的美術素材，共同構成了一個影片剪輯。

F1ash中的影片剪輯英文稱為MovieC1ip，指的是一個內(nèi)部包含時間軸，可具有多幀美術素材資源。此資源可進行命名操作，程序可通過影片剪輯的名稱對其進行控制。在本系統(tǒng)中，自由定制與快速選擇功能的實現(xiàn)，就是利用了這些特性，使用程序動態(tài)控制素材切換到特定幀，以達到不同的顯示效果。

F1ash中的骨骼是在CS4版本及之后版本新加入的特定功能，它可以使多個影片剪輯按照某個特定的骨架綁定在一起。被綁定的骨架的平移量與旋轉角度都會受到骨骼工具的限制，從而達到模擬人體或動物骨骼運動的效果。

3.2自由定制模塊實現(xiàn)

自由定制模塊是本皮影系統(tǒng)的一大創(chuàng)新點，它包括快速選擇界面與自由定制界面，快速選擇界面可以由用戶選定自己喜愛的特定人物，自由定制界面可以由用戶將多個人物的各部分進行混搭。

首先介紹快速選擇界面的功能實現(xiàn)：快速選擇界面如圖3所示，紅框為屏幕顯示區(qū)域，下方圖片為紅色框內(nèi)圖像放大顯示的效果。皮影人物為上方圖層，共包含9個影片剪輯。背景以及文字介紹為下方圖層，為一個長條形影片剪輯。下方有兩個按鈕分別控制介紹文字的左右卷動與影人的切換，具體實現(xiàn)方式如下：

圖3　快速選擇界面

1）將皮影頭、上身、下身、左上臂、左下臂、右上臂、右下臂、左腳和右腳的影片剪輯分別命名為zskin1_zskin9，為背景與文字所在的影片剪輯命名為midCore，左下方按鈕命名為pre_page，右下方按鈕命名為next_page以便在程序中調(diào)用。

2）在進入當前幀后，定義一個數(shù)組，并將zskin1_zskin9共9個影片剪輯放入數(shù)組中，代碼如下：

var zSkinArray：Array=new Array（）j//定義數(shù)組

//將9個元素放入數(shù)組

zSkinArray.push（zskin1，zskin2，zskin3，zskin4，zskin5，zskin6，zskin7，zskin8，zskin9）j

3）為pre_page、next_page兩個按鈕加入單擊事件，以實現(xiàn)左右換頁以及選擇人物的功能，pre_page單擊事件核心代碼實現(xiàn)如下：

此代碼使用TweenLite.to函數(shù)執(zhí)行緩動操作，將圖3中的背景圖層像左側移動，這里使用一個cur_page變量標記當前頁數(shù)，在移動到第一頁時，用戶若再次點擊pre_page按鈕，應鎖定在第一頁不再翻動，next_page按鈕的實現(xiàn)與pre_page在思想上大體一致，只是實現(xiàn)細節(jié)略有不同，這里不再贅述。

4）單擊下方兩個按鈕除翻頁外，zSkinArray中的元素也需要發(fā)生相應變化，向用戶展示不同的皮影人物。zSkinArray中的每個元素都包含9幀不同的圖像，以skin1為例，其一個影片剪輯包含9個圖像，在點擊pre_page或next_page時，zskin1會利用gotoAndStop函數(shù)跳至其中一幀，而zskin2_ zskin9也會進行以上操作，其核心代碼如下：

在這里，num會根據(jù)用戶的選擇而賦值為1_9，G1oba1Var.ShadowNumber為一個擁有9個元素的數(shù)組，其每一個元素代表每一個zskin影片剪輯的當前幀，這9個元素也會形成一個序號來唯一確定用戶的當前選擇，例如孫悟空為9個1，豬八戒為9個2……在自由定制界面，也會用到此數(shù)組，只不過9個元素的數(shù)值會不完全向相同。

接下來介紹自由定制界面的實現(xiàn)方式，自由定制界面圖如圖4所示。

圖4　自由定制界面

自由定制界面中，用戶可以點擊右側影人的各身體部分，之后從左側的9個方格中選定其他樣式的相應部位，以達到右側所示的混搭效果；在功能的實現(xiàn)上，此界面與上面介紹的快速選擇界面有著較大的相似之處：

1）將左側影片剪輯命名為k1—k9，k1—k9每個影片剪輯中包含9個不同人物的同一部分，k1—k9下方的按鈕命名為sc1—sc9，右側人物的部分命名為skin1—skin9，在用戶點擊右側人物的某一部分時，左側k1_k9會跳至相應的幀，核心代碼如下：kIndex=parseInt（e.target.name.charAt（4）j//獲取當前部位索引所在的幀

for（var k：int=0jk＜kArray.1engthjk++）

｛//將所有左側影片剪輯跳至當前部位索引所在的幀

（kArray［k］as MovieC1ip）.gotoAndStop（kIndex）j

｝

2）當用戶點擊左側9個方格中的其中一個時，右側skin1—skin9中的某個對應影片剪輯也應進行相應的變化，其核心代碼如下：

//獲取當前點擊目標名稱

skinArray［skinIndex］.gotoAndStop（tmpNum）j//右側部位影片剪輯跳至相應的幀

G1oba1Var.ShadowNumber［skinIndex］=tmpNumj//將當前影人信息寫入全局數(shù)組

這里再次出現(xiàn)了前面提到的G1oba1Var.ShadowNumber數(shù)組，自由定制界面中，由于用戶的隨意性較強，9個元素的數(shù)值大多數(shù)情況下都不會完全相同，比如圖中的影人信息，在數(shù)組中的表示序列即為：2、9、4、1、3、1、6、1、1。依據(jù)乘法原理，此皮影各部位具有99=387 420 489種組合可供用戶選擇。

3.3實時表演模塊的實現(xiàn)

實時表演模塊為主控端與分控端共有模塊，其功能各不相同，表演界面分別如圖5的上半部分與下半部分所示。實時表演功能主要完成主控端與分控端人物坐標、音樂、特效、朝向以及當前場景數(shù)據(jù)的同步。用戶在分控端使用移動設備發(fā)出的數(shù)據(jù)，需要一個服務器接收并轉發(fā)到主控端；此系統(tǒng)中，數(shù)據(jù)的通信主要依靠一個Java Socket服務器進行，其接收讀取客戶端傳輸來的數(shù)據(jù)并轉發(fā)給主控端。

圖5　實時表演模塊界面

分控端在表演過程中，會將影人的表演信息作為一個數(shù)據(jù)包發(fā)送給主控端，其核心代碼如下：

圖5所示的分控端每秒會執(zhí)行40次上述代碼，向主控端發(fā)送40個數(shù)據(jù)包，每一個數(shù)據(jù)包中包含9個小數(shù)據(jù)包，分別表示影人身體9部位的當前信息，每個小數(shù)據(jù)包內(nèi)有3個數(shù)值：第一位表示當前控制的哪個角色（范圍1_5），第二位與第三位是當前部位骨骼的坐標信息（x坐標與y坐標）。

服務器接收后，會轉發(fā)至主控端，主控端會根據(jù)角色信息進行解析，以調(diào)用不同的影人進行坐標同步。

3.4錄制回放模塊的實現(xiàn)

錄制回放本質是一個當前數(shù)據(jù)的存儲與讀取的過程，將皮影表演時的所有信息存入一個文件，在回放時讀取已保存的文件，根據(jù)特定數(shù)據(jù)還原表演時的狀態(tài)即可。

需要錄制回放的各類數(shù)據(jù)信息如表1所示。

表1　需要錄制的各類數(shù)據(jù)

錄制回放模塊在界面中，主要表現(xiàn)為圖5下圖右下角的文本輸入框和3個按鈕，文本輸入框用于輸入錄制的文件名，其程序中命名為editFi1eName，輸入框右側前3個按鈕依次為：開始錄制按鈕、回放按鈕、打開按鈕，其程序中命名分別為btn_record、btn_rep1ay、btn_open。

表1表示的是每一幀需要寫入文件的信息，共包括142 個int類型的變量，分別記錄當前場景、特效、音樂、皮膚、朝向以及各骨骼節(jié)點的坐標。

當用戶點擊錄制按鈕btn_record之后，程序會將會獲取上圖中的所有信息，將其存入一個叫做recordSaveArray數(shù)組之中。其核心代碼如下：

在坐標存入數(shù)組后，使用Fi1eStream類的writeInt函數(shù)將recordSaveArray數(shù)組的所有元素寫入文件即可進行錄像的保存。

用戶點擊btn_open按鈕可使用對話框打開特定的錄像文件，打開完畢后，點擊btn_rep1ay按鈕后，便會使用fi1eStream.readInt（）函數(shù)讀取之前存入的數(shù)值，然后對于不同數(shù)值進行以下操作。

對于表1中的第1位——場景信息，回放時會根據(jù)數(shù)值不同，使用主控端背景影片剪輯的gotoAndStop（）函數(shù)跳至相應的幀；對于第2位——特效或音樂信息，回放時會根據(jù)不同的數(shù)值創(chuàng)作一個播放特定音樂或特效的Event事件，之后使用dispatchEvent（event）命令將事件發(fā)出，以起到播放音樂或者特效的作用；對于3—47位的皮膚信息，以及48—52位的朝向信息，回放時與場景信息類似，使用gotoAndStop（）函數(shù)將特定影片剪輯跳轉至特定幀；對于53—142位的骨骼坐標信息，回放時使用BoneArray［i］.Move（x，y）操作即可還原表演時每一人物每一幀的坐標信息。

4　結論

該課題的各項研究，將皮影數(shù)字化與移動互聯(lián)網(wǎng)技術進行了融合，運用跨平臺技術以及使得傳統(tǒng)的數(shù)字皮影表演，可以在現(xiàn)代智能手機與互聯(lián)網(wǎng)得以呈現(xiàn)，此平臺也針對當今年輕人的喜好設計了4個核心功能點，目的是為了讓年輕人喜愛皮影，繼而能夠自覺自愿的加入當傳承皮影的隊伍中來。本系統(tǒng)將皮影的制作、表演、動作的錄制等方面進行整合，形成了自己的一套體系，解決了多數(shù)相似產(chǎn)品中空間的限制的問題，為皮影文化的傳承做出了一定貢獻。

［1］侯君奕.數(shù)字技術在非物質文化遺產(chǎn)保護中的應用——論陜西華縣皮影的數(shù)字化保護［J］.價值工程，2011，30（28）：130_ 131.

［2］達妮莎，姚遠.淺談皮影數(shù)字化保護中的數(shù)字符號庫構建［J］.美術大觀，2011（2）：64.

［3］張澤，羅莎莎.數(shù)字動畫對皮影藝術的傳承和發(fā)展［J］.中國科技財富，2009（22）：10_11.

［4］云浪生.數(shù)字技術推動設計創(chuàng)新與時俱進［J］.中國制造業(yè)信息化，2011（2）：51_52.

［5］楊方琦，羅維亮.陜西東府皮影戲數(shù)字化發(fā)展的思考［J］.價值工程，2010，29（35）：121_123.

［6］施蓓，黃融融.淺析傳統(tǒng)皮影藝術與現(xiàn)代數(shù)字動畫的新結合［J］.青年文學家，2013（3）.

Research and reallzatlon of a multl termlnal dlgltal shadoW PuPPet lnteractlVe system

CAI Sen
（Beijing University of Technology，Beijing 100124，China）

In order to save the shadow of this traditiona1 art，based on the p1atform and combined what has achieved with some app1ications which are popu1ar in the young，the writer further designed mobi1e shadow puppet show system.The c1ient of system are deve1oped by Adobe AIR cross p1atform techno1ogy，which using ActionScript3.0 programming 1anguage.The servers are deve1oped with Java programming 1anguage and Socket techno1ogy.The sub termina1s of the system can run on mobi1e devices with Android or iOS operating system，and the main termina1 can run under the Windows operating system on the notebook.The sub termina1s can use wire1ess network to contro1 the puppets which are disp1ayed in the main termina1，and accomp1ish the cross p1atform mu1ti joint performance.

digita1 shadow puppet showjcross p1atformjmobi1e networkj human_machine interactionjmu1ti touch

TN919.82

A

1674_6236（2016）10_0187_04

2015_06_18稿件編號：201506192

蔡森（1992—），男，北京人，碩士研究生。研究方向：數(shù)字媒體技術、信息與服務工程。