Animate动画设计教程（AnimateCC2018） 课件 第8章 制作脚本与组件动画.pptx

新形态立体化精品系列教材项目八 制作脚本与组件动画Animate CC 动画设计教程（双色微课版） 任务一 制作动态风光相册一、任务目标二、相关知识（一）JavaScript和CreateJS （二）“动作”面板的使用 （三）变量 （四）数据类型（五）表达式和运算符 （六）函数（七）语句 （八）时间轴导航函数 （九）事件处理三、任务实施（一）添加图片和按钮（二）输入脚本程序代码任务二 制作电子时钟动画任务三 制作雪花飞舞动画任务四 制作问卷调查表课后练习内容导航一、任务目标制作动态风光相册动画，需要通过按钮控制图像的显示。使用JavaScript和CreateJS库制作动态风光相册。在其中需要添加“首页”“上一页”“下一页”和“尾页”4个按钮，单击这些按钮，可以显示相应的图片，并在显示第1张图片时隐藏“首页”和“上一页”按钮；显示最后一张图片时隐藏“下一页”和“尾页”按钮。通过本任务的学习，可以掌握使用JavaScript和CreateJS库制作脚本动画的方法。二、相关知识制作本任务，涉及JavaScript和CreateJS、“动作”面板的使用、变量、数据类型、表达式和运算符等相关知识。JavaScript和CreateJS 在Animate中创建HTML5 Canvas文件时，可以使用JavaScript和CreateJS来为动画添加交互功能。“动作”面板的使用 选择【窗口】/【动作】菜单命令或按【F9】键，打开“动作”面板，在其中可以编辑JavaScript脚本程序。变量 变量就是内存中的一块存储空间，这个空间中存放的数据就是变量的值。为这块区域贴上标识符，就是变量名。二、相关知识数据类型 JavaScript变量的基本数据类型除了数字型、布尔型和字符串型外，还有组合数据类型的对象和数组、特殊数据类型Null和Undefined。表达式和运算符在定义完变量后，就可以对其进行赋值、改变、计算等一系列操作，这一过程通过表达式来完成，而表达式是由变量、常量和运算符所构成的一个可以进行运算的式子。函数 函数是一个拥有名称的一系列JavaScript语句的有效组合。只要这个函数被调用，就意味着这一系列JavaScript语句被按顺序解释执行。一个函数可以有自己的参数，并且可以在函数内使用参数。二、相关知识语句 在JavaScript中主要有两种基本语句，一种是条件语句，如if、switch；一种是循环语句，如for、while。另外还有其他的一些程序控制语句，下面介绍基本语句的使用。时间轴导航函数时间轴导航函数是CreateJS中用于控制时间轴的播放、暂停、跳转等功能的语句。事件处理 事件处理主要包括添加事件、移除事件、是否包含指定事件等。三、任务实施（一）添加图片和按钮导入图片文件，并制作4个按钮，具体操作如下。导入图片序列使8张图片都处于舞台的正中间三、任务实施制作按钮元件　设置实例名称三、任务实施（二）输入脚本程序代码输入脚本程序代码，并进行测试，具体操作如下。测试第1帧跳转到下一页三、任务实施跳转到尾页　跳转到上一页任务一 制作动态风光相册任务二 制作电子时钟动画一、任务目标二、相关知识（一）处理时间和日期 （二）显示动态文本三、任务实施（一）绘制动态文本框 （二）输入脚本程序代码任务三 制作雪花飞舞动画任务四 制作问卷调查表课后练习内容导航一、任务目标脚本可以实现的功能非常多，JavaScript的时间函数以及在动画中显示动态文本的方法制作一个电子时钟动画。制作电子时钟动画，要求实时显示系统的日期和时间。通过本任务的学习，可以掌握JavaScript的时间函数以及在动画中显示动态文本的方法。二、相关知识制作本任务的过程中用到了处理时间和日期、显示动态文本等知识。处理时间和日期 在JavaScript中处理日期和时间需要使用Date对象。显示动态文本 要在舞台中显示动态文本，首先需要在舞台中绘制一个文本框，在“属性”面板中将文本类型设置为“动态文本”，并设置名称，然后在帧脚本中设置动态文本的text属性，即可显示所需的文本。三、任务实施（一）绘制动态文本框导入背景图像、制作视频边框并输入文本。绘制圆角矩形创建动态文本三、任务实施创建其他动态文本创建其他动态文本三、任务实施编辑影片剪辑元件三、任务实施（二）输入脚本程序代码输入脚本程序代码，并进行测试。添加帧任务一 制作动态风光相册任务二 制作电子时钟动画任务三 制作雪花飞舞动画一、任务目标二、相关知识（一）随机函数 （二）设置影片剪辑属性（三）使用脚本从库中创建对象三、任务实施（一）制作雪花飘落影片剪辑元件 （二）输入脚本程序代码任务四 制作问卷调查表课后练习内容导航一、任务目标制作一个雪花飞舞的动画，需要在舞台中添加大量的