基于Flash交互動畫技術的西湖傳統文化保護系統*

房 杰， 王 聾， 張益文

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

基于Flash交互動畫技術的西湖傳統文化保護系統*

房 杰， 王 聾， 張益文

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

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

傳統文化;數字保護;Flash交互;動畫

1 關于Flash交互動畫技術

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

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

圖1 系統模塊設計

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

2 西湖傳統文化保護系統的平臺結構框架

2.1 建立西湖傳統文化保護系統的意義

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

2.2 系統的模塊設計

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

3 實現基于Flash ActionScript 3.0語言為基礎的內在技術

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

3.1 模擬觸控平臺

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

圖3 系統主控平臺

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

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

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

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

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

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

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

圖4 系統資料站

3.2 無縫鏈接交互結構

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

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

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

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

加載圖片.load(SDCX);

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

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

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

3.3 自由信息交互操控

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

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

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

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

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

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

腳本如下:

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

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

4 結論和思考

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

杭州西湖是著名的旅游勝地，也是國內重要的動漫產業基地，Flash交互動畫技術在西湖傳統文化保護系統中的應用，能夠進一步擴大傳播范圍，提升傳播效果，進而促進杭州西湖的文化旅游，并帶動動漫相關產業的全方位的同步發展.

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

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

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

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

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

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

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

［8］劉小東.FlashMX中文版精彩設計百例［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年浙江省高等學校訪問學者專業發展資助項目(FX2013013)

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

10.16218/j.issn.1001－5051.2015.01.014