Animate动画设计与制作实例教程（Animate CC 2019）项目八 制作游戏

Animate动画设计与制作实例教程

（AnimateCC2019）项目八

制作游戏项目简介

使用Animate制作的游戏以其小巧灵活、老少皆宜的特性，获得了很多人的青睐。

本项目主要介绍AnimateCC2019“动作”面板的组成及使用、ActionScript3.0基础、事件和事件处理函数、时间轴控制函数和程序的3种基本结构。通过几个应用范例，讲解AnimateCC2019

在游戏制作中的应用。通过本项目的学习，读者可以掌握“动作”面板、MouseEvent.事件和时间轴的使用方法和技能，掌握用Animate进行游戏制作的方法和技巧。学习目标了解ActionScript3.0基础知识；掌握“石头剪刀布”游戏的制作方法；掌握拼图游戏的制作方法；掌握填色游戏的制作方法。8.1.1ActionScript3.0概述1．“动作”面板概述

“动作”面板是Animate程序编辑环境。使用该面板可以开发与编辑用于FlashPlayer或AIR的ActionScript脚本程序，也可开发和编辑用于HTML5Canvas文档的JavaScript程序，这里主要介绍ActionScript脚本语言。在Animate中，ActionScript3.0有两种编写方法，一种是在时间轴的帧上编写，另一种是在AS文件中编写。

启动AnimateCC2019，执行“窗口”>“动作”命令或按F9键打开“动作”面板，如图8-1所示。8.1知识准备——ActionScript3.0基础图8-1

“动作”面板由以下几部分组成。◎脚本窗口：提供了必要的代码编辑工具，用来编辑脚本。◎脚本选项：“动作”面板右上角有各种查找、替换和插入代码的选项，还有一个“使用向导添加”的按钮，是一个简单易用的代码自动生成向导，可用于HTML5画布文件类型。◎脚本导航器：用于查找代码所处的位置，Animate将代码存放在时间轴的关键帧上，可在多个时间轴和关键帧上直接切换导航。2．编程要素（1）数据类型

简单数据类型：Boolean（布尔）、int（有符号整型）、Number（浮点）、String（字符串）、uint（无符号整型）。

复杂数据类型：Array（数组）、Date（日期）、Error（异常）、Function（函数）、RegExp（正则表达）。（2）运算符和表达式

运算符是用于对表达式中各个运算量进行各种运算的符号。通过运算符可以对一个或多个值计算新值。Animate提供的运算符主要有以下几种。◎后缀：x++、x--。◎一元：++x、--x、+、-、～、!、delete、typeof、void。◎乘除法：*、/、%。◎加减法：+、-。◎按位移位：<<、>>、>>>。◎关系：<、>、<=、>=、asininstanceof、is。◎等于：==、!=、===、!==。◎按位“与”：&。◎按位“异或”：^。◎按位“或”：|。◎逻辑“与”：&&。◎逻辑“或”：||。◎条件：?:。◎赋值：=、*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=。◎逗号：。

表达式是由常量、变量、函数及运算符按照运算法则组成的计算式。（3）对象

客观世界中的任何一个事物都可以看成是一个对象。在Animate中，每一个可以访问的目标都是一个对象，如“舞台”中的图形、按钮、影片剪辑等。（4）类

类是一批对象的共同特征（称为“属性”）和共同行为（称为“方法”）的描述。类是对象的抽象。一般也把对象称为类的实例。（5）属性

类的属性是指类中对象共有的特性和特征。例如，影片剪辑（MovieClip）类的属性有：宽度（width）、高度（height）、位置（x,y）、透明度（alpha）、旋转度（rotation）等。（6）方法

类的方法是指可以由类中所有对象执行的操作。一般由系统内已经定义好的一段有特定功能的代码来实现，可以在需要时直接调用这样的方法。例如，play()就是影片剪辑的方法。（7）变量

变量是指程序运行中可以改变的量。变量由两部分构成：变量名和变量的值。

变量的相关语法如下。◎声明变量：vari;◎将变量与一个数据类型相关联：vari:int;◎为变量赋值：vari:int;i=20;◎在声明变量的同时为变量赋值：vari:int=20（8）函数

函数是用来对常量、变量等进行某种运算的程序代码。这些代码在程序中可重复使用。在编程时可以将需要处理的值或对象通过参数的形式传递给函数，该函数将对这些值执行运算后返回结果。

定义函数的一般形式如下。

function

函数名称(参数1,参数2,……,参数n)

{

//

函数的程序代码

}

3．ActionScript的语法规则

编写ActionScript脚本时应遵循以下语法规则。◎用半角分号（;）作为一个语句的结束标志。◎用圆括号()来放置函数中的相关参数，在定义函数时要将所有参数都放在圆括号中。◎用大括号{}将语句组合在一起，形成逻辑上的一个程序块。注意括号使用时要匹配。◎用点标记（.）指出一个对象的属性、特性或方法，或用于指示一个对象的目标路径。◎注释：单行注释，在一行中的任意位置放置两个斜杠来指定单行注释。程序将忽略斜杠后直到该行末尾的所有内容。多行注释，多行注释包括一个开始注释标记（/*）、注释内容和一个结束注释标记（*/）。无论注释跨多少行，程序都将忽略开始标记与结束标记之间的所有内容。◎关键字：是ActionScript中有特殊用途的保留字。不能使用关键字作为函数名、变量名和标识符。◎区分大小写。1．常见事件类型（1）鼠标事件

MouseEvent类定义了10种常见的鼠标事件，具体如下。◎CLICK：定义鼠标单击事件。◎DOUBLE_CLICK：定义鼠标双击事件。◎MOUSE_DOWN：定义鼠标按键按下事件。◎MOUSE_MOVE：定义鼠标指针移动事件。8.1.2ActionScript3.0的事件处理◎MOUSE_OUT：定义鼠标指针移出事件。◎MOUSE_OVER：定义鼠标指针移过事件。◎MOUSE_UP：定义鼠标按键松开事件。◎MOUSE_WHEEL：定义鼠标滚轮滚动触发事件。◎ROLL_OUT：定义鼠标指针滑入事件。◎ROLL_OVER：定义鼠标指针滑出事件。（2）键盘事件◎KeyboardEvent.KEY_DOWN：定义按下键盘按键时事件。◎KeyboardEvent.KEY_UP：定义松开键盘按键时事件。（3）帧循环事件

帧循环事件是ActionScript3.0中动画编程的核心事件。该事件能够控制代码跟随Animate的帧频播放，在每次刷新屏幕时改变显示对象。使用该事件时，需要把该事件代码写入事件侦听函数中，然后在每次刷新屏幕时，都会调用Event.ENTER_FRAME事件，从而实现动画效果。2．事件侦听器

ActionScript3.0中的事件侦听器也就是以前版本中的事件处理函数，是事件的处理者，负责接收事件携带的信息，并在接收到该事件之后执行事件处理函数体内的代码。

添加事件侦听的过程分为两步：第一步是创建一个事件侦听函数第二步是使用addEvenListener()方法在事件目标或者任何显示对象上注册侦听器函数

ActionScript3.0中控制影片剪辑播放的常用方法如下。（1）停止方法stop()：停止正在播放的动画。此方法没有参数。（2）播放方法play()：当动画被停止播放之后，使用play()方法使动画继续播放。此方法没有参数。（3）停止播放声音方法stopAllSounds()：在不停止播放头的情况下停止SWF文件中当前正在播放的所有声音。此方法没有参数。（4）跳转播放方法gotoAndPlay。8.1.3控制影片剪辑播放的方法（5）跳转停止方法gotoAndStop：与跳转播放方法类似，跳转到指定帧停止。（6）跳转到下一帧方法nextFrame()：将播放头转到下一帧并停止。如果当前帧为最后一帧，则播放头不移动。无参数。（7）跳转到上一帧方法prevFrame()：将播放头转到前一帧并停止。如果当前帧为第一帧，则播放头不移动。无参数。（8）跳转到下一场景方法nextScene()：将播放头移到下一场景的第1帧并停止。无参数。1．顺序结构

按照语句的顺序逐句执行，只执行一次。2．选择结构

用if语句实现，可以是函数嵌套，只执行程序的某一个分支。3．循环结构

可实现程序块的循环，循环的次数不定。用while、do…while、for语句实现。8.1.4程序结构8.2.1案例效果分析

本案例设计的是“石头剪刀布”游戏。作为玩家，用户可以单击“石头”“剪刀”“布”按钮中的任一个，在玩家和电脑中有伸手的动作，玩家出的是玩家单击的按钮，而电脑是随机出的。会显示当前是第几局，玩家赢了几局，电脑赢了几局，平局数是几。当玩够30局后，游戏跳到另一个界面，显示你赢了或者你输了，可以单击“重玩”按钮重新开始游戏。运行中的某个画面如图8-8所示。8.2任务一——制作“石头剪刀布”游戏图8-88.2.2设计思路（1）制作“石头”“剪刀”“布”元件及对应的按钮元件。（2）用一个影片剪辑元件实现猜拳的3种动作。（3）用动态文本实现计数，用if函数判断电脑实例显示石头、剪刀或布。8.2.3相关知识和技能点（1）特殊字体的使用。（2）动态文本的使用。（3）if函数、gotoAndStop()语句的使用。（1）新建一个尺寸为400像素×300像素的Animate文件（选择ActionScript3.0）。（2）新建图形元件“布”，在元件的编辑窗口，选择布的图形放入到元件中，如图8-9所示。（3）新建图形元件“剪刀”，选择剪刀的图形放入到元件中，如图8-10所示。（4）新建图形元件“石头”，选择石头的图形放入到元件中，如图8-11所示。8.2.4任务实施图8-9

图8-10

图8-11（5）新建影片剪辑“石头剪刀布”，进入元件的编辑窗口，在第4帧插入空白关键帧，添加代码“stop();”。在第5帧插入空白关键帧，在“属性”面板中设置帧标签“a”，如图8-12所示。（6）在第7帧插入空白关键帧，将“石头”元件拖至“舞台”。在第11帧插入关键帧，将该帧中的“石头”向左移动一段距离。在此帧上添加代码“stop();”。将第5～11帧选中，进行“复制帧”操作，在第20帧和第40帧各执行一次“粘贴帧”操作，将第20帧的帧标签改为“b”，将第40帧的帧标签改为“c”。用鼠标右键单击第22帧中的“石头”，在弹出的快捷菜单中选择“交换元件”命令。在“交换元件”对话框中选择“剪刀”图形元件，单击“确定”按钮或按Enter键；对第26帧（交换为剪刀）、第42帧（交换为布）和第46帧（交换为布）中的元件进行交换元件操作。完成的时间轴如图8-13所示。图8-12

图8-13（7）新建按钮元件“布1”，在“弹起”帧，将图形元件“布”拖至“舞台”，添加文字“布”；在“指针经过”帧插入关键帧，更改图形大小；在“点击”帧插入关键帧后，绘制一个矩形，矩形的大小恰好能覆盖手及文字。（8）用类似方法制作“剪刀1”和“石头1”按钮元件。（9）返回“场景1”，设置背景为灰色。在第2帧插入空白关键帧，绘制一个矩形，填充红色，复制该矩形并移到右侧，填充蓝色。将3个按钮拖至“舞台”；输入静态文本“玩家”“电脑”“现在是第回合”“玩家赢：”“电脑赢：”“平局：”，效果如图8-14所示。（10）在“现在是第回合”的空处，使用“文本”工具拖出一个矩形块，在“属性”面板中选择“动态文本”，并设置实例名称为“sum_text”，如图8-15所示。图8-14

图8-15（11）用类似方法，在“玩家赢：”后面添加动态文本框，实例名称为“w1_text”。在“电脑赢：”后面添加动态文本框，实例名称为“d1_text”。在“平局：”后面添加动态文本框，实例名称为“p1_text”。（12）从“库”面板中将“石头剪刀布”影片剪辑拖到蓝色区域，使用“变形”工具旋转−90°，添加实例名称“mc_d”。复制该影片剪辑实例，移到红色矩形中，改变实例名称为“mc_w”，并使用“变形”工具，进行水平翻转。使用“对齐”面板使“mc_d”“mc_w”处于同一水平线上。（13）新建“图层3”，第2帧插入空白关键帧，添加“剪刀”的动作代码，“动作”面板如图8-16所示。在“图层3”中的第2帧添加的“石头”的代码如图8-17所示。图8-16

图8-17（14）在“图层3”中的第2帧添加“布”按钮的代码，与剪刀、石头的代码类似。（15）在第1帧添加动作代码“varw1:int=0;varp1:int=0;vard1:int=0;varsum:int=0;”，在第2帧添加动作代码“stop();”，在后面10帧插入空白关键帧，添加帧标签“wy”，在该帧的“舞台”中输入“恭喜！你赢了！”，并添加一个“重玩”按钮，实例名称为yan。在新建“图层3”的第10帧上添加代码，如图8-18所示。（16）测试影片，保存为“石头剪刀布.fla”。图8-188.3.1案例效果分析

本案例设计的是拼图游戏，游戏规则是当鼠标指针在某个小图片上时，按下鼠标左键不松开进行拖曳，该小图片跟随鼠标指针移动，当移动到小图片的正确位置并松开鼠标时，该图片停留在正确位置，否则回到原来的位置。完成的效果截图如图8-19所示。8.3任务二——制作拼图游戏图8-198.3.2设计思路（1）将小图片都转化为元件，并重新排列好。（2）用按钮记录小图片的正确位置。（3）为小图片添加动作，使小图片到正确位置时停留，否则返回原位置。8.3.3相关知识和技能点（1）影片剪辑方法stopDrag()。（2）碰撞检测方法hitTestPoint()、hitTestObject()。（3）“对齐”面板、查找与替换。（1）新建一个尺寸为640像素×480像素的Animate文件（选择ActionScript3.0），“舞台”背景色设置为#003300。（2）执行“文件”>“导入”>“导入到库”命令，将images文件夹中的所有图片导入“库”面板中。（3）按Ctrl+F8组合键，新建“影片剪辑”元件，名称为“tu1”，从“库”面板中将“pdsu-1.gif”拖至“舞台”中，将它转换为影片剪辑元件。（4）重复上一步的操作，把“pdsu-2.gif”转换为“tu2”，“pdsu-3.gif”转换为“tu3”…“pdsu-16.gif”转换为“tu16”。（5）将“舞台”中的16个影片剪辑打乱次序后，使用“对齐”面板排列，如图8-20所示。将“图层1”命名为“小图形”，并锁定。8.3.4任务实施图8-20（6）在“库”面板中，用鼠标右键单击“tu1”，选择“直接复制”命令，在弹出的“直接复制元件”对话框中输入名称为“bt”，选择类型为“按钮”，单击“确定”按钮，这时就有一个按钮元件“bt”。在“库”面板中双击“bt”按钮图标，进入按钮的编辑窗口。将“弹起”帧的内容全选后，执行“修改”>“分离”命令（或按Ctrl+B组合键）把图像打散，使用“墨水瓶”工具给它添加黑色边框后，将填充删除，只留边框。在“点击”帧插入关键帧，并填充渐变色，效果如图8-21所示。图8-21（7）返回“场景1”。新建一个图层，将该图层拖到“图形”层的下面。将按钮“bt”拖至“舞台”中，选择该按钮，按Alt键拖动按钮“bt”横向复制4个，再选中这4个按钮纵向复制4排，如图8-22所示。对按钮按先行后列的顺序将实例命名为“bt1”…“bt16”，如图8-23所示。将该层命名为“按钮”并锁定。

图8-22

图8-23（8）新建一个图层，命名为“参考图”，将该图层拖到“按钮”层的下面。将“未标题-1.jpg”文件导入“库”面板，将之拖至“参考图”层，转换为图形元件，位置和“按钮”层的按钮相同，如图8-24所示。在“属性”面板，设置其“样式”为“Alpha”，“Alpha”为15%，如图8-25所示。

图8-24

图8-25（9）新建一个图层，命名为“文字”，使用“文本”工具在图片的上方空白处输入文字“拼图游戏”，设置文字格式为微软雅黑、80、粗体，颜色为#8D030B，将库中“pds.png”拖入“舞台”，并使用“文本工具”在图片下方空白处输入“原图”，设置文字大小为20，其他不变。为了突出显示标题，使用“线条工具”在标题下画一条直线，“颜色”设置为#999999，“笔触”大小设置为5，效果如图8-26所示。图8-26（10）在“属性”面板（见图8-27）单击“滤镜”选项按钮，选择“投影”选项，将阴影颜色设为#666666，选择“发光”选项，将发光颜色设为#333333，如图8-28所示，锁定该层。图8-27

图8-28（11）将“小图形”层解锁，新建图层并重命名为“as”。选择第1帧，打开“动作”面板，输入图8-29所示的代码。（12）将图8-29所示代码（除了vara:int=0;）全选后复制，在“动作”面板的下面进行粘贴，然后将tu16全部改为tu15，bt16全部改为bt15即可。（13）用类似方法，为所有小图形影片剪辑（一直到tu1）都添加代码。测试影片后保存为“拼图游戏.fla”。图8-29

图8-308.4.1实训概述1．动画的制作效果与设计理念

本实训制作的填色游戏，玩家能够选择颜色填充和重新填色，参考效果如图8