《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.4 在Flash时间轴上放置代码

本节书摘来自异步社区《Adobe Flash CS5 ActionScript 3.0中文版经典教程》一书中的第1章,第1.4节,作者: 【美】Adobe公司 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 在Flash时间轴上放置代码

1.4.1 使用帧标签
在开始添加ActionScript之前,注意在时间轴上有一个图层称为“说明”(Label)。在这个图层中,第2帧有一个标签,称为loop,第50帧有一个标签,称为home。在Flash中可以向任意时间轴上的任意关键帧添加标签,用来标记一些关键的位置。ActionScript可以使用标签来控制导航。如果以前没有使用过标签,可以实践一下,在第30帧上给时间轴添加一个标签。

1.选择时间轴上标签图层中的第30帧。

2.按F6键或选择“插入”>“时间轴”>“关键帧”命令。

3.选中新创建的关键帧,在“属性”面板左上部分的“标签”区域里的“名称”字段中输入endLoop。(如果“属性”面板没有打开,可以从菜单里选择“窗口”>“属性”命令。)

4.按Enter(或Mac上的Return)键,可以看到时间轴上第30帧的位置会显示该标签名称。

1.4.2 利用ActionScript循环播放
很多情况下都需要重复播放时间轴的某部分。例如,在等待加载内容或在用户考虑访问Web站点的哪个部分时,可以循环播放动画。

创建循环动画
作为第一段自己编写的ActionScript代码,我们将循环播放从第2帧~第30帧的动画。首先编写ActionScript脚本来无限次循环播放这部分,然后添加代码来控制在跳入到第50帧的home界面之前这部分重复播放的次数。

1.安排工作区域,让时间轴和“动作”面板均可见(选择“窗口”>“动作”命令)。

2.在actions层里选择第30帧,按F6键在这一层添加一个关键帧。

3.选中actions图层中第30帧上的新关键帧。


《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.4 在Flash时间轴上放置代码https://yqfile.alicdn.com/80b3a9df1564eaf23cdcf9221b2bef18b9fd72e6.png" >

4.在“动作”面板中单击,这样插入点会显示在该面板的第一行。如果没有看到行号,从该面板右上角的弹出菜单中选择“行号”命令,即可显示行号。

5.在“动作”面板中,输入下列代码。

gotoAndPlay("loop");

6.保存工作内容,然后测试影片(在Windows中按Ctrl+Enter组合键,或者Mac中按Cmd+Enter组合键)。注意该影片不会到达home帧,而是会不停地播放该动画。这是因为每次播放到第30帧时,刚才你编写的动作会让它回到第2帧。

使用gotoAndStop()和gotoAndPlay()

这两个方法都是元老级的ActionScript技术,自从Flash 2开始就没有改变过。在刚刚编写的代码里,ActionScript把时间轴的播放点从当前帧指引到标签为“loop”的帧,并且从那里继续播放动画。如果想跳到某一帧并且在那里暂停播放,可以使用gotoAndStop()方法(下一课就会用到)。在函数的圆括号里,我们还可以使用帧的号码来代替标签,例如。

gotoAndPlay(2);

然而我们强烈推荐像前面那样使用标签。

gotoAndPlay("loop");

这种方法可以让我们不修改代码就轻松改变时间轴上的内容。

1.4.3 记录循环次数
接下来,我们通过编程让文件在完成指定数量的循环之后跳到home帧,首先添加一些代码来记录动画循环播放的次数,为此,用一个变量来保存循环的次数。

创建计数变量
该变量的作用是保存数值。ActionScript 3.0可以用变量来保存多种类型的数据,在后面的一些课程中会介绍这些内容。在本课中将创建一个变量来保存数值,以便跟踪动画从第2帧~第30帧重复播放的次数。

在ActionScript 3.0中创建变量的方式是输入var,然后输入变量名称。

1.选中actions图层的第1帧,在“动作”面板中单击。

2.在现有代码片断之下输入下列代码。

var count:Number = 1;

接下来添加一些代码,在每次动画循环时修改这个值。

在ActionScript 3.0中创建变量

在后面的课程中将创建很多变量,因此在这里值得花费一些时间深入学习创建变量所使用的语法。

请看下面的示例。

var count:Number = 1;

关键字var告诉ActionScript将创建一个新的变量。该变量的名字是count,可以选中任意变量名,但是要遵循下列规则。

在变量名中不要使用空格。
除了下划线之外,不要使用其他特殊字符,最好只使用字母和数字。
不要使用数字作为变量名的起始,例如,变量名2button是无效的,但是button2是合适的。
变量名后面的冒号表示后面的信息指出了在变量中保存哪种类型的数据。在上述例子中,count变量保存数字类型的数据。下面的课程中会讲述更多有关数据类型的内容。

等号(=)表示保存在变量中的数值。在创建变量的时候,不一定必须设置变量的值。通常,创建变量是为了以后用它来保存信息,在这个例子中,变量count被赋予初始值1。

更新计数变量
要在每次循环时更改count变量的值,需要添加一些代码来在每次动画完成后修改该值。

1.选中“动作”图层中第30帧上的关键帧。

2.在“动作”面板中单击。

3.在现有代码的下面新的一行输入下列代码。

count++;

在ActionScript中,使用字符++是让数值加1的一种快捷方法。上述代码的大体意思是获取count变量的当前值,然后加1。结果是第2次播放动画时count等于2,第3次播放动画时count等于3,依此类推。

在文本区域里显示计数
目前,有一个变量在跟踪循环的次数,但是当影片播放时,没有可见的反馈告之动画已经循环了多少次。现在我们在一个文本区域中添加这种反馈。

1.选中位于text图层上的文本区域。注意在“属性”面板中,该文本区域被命名为“info_txt”。再强调一次,ActionScript所控制的所有对象必须具有特定名称。


《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.4 在Flash时间轴上放置代码

2.在actions图层中选择第2帧,并按F6键添加一个关键帧。

3.选中时间轴上新创建的关键帧,在“动作”面板中单击。

4.输入下列代码。

info_txt.text = String(count);

5.保存当前的工作,并测试影片。文本区域开始显示数字1,并且每次动画循环之后会加1。


《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.4 在Flash时间轴上放置代码

关于文本区域和字符串

ActionScript可以设置文本区域的很多属性,甚至能够直接创建文本区域并设置它的格式。后面的课程里会介绍更多关于文本区域的使用。

观察如下范例。

info_txt.text = String(count);

这个文本区域的名称是info_txt,其text属性被设置成等于变量count的当前值。每当时间轴播放第2帧时,该文本区域的值将被赋予count的值。

文本区域只显示保存为直义字符的数据。ActionScript中的直义字符属于数据类型String。因为count变量被设置成保存数据类型Number,所以该例子中的最后一行代码是:

String(count);

该代码告诉ActionScript将count变量转换为文本字符串,以便在文本区域中显示。

如果读者有点困惑,不必担心,在下面的课程中会有很多有关文本和数据输入的练习。

1.4.4 使用条件语句控制时间轴
对于一个项目来说,反复播放欢迎界面不是很好的做法,因此要限制在跳入到home帧之前循环播放的次数。对于Web项目,可以在后续内容下载完毕之前重复播放简介内容。在第6课将学习如何创建这种类型的预加载。在本课中,当count变量到达一定数值时,就让时间轴跳到标记为home的帧(第50帧),从而限制播放的次数。

要完成这个任务,可以在代码中添加条件语句。ActionScript中的条件语句检查条件是否为真。在这里,如果count变量的值超过4,就将执行相应的代码来跳到home帧。

1.确保“时间轴”和“动作”面板都显示,选择actions图层的第30帧。

2.切换到“动作”面板,在现有代码前放置插入点,按Enter键(Windows)或Return键(Mac)。

3.选择并删除下列代码行。

gotoAndPlay("loop");

然后在count++代码行之上添加如下代码。

if(count>4) {

4.在输入这一行之后按Enter键(Windows)或Return键(Mac),这时Flash会自动添加一个新行,其中还包含一个结束大括号。这种代码完成功能是Flash CS5里新添的,它非常方便,有助于减少由于大括号不匹配造成的错误。

5.完成这个条件语句,如图1.9所示。


《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.4 在Flash时间轴上放置代码

每当动画播放结束时,条件语句会检查count是否已经超过4。在播放前4次动画时,条件判断不是真,播放会回到第2帧,并重新播放动画;在播放第5次动画时,条件为真,因此将跳转到home帧,并且停在那里。

6.保存项目,并测试影片。文本区域里的计数器会增加到5,然后时间轴会跳到home帧。

更新home帧的文本
现在学习如何修改home帧中的文字。由于用户不会再查看该帧中的动画循环,因此没有必要再显示计数器数字,而应该在home帧中添加欢迎信息。

1.确保“时间轴”和“动作”面板都可见,选中actions图层中的第50帧。

2.按F6键在actions图层的第50帧上添加一个关键帧。

条件语句

条件语句是ActionScript交互功能的重要组成部分,能够让Flash项目在不同的环境下做出不同的反应。

大多数编程语言中都有条件语句,它们的工作方式与ActionScript 3.0中的工作方式相似。即使没有编程经验,也可能会熟悉条件语句的概念。每次与语音应答系统交互就是一个非常好的例子。

例如,你打电话到你朋友的家中,然后听到一个语音应答系统,说,

如果你想找John,请按1,

或者,

如果你想找Mary,请按2,

或者,

请在嘀的一声后留言。

在ActionScript中,类似的交互过程如下。

if(wantJohn){

pressOne();

}else if(wantMary){

pressTwo();

}else{

leaveMessage()

}

使用ActionScript响应的常见条件示例包括以下几种。

如果问题回答正确,进入下一个问题。
如果游戏完成一关,更新积分并进入下一关。
如果产品被放到购物车中,则添加成本到总价中,并运送该产品。
3.在“动作”面板中为该帧添加下列代码。

info_txt.text = "Welcome to the home frame";

这里使用与以前一样的文本区域,但是没有使用count变量来填写该文本区域,而是使用一句话“Welcome to the home frame”。如果想设置文本区域中的text属性为一句话,需要将这些词语放到双引号中。

4.再次测试影片,此时可以看到home帧中更新后的文字。


《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.4 在Flash时间轴上放置代码https://yqfile.alicdn.com/ddc5e8ff4f839b74d9e7ed1746db593a19083ff8.png" >

虽然该程序非常简单,但其中包含了大量的ActionScript基本概念,比如使用变量存储和传递数据,使用条件语句来响应变化的条件,这些都是ActionScript 3.0中创建丰富交互性的关键内容。后面的课程中将更多地使用这些技术。

下一课将介绍在ActionScript 3.0中如何响应事件,从而为本课创建的文件添加一些功能。

上一篇:大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)


下一篇:大熊君JavaScript插件化开发------(第二季)