编好脚本，动画交互更容易

项目八　编好脚本，动画交互更容易

项目描述

ActionScript是Flash动作脚本，它可以在动画中添加交互性动作，从而可以很轻松地制作各种Flash特效。本项目通过一个“猜拳游戏”来熟悉ActionScript的相关知识。

项目目标

学会Flash动作语句的基本语法及添加动作的方法，能使用简单语句。

任务一　猜拳游戏——动画控制

我明了

本任务是布置场景中的素材，制作片头、片尾，并能控制时间轴的播放，了解动画的制作流程。

我掌握

(1) 掌握游戏的布局。

(2) 了解AsctionScript 3.0(简写AS，后同)动作语句的语法规则，会使用代码片断，会输入简单的时间轴控制语句，会对代码片断中的参数进行调整。

我准备

1. 语法规则

(1) AS语句是区分大小写的。

(2) AS语句以分号“；”作为每句的结束符号；以点“.”指示访问对象的路径、属性和方法；用小括号“( )”放置动作参数；用大括号｛｝将代码分成块。括号必须成对。

(3) 标识符由字母、下画线“_”、美元符号“$”和数字组成，数字不能用在开头。标识符不能与关键字相同。

(4) AS中单行注释是以“//”开始到本行末尾；多行注释是以“/*”开头，以“*/”结束。注释用来解释和说明语句的作用，注释本身是不被执行的。

2. 时间轴控制语句

(1) 函数play()；能使影片从当前位置播放。

(2) 函数stop()；能使影片停止在当前位置。

(3) 函数gotoAndPlay()；能使影片跳转到指定的场景或帧，并从此位置播放。

(4) 函数gotoAndStop()；能使影片跳转到指定的场景或帧并停止。

3. 使用代码片断

制作响应鼠标动作语句。

我动手

1. 片头场景布置

(1) 打开“猜拳大战(start).fla”文档，场景大小设置为640×480，其他为默认。查看库中的元件。

(2) 将“bj.png”图片拖到舞台中，大小与舞台大小一致，水平，垂直居中，将图层改名为“背景”，将其锁定。

(3) 单击时间轴上按钮添加新图层，并命名为“规则”，按【F9】键打开“库”面板，将图形元件“help”拖到舞台中央，调整合适大小和位置，如图8-1所示，将该图层锁定。

图8-1　“help”元件的属性

(4) 单击按钮添加新图层，并命名为“按钮”，按【F9】键打开“库”面板，将按钮“start”元件拖到舞台中央，调整合适大小和位置，如图8-2所示。场景设置好后的效果如图8-3所示。

图8-2　“start”元件的属性

图8-3　片头场景

2. 游戏部分场景布置

(1) 选中“背景”图层，在第25帧右击，单击快捷菜单中的“插入帧”命令。

(2) 在“规则”图层的第2帧插入空白关键帧，使其在后面不显示。选中“按钮”图层，将该层解锁。在第2帧右击，单击快捷菜单中的“插入空白关键帧”命令，选择第2帧，打开“库”面板，将按钮元件“bt_剪刀”、“bt_石头”、“bt_布”放入舞台，调整大小和位置。

(3) 在“按钮”图层上插入新图层“人物”，在第2帧插入空白关键帧，选中该帧，按【F12】键打开“库”面板，将图形元件“男孩”和“女孩”拖到舞台中，调整大小和位置。

(4) 插入新图层“手势”，在“手势”图层的第2帧插入空白关键帧，选中该帧，打开“库”面板，将库中的影片剪辑元件拖到相应的位置，将“boy_手势”和“girl_手势”分别拖入到场景中相应的位置，并调整好大小和角度。

(5) 插入新图层“血量”，在“血量”图层的第2帧插入空白关键帧，选中该帧，打开“库”面板，将库中的影片剪辑元件“血量”拖到相应的位置；再选择“矩形工具”，在血量外部绘制血量外框，场景设置好后的效果如图8-4所示。

图8-4　场景布置

(6) 检查时间轴，此时的状态如图8-5所示。

图8-5　时间轴状态

3. 片尾场景设置

(1) 选中“按钮”图层的第25帧，单击快捷菜单中的“插入空白关键帧”命令，按【F9】键打开“库”面板，将按钮元件“replay”拖入场景中的合适位置，并整好大小。选中该层的第3帧，插入空白关键帧。

(2) 在其他图层的第25帧插入普通帧。在“手势”图层的第25帧插入空白关键帧，此时时间轴状态如图8-6所示。

图8-6　时间轴状态

(3) 选中第25帧，场景中的状态如图8-7所示。

图8-7　最后场景设置

4. 场景切换控制

(1) 选中“手势”图层的第1帧，单击菜单“窗口”→“代码片断”命令，打开“代码片断”面板，单击时间轴导航左侧的三角形按钮，展开时间轴导航。双击“在此帧处停止”，添加相应动作，如图8-8(a)所示。

(2) 选中“按钮”图层的“start”元件，打开“属性”面板，输入实例名称“anniu_start”，然后单击菜单“窗口”→“代码片断”命令，打开“代码片断”面板，双击“时间轴导航”中的“单击以转到帧并播放”，如图8-8(b)所示。

图8-8　利用代码片断添加动作

(3) 此时，时间轴上自动创建了一个新的名为“Actions”的图层，如图8-9所示。

图8-9　时间轴状态

(4) 打开“动作”面板，查看此时的动作代码，将“动作”面板中的gotoAndPlay(5)括号内参数5改为2，使之从第2帧开始播放，如图8-10所示。

图8-10　动作面板中修改参数

(5) 选中“Actions”图层的第25帧，插入空白关键帧，打开“动作”面板，输入函数stop()；使之在此帧停止播放。

(6) 选中“按钮”图层的第25帧，选中场景的“replay”按钮，打开“属性”面板，输入实例名称“anniu_replay”，单击菜单“窗口”→“代码片断”命令，打开“代码片断”面板，双击“时间轴导航”中的“单击以转到帧并停止”，自动在“动作”面板中添加了相应的动作。与上一步一样此时打开“动作”面板，将gotoAndStop(5)括号中的参数5改为2。

(7) 至此，三个场景中的切换已经完成，测试下动画，看能不能按要求切换。以“猜拳大战.fla”为文件名保存。

我收获

我留言

我练习

完成本任务练习。

任务二　猜拳游戏——运算符和条件语句

我明了

本任务是制作动画的主体动作，使游戏能够正确出手势，并能对输赢做出判断。

我掌握

(1) 常用运算符的作用。

(2) 条件语句if的用法。

(3) 随机函数random()的用法。

我准备

1. 运算符

(1) 赋值运算符“=”。

(2) 算术运算符“+”、“-”、“*”、“/”、“%”。

(3) 比较运算符“<”“>”“==”“<=”“>=”“!=”。

(4) 逻辑运算符“&&”和“||”。

2. 条件语句

(1) if语句。

形式：if(条件)

{条件成立时执行语句块}

(2) if…else语句。

形式：if(条件)

{条件成立时执行语句块}

else

{条件不成立时执行语句块}

(3) if…else if语句。

形式：if(条件1)

{条件1成立时执行的语句块}

else if(条件2)

{条件1不成立但条件2成立时执行的语句块}

……

else

{以上所有条件均不成立时执行的语句块}

3. Math.random()函数

在0~1之间随机取一个数。例如，

Math.floor(Math.random()*10)即在0~9之间随机取一个整数。

我动手

(1) 打开上次保存的文档“猜拳大战.fla”，选择“Actions”图层的第2帧，插入关键帧。

(2) 选择“bt_石头”按钮元件，打开“属性”面板，输入实例名称“anniu_st”，打开“代码片断”面板，选择“时间轴导航”中的“单击以转到帧并播放”选项，即添加了动作。打开“动作”面板，将gotoAndPlay(5)的参数5改为3。

(3) 选择“bt_剪刀”按钮元件， 打开“属性”面板，输入实例名称“anniu_jd”，打开“代码片断”面板，选择“时间轴导航”中的“单击以转到帧并播放”选项，即添加了动作。打开“动作”面板，将gotoAndPlay(5)的参数5改为3。

(4) 对“bt_布”实例进行以上同样的操作，实例名称为“anniu_jd”。

这样，依次单击这三个按钮，动画都能继续播放。下面来给这三个按钮添加相应的判定输赢和相应显示的动作。

(5) 自定义一个函数caipan()，用来比较输赢。

在这里，用0、1、2三个数来分别表示石头、剪刀、布，这样就可以来比较输赢了。动作语句如下：

function caipan(w:Number，t:Number)

(6) 将这个函数用到三个按钮动作中去。打开“动作”面板，在每个按钮动作函数中添加动作，如图8-11所示。

图8-11　“石头”按钮的动作

函数Math.random()是一个随机函数，随机生成一个0到1之间的一个数(不包括1)，再乘以3即为0到3之间的一个数，用int取整数部分，这样int(Math.random()*3)即表示随机取0到3之间的一个整数，也就是0、 1、2这三个数。

三个按钮中的动作有区别的就是定义W的值不一样。

做好后，测试动画。可以看到，能够判定输赢了。

测试动画，并保存。

我收获

我留言

我练习

(1) 完成本任务练习。

(2) 制作一个猜数小游戏。

任务三　猜拳游戏——对象的处理

我明了

在游戏中添加相应的动画，增强游戏效果。给输赢添加相应的效果，添加血量显示。给一局结束添加被打倒的效果。

我掌握

(1) 对象的命名、路径、属性、方法。

(2) 影片剪辑的控制。

我准备

(1) 点(.)用于指示与对象相关的属性和方法。它用于标志影片剪辑、变量、函数或对象的目标路径。点语法表达式以对象或影片剪辑的名称开头，后面跟着一个点，最后以要指定的元素结束。

(2) 影片剪辑常见的属性及方法。

我动手

1. 控制手势的播放

(1) 选中第2帧中的“boy_手势”元件，打开“属性”面板，输入实例名称“boy_sh”，同样给“girl_手势”元件取名为“girl_sh”。

(2) 选中“Actions”图层的第2帧，打开“动作”面板，在“anniu_st”按钮动作中添加：goy_sh.gotoAndStop(1)；在“anniu_jd”按钮动作中添加：boy_sh.gotoAndStop(2)；在“anniu_bu”按钮动作中添加：boy_bu.gotoAndStop(3)；添加结束后第2帧动作面板动作如图8-12所示。

图8-12　“石头”按钮动作

(3) 测试动画，可以看到，单击按钮，手势就会在相应的位置停一会儿，最后停止在第25帧。我们应该让其自动重新出拳，修改一下动作。选中“Actions”图层的第25帧，打开“动作”面板，将第1行“stop()”修改为“gotoAndStop(2)”。再测试看看。

(4) 用同样的方法，给计算机手势添加相应动作，计算机手势实例名为“girl_sh”，计算机的手势是计算机随机出数表示的，出数为0、1、2，对应的帧就为1、2、3，所以添加动作均为：“girl_sh.gotoAndStop(t+1)；”。

2. 控制其他影片剪辑的播放

(1) 给人物添加血量增减显示和闪电动画。这些动画可以加到函数caipan()中去。打开“库”面板，将影片剪辑元件“血”添加到boy和girl的头上，元件分别命名为“boy_xl”和“gir_xl”。血外可添加外框以增加效果。将boy_闪电、girl_闪电和ping_闪电分别拖到两人的脸上和两拳头的中间，分别命名为“boy_sd”、“gir_sd”和“ping_sd”。打开“动作”面板，选中第2帧，将caipan()函数中动作进行修改，如图8-13所示。

图8-13　修改定义的caipan()函数

(2) 测试动画，会发现问题，血量为负还可以玩，因此，需要判断一下血量是否小于或等于零，如果是，本局游戏结束。

(3) 接下来在caipan()函数中添加判断游戏是否结束的语句。选中第2帧；打开“动作”面板，从第53行开始添加动作，动作如图8-14所示。

图8-14　判断游戏是否结束动作

(4) 此时，再测试动画，可以看到，人物血量为零时，小人被打倒，但是并没有出现重来的画面，原因是第25帧出现转到第2帧的动作，所以，将此动作提前一帧，就可以了。

(5) 再测试动画，可以看到，重来一局后还是出现错误。原因是血量被保持，还有人物被打倒的状态被保持，所以应该重置，在“replay”按钮动作中重置，如图8-15所示。

图8-15　再来一次动作

测试并保存动画。

我收获

我留言

我练习

(1) 完成本任务练习。

(2) 修改游戏，使本次游戏5次定胜负变成3次定胜负。

任务四　猜拳游戏——组件的运用

我明了

本任务是利用组件制作一个具有交互效果的动画，有多种形式的输入信息，主要运用单选按钮、复选框、下拉列表框及按钮组件，设定相应的组件参数。

我掌握

(1) 会在作品中加入声音，并控制声音。

(2) 掌握单选按钮、复选框、下拉列表框、输入文本框和输出文本框等的用法，并了解一些简单参数的作用。

(3) 会发布自己的作品。

我准备

组件是带有参数的影片剪辑，每个组件都有一组独特的动作脚本方法。Flash CS5的组件主要由UI组件和Video组件构成。UI组件用于设置用户界面，并实现大部分的交互式操作，因此在制作交互式动画方面，UI组件应用广泛，操作简单，也是最常用的组件类别；Video组件用于对视频播放进行控制。

我动手

1. 反馈表的基本布局

(1) 新建Flash文档，设置文档属性：大小为640×480，其他属性为默认。单击菜单“文件”→“导入”→“打开外部库”命令，如图8-16所示。

图8-16　导入外部库

想一想：

用别人做好的元件或库，你会了吗？

(2) 此时出现“作为库打开”对话框，打开“猜拳大战(start).fla”文件的库，将库中的“bj.png”图片拖到舞台中央。利用对齐或属性，调节该图片，使之能够成为背景，将图层1重命名为“背景”，并锁定该图层。

(3) 新建图层，在第1帧中输入标题文字“游戏反馈表”，选择“选择工具”，选中该文本，设置属性，如图8-17所示，在消除锯齿列表框中选择“使用设备字体”，字体颜色为绿色。

图8-17　标题文本属性

(4) 输入各个问题的文字，字体为宋体，大小为28点，颜色为蓝色，使用设备字体。调整各个问题的排列位置及间距，设置好后，效果如图8-18所示。

图8-18　反馈表文字的分布

2. 创建单选按钮

(1) 单击菜单“窗口”→“组件”命令，打开“组件”面板，在“User Interface”组件类型中选择“RadioButton”(单选按钮)组件，按住鼠标左键不放，将其拖到“你对本游戏的评价是：”的下面，重复拖3个，如图8-19所示。

图8-19　创建单选按钮

(2) 选中第一个单选按钮，打开“属性”面板，在“属性”面板的“组件参数”选项卡中修改参数。单击“label”属性，将其标签修改为“好”，如图8-20所示。

图8-20　修改单选按钮参数

(3) 同样，将外加的两个标签依次改为“般”和“差”。修改以后如图8-21所示。

图8-21　单选按钮

想一想：

知道label参数的作用了吗？

3. 创建复选框

(1) 在“User Interface”组件类型中选择“CheckBox”(复选框)组件，按住鼠标左键不放，将其拖到“你对本游戏的评价是：”的下面，重复拖4个，如图8-22所示。

图8-22　插入复选框

(2) 选中第一个复选框，打开“属性”面板，在“属性”面板中的“组件参数”选项卡中修改参数。单击“label”属性，将其标签修改为“格斗”，其他几个依次为“射击”、“角色”、“卡牌”，改好后的效果如图8-23所示。

图8-23　改好后的复选框

4. 创建下拉列表框

(1) 在“User Interface”组件类型中选择“ComboBox”(下拉列表框)组件，按住鼠标左键不放，将其拖到“你觉得本游戏的制作难度是：”的右边，如图8-24所示。

图8-24　插入下拉列表

(2) 打开“属性”面板，单击“组件参数”项中“dataProvider”右边的铅笔图标，如图8-25所示。

图8-25　修改参数

(3) 打开“值”对话框，单击其中的按钮4次，使其增加4个值，如图8-26所示。

(4) 将“lable0”下的lable的值改为“很难”，data的值也改为“很难”，同样将lable1至lable4下的lable和data改为相同的内容，内容依次为“难”、“简单”、“很简单”，如图8-27所示。输入结束后，单击“确定”按钮。其余参数为默认。

图8-26　添加值

图8-27　修改标签和数据

(5) 创建按钮组件。在“组件”面板中选择“Button”组件，将其拖到舞台下方，选择第一个按钮组件，在“属性”面板中的“组件参数”项内，将其“lable”参数设为“提交”，其他参数不变，如图8-28所示。

图8-28　标签的参数

想一想：

你知道如何设置参数以及各参数的作用了吗？此时，完成了第1帧的全部内容，如图8-29所示。

图8-29　第1帧内容

(6) 在“背景”图层的第2帧插入帧，在“图层2”的第2帧插入空白关键帧，选中“图层2”的第2帧，选择“文本工具”，在场景中输入文本“感谢您对本游戏的支持”，选中文本，打开“属性”面板，设置其属性：字体颜色为蓝色，字号为36点，字体为宋体，使用设备字体。设置好后的舞台效果如图8-30所示。

图8-30　设置结束文本

(7) 选中第1帧的“提交”按钮，单击菜单“窗口”→“代码片断”命令，打开“代码片断”面板，双击“时间轴导航”下的“单击以转到帧并停止”，添加代码片断，如图8-31所示。

想一想：

为什么会出现这种情况呢？

图8-31　添加代码片断

(8) 此时会弹出设定实例名称窗口，如图8-32所示，这是因为没有事先给元件取名称，输入名称“tijiao”，单击“确定”按钮。

图8-32　设置实例名称

(9) 单击菜单“窗口”→“动作”命令，打开“动作”面板，如图8-33所示，已经添加了动作。

图8-33　“动作”面板中的动作

(10) 将第14行gotoAndStop(5)中的参数5改为2，即为gotoAndStop(2)。在第9行插入函数stop();，此时动作面板如图8-34所示。

图8-34　修改动作

(11) 至此，反馈表制作完成，按组合键【Ctrl+Enter】测试动画，并保存动画。

(12) 发布动画。单击菜单“文件”→“发布设置”命令，打开如图8-35所示的对话框，在对话框中可以对发布的文件类型、位置、压缩、安全等进行设置。

(13) 至此，文件制作完成。

图8-35　发布设置

我收获

我留言

我练习

(1) 完成本任务练习。

(2) 制作交友登记表。