Flash动画设计中的脚本教学设计

2009-05-22 03:38张万良
计算机教育 2009年6期
关键词:脚本人机交互坐标系

张万良

文章编号:1672-5913(2009)06-0084-02

摘 要:Flash的脚本是许多想深入学习动画计者的“拦路虎”,但是我们只要采取适当的教学方法,合理的教学过程安排就会攻克这个难关。我们通过设计一个设置影片属性的例子,让学生理解脚本的添加,脚本的点语法,影片的常用基本属性,两种坐标系,并且由浅入深使学生不再对脚本畏难。本文通过案例详细论述了如何为按钮添加脚本的方法。

关键词:人机交互;脚本;影片剪辑;按钮;坐标系

中图分类号:G642

文献标识码:B

1引言

计算机执行的指令集称为程序,程序的另一个名字称叫做脚本。Flash的脚本是许多想深入学习Flash游戏设计者的“拦路虎”,但是如果我们先易后难、逐步深入就可攻克这个“堡垒”。只要我们合理科学的安排教学过程中经过实践,通过经典实例由浅入深的讲解让学生把脚本的输入方法,语法规范,简单脚本的含义以及最重要的坐标系搞清楚。

脚本也叫ActionScript,是Flash内置的编程语言,用它为动画编程,可以实现各种动画特效、对影片的良好控制、强大的人机交互以及与网络服务器的交互。ActionScript是一门吸收了C++、Java以及JavaScript等编程语言部分特点的新的语言。它的存在确保了Flash影片较之普通的按照线性模式播放的动画具备强大得多的人机交互能力。

2案例分析

在ActionScript中可以添加动作的对象有三种:关键帧、影片剪辑元件、按钮元件。选中这些关键帧、按钮和影片剪辑,打开其动作面板,你就可以看到它们都添加了哪些脚本。

下面就是我们精心设计的初级脚本案例,通过本实例我们知道如何为按钮添加脚本,了解影片的属性,了解点语法,了解坐标系:

(1) 首先创建元件

步骤一、创建按钮元件

创建圆角按钮元件,为了增加立体感,按钮共有两个图层。只不过一个图层的颜色亮一个图层的颜色暗作为阴影。

步骤二、创建影片元件

按ctrl+R导入gif格式的动画图形到库中,按F8创建影片元件,把刚才导入的图形拖入到影片元件编辑区,最后将影片元件拖入舞台实例名为tt。坐标为(500,350)。注意影片元件的中心注册点为于左上角。

(2) 然后创建动画

步骤一、动画元素的布置

在舞台写上“影片属性演示”几个字,然后按两次ctrl+B打散文字,再使用铅笔工具将文字分成两部分,分别填上不同的颜色作为装饰,最后删掉线条。新建一图层命名为“按钮”,并拖入13个按钮元件,使用文本工具分别写上如效果图所示的文字。

步骤二、编写脚本

选中“x position=400”的按钮,添加脚本on (press) {tt._ x=400;}//设置影片的x坐标为400。

选中“y position=150”按钮,添加on (press) {tt._y= 150;}//设置影片的y坐标为150。

选中“x scale=50”按钮,添加on (press) {tt._ xscale= 50;}//设置影片的横向缩为原来的50%

选中“y scale=50”按钮,添加on (press) {tt._ yscale= 50;}// 设置影片的纵向缩为原来的50%

选中“alpha=50” 按钮,添加on (press) {tt._alpha=50;}// 设置影片的透明度为50%

选中“rotation-30”按钮,添加on (press) {tt._ rotation-= 30;}// 设置影片每次逆时针旋转30度

选中“rotation+30”按钮,添加on (press) {tt._ rotation+= 30;}// 设置影片每次顺时针旋转30度

选中“visible=1”按钮,添加on (press) {tt._visible=1;} // 设置影片可见。

选中“visible=0” 按钮,添加on (press) {tt._visible=0;} // 设置影片不可见。

选中“draggable lock(100,100,400,400)”按钮,添加on (press){tt.startDrag(true,100,100,400,400)}//可拖动的影片锁定到鼠标位置中央,范围在左上右下的坐标值分别为100、100、400、400。

选中“stop drag”按钮,添加on (press) {tt.stopDrag();}//停止拖动影片。

选中“复位”按钮,添加on (press) {

tt.stopDrag();//停止拖动影片。

tt._x=500;//恢复初始横坐标

tt._y=350;//恢复初始纵坐标

tt._rotation=0;//恢复旋转角度

tt._xscale=100;//恢复初始的x向放大系数

tt._yscale=100;//恢复初始的y向放大系数

tt._alpha=100;//恢复初始透明度

tt._visible=1;//恢复影片为可见

}最终效果如图1所示:

我们通过实例可很好的区别以下几个概念:

(1) 幀动作和对象动作

幀动作是指在关键幀上才能添加的动作脚本。有脚本的关键幀上有字母“a”标识,如图2所示。方法是选中要添加脚本的关键幀,打开动作面板在脚本编辑区添加。

对象动作即可以给按钮和影片添加动作,必须首先选中对象,它不会在时间轴上出现“a”标记。On()函数是处理按钮对象产生的事件的。而onClipEvent()是处理影片剪辑对象引起的事件的。

(2) 两种坐标系统

在进行的Flash游戏开发的时候,很多时候都用了Flash的坐标系统,例如拼图游戏也都用到了Flash的坐标系统,这对于了解Flash很重要。Flash中的主场景坐标系统与影片剪辑元件的坐标系统的中心原点不相同。

a. 主场景坐标系统中心原点是舞台工作区的左上角,y轴向下是增大 x向右是增大如图3所示。

b. 影片剪辑元件的坐标系统原点如图所示,它是以影片剪辑元件的中心十字为原点的。y轴向下是增大 x向右是增大如图4所示。

(3) 点语法

点语法是很多面向对象的编程语言中用来组织对象和函数的方法。

假设你想求一个数的绝对值,Flash中有一个内置的绝对值函数,它包含在ActionScript的“对象”/“核心”/“Math”/“方法”中。要使用绝对值函数,首先要使用对象名,即Math,然后是方法名abs,它们之间用符号“.”隔开,具体表示方法如下所示:

var a = Math.abs(-7);

点语法的另一个用途是指定影片剪辑的属性。如上面将影片剪辑tt的_alpha(透明度)属性设置为50%:

tt._alpha = 50; 如上例脚本中我们就使用点语法。

另外还可以使用语句setProperty(tt,_x,500)设置影片属性,其语法格式:

setProperty(target,property,value/expression) 其中

target 到要设置其属性的影片剪辑实例名称的路径。

property 要设置的属性。

value 属性的新文本值。

expression 计算结果为属性新值的公式。

3结语

通过以上设置影片属性的案例分析,我们介绍了如何为按钮添加脚本,并且用一种由浅入深的方法让学生理解了脚本的添加,脚本的点语法,影片的常用基本属性,两种坐标系的概念和方法。这样的案例分析教学以易到难,让学生更容易接受,对知识的理解可以更好。

参考文献:

[1] 缪亮,凌忠康. 巧夺天工——Flash MX 2004入门与进阶实例[M]. 北京:洪恩教育科技有限公司.

[2] Flash新手入门教程[EB/OL]. http://www.jcwcn.com/article/2008/1008/flash_31180.html.

猜你喜欢
脚本人机交互坐标系
极坐标系中的奇妙曲线
自动推送与网站匹配的脚本
三角函数的坐标系模型
求坐标系内三角形的面积
某型柴油机虚拟维修系统研究
人机交互课程创新实验
例谈坐标系与参数方程常考题型
举一反三新编
捕风捉影新编
愚公移山