房 杰， 王 聾， 张益文

(浙江师范大学杭州幼儿师范学院动画系，浙江杭州 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