第6章交互动画ppt课件.ppt

《第6章交互动画ppt课件.ppt》由会员分享，可在线阅读，更多相关《第6章交互动画ppt课件.ppt（49页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第6章 交互动画第6章 交互动画 本章重点 Animate CC 2015动画存在着交互性，可以通过对按钮的更改来控制动画的播放形式。学习本章，读者应掌握Animate CC 2015中关于交互动画方面的相关知识。本章内容包括： 初识动作脚本 动画的跳转控制 按钮交互的实现 创建链接 声音的控制 ActionScript 3.0的应用6.1 初识动作脚本初识动作脚本 动作脚本是Animate CC 2015具有强大交互功能的灵魂所在。使用动作脚本可以与Animate CC 2015后台数据库进行交流，结合动作脚本，可以制作出交互性强、动画效果更加绚丽的动画。动作脚本是一种编程语言，Animat

2、e CC 2015使用的是ActionScript 3.0版本的动作脚本。Animate CC 2015动画之所以具有交互性，是通过对按钮、关键帧和影片剪辑设置动作脚本来实现的。6.1.1 “动作动作”面板面板 执行菜单中的“窗口|动作”（快捷键F9）命令，可以调出“动作”面板，如图6-1所示。图6-1 “动作”面板“脚本”窗格脚本导航器工具栏1. 脚本导航器脚本导航器 脚本导航器用于显示包含脚本的Animate CC元素（影片剪辑、帧和按钮等）的分层列表。使用脚本导航器可在Animate CC 2015文档中的各个脚本之间快速移动。如果单击脚本导航器中的某一项目，与该项目相关联的脚本将显示在

3、脚本窗口中。2.工具栏工具栏 “动作”面板工具栏位于“脚本”窗格上方，包含6个工具按钮，这些按钮的具体作用如下：（固定脚本）：单击该按钮后会显示为 状态，此时可以固定当前帧当前图层的脚本。（插入实例路径和名称）：单击该按钮，打开“插入目标路径”对话框，如图6-2所示，从中可以选择插入按钮或影片剪辑元件的目录路径。图6-2 “插入目标路径”对话框 （查找）：单击该按钮，将展开高级选项，如图6-3所示，在文本框中输入内容，可以进行查找与替换。图6-4 “代码片段”面板 图6-3 “插入目标路径”对话框 （设置代码格式）：单击该按钮，可以为写好的脚本提供默认的代码格式。（代码片段）：单击该按钮，可以

4、调出“代码片段”面板，如图6-4所示，从中可以选择预设的ActionScript语言。 （帮助）：单击该按钮，可以打开链接网页，在该网页中提供了ActionScript语言的帮助信息。3.“脚本脚本”窗格窗格 “脚本”窗格用来输入动作语句，除了可以在动作工具箱中通过双击语句的方式在脚本窗口中添加动作脚本外，还可以在这里直接用键盘进行输入。6.1.2 理解动作脚本编程术语理解动作脚本编程术语 Animate CC 2015使用的ActionScript 3.0中有许多术语，都有其他脚本编程语言相类似。以下是经常出现在ActionScript 3.0ActionScript 3.0中的术语。1.

5、变量变量 变量是包含信息的容器。容器本身不会改变，但其内容可以更改。第一次定义变量时，最好为变量定义一个已知值，即初始化变量，通常在SWF文件的第1帧中完成。每一个影片剪辑对象都有自己的变量，而且不同的影片剪辑对象中的变量相互独立且互不影响。变量中可以存储的常见信息类型包括URL、用户名、数字运算的结果、时间发生的次数等。为变量命名必须遵循以下3个规则： 变量名在其作用范围内必须是唯一的。 变量名不能是关键字或布尔值（true或false）。 变量名必须以字母或下划线开始，由字母、数字、下划线组成，其间不能包括空格（变量名没有大小写的区别）。 变量的范围是指变量在其中已知并且可以引用的区域，它

6、包含3种类型。（1）本地变量本地变量在声明它们的函数体（由大括号括起）内可用。本地变量的使用范围只限于它的代码块，在该代码块结束时到期，其余的本地变量会在脚本结束时到期。如果要声明本地变量，可以在函数体内部使用var语句。（2）时间轴变量时间轴变量可用于时间轴上的任意脚本。要声明时间轴变量，应在时间轴的所有帧上都初始化这些变量。应先初始化变量，再尝试在脚本中访问它。（3）全局变量全局变量对于文档中的每个时间轴和范围均可见。如果要创建全局变量，可以在变量名称前使用_global标识符，不使用var语法。2.常量常量 常量在程序中是始终保持不变的量，它分为数值型、字符串型和逻辑型三种类型。 数值型

7、常量：由数值表示，例如“setProperty（zhang,_alpha,100）;”中，100就是数值型常量。 字符串型常量：由若干字符构成的数值，它必须在常量两端引用标号，但并不是所有包含引用标号的内容都是字符串，因为Animate CC 2015会根据上下文的内容来判断一个值是字符串还是数值。 逻辑型常量：又称为布尔型，表示条件是否成立。如果条件成立，在脚本语言中用1或true表示；如果条件不成立，则用0或false表示。3.关键字关键字 Animate CC 2015的动作脚本保留了一些单词用于该语言中的特定用途，因此不能将它们用做变量、函数或标签的名称。如果在编写程序的过程中使用了关

8、键字，动作编辑框中的关键字会以蓝色显示。为了避免冲突，在命名时可以展开动作工具箱中的Index域，检查是否使用了已定义的关键字。4.参数参数 参数常出现在代码的圆括号之内，可以为某个命令提供一些特定的详细信息，比如代码“gotoAndPlay(1);”中，参数可以指导脚本转入第1帧。5. 函数函数 函数是用来对常量、变量等进行某种运算的方法，如产生随机数、进行数值运算、获取对象属性等。函数是一个动作脚本代码块，它可以在影片中的任何位置上重新使用。如果将值作为参数传递给函数，则函数将对这些值进行操作。此外函数也可以返回值。 调用函数可以用一行代码来代替一个可执行的代码块。函数可以执行多个动作，并

9、为它们传递可选项。函数必须要有唯一的名称，以便在代码行中可以知道访问的是哪一个函数。Animate CC 2015具有内置的函数，可以访问特定的信息或执行特定的任务，例如获得Flash播放器的版本号等。每个函数都具备自己的特性，而且某些函数需要传递特定的值。如果传递的参数多于函数的需要，则多余的值将被忽略。如果传递的参数少于函数的需要，则空的参数会被指定为undefined数据类型，这在导出脚本时，可能会出现错误。如果要调用函数，该函数必须存在于播放头到达的帧中。 动作脚本提供了自定义函数的方法，用户可以自行定义参数，并返回结果。在主时间轴上或影片剪辑时间轴的关键帧中添加函数，即是在定义函数。

10、所有的函数都有目标路径。所有的函数都需要在名称后跟一对括号（）， 但括号中是否有参数是可选的。一旦定义了函数，就可以从任何一个时间轴中调用它，包括加载了SWF文件的时间轴。6.对象对象 在ActionScript 3.0中，可以使用对象来完成任务，比如Sound对象可用于控制声音。Date对象可用于管理与时间相关的数据。 在编写环境中创建的对象（与那些在ActionScript中创建的对象不同），只要它们拥有唯一性的实例名称也可以在ActionScript中被引用。7.方法方法 方法是产生行为的命令。方法可以在ActionScript中产生真正的行为，而每一个对象都有它自己的方法集。因此，了解

11、ActionScript需要学习每一类对象对应的方法，比如与MovieClip对象关联的两种方法就是stop( )和gotoAndPlay( )。6.1.3 使用动作脚本编程语法使用动作脚本编程语法 动作脚本拥有一套自己的语法规则和标点符号，下面就来具体介绍。1.点运算符点运算符 在动作脚本中，点（.）用于表示与对象或影片剪辑相关联的属性或方法，也可以用于标识影片剪辑或变量的目标路径。 点（.）运算符表达式以影片或对象的名称开始，中间为点（.）运算符，最后是要指定的元素。例如，_x影片剪辑属性指示影片剪辑在舞台上的x轴位置，而表达式tankMC._x则引用了影片剪辑实例tankMC的_x属性。

12、2.界定符界定符 界定符包括大括号、分号和圆括号。 大括号：动作脚本中的语句会被大括号包括起来组成语句块，例如下面的语句。on (release) myDate=new Date( ) currentMonth=myDate.getMonth( ); 分号：动作脚本中的语句通常由一个分号结尾，例如下面的语句。var column=passedDate.getDay( ); 圆括号：在定义函数时，任何参数定义都必须放在一对圆括号内，例如下面的语句。function myFunction (name,age,reader)在调用函数时，需要被传递的参数也必须放在一对圆括号内，例如下面的语句。myF

13、unction (Steve,10,true)3.区分大小写区分大小写 在区分大小写的编程语言中，大小写不同的变量名（book和Book）被视为互不相同。ActionScript3.0中标识符会区分大小写。例如下面两行语句是不同的。 cat.hilite=true;CAT.hilite=true; 对于关键字、类名、变量、方法名等，要严格区分大小写。如果关键字大小写出现错误，在编写程序时就会有错误信息提示。如果采用了彩色语法模式，那么正确的关键字将以深蓝色显示。4.注释注释 在“动作”面板中，使用注释语句可以在一个帧或者按钮的脚本中添加说明，从而增加程序的易读性。注释语句以双斜线“/”开始，斜

14、线显示为灰色，注释内容可以不考虑长度和语法，注释语句不会影响Animate CC2015动画输出时的文件量。例如下面的语句。on(release) /创建新的Data对象 myDate=new Date( ); currentMonth=myDate.getMonth( ); /将月份数转换为月份名称 monthName=calcMonth(currentMonth); year=myDate.getFullYear( ); currentDate=6.2 动画的跳转控制 关于动画的跳转控制，我们将通过下面的实例进行讲解，具体操作步骤如下： 1） 打开配套光盘中的“素材及结果6.2 动画的跳转

15、控制动画跳转控制-素材.fla”文件，如图6-5所示。图6-5 打开“动画跳转控制-素材.fla ”文件 2）执行菜单中“控制|测试”（组合键Ctrl+Enter）命令，可以看到两幅图片连续切换播放的效果。 3）制作动画播放到结尾第20帧时停止播放的效果。方法：将时间定位在第20帧，然后执行菜单中的“窗口|动作”面板，调出“动作”面板，如图6-6所示。接着在“动作”面板中单击右上角的 （代码片段）按钮，调出“代码片段”面板，如图6-7所示。图6-6 调出“动作”面板 图6-7 调出“代码片段”面板 4）在“代码片段”面板的“ActionScript/时间轴导航/在此帧处停止”命令处双击鼠标，如

16、图6-8所示，此时在“动作”面板中会自动输入动作脚本，如图6-9所示。同时会自动创建一个名称为“Actions”的图层，并且第20帧处多出了一个字母“a”，在如图6-10所示。图6-8 在“在此帧处停止”命令处双击鼠标 图6-9 自动输入动作脚本图6-10 自动创建一个名称为“Actions”的图层 5）执行菜单中的“控制|测试”命令，即可看到当动画播放到第20帧时，动画停止的效果。 6）制作动画播放到结尾再跳转到第1帧后停止播放的效果。方法：在“动作”面板中删除注释和脚本，然后输入脚本“gotoAndStop（1）”。接着执行菜单中的“控制|测试”命令，即可看到当动画播放到第20帧时，自动跳

17、转到第1帧循环播放的效果。6.3 按钮交互的实现 除了在关键帧中可以设置动作脚本外，在按钮中也可以设置动作脚本，从而实现按钮交互动画。下面通过一个实例进行讲解，具体操作步骤如下： 1）打开配套光盘中的“素材及结果6.3 按钮交互的实现按钮交互的实现-素材.fla”文件。 2）创建写有文字“海边别墅”的“元件1”按钮元件和写有文字“海景”的“元件2”按钮元件，如图6-11所示。图6-11 创建两个按钮元件 3）单击时间轴下方的 （新建图层）按钮，新建“图层2”。然后将库面板中的“元件2”按钮拖入舞台右下方，接着在“属性”面板中将其实例名称命名为“hj”，如图6-12所示。图6-12 将“元件2”

18、按钮拖入舞台并将其实例名称命名为“hj” 4）在“图层2”的第10帧按快捷键F7，插入一个空白关键帧，再将库面板中的“元件1”按钮拖入舞台右下方，接着在“属性”面板中将其实例名称命名为“hbbs”，如图6-13所示。 5）执行菜单中的“控制|测试影片”命令，可以看到画面自动切换的效果。这是不正确的，我们需要的是画面静止在第1帧。然后通过单击相应按钮跳转到相应画面的效果。下面首先通过制作画面静止在第1帧的效果。 6）将时间定位在第1帧，然后执行菜单中的“窗口|动作”面板，调出“动作”面板，如图6-14所示。接着在“动作”面板中单击右上角的 （代码片段）按钮，调出“代码片段”面板，如图6-15所示

19、。图6-14 调出“动作”面板 图6-15 调出“代码片段”面板 7）在“代码片段”面板的“ActionScript/时间轴导航/在此帧处停止”命令处双击鼠标，如图6-16所示，此时在“动作”面板中会自动输入动作脚本，如图6-17所示。同时会自动创建一个名称为“Actions”的图层，并且第20帧处多出了一个字母“a”，在如图6-18所示。 图6-14 调出“动作”面板 图6-15 调出“代码片段”面板 图6-18 自动创建一个名称为“Actions”的图层 8）设置按下“元件2”（即“海景”）按钮跳转到第10帧画面的效果。方法：在第1帧选择舞台中的“元件2”（即“海景”）按钮实例，然后在“代

20、码片段”面板的“ActionScript/时间轴导航/单击以转到帧并停止”命令处双击鼠标，如图6-19所示，此时在“动作”面板中会自动输入动作脚本。接着在动作脚本中将最后一行脚本改为“gotoAndStop（10）”，如图6-20所示。图6-19 在“单击以转到帧并停止”命令处双击鼠标 图6-20 将最后一行脚本改为“gotoAndStop（10）” 9）设置按下“元件1”（即“海边别墅”）按钮跳转到第1帧画面的效果。方法：在第10帧选择舞台中的“元件1”（即“海边别墅”）按钮实例，然后在“代码片段”面板的“ActionScript/时间轴导航/单击以转到帧并停止”命令处双击鼠标，此时在“动作

21、”面板中会自动输入动作脚本。接着在动作脚本中将最后一行脚本改为“gotoAndStop（1）”，如图6-21所示。此时时间轴分布如图6-22所示。图6-21 将最后一行脚本改为“gotoAndStop（1）” 图6-22 时间轴分布 10）执行菜单中的“控制|测试”命令，即可看到按下“海景”按钮后跳转到第10帧的画面，按下“海边别墅”按钮后跳转到第1帧画面的效果。6.4 创建链接 在大多数网页中，我们常常看到“使用帮助”、“与我联系”等类的文字，单击这些文字可链接到指定的网页，如图6-23所示。本节将具体讲解网站中常见的多种链接的方法。图6-23 链接页面效果6.4.1 创建文本链接创建文本链

22、接 我们将通过下面的实例来具体说明创建文本链接，具体操作步骤如下： 1）打开配套光盘中的“素材及结果6.4 创建链接创建文本链接-素材.fla”文件。 2）在时间轴中选择Text图层，然后单击时间轴下方的 （新建图层）按钮，新建“文本链接”层，如图6-24所示。然后选择工具箱中的 （文本工具），在舞台中单击鼠标，并在“属性”面板中设置文本类型为“静态文本”、字体为“幼圆”、字体大小为12磅，颜色为#FF0000、文字对齐方式为 （左对齐）。接着在舞台中输入文字“教学课堂”，如图6-25所示。图6-24 新建“文本链接”层图6-25 输入文字“教学课堂” 4）同理，在舞台中输入文字“使用帮助”和

23、“联系我们”。5）对齐三组文字。方法：利用（选择工具），配合Shift键同时选中三组文字，然后按快捷键Ctrl+K，打开对齐面板，单击（左对齐）和（垂直居中分布）按钮（见图6-27），结果如图6-28所示。图6-27 设置对齐参数 图6-28 对齐后的文字效果 4）同理，在舞台中输入文字“使用帮助”和“联系我们”。5）对齐三组文字。方法：利用（选择工具），配合Shift键同时选中三组文字，然后按快捷键Ctrl+K，打开对齐面板，单击（左对齐）和（垂直居中分布）按钮（见图6-27），结果如图6-28所示。图6-27 设置对齐参数 图6-28 对齐后的文字效果 6）创建文字“教学课堂”的文本链接。

24、方法：在舞台中选中文字“教学课堂”，然后在“属性”面板的“链接”文本框中输入链接地址，并在“目标”后的下拉列表框中选择“_blank”，如图6-29所示。提示：“目标”下拉列表框中有4个选项。“_blank”，表示在新的浏览器中加载链接的文档；“_parent”，表示在父业或包含该链接的窗口中加载链接的文档；“_self ”，表示将链接的文档加载到自身的窗口中；“_top”，表示将在整个浏览器窗口中加载链接的文档。图6-29 创建文字“教学课堂”的文本链接 7）同理，创建文字 “使用帮助” 的文本链接， 并在 “目标” 后的下拉列表框中选择 “_blank”，如图6-30所示。图6-30 创建

25、文字“使用帮助”的文本链接 8）同理，创建文字 “联系我们” 的文本链接， 并在 “目标” 后的下拉列表框中选择 “_blank”，如图6-31所示。图6-31 创建文字“联系我们”的邮件链接9）执行菜单中的“控制|测试”(快捷键Ctrl+Enter)命令，打开播放器，即可测试单击“教学课堂”和“使用帮助”文字后跳转到所链接网站的效果。6.4.2 创建按钮链接创建按钮链接 在网站中，导航的对象不一定都是文字，有时候会是图形。在这种情况下就需要将图形转换为按钮，利用Animate CC2015提供的动作脚本完成网页或邮件的链接。 下面通过一个实例来具体讲解将文字转为按钮，并创建按钮链接的方法，具

26、体操作步骤如下： 1）删除前面创建的文字“教学课堂”、“使用帮助”和“联系我们”三组文字的文本链接。 2）选择舞台中的文字“教学课堂”，然后执行菜单中的“修改|转换为元件”（快捷键F8）命令，在弹出的“转换为元件”对话框中进行设置（见图6-32），单击“确定”按钮。图6-32 设置“转换为元件”对话框 3）双击舞台中的“教学课堂”按钮元件，进入按钮编辑模式如图6-33所示。然后选中“点击”帧，按快捷键F6，插入关键帧，并利用 （矩形工具）绘制出按钮的相应区，如图6-34所示。 图6-33 进入按钮编辑模式 图6-34 在“点击”帧绘制矩形作为相应区 4）创建“教学课堂”按钮的链接。方法：单击

27、按钮，回到场景1。然后选择第64帧舞台中的“教学课堂”按钮实例，在“属性”面板中将其实例名称设置为“jxpt”，如图6-35所示。再执行菜单中的“窗口|动作”面板，调出“动作”面板。接着在“动作”面板中单击右上角的 （代码片段）按钮，调出“代码片段”面板所示。最后在“代码片段”面板的“ActionScript/动作/单击以转到Web页”命令处双击鼠标，如图6-36所示，此时在“动作”面板中会自动输入动作脚本，如图6-37所示。图6-35 在“属性”面板中将“教学课堂”按钮实例名称设置为“jxpt” 图6-36 在“单击以转到Web页”命令处双击鼠标 图6-37 在“动作”面板中会自动输入动作脚

28、本 5）将动作脚本最后一行脚本改为“navigateToURL(new URLRequest(http:/), _blank);”，。 6）同理，创建“使用帮助”按钮元件，并将其实例名称命名为“sybz”。然后赋予该按钮“代码片段”面板中的“ActionScript/动作/单击以转到Web页”命令，最后在“动作”面板中将最后一行脚本改为“navigateToURL(new URLRequest(http:/), _blank);”。 7）同理，创建“联系我们”按钮元件，并将其实例名称命名为“sybz”。然后赋予该按钮“代码片段”面板中的“ActionScript/动作/单击以转到Web页”命令

29、，最后在“动作”面板中将最后一行脚本改为“navigateToURL(new URLRequest(http:/), _blank);”。 8）执行菜单中的“文件|发布设置”命令，然后在弹出的“发布设置”对话框中勾选“HTML包装器”复选框，再将“输出文件”右侧输入文件名称“创建按钮链接-完成.html”，如图6-38所示。接着单击 按钮，在弹出的“选择发布目标”对话框中设置文件发布的位置，如图6-39所示，单击“保存”按钮，回到“发布设置”对话框，再单击“发布”按钮，进行发布。最后打开发布后的“按钮链接.html”文件，即可测试单击“教学课堂”、“使用帮助”和“联系我们”按钮后跳转到相应链接

30、网站的效果。图6-38 勾选“HTML包装器”复选框 图6-39 在“选择发布目标”对话框中设置文件发布的位置6.5 类与绑定 类绑定是ActionScript 3.0代码与AnimateCC2015结合的重要途径。在ActionScript 3.0中，每一个显示对象都是一个具体类的实例，使用AnimateCC2015制作的动画也不例外。采用类和库中的影片剪辑绑定，可以使漂亮的动画具备程序模块式的功能。一旦影片和类绑定后，放进舞台的这些影片就被视为该类的实例。当一个影片和类绑定后，影片中的子显示对象和 帧播放都可以被类中定义的代码控制。 类文件有什么含义呢？例如，用户想让一个影片剪辑对象有很多

31、功能，比如支持拖动、支持双击等，可以先在一个类文件中写清楚这些实现的方法，然后用这个类在舞台上创建许多实例，此时这些实例全部具有类文件中已经写好的功能。只需写一次，就能使用很多次，最重要的是它还可以通过继承来重复使用很多代码，为将来制作动画节省很多时间。一个类包括类名和类体两部分。1.定义类名定义类名 在ActionScript 3.0中，可以使用class关键字定义类，其后跟类名，类体要放在大括号“”内，且放在类名后面。例如：public className/类体2.类体类体 类体放在大括号“”内，用于定义类的变量、常量和方法。例如声明Adobe Flash Play API中的Accessibility类。public final classAccessibilitypublic static function getactive();Boolean;public static functionupdateproperties();void; 关于类的具体应用请参见本书中的“6.6.5 在小窗口中浏览大图像效果”和“6.6.6 礼花绽放效果”。