APP下载

基于JSFL的Flash自动测评系统研究

2010-07-12王德东杨永华

关键词:时间轴图层示例

王德东,杨永华,卢 畅

(浙江海洋学院公共实验中心,浙江舟山 316004)

Flash是Macromedia公司(现已被Adobe公司收购)开发的一款矢量动画创作工具,主要用来创建二维动画,也可以用它来创建幻灯片演示文稿、表单应用程序以及通过脚本程序来建立人机交互的内容。Flash可以包含文字、图形、图片、声音以及视频文件,由于是矢量格式,文件体积很小,很适合应用在网络广告、在线游戏以及网络多媒体教程等领域,其精简版Flash Lite在手机方面的应用也日渐丰富起来[1]。目前,各个高校大都开设了Flash软件选修课程,由于选修此类课程的学生人数往往比较多,教师批改作业及阅卷工作量都很大,因此设计一个计算机自动测评系统就显得很有必要。

1 阅卷方案比较

对真实环境下产生的Flash文件进行计算机自动阅卷,可以考虑三种方案:一是分析SWF文件格式以逆向工程的方式进行,二是利用数字图像处理[2]及模式识别的方法[3],三是在Flash设计环境下通过运行JSFL脚本来对FLA文件进行模糊批阅。第一种方法不仅工作量巨大,而且由于商业因素,不可能完全逆向分析。第二种方法需要将Flash的每一帧截图存为BMP或JPEG格式,然后进行识别,效率太低。第三种方法,有点类似于MS OFFICE中的VBA的阅卷方式,利用脚本语言读取对象的属性和标准答案比对,从而实现快速阅卷。这种方法开发难度低,效率高,可以大大缩短开发周期。

2 JSFL文件介绍

Flash提供了两种形式的脚本,一种是编译后的SWF文件运行时在Adobe Flash Player中执行的脚本,即AS(Action Script)。另一种即我们要讨论的Flash JavaScript API(简称JSAPI),它是Flash提供的应用程序编程接口,运行在Flash编辑环境中,用于扩展Flash IDE运行时的功能,其对应的脚本语言即JSFL。利用JSFL可以设置对象的属性,自动执行重复性任务,提高创作效率。同时,也可以利用它读取对象的属性来达到阅卷的目的。

3 FLASH文档对象模型(DOM)介绍

Flash JavaScript API基于文档对象模型(DOM),该模型允许使用JavaScript对象访问Flash文档。DOM包含一组顶级函数和两个顶级对象FLfile对象和flash对象。FLfile对象用于对本地文件系统中的文件和文件夹进行操作,fl.documents代表当前打开的Flash文件数组。例如fl.documents[0]代表第一个打开的FLA文档,而通过fl.getDocumentDOM().library.items[0],则可以获得库中第一个元素的引用。每个Document对象由子对象和属性组成。DOM对象模型见图1。

图1 FLASH文档对象模型(DOM)Fig.1 Flash document object model(DOM)

4 操作题测试项目

主要测试内容有:文档属性;时间轴、图层、帧等属性及操作;动画类型;库、元件、位图、声音、视频等属性;静态文本、滤镜属性;笔触、颜色、填充操作;规则图形(直线、圆、椭圆及多边形)绘制操作;不规则图形操作等。

4.1 文档(舞台)属性

这里的文档就是指舞台,是演员表演的场所。在一个FLASH动画中,舞台的大小和帧频都是一样的,要想调整某一段动画的播放速度,可以通过增加或减少帧的方法来解决。

fl.getDocumentDOM().width 和 fl.getDocumentDOM().height 可以返回舞台的宽度及高度;fl.getDocumentDOM().backgroundColor返回舞台的背景颜色,格式为"#RRGGBB"的字符串,例如返回值为"0000FF"代表蓝色。document.frameRate它指定播放动画播放的速度,默认值为每秒12帧,其取值范围为0.01~120之间。通过getMetadata返回文档的标题及其描述性文字,这样GOOGLE等搜索引擎就可以对其进行索引。调用getMetadata函数后自动产生XML文件,读取它即可获得文档的“标题”及“描述”2个属性。

图2 设置文档(舞台)属性Fig.2 Set up parameters of the document(stage)

4.2 场景、时间轴、图层、帧

4.2.1 场景(scene)及时间轴对象的主要属性

一场戏剧可以分为很多幕,这个“幕”就可以理解为场景,也可以理解为一本书中的一个章节。复杂的动画往往分为多个场景,便于设计及管理。演员、音响、背景等各种因素需要按照事先安排好的次序及时间来进行演出,这个总调度是由时间轴来完成的。主要属性有,timeline.name:场景(时间轴)名称;timeline.currentLayer:当前活动图层的编号;timeline.layerCount:图层总数;timeline.layers :图层对象数组。

4.2.2 图层(layer)对象的主要属性

图层可以看成是拍摄用的胶片,每层胶片是透明的,多个图层按次序垂直排列。处于上面图层中的对象会遮住下层相同位置的对象。图层的主要属性有,layer.color:图层轮廓颜色;layer.frameCount:图层帧数;layer.frames:帧对象数组;layer.height:以百分比表示的图层高度;layer.layerType:图层类型;layer.parentLayer:图层包含的文件夹、引导图层或遮罩图层。layer.locked:图层的锁定状态;layer.name:图层的名称;layer.visible:图层是否被掩藏。

4.2.3 帧(frame)对象的主要属性

“帧”是时间轴上的一个小格,是舞台内容中的一个片断,多个帧按照一定速度播放就形成了动画。主要属性有,frame.name:帧名称;timeline.currentFrame:当前帧编号;frame.actionScript:ActionScript 代码;frame.duration:帧的数量;frame.tweenType:补间的类型;frame.tweenEasing:补间对象的缓动数量;frame.labelType:帧名称的类型,分为名称、注释、锚记三种;frame.motionTweenOrientToPath:动画运动时是否旋,其中,motionTweenRotate说明旋转方向(顺时针或逆时针),motionTweenRotateTimes代表定补间元素在起始关键帧和下一关键帧之间旋转的次数;frame.motionTweenScale:对象移动时是否缩放,motionTweenSnap表示是否对齐到路径,motionTweenSync表示对象运动时是否和时间轴同步。另外还有声音名称,播放方式及次数等属性。

4.3 元素、位图、文本、滤镜

元素是一个统称,在舞台上输入的文本、绘制的图形、导入的位图等都是元素,element.elementType表示元素的类型,有常用的有三种:"shape"、"text"、"instance"。Shpae对象是形状对象。Instance 是库项目的实例,对于位图,通过instanceType属性返回“bitmap”来判断,然后通过getBits函数来测试其高度、宽度和颜色位数。文本类型分为静态、动态及输入三种,本系统着重测试静态(static)文本。通过getTextAttr函数来测试字体名称、颜色、大小、加粗、斜体、对齐方式等项目。滤镜的概念是自FLASH8.0以后增加的,类似于PHOTOSHOP的滤镜,用于增强位图、文本、元件实例的效果。用getFilters函数可以获得滤镜对象,进而获得其它的相应属性。

4.4 库、元件

库(library)对象相当于一模板,包含元件(Symbol)、位图、声音和视频。元件的类型分为 "movie clip"、"button"和"graphic",分别代表“影片剪辑”、“按钮”及“图形”。对于反复使用的元素,尽可能设计为元件,便于管理并能减少文件体积。通过getItemType属性可以获得其类型,通过getItemProperty函数获取所选项目的属性。

4.5 笔触、填充色、混色器

getCustomStroke()返回笔触对象。stroke.capType,指定笔触端类型的字符串。可接受的值为 "none"、"round"和 "square";stroke.thickness 返回笔触高度;stroke.color返回笔触颜色。通过 getCustomFill()获得取所选内容的填充对象,然后通过 fill.style、fill.color、fill.colorArray、fill.posArrayt等来返回填充类型、颜色、渐变及位置等属性。

4.6 形状识别

对于标准的矢量图形的识别,例如直线、圆、椭圆、三角形、矩形、多边形、星形等,可以统一采用模糊判断方法。即在题目里明确规定形状的高度、宽度以及X、Y的坐标,这样便于阅卷。Flash编辑环境中元素的坐标位置见图3及图4。通过程序获取其边界点(参考6.1小节里的 getEgePoint()函数),然后和知识库里的标准点比对,只要存在这些点(允许一定的误差)就认为操作是正确的。

对于不规则区域的识别相对比较复杂,不规则区域是由贝塞尔曲线组成的。在获取了边界点后,利用贝塞尔曲线公式,根据统计方法进行判断[4]。

图3 属性设置面板Fig.3 Panel of parameter setting-up

图4 圆的坐标点分配示意图Fig.4 Map of distribution of circle points on the coordinate

5 综合举例

阅卷系统可以采取两种方式给出成绩:一是在JSFL文件里输出各种对象的属性值,并保存为文本文件,然后利用其它高级语言(例如VB)来读取这个文件和标准答案比对;另一种方法是利用JSFL直接评分,并将分数写在文件里,然后利用VB来读取这个分数。前者比较灵活,可以结合数据库做成通用的系统,后者则可以设计一些比较复杂的题目,阅卷效率比较高。示例1采用了第一种方法,示例2则采取了第二种方法。另外,为了节约篇幅,程序中略去了错误处理代码,具体阅卷时,需要详细考虑容错问题,例如考生没有全部完成题目,此时JSFL代码可能得不到正确的结果,可以使用try…catch(error)…finnaly以及使用if语句来处理。

5.1 示例 1

绘制 1个圆,半径为 60,位置(X、Y)为(100,100)。笔触颜色为为红色,高度为4,用放射状颜色填充,颜色点位置大概为(0,255),颜色分别为蓝色、白色。见图5。

图5 阅卷示例1Fig.5 Example 1 of Assessment

关键阅卷代码及分析:

表1 score1.txt文件的内容Tab.1 Content of the file score1.txt

表1所示的内容,用VB打开该文件,使用Instr()等函数就可以进行阅卷,只要判断存在第1行的数据,就可以认为正确绘制了一个圆。然后判断第2、3行的内容,和标准答案比较即可给出分数。

5.2 示例 2

新建1个FLA文件,将图层1命名为“背景”,导入素材“乒乓桌.jpg”到舞台上,将其设置为背景。新建1个元件“乒乓球”,类型为“影片剪辑”。新建1个图层,命名为“乒乓球”,将“乒乓球”元件拖到主舞台中,从第1帧到第10帧建立补间动画,见图6。

图6 阅卷示例2Fig.6 Example 2 of assessment

关键阅卷代码:

5.3 建立题库及阅卷程序

Flash操作题目阅卷系统分为两个部分:出题系统及阅卷系统,主程序及控制部分用VB开发,Flash对象属性的获得通过JSFL来获取。系统框架图见图7。在VB中结合ADO来操作数据库[5],出题时用JSFL读取FLA文件对象的各种属性并写入数据库。阅卷时,再次利用JSFL获得对象的属性,进行比对,给出成绩并写入数据库。阅卷的JSFL文件以及VB阅卷脚本保存在数据库里,可以动态增加修改,因此本系统具有灵活的可扩展性。

图7 阅卷系统框架图Fig.7 The framework of the assessment system

VB关键代码:

6 结束语

对于Flash软件的考核,主要是测试学生对基本工具掌握的情况等,通过实例可以看出,该测试方法完全可行,结合在线理论测试系统及CAI辅助学习系统,可以大大减少教师的工作量,提高学生的学习兴趣及积极性,提高了阅卷的公正性。本系统在我校的Flash公选课程里试用,取得了不错的效果。下一步打算将其做成COM插件[6]的形式运行于IE浏览器里,这样整个系统都是基于B/S结构,方便了系统的使用及更新。

[1]张 震.中文Flash8动画网页制作与实例教程[M].北京:冶金工业出版社,2006.

[2]孙家广.计算机图形学[M].北京:清华大学出版社,2002.

[3]张新峰,沈兰荪.模式识别及其在图像处理中的应用[J].测控技术,2004,23(5):28-32.

[4]徐文胜.真实环境下FLASH自动测评系统[J].农机化研究,2004(1):227-229.

[5]鲁佩云.ADO对象模型和用VB实现其应用的两种方式[J].计算机工程与设计,2005,26(7):1 947-1 949.

[6]游庆祥,姚世军,韩 强.一种基于接口匹配的构件库设计[J].微计算机信息:管控一体化,2006,22(9273):269-271.

猜你喜欢

时间轴图层示例
时间轴上二阶非线性非自治延迟动力系统的振动性
为《飞舞的空竹龙》加动感
2019年高考上海卷作文示例
时间轴里的“共和国记忆”
“全等三角形”错解示例
解密照片合成利器图层混合模式
巧用时间轴,培养学生的时空观念
时间轴上一类二阶动力系统的振动条件
飞吧,云宝
用Photoshop图层技术制作精美邮票