基于Flash交互動畫技術(shù)的西湖傳統(tǒng)文化保護系統(tǒng)*

房 杰， 王 聾， 張益文

(浙江師范大學杭州幼兒師范學院動畫系，浙江杭州 310012)

基于Flash交互動畫技術(shù)的西湖傳統(tǒng)文化保護系統(tǒng)*

房 杰， 王 聾， 張益文

(浙江師范大學杭州幼兒師范學院動畫系，浙江杭州 310012)

西湖傳統(tǒng)文化保護系統(tǒng)屬于非物質(zhì)文化數(shù)字保護的范疇.在非物質(zhì)文化數(shù)字化保護的框架下，以西湖傳統(tǒng)文化內(nèi)容為范例，探討和建立了以Flash開發(fā)平臺的ActionScript 3.0為基礎(chǔ)、交互動畫形式為主的多維度交互式展示系統(tǒng)，重點解決基于Flash ActionScript 3.0語言為基礎(chǔ)的內(nèi)在技術(shù)，嘗試以模擬觸控平臺、無縫鏈接交互結(jié)構(gòu)及自由信息交互操控三大交互結(jié)構(gòu)設(shè)計來實現(xiàn)交互現(xiàn)實體驗，從而驗證了在數(shù)字化媒體藝術(shù)中Flash交互動畫技術(shù)傳播傳統(tǒng)文化的優(yōu)勢和有效性.

傳統(tǒng)文化;數(shù)字保護;Flash交互;動畫

1 關(guān)于Flash交互動畫技術(shù)

Flash交互動畫技術(shù)在傳統(tǒng)文化保護方面的應(yīng)用屬于非物質(zhì)數(shù)字化保護的范疇.傳統(tǒng)文化是指以非物質(zhì)形態(tài)存在的、與群眾生活密切相關(guān)的、世代相承的傳統(tǒng)文化表現(xiàn)形式，包括口頭傳說、傳統(tǒng)表演藝術(shù)、民俗活動和禮儀與節(jié)慶、有關(guān)自然界和宇宙的民間傳統(tǒng)知識和實踐、傳統(tǒng)手工藝技能等，以及與上述傳統(tǒng)文化表現(xiàn)形式相關(guān)的文化空間［1］.西湖傳統(tǒng)文化資源十分豐富，民間文學、民間音樂、傳統(tǒng)戲劇、傳統(tǒng)手工技藝等都是西湖傳統(tǒng)文化的重要組成部分.在全球一體化背景下，城市化迅猛發(fā)展的中國，各類文化遺產(chǎn)正面臨消失、毀壞和失傳的命運［2］，西湖傳統(tǒng)文化的保護也面臨著同樣的難題.目前，西湖傳統(tǒng)文化傳播渠道單一、方式陳舊，公眾特別是青少年希望能通過多種形式，特別是數(shù)字化、新興網(wǎng)絡(luò)媒體的方式來感受傳統(tǒng)文化的魅力和內(nèi)涵.

藝術(shù)形式隨著科技的發(fā)展而變化，計算機技術(shù)的發(fā)展與藝術(shù)的結(jié)合產(chǎn)生了新的藝術(shù)形式——數(shù)字化的媒體藝術(shù).數(shù)字媒體具有交互性的特點，這種互動性的特點是數(shù)字媒體區(qū)別于傳統(tǒng)媒體的最重要的媒介傳播特點.交互動畫是一種新興的數(shù)字化的動畫表現(xiàn)形式，它是計算機多媒體技術(shù)、交互技術(shù)、網(wǎng)絡(luò)技術(shù)結(jié)合而逐漸形成發(fā)展而成;是計算機科學與藝術(shù)結(jié)合的產(chǎn)物，通過在計算機上形成虛擬現(xiàn)實的技術(shù)，使人們從視覺上滿足想象的幻覺視覺世界.交互性是交互動畫的基本特征，是計算機人性化的智能設(shè)計［3］.交互動畫不是傳統(tǒng)動畫片的線性循環(huán)的敘述方式，參與性是交互動畫的顯著特點，用戶可以自由地選擇信息源，勢必對人類生活狀態(tài)帶來翻天覆地的變化，這種方式將被動畫的受眾廣泛接受［4］.Flash動畫技術(shù)最重要的就在于其交互性的實現(xiàn)，而在交互性方面Flash有著自己獨特的優(yōu)勢.交互技術(shù)的實現(xiàn)使得信息的方式由被動接受變?yōu)橹鲃舆x擇，在傳統(tǒng)文化保護領(lǐng)域中的場景再現(xiàn)、模擬瀏覽、動態(tài)演示、文物展示等方面更是有著不可替代的作用.

圖1 系統(tǒng)模塊設(shè)計

圖2 動畫樣本演示《白蛇傳》

2 西湖傳統(tǒng)文化保護系統(tǒng)的平臺結(jié)構(gòu)框架

2.1 建立西湖傳統(tǒng)文化保護系統(tǒng)的意義

西湖傳統(tǒng)文化保護系統(tǒng)是在傳統(tǒng)文化數(shù)字化保護系統(tǒng)開發(fā)的框架下，以西湖傳統(tǒng)文化內(nèi)容為范例，建立以Flash開發(fā)平臺的ActionScript 3.0為基礎(chǔ)、交互動畫形式為主的多維度交互式展示系統(tǒng)，實現(xiàn)在合作單位現(xiàn)有系統(tǒng)平臺的推廣和公益性應(yīng)用的基礎(chǔ)上，可以使用戶從視覺、聽覺等多方位、多角度，直觀全面地體驗和了解西湖傳統(tǒng)文化的內(nèi)容，并以互動的形式參與其中，提高公眾對傳統(tǒng)文化保護的參與度和興趣，其技術(shù)運用和推廣在推進西湖傳統(tǒng)文化藝術(shù)的保護和交流、實現(xiàn)傳承與超越方面有著重要的意義.

2.2 系統(tǒng)的模塊設(shè)計

系統(tǒng)構(gòu)建包含的模塊(見圖1)有:西湖傳統(tǒng)文化分布數(shù)字地圖;西湖傳統(tǒng)文化的數(shù)據(jù)庫和資料站;《西湖傳統(tǒng)文化系列動畫片——西湖民間故事》的部分互動動畫演示樣片(見圖2).

3 實現(xiàn)基于Flash ActionScript 3.0語言為基礎(chǔ)的內(nèi)在技術(shù)

西湖傳統(tǒng)文化保護系統(tǒng)的創(chuàng)建主要以Flash ActionScript 3.0語言為基礎(chǔ).在Flash中創(chuàng)建交互式動畫是通過ActionScript語言來完成的，ActionScript語言是面向?qū)ο蟮哪_本語言，它的語法規(guī)則與JavaS－cript語言非常相似，是采用面向?qū)ο蟮某绦蛟O(shè)計思想和Flash中的事件對程序進行驅(qū)動，它是以場景中的關(guān)鍵幀、按鈕、影片剪輯等組件作為對象用ActionScript進行定義和編寫的［5］.Flash中運用腳本語言，不僅可以根據(jù)用戶的要求動態(tài)控制動畫的各種行為，而且還能讓其作出反應(yīng)，實現(xiàn)動畫的交互功能［6］.為了能更好地增強用戶的體驗，西湖傳統(tǒng)文化保護系統(tǒng)嘗試以模擬觸控平臺、無縫鏈接交互結(jié)構(gòu)及自由信息交互操控三大交互結(jié)構(gòu)設(shè)計來實現(xiàn)交互現(xiàn)實體驗.

3.1 模擬觸控平臺

add EventListener命令和mouse命令相結(jié)合判斷用戶的觸屏方式.交互式的展示，首先要考慮到受眾不同的觸屏命令，因此，需要使用add EventListener命令［7］對用戶的不同指令和動作、觸屏時間、觸屏方式、方向進行監(jiān)聽，將用戶的實際操作轉(zhuǎn)化為后臺系統(tǒng)能夠判斷和處理的腳本數(shù)據(jù)，并將這些數(shù)據(jù)羅列成數(shù)據(jù)集，以供后臺調(diào)用并發(fā)送到其他命令組中.

圖3 系統(tǒng)主控平臺

西湖傳統(tǒng)文化保護系統(tǒng)的主控平臺互動模塊(如圖3所示)，擯棄了點擊文字選擇瀏覽信息的傳統(tǒng)鏈接節(jié)點方式，采用以用戶推動墨點進入二級模塊的交互設(shè)計方式.為了實現(xiàn)設(shè)計的交互技術(shù)，首先需要對用戶觸碰點進行運算，設(shè)置觸發(fā)內(nèi)容出現(xiàn)或隱藏的條件;其次是對用戶推動的軌跡路徑進行分析，計算出墨點X軸向的變化數(shù)據(jù)與中心墨點旋轉(zhuǎn)數(shù)據(jù)，并將此數(shù)據(jù)變量賦予用戶操作屬性，計算墨點的Y軸向變量，通過條件假設(shè)進行相應(yīng)模塊的加載和鏈接.具體步驟如下:

1)聲明速度變量speed、幀數(shù)變量frame、總幀數(shù)變量long.

2)建立觸碰監(jiān)聽函數(shù):MCover，MCout.函數(shù)MCover內(nèi)容為監(jiān)聽用戶對墨點形成觸碰后，函數(shù)MCout假定用戶停止觸碰，卸載已加載的圖案tu1.

3)建立移動監(jiān)聽函數(shù)MCmove.使用函數(shù)MCmove將墨點的X軸向變量、中心墨點旋轉(zhuǎn)變量賦予用戶的操作反饋.

X軸向變量與中心墨點旋轉(zhuǎn)變量的差額計算，腳本如下:

4)建立點擊監(jiān)聽函數(shù)MCdown.函數(shù)內(nèi)容為:限定墨點元件ditu鼠標移動范圍，監(jiān)控墨點元件ditu被點擊移動時，執(zhí)行函數(shù)MCmove，函數(shù)Mcmove中對ditu元件的X軸位置進行監(jiān)聽，若x≤650則進入相應(yīng)模塊，x＞885則停止鼠標拖動，并取消監(jiān)聽函數(shù)MCmove.腳本如下:

另外，考慮到用戶的使用習慣，在墨點上增加了移入出現(xiàn)說明，以及長按3 s后直接進入分頁的便捷設(shè)計.此交互運算通過ActionScript 3.0+flex來編寫代碼，其最終技術(shù)運作的結(jié)果描述為:當用戶觸碰墨點時，中心部分墨點兩邊的云層中將會浮現(xiàn)出龍或鳳的圖案;離開墨點，龍鳳圖案則回到云層中.當用戶推動墨點時，中心的墨點將會隨著用戶的操作，作順時針或逆時針旋轉(zhuǎn).同時在墨點下方將出現(xiàn)隨著用戶操作而改變方向的波浪互動.當用戶將墨點推動到中心墨點時，即可進入相應(yīng)的二級模塊.

圖4 系統(tǒng)資料站

3.2 無縫鏈接交互結(jié)構(gòu)

在數(shù)字地圖模塊(如圖4所示)中，由于大量地采用圖片、文字、音樂、視頻、交互等手段，很好地增強了系統(tǒng)的觀賞度，這符合西湖傳統(tǒng)文化保護系統(tǒng)核心的多樣性和交互性特點.在設(shè)計數(shù)字地圖時，對傳統(tǒng)多媒體系統(tǒng)使用絕對或相對地址鏈接瀏覽數(shù)據(jù)的形式進行調(diào)整，全部采用預先讀取、后加載的方式，使得數(shù)字地圖的瀏覽更加順暢，數(shù)據(jù)加載形式更豐富多樣.但是，也因此使系統(tǒng)的數(shù)據(jù)過于龐大，增加了數(shù)據(jù)加載的時間和用戶瀏覽的等待時間，這會削弱多種交互手段帶來的虛擬的現(xiàn)實感受.因此，在設(shè)計時，對傳統(tǒng)多媒體系統(tǒng)使用絕對或相對地址鏈接瀏覽數(shù)據(jù)的形式進行了調(diào)整，使用load命令無縫鏈接交互結(jié)構(gòu)，全部采用預先讀取、后加載的方式，要實現(xiàn)數(shù)據(jù)無縫鏈接交互結(jié)構(gòu)，就必須先指定讀取文件的相對位置，計算讀取量，并控制讀取完成后才進行播放.具體方法如下:

1)聲明需讀取圖形等元素的變量“圖形”，指定其類型為URLRequest，賦予它內(nèi)容為相對目錄下的指定文件:

var圖形:URLRequest=new URLRequest(“圖形.png”);

2)聲明讀取方式變量“加載圖片”.var加載圖片:Loader=new Loader();

加載圖片.load(SDCX);

加載圖片.contentLoaderInfo.addEventListener(Event.COMPLETE，進度條);

3)進度條制作，腳本如下:

此交互運算同樣通過ActionScript 3.0+flex來編寫代碼，其運行結(jié)果描述為:在用戶打開系統(tǒng)時，首先使用播放進度條及圖像進行預讀取，用戶能夠通過進度條了解讀取進度，所有文件預加載完成后系統(tǒng)才會被打開，若用戶進入數(shù)字地圖模塊，則相關(guān)的已讀取內(nèi)容即會被加載.

3.3 自由信息交互操控

用戶進入各模塊部分后，通過點擊或觸控可以進行頁面信息瀏覽，還能對圖片信息的呈現(xiàn)區(qū)域、范圍進行操控，在實現(xiàn)更多的信息閱讀、觸控交互的同時，數(shù)字地圖的信息還將隨著對相應(yīng)節(jié)點的操作產(chǎn)生內(nèi)容、色彩、聲效等變化，使用戶感受豐富的互動體驗(如圖5所示).

交互設(shè)計1:用戶在數(shù)字地圖模塊主頁面觸碰任何一個景點標簽，在景點標簽下均會出現(xiàn)水墨并標柱該景點的主要內(nèi)容.實現(xiàn)方式如下:建立觸控監(jiān)聽函數(shù)MCover和MCout.函數(shù)MCover的內(nèi)容為:景點標簽的y坐標減少20，同時加載水墨動畫并順序播放，水墨動畫的坐標計算方式為:x水墨動畫=x景點標簽+10;y水墨動畫=y景點標簽－20.函數(shù)MCout的內(nèi)容為:景點標簽的y坐標增加20，同時倒敘播放水墨動畫后卸載.

交互設(shè)計2:進入景點模塊后，用戶能夠通過點擊模塊中間按鈕實現(xiàn)移動全景圖，從而改變?nèi)皥D的觀賞位置，還能通過拖動按鈕進行全景圖色彩部分的滑動變化，用戶還能夠通過直接觸碰全景圖的左右兩邊實現(xiàn)移動.通過點擊相應(yīng)模塊標簽，即可進入下一級模塊.在故事欣賞模塊，能夠點擊中心區(qū)域的按鈕或觸碰故事頁面左右閱讀更多信息.在風景欣賞模塊，能夠使用上述方式，對風景照片進行瀏覽，還可以點擊相應(yīng)照片，進行照片的放大欣賞.具體實現(xiàn)方式如下:

1)限定全景圖、故事頁面、照片成列內(nèi)容的移動范圍僅為X軸向－25～1 000.

2)對按鈕進行點擊監(jiān)聽，監(jiān)聽函數(shù)為YD.函數(shù)內(nèi)容為:點擊按鈕，X軸向增加或減少20.聲明時間變量為t，限定X軸向增加或減少20的間隔為t，用來限定每次點擊，X軸向只增加或減少1次.

3)將按鈕的X軸變量賦予給色彩變化區(qū)域的X軸.對按鈕進行觸碰拖動監(jiān)聽，監(jiān)聽函數(shù)為TD.函數(shù)內(nèi)容為:按鈕的X軸向增加或減少時色彩顯示范圍的X軸向增加或減少.

腳本如下:

交互設(shè)計3:在任何分模塊，雙擊按鈕，即可重新返回景點頁面.出于人性化的考慮，為了能讓用戶更便捷地使用網(wǎng)站，每次進入分頁面時，在頁面下方都會出現(xiàn)該頁面按鈕操作功能的提示，直到用戶移動鼠標，該提示才自動消失.具體實現(xiàn)步驟如下:1)設(shè)定按鈕α的doubleClickEnabled=true，進行雙擊監(jiān)聽，內(nèi)容為:雙擊后，卸載相應(yīng)次級模塊，返回景點模塊.2)聲明操作提示T1，T2，T3，并加載至相應(yīng)模塊頁面.對狀態(tài)進行移動監(jiān)聽，監(jiān)聽內(nèi)容為:限定用戶移動鼠標或手指時，卸載T1，T2，T3，其他狀態(tài)時持續(xù)加載T1，T2，T3.

另外，西湖傳統(tǒng)文化保護系統(tǒng)使用time，math，array等命令開發(fā)多點交互隨機交互平臺.Flash強大的開發(fā)平臺，能夠同時快速分包眾多的命令和數(shù)據(jù)，由于本系統(tǒng)將采用預加載的信息置入模式［8］，因此在數(shù)字地圖系統(tǒng)中能夠同時設(shè)置多種交互點，用戶進入各模塊部分后，通過點擊或觸控就可以進行頁面信息瀏覽，還能對圖片信息的呈現(xiàn)區(qū)域、范圍進行操控，在實現(xiàn)更多的信息閱讀、觸控交互的同時，數(shù)字地圖的信息還將隨著對相應(yīng)節(jié)點的操作產(chǎn)生內(nèi)容、色彩、聲效等變化，使用戶感受豐富的互動體驗，不僅能同時對多個交互點進行交互式操作，還能夠通過不同的觸屏時間、觸屏次數(shù)，產(chǎn)生隨機不同的交互效果.

4 結(jié)論和思考

以Flash開發(fā)平臺的ActionScript 3.0為基礎(chǔ)、交互動畫形式為主的西湖傳統(tǒng)文化系統(tǒng)，實現(xiàn)了非物質(zhì)文化數(shù)字化保護全方位互動的呈現(xiàn)方式，從而驗證了在數(shù)字化媒體藝術(shù)中，F(xiàn)lash交互動畫技術(shù)傳播傳統(tǒng)文化的優(yōu)勢和有效性.系統(tǒng)還有很大的技術(shù)發(fā)展空間，以及進一步增強互動的可能性，比如:通過后續(xù)系統(tǒng)轉(zhuǎn)化APP技術(shù)，實現(xiàn)手機、網(wǎng)絡(luò)多平臺交互等.交互動畫為主的展示系統(tǒng)具有安全性、趣味性和開放性的特點，其趣味性和互動性能夠廣泛吸引公眾的關(guān)注和參與，向公眾提供全方位的西湖傳統(tǒng)文化資源，是面向公眾轉(zhuǎn)播傳統(tǒng)文化的重要途徑，也是傳統(tǒng)文化數(shù)字保護工作的重要需求.

杭州西湖是著名的旅游勝地，也是國內(nèi)重要的動漫產(chǎn)業(yè)基地，F(xiàn)lash交互動畫技術(shù)在西湖傳統(tǒng)文化保護系統(tǒng)中的應(yīng)用，能夠進一步擴大傳播范圍，提升傳播效果，進而促進杭州西湖的文化旅游，并帶動動漫相關(guān)產(chǎn)業(yè)的全方位的同步發(fā)展.

［1］羅彥，蔣淑君.數(shù)字時代的文化基因重組——我國文化遺產(chǎn)數(shù)字化現(xiàn)狀與未來發(fā)展［J］.科技進步與對策，2004，9(1):55－56.

［2］戴廉.非物質(zhì)文化遺產(chǎn)保護的困惑［J］.瞭望新聞周刊，2005，30(1):57－59.

［3］程笑君，翟浩澎.新時期數(shù)字媒體技術(shù)下Flash網(wǎng)絡(luò)動畫技術(shù)的交互性動畫研究［J］.大眾文藝，2013，3(2):157－158.

［4］劉博.基于Flash的交互動畫設(shè)計［J］.計算機光盤軟件與應(yīng)用，2013，14(1):29－30.

［5］王劍.ActionScript在Flash中制作交互動畫的高級應(yīng)用［J］.科技創(chuàng)新導報，2008，25(2):25－26.

［6］蔡麗娟，曲國先.關(guān)于Flash動畫中交互性設(shè)計的研究［J］.藝術(shù)與設(shè)計:理論，2007，3(1):75－77.

［7］付巖.基于Flash的游戲設(shè)計與開發(fā)［J］.計算機光盤軟件與應(yīng)用，2013(3):173－174.

［8］劉小東.FlashMX中文版精彩設(shè)計百例［M］.北京:中國水利水電出版社，2003.

(責任編輯 陶立方)

Interactive animation technology based preservation system for traditional West Lake culture

FANG Jie， WANG Qi， ZHANG Yiwen

(Department of Animation，Hangzhou College of Preschool Teacher Education，Zhejiang Normal University，Hangzhou Zhejiang 310012，China)

The preservation system for traditional West Lake culture was regarded as in the category of digital preservation of nonmaterial culture.Under the framework of nonmaterial cultural digital protection，taking the content of the West Lake traditional culture as example，it was discussed and established a multiple dimensional interactive display system，which was based on the ActionScript 3.0 of Flash development platform and the interactive animation.Based on the inherent technology of Flash ActionScript 3.0 language，it was attempted to realize the experience of interactive realities through three designs of interaction structures，including simulated touch platform，seamless linking interaction structure and control of free information interaction.This design testified the advantages and effectiveness of the Flash interactive animation technology in spreading traditional culture in the condition of digital media.

traditional culture;digital preservation;flash interaction;animation

G127

A

1001－5051(2015)01－0083－06

?:2014－06－29;

2014－10－16

2013年浙江省高等學校訪問學者專業(yè)發(fā)展資助項目(FX2013013)

房 杰(1981－)，女，山東淄博人，講師.研究方向:二維動畫.

10.16218/j.issn.1001－5051.2015.01.014