《Animate动画设计与制作》课件 项目9、10　制作脚本动画；制作交互式动画

项目九制作脚本动画307任务1制作天降元宝动画任务2制作百步穿杨鼠标跟随动画任务3制作繁花似锦动画308制作天降元宝动画任务1

3091. 能使用帧选择器控制图形元件动画的间隔。2. 能在“动作”面板中正确输入所需的代码。310本任务是一个脚本动画制作实例，通过在“动作”面板中输入代码，实现漫天元宝降落的效果，如图所示。通过本任务的学习，可以掌握使用帧选择器控制图形元件动画间隔的方法和技巧以及“动作”面板中的各图标选项的使用方法。311天降元宝动画效果一、动作脚本动作脚本是Animate内置的编程语言，可以将变量、函数、属性和方法组成一个整体，控制对象从而产生各种动画效果。此外，动作脚本强大的人机交互功能与网络服务器交互功能使其在游戏、课件、互动式网站的制作中有着广泛的应用空间。312313二、“动作”面板“动作”面板用于组织动作脚本，是编写脚本语言的地方，在Animate中打开“动作”面板的方法是执行“窗口”→“动作”命令或按F9键。1.

“动作”面板的组成“动作”面板由位置列表区和程序编辑区两部分组成，如图所示。314“动作”面板315（1）位置列表区：也叫脚本导航器，位于“动作”面板的左侧，用来显示当前选择对象的具体信息。（2）程序编辑区：位于“动作”面板的右侧，用于编写程序。“固定脚本”按钮

：用于固定脚本。“插入实例路径和名称”按钮

：可以插入实例的路径或者实例的名称。“代码片断”按钮

：单击该按钮后会弹出“代码片断”对话框，在该对话框中可以选择常用的动作脚本语言。“设置代码格式”按钮

：用于设置书写代码的格式。“查找”按钮

：可以查找或替换脚本语言。“帮助”按钮

：可以打开“帮助”面板。脚本编辑窗口：该区域主要用来编辑ActionScript或者HTML5 Canvas脚本。3162. 添加脚本语言的方法在“动作”面板中添加脚本语言的方法有以下两种。（1）在程序编辑区直接输入脚本语言。（2）单击脚本编辑窗口中的“代码片断”按钮

，在弹出的“代码片断”对话框中选择脚本语言。317318三、数据类型数据类型描述了动作脚本的变量或元素可以包含的信息的种类。动作脚本有两种数据类型：原始数据类型和引用数据类型。原始数据类型是指String（字符串）、Number（数字）和Boolean（布尔值），因为它们拥有固定类型的值，所以可以包含它们所代表元素的实际值；引用数据类型是指影片剪辑和对象，因为它们的值的类型是不固定的，所以它们包含对该元素实际值的引用。1. String（字符串）字符串是指诸如字母、数字和标点符号等字符的序列。字符串只能使用一对英文双引号来标记。2. Number（数字）数字型数据是指数字的算术值。能正确进行数学运算的值必须是数字型。可以使用算术运算符加（+）、减（－）、乘（*）、除（/）、递增（++）和递减（－－）来处理数字，也可以使用内置的

Math

对象的方法来处理数字。3193.

Boolean（布尔值）布尔值即逻辑值。值为

true

或

false

的变量被称为布尔型变量。动作脚本也会在需要时将值

true

和

false

转换为

1

和

0。在确定“是

/

否”的情况下，布尔型变量是非常有用的。在进行比较的动作脚本语句中，布尔型变量经常与逻辑运算符一起使用。3204.

MovieClip（影片剪辑）影片剪辑是

Animate

影片中可以播放动画的元件，每个影片剪辑都是一个

Movie Clip

对象，拥有

Movie Clip

对象中定义的方法和属性。通过点（.）运算符可以调用影片剪辑内部的属性和方法。3215.

Object（对象）对象型数据是指所有使用动作脚本创建的具体对象，它包含了所有类的共有属性，每个属性都拥有自己的名称和值，属性的值可以是任何的

Animate

数据类型，甚至可以是对象数据类型。通过点（.）运算符可以引用对象中的属性。3226.

Null（空值）空值数据类型只有一个值，即

Null。这意味着没有值，即缺少数据。7. Undefined（未定义）未定义的数据类型只有一个值，即

Undefined，用于尚未分配值的变量。323324四、语法规则1.

点运算符在动作脚本中，点（.）用于表示与对象或影片剪辑相关联的属性或方法，也可用于标识影片剪辑或变量的目标路径。点运算符的表达式以影片剪辑或对象的名称开始，中间为点运算符，最后是要指定的元素。3252.

界定符（1）大括号：动作脚本中的语句可以使用大括号来组成语句块。（2）分号：动作脚本中的语句可以由一个分号结束。如果在结尾处省略分号，Animate仍然可以成功编译脚本。（3）圆括号：在定义函数时，任何参数的定义都必须放在一对圆括号内。调用函数时，需要被传递的参数也必须放在一对圆括号内。可以使用圆括号改变动作脚本的优先顺序。3263.

区分大小写在区分大小写的编程语言中，仅大小写不同的变量名被视为互不相同。ActionScript 3.0中的标识符区分大小写。对于关键字、类名、变量、方法名等，要严格区分大小写。如果关键字的大小写出现错误，在编写程序时就会有错误信息提示。3274.

注释在“动作”面板中，使用注释语句可以在一个帧或者按钮的脚本中添加说明，以利于增加程序的易读性。注释语句以双斜线（//）开始，斜线显示为灰色，注释内容可以不考虑长度和语法。注释语句不会影响Animate的动画输出。328五、“3D

旋转工具”用“3D旋转工具”

可以在3D空间中旋转影片剪辑实例。选择“3D旋转工具”

，选中舞台中的影片剪辑实例，在实例上出现旋转控件，如图所示。拖动红色线可以使实例绕

X

轴旋转；拖动绿色线可以使实例绕Y

轴旋转；拖动蓝色线可以使实例绕

Z

轴旋转；拖动橙色线可以使实例同时绕X

轴和

Y

轴旋转。329用“3D旋转工具”选中影片剪辑实例330用“3D旋转工具”选中实例的

“属性”面板通过“属性”面板可以设置3D定位和视图，如图所示。“X”“Y”“Z”数值选项：可以设置各轴的旋转角度。“透视角度”数值选项

：可以设置3D影片剪辑在舞台上的外观视角。“消失点”数值选项：可以控制舞台上3D影片剪辑的

Z

轴方向。331六、“3D平移工具”用“3D平移工具”

可以在3D空间中移动影片剪辑实例。选择“3D平移工具”

，选中舞台中的影片剪辑实例，在实例上出现

X、Y和

Z3个轴，如图所示。其中红色线表示

X轴、绿色线表示

Y

轴、黑色圆点表示Z

轴。通过“属性”面板可以设置3D定位和视图。用“3D平移工具”选中实例

制作百步穿杨鼠标跟随动画任务23321. 掌握按钮元件的制作原理和方法，能制作出不同状态的按钮元件。2. 能使用“画笔库”面板设置“画笔”工具的样式。3. 能根据设计需要，在“动作”面板中调整鼠标跟随的代码参数。333本任务是一个鼠标跟随动画制作实例，通过制作羽箭样式，再添加相应的鼠标跟随代码，以实现多根羽箭跟随鼠标一起移动的效果，如图所示。通过本任务的学习，可以掌握“画笔库”面板的使用方法以及按钮元件的制作方法和技巧，重点是掌握鼠标跟随代码参数的具体含义，能调整鼠标跟随代码来实现不同的鼠标跟随效果。334335百步穿杨鼠标跟随动画效果一、按钮元件1.

按钮元件的定义按钮元件用于创建交互式控制按钮，以感知并响应鼠标的动作。按钮元件的时间轴上有4个帧，分别为“弹起”“指针经过”“按下”和“点击”，它们的作用如下。336（1）弹起：鼠标指针没有移到按钮上的按钮状态。（2）指针经过：鼠标指针移到按钮上的按钮状态。（3）按下：用鼠标单击按钮时的按钮状态。（4）点击：鼠标事件的响应范围。如果按钮没有设置“点击”状态的区域，鼠标事件的响应范围应由“弹起”状态的按钮外观区域决定。“点击”帧的图形不在影片中显示。337按钮元件与影片剪辑元件一样，都可以指定实例的名称，以便在程序中调用；可以通过“色彩效果”选项对亮度、色调、透明度进行设置。按钮元件可以嵌套在影片剪辑元件和图形元件中，也可以包含文件和声音。按钮元件与影片剪辑元件不同的是语句不能加在按钮元件的时间轴上。3382.

创建按钮元件的方法（1）执行“插入”→“新建元件...”命令或按组合快捷键Ctrl+F8，弹出“创建新元件”对话框。（2）在“名称”文本框中输入元件的名称，在“类型”项中选择“按钮”，单击“确定”按钮，如图所示。339“创建新元件”对话框（3）Animate会自动进入元件的编辑模式，可分别在“弹起”“指针经过”“按下”和“点击”帧中绘制图形。按钮元件的“时间轴”面板如图所示。（4）制作完成后，单击“返回场景”图标

，退出元件编辑模式。340按钮元件的“时间轴”面板二、变量变量是包含信息的容器。容器本身不会改变，但内容可以更改。当第一次定义变量时，最好为变量定义一个已知值，这就是初始化变量，通常在SWF文件的第1帧中完成。每一个影片剪辑对象都有自己的变量，而且不同的影片剪辑对象中的变量相互独立且互不影响。3411. 变量中可以存储的常见信息类型包括URL、用户名、数字运算的结果、事件发生的次数等。2. 为变量命名必须遵循以下规则：（1）变量名在其作用范围内必须是唯一的。（2）变量名不能是关键字或布尔值（true或false）。（3）变量名必须以字母或下画线开始，由字母、数字和下画线组成，其间不能包含空格，变量名没有大小写的区别。3423. 变量的范围是指变量在其中已知并且可以引用的区域，它包含3种类型：（1）本地变量：在声明它们的函数体（由大括号决定）内可用。本地变量的使用范围只限于它的代码块，会在该代码块结束时到期，其余的本地变量会在脚本结束时到期。（2）时间轴变量：可用于时间轴上的任意脚本。要声明时间轴变量，应在时间轴的所有帧上都初始化这些变量。（3）全局变量：对于文档中的每个时间轴和范围均可见。4. 不论是何种变量，都需要使用var语句。343三、函数函数是用来对常量、变量等进行某种运算的方法，如产生随机数、进行数值运算、获取对象属性等。函数是一个动作脚本代码块，它可以在影片中的任何位置重新使用。如果将值作为参数传递给函数，则函数将对这些值进行操作。调用函数可以用一行代码来代替一个可执行的代码块。函数可以执行多个动作，并为它们传递可选项。函数必须有唯一的名称，以便在代码行中可以知道访问的是哪一个函数。344四、表达式和运算符表达式是指由常量、变量、函数和运算符按照运算法则组成的计算式。运算符是可以对数值、字符串、逻辑值进行运算的关系符号。运算符有很多种，包括算术运算符、字符串运算符、逻辑运算符、位运算符等。3451.

算术表达式及运算符算术表达式是数值进行运算的表达式。它由数值、以数值为结果的函数、算术运算符组成，运算结果是数值或逻辑值。在Animate中可以使用的算术运算符有：+、－、*、/：执行加、减、乘、除运算。=、< >：比较两个数值是否相等、不相等。<、< =、>、> =：比较运算符前面的数值是否小于、小于或等于、大于、大于或等于后面的数值。3462.

字符串表达式及运算符字符串表达式是对字符串进行运算的表达式。它由字符串、以字符串为结果的函数、字符串运算符组成，运算结果是字符串或逻辑值。在Animate中可以参与字符串表达式的运算符如下。&：连接运算符两边的字符串。Eq、Ne：用来判断运算符两边的字符串是否相等或不相等。Lt、Le、Qt、Qe：用来判断运算符左边字符串的ASCII码是否小于、小于或等于、大于、大于或等于右边字符串的ASCII码。3473.

逻辑表达式及运算符逻辑表达式是对正确、错误的结果进行判断的表达式。它由逻辑值、以逻辑值为结果的函数、以逻辑值为结果的算术或字符串表达式和逻辑运算符组成，运算结果是逻辑值。4.

位表达式及运算符位表达式是对整数的二进制位进行操作的运算表达式。它由位运算符和操作数组成。位运算符用于处理浮点数。运算时先将操作数转化为32位的二进制数，然后对每个操作数分别按位进行运算，运算后再将二进制的结果按照Animate的数值类型返回运算结果。348五、“画笔库”面板“画笔库”面板中提供了一些预设画笔，可以打开画笔库，浏览其中的内容并选择适当的画笔，如图所示。349“画笔库”面板350选择“画笔工具”，执行“窗口”→“画笔库”命令，打开“画笔库”面板，选择一个预设画笔，单击“画笔库”面板左下角的“在文档中使用”按钮

，将选定画笔添加到文档中，或者双击预设画笔，将其添加到文档中，画笔会在“属性”面板的“工具”选项卡下的“样式”选项中显示，在舞台中拖动鼠标即可绘制图形。制作繁花似锦动画任务3

3511. 能根据动画设计需要，制作动态按钮元件并更改实例名称。2. 能使用动态文本自定义鼠标光标。3. 能根据动画要求，制作相应的鼠标事件。352本任务是一个鼠标悬停动画制作实例，通过在舞台中布满带有花开效果的按钮元件，实现鼠标在舞台悬停则花朵绽放的效果，如图所示。通过本任务的学习，可以掌握动态按钮元件的制作原理和方法以及动态文本的使用方法。353354繁花似锦动画效果一、使用“文本工具”添加文本的方式在Animate中添加文本有以下两种方式。1. 选择“文本工具”，直接在场景中需要输入文本的地方单击，此时会出现一个文本输入框，该文本输入框的宽度会随着输入文本的增加而自动延长，光标却不会自动换行，需手动按Enter键换行，如图所示。355单击直接输入文本2. 选择“文本工具”，在场景中需要输入文本的地方拖动鼠标确定文本输入框的宽度，当输入的文本超过文本输入框的宽度时，光标会自动换行，如图所示。356拖动文本框，输入文本357二、“文本工具”的“属性”面板通过“文本工具”的“属性”面板，如图所示，可以修改文本的格式，其相关选项的作用如下。358“文本”工具的“属性”面板359“文本类型”下拉列表：用于选择创建文本的类型，有静态文本、动态文本和输入文本这3种类型。1. 静态文本：显示不能动态更新字符的文本。2. 动态文本：可以通过脚本程序来改变其显示的文本内容。在“字符”选项组中，各按钮的功能如下：“将文本呈现为HTML”按钮

：文本支持HTML标签特有的字体格式、超链接等超文本格式；“在文本周围显示边框”按钮

：可以为文本设置白色的背景和黑色的边框。3603. 输入文本：创建一个表单，通过脚本程序来获取用户输入的文本内容（HTML5 Canvas动画类型不支持输入文本）。“改变文本方向”按钮

：单击该按钮可在弹出的列表中设置文本的方向，共有“水平”“垂直”“垂直，从左向右”这3个选项。“字体”下拉列表：在该下拉列表中可设置文本的字体，其中的选项为计算机中已安装的字体。361“大小”数值框：用于设置文本字体的大小。“字距调整量”数值框：用于设置文本中相邻字符的间隔。“文本颜色”色块：用于设置文本的颜色。“切换下标”按钮

：用于将选择的文本设置为下标。“切换上标”按钮

：用于将选择的文本设置为上标。“段落”选项：用于设置段落的对齐方式和距离，包括左对齐、居中对齐、右对齐和两端对齐这

4

个对齐方式按钮，“缩进”“行距”“左边距”和“右边距”这

4

个数值框。362“行为”选项包括单行、多行和多行不换行。其中，“单行”：文本以单行方式显示。“多行”：如果输入的文本大于设置的文本限制，输入的文本将被自动换行。“多行不换行”：输入的文本为多行时，不会自动换行。输入文本的“行为”选项新增加了“密码”选项，如果选择此选项，当文件输出后，影片中的文字将显示为星号（****）。“最大字符数”选项：可以设置输入文字的最多数值。默认值为

0，即为不限制。项目十制作交互式动画363任务1制作中秋节电子贺卡动画任务2制作中华美食网任务3制作唐诗教学课件364制作中秋节电子贺卡动画任务13651. 能综合应用动画技术制作电子贺卡。2. 能选择正确的鼠标事件代码完成场景的跳转。366本任务是一个综合应用动画技术制作中秋节电子贺卡的实例，效果如图所示。通过本任务的学习，可以掌握电子贺卡的制作流程和方法以及场景、元件、实例、“动作”面板的应用技巧。367中秋节电子贺卡动画效果一、播放和停止动画1. stop（）：用于在此帧停止播放。2. gotoAndStop（）：用于转到某帧并停止播放。3. gotoAndPlay（）：用于转到某帧并开始播放。4. addEventListener（）：用于添加事件的方法。368369二、“图层深度”面板执行“窗口”→“图层深度”命令，可打开“图层深度”面板。使用“图层深度”面板，可以动态地更改图层的深度，配合摄像头为对象创建视觉深度和角度的差异效果。1. 在Animate中创建多个图层，并在每个图层中放置一个带有位移动画的对象，如图所示。370创建多个带有位移动画对象的图层2. 在“图层深度”面板中更改每个图层名称右侧的深度值，为每个对象添加不同的图层深度，如图所示。在更改深度值时，数值越小对象越近，反之，数值越大对象越远，而对象的实际大小保持不变。371调整各图层的深度值3. 单击“摄像头”

后，调整摄像头的位置，可以看到摄像头近处的对象和远处的对象在以不同的速度移动，如图所示，原本每个图层的颜色色块运动状态是相同的，而调整了图层深度后，在相同的时间内，近处的玫红色色块向右移动的距离要比远处紫色色块向右移动的距离大得多，所以近处对象的移动速度比远离摄像头对象的移动速度更快。372373不同图层深度的动画运动添加图层深度前后的对比效果如图所示。374无图层深度的内容有图层深度的内容

制作中华美食网任务23751. 能利用平面设计素材合理布局网页页面。2. 能根据网页页面的布局，选择适合的网页页面跳转代码。376本任务是一个利用平面设计素材制作多页面网页的实例，通过添加页面跳转代码，实现网页页面间的相互切换效果，如图所示。通过本任务的学习，可以掌握平面设计素材在网页制作中的应用方法与技巧以及色彩搭配在网页中的应用和HTML5 Canvas文档代码的应用方法。377378中华美食网效果一、预览动画预设Animate的每个动画预设都包括预览，用户可在“动画预设”面板中查看动画预设预览。通过预览，用户可以了解在将动画应用于.fla文件中的对象时所得到的结果。对于用户创建或导入的自定义预设，可以添加对应的预览。执行“窗口”→“动画预设”命令，弹出“动画预设”面板，如图所示。单击“默认预设”文件夹前面的箭头，展开默认预设，选择其中一个默认的预设选项，即可预览该默认动画预设，如图所示。在“动画预设”面板外单击即可停止预览。379380“动画预设”面板预览动画预设二、应用动画预设在舞台上选中符合创建补间动画条件的对象后，在“动画预设”面板中选择需要的动画预设，单击“应用”按钮来应用该动画预设。每个对象只能应用一个动画预设。如果将第2个动画预设应用于同一个对象，则第2个动画预设将替换第1个动画预设。381三、将补间动画另存为自定义动画预设选中创建好的补间动画，或对“动画预设”面板中的补间动画进行更改，可将它另存为新的动画预设，如图所示。新预设将显示在“动画预设”面板中的“自定义预设”文件夹中。382“将预设另存为”面板四、导出和导入动画预设1.

导出动画预设在“动画预设”面板中选择需要导出的预设，单击“动画预设”面板右上角的按钮

，在弹出的菜单中选择“导出...”选项，如图所示，将选中的动画预设导出为XML文件。383“导入...”和“导出...”选项3842.

导入动画预设单击“动画预设”面板右上角的按钮

，在弹出的菜单中选择“导入...”选项，如图所示，在弹出的“导入动画预设”对话框中选择要导入的文件，单击“打开”按钮，选中的预设即被导入“动画预设”面板中。五、删除动画预设在“动画预设”面板中选择需要删除的预设，单击面板下方的“删除项目”按钮，系统会弹出“删除预设”对话框，单击“删除”按钮，即可将选中的预设删除。在删除预设时，Animate将从磁盘中删除其XML文件。385制作唐诗教学课件任务3

3861. 能根据课件的学习内容，合理设计课件界面。2. 能根据课件设计的需要，实现多场景、多按钮之间的交互式跳转。387本任务是一个教学课件动画制作实例，通过添加交互式动作脚本，实现唐诗学习的动态教学效果，如图所示。通过本任务的学习，可以掌握教学课件界面设计的原理和方法以及制作交互式教学课件的方法和技巧。388389唐诗教学课件动态教学效果一、“组件”面板1.

组件的类型在HTML5 Canvas中