第 十六课 制作交互式动画 课前导读 课堂讲解 上机实战 课后练习.

Presentation on theme: "第 十六课 制作交互式动画 课前导读 课堂讲解 上机实战 课后练习."— Presentation transcript:

1 第 十六课 制作交互式动画 课前导读 课堂讲解 上机实战 课后练习

2 课前导读 重点知识 提高知识

3 重点知识 　　　用按钮创建交互式动画、创建菜单。读者应仔细阅读相关部分，并结合上机实战练习和掌握。

4 提高知识 自动载入其他动画。初学者可暂时不学，待有一定的基础后再学习。

5 课堂讲解 控制动画对象的数量 制作交互式菜单 自动载入其他动画

6 Flash动画的一个显著特性就是具有强大的交互性，它使得用户不仅可以欣赏，也可以参与到Flash动画中，通过单击按钮、选择选项等控制动画的播放。本课将介绍制作交互式动画的方法。

7 控制动画对象的数量 下面通过一个小实例来体会交互式动画的有趣之处。首先打开在第10课课堂讲解中制作的“采花粉的蝴蝶”动画，如图16-1所示。下面实现在单击花丛中的蝴蝶时增加一个蝴蝶的效果，其具体操作如下。 图1６-１

8 （1）选中动画中的影片剪辑元件“蝴蝶”，在“属性”面板中将实例名称设为“hd”，如“图16-2所示。

9 （2）为了实现单击蝴蝶时出现两只蝴蝶的结果，选中影片剪辑元件“蝴蝶”，在“动作”面板中输入如下语句：
onClipEvent (load) { //载入当前动画片段，即影片剪辑“hd” fscommand("showmenu","false"); //不显示控制菜单 } onClipEvent (mouseUp) { //单击鼠标左键 duplicateMovieClip(hd,hd1,0); //复制影片剪辑hd，生成动画片段hd1，并将其置于与当前蝴蝶的同一层 setProperty(hd1,_x,x+130); //设置动画片段hd1的x坐标增加130像素

10 （3）按【Ctrl+Enter】键播放动画，单击一下鼠标，可以看到在原蝴蝶的左边出现了另外一只相同的蝴蝶，同样在扇动翅膀，如图16-3所示。
在为影片剪辑添加语句时，之所以将动画片段hd1的x坐标增加130像素，是为了避免两只蝴蝶的位置相同，发生重叠。 图16-3

11 制作交互式菜单 制作主菜单 制作菜单命令 制作菜单动画片段

12 交互式菜单有多种，如下拉菜单、弹出式菜单、滑动式菜单等，下面制作一个典型的弹出式菜单——“文件”菜单，其他菜单的制作方法与此类似，只是按钮元件放置的位置不同而已。

13 制作主菜单 其具体操作如下： （1）新建一个文件，设置场景大小为200×200像素，背景颜色为深绿色。
（2）创建一个名为“主菜单”的按钮元件，进入按钮元件编辑区。选中其中的“弹起”帧，单击矩形工具 ，在场景中绘制一个矩形，将填充色设为白-灰-白的线性渐变，并为其添加黑色的底纹，增加立体感。

14 图16-4 （3）用文本工具 在矩形框上输入文字“文件”，并将其设置为“宋体、37、加粗”，如图16-4所示。
（3）用文本工具 在矩形框上输入文字“文件”，并将其设置为“宋体、37、加粗”，如图16-4所示。 （4）选择“指针经过”帧，按【F6】键插入一个关键帧，选中矩形的左边框和上边框，用墨水瓶工具 将其设为白色，再将下边框和右边框的颜色设为土黄色，以使指针移到按钮上时有凸起效果。 图16-4

15 （5）在“按下”帧插入一个关键帧，调整左边框和上边框的颜色为土黄色，下边框和右边框的颜色为白色，并将文字“文件”稍微向右下方移动，使单击时有凹下效果，如图16-5所示。

16 制作菜单命令 其具体操作如下： （1）按【F11】键打开库面板，选中“主菜单”元件，单击鼠标右键，在弹出的快捷菜单中选择“重制”命令，打开“复制元件”对话框，在其中的“名称”文本框中输入“新建”，单击 按钮，得到“新建”元件，如图16-6所示。 （2）用同样的方法得到“打开”、“关闭”、“保存”、“另存为”元件，“库”面板如图16-7所示。

17 图16-6 图16-7

18 （3）双击“库”面板中“新建”前面的 图标，进入“新建”元件编辑区，将每个帧的文字改为“新建”。
（4）用同样的方法改变“打开”、“关闭”、“保存”、“另存为”元件中的文字。

19 制作菜单动画片段 其具体操作如下： （1）创建一个名为“弹出菜单”的影片剪辑元件。
（2）选中元件编辑区中的第1帧，打开“库”面板，拖动“主菜单”元件至编辑区中的适当位置。

20 （3） 在第2帧按【F6】键插入关键帧，分别把元件“打开”、“关闭”、“保存”、“另存为”拖放到编辑区中的适当位置，然后在“对齐”面板中单击 按钮，对齐所有按钮，效果如图16-8所示。

21 （4）为第1帧添加stop语句。选中第10帧，按【F6】键插入关键帧，在“动作”面板中添加语句gotoAndStop(1);。
（5）选中第1帧中的“文件”按钮元件，在“动作”面板中为其添加如下语句： on (release) { gotoAndStop(2); } //单击该按钮跳转并停止在第2帧

22 （6）在第2帧中选择“新建”按钮，在“动作”面板中添加如下语句：
on (rollOut) { gotoAndPlay(3); } //鼠标离开按钮时延迟一段时间后，回到第1帧，只显示主菜单按钮 on (rollOver) { gotoAndStop(2); } //光标停在各按钮上时，保持第2帧的状态 （7）选中为“新建”按钮元件添加的语句，按【Ctrl+C】键复制语句。 （8）选中“打开”按钮元件，在“动作”面板中按【Ctrl+V】键粘贴语句。用同样的方法将该语句粘贴到其他按钮元件 。

23 （9）单击 回到场景中，打开“库”面板，将“弹出菜单”元件拖放到场景中，按【Ctrl+Enter】键测试效果，如图16-9所示。

24 自动载入其他动画 通过自动载入其他动画可以实现多个动画的自动连续播放，载入动画需要用到loadMovieNum语句。其语法格式如下：
loadMovieNum("url",level[,variables]) 其中： url是指要加载SWF文件的绝对或相对URL。相对路径必须相对于级别0处的SWF文件。需要注意的是，必须将所有的SWF文件存储在同一个文件夹中，并且其文件名不能包含文件夹或磁盘驱动器说明。

25 level是一个整数，用于指定SWF文件将加载到Flash Player中的哪个级别。
variables是一个可选参数，用于指定发送变量所使用的HTTP方法。如果没有要发送的变量，则省略此参数。 下面通过一个小实例来实现这种效果。在动画的开始出现一个静止画面，显示说明性文字，单击play按钮播放动画，当播放到第20帧时自动载入下一个动画，其中要载入的动画和素材，读者可以自己另外制作，也可以到

26 （1）首先将要载入的动画（本例使用的是第11课的百叶窗效果）复制到某一位置，如桌面上。在Flash中新建一个文件，将背景大小设为400×300像素，然后将其保存在与要载入的动画相同的位置，即桌面上。
（2）打开“公用库”中的“库-按钮”面板，将其中“Playback”类下的“gel right”拖放到舞台的下方。 （3）新建图层2，导入素材“小球.swf”到库中，如图16-10所示，这时库中自动出现一个名为“小球”的影片剪辑元件。

27 图16-10

28 （4）选中图层2的第1帧，在“库”面板中选择元件“小球”，将其拖放到舞台的上方，如图16-11所示。

29 （5）新建一个图层，在播放按钮的左边输入如图16-12所示的文字，文本格式可任意设置。

30 （5）新建一个图层，在播放按钮的左边输入如图16-12所示的文字，文本格式可任意设置。
（6）新建一个图层，选中第2帧，在播放按钮的右边输入“1”，然后依次在第4、5、6……20帧按【F6】键插入关键帧，然后将第2帧中的数字改为“10”，第4帧中的数字改为“9”，第6帧中的数字改为“8”，第8帧中的数字改为“7”……第20帧中的数字改为“1”。 （7）将所有图层的帧均沿用到第20帧，然后再新建一个图层，用于添加Actions语句。在第20帧插入关键帧，打开“动作”面板，添加载入动画的动作，如下： loadMovieNum(“百叶窗效果.swf”,0); //载入影片“百叶窗效果.swf”，并将其设为与当前动画在同一层级。

31 （8）回到动画的第1帧，添加stop语句，选中其中的播放按钮，为其添加如下语句：
on (release) { gotoAndPlay(2); } //单击该按钮跳转并播放第2帧 （9）按【Ctrl+Enter】键播放动画，单击播放按钮，画面开始出现倒计数，当数字变为1时开始播放动画“百叶窗效果”，几个画面如图16-13所示。

32 图16-13

33 上机实战 制作Windows背景 设置“运行”菜单的响应

34 在本课上机实战中将制作一个模拟Windows XP的工作界面，最终效果如图16-14所示。其制作过程为：首先制作Windows的主要工作界面，然后制作“开始”按钮和“开始”菜单。将“开始”按钮和“开始”菜单中的每一项制作成按钮元件，单击“开始”按钮，弹出“开始”菜单，在其中选择“运行”命令，则打开“运行”对话框，如图16-15所示。制作的关键是几个按钮元件的制作和为按钮添加响应语句。通过本上机实战的练习，读者可以对交互式动画有一个更深刻的认识。

35 图15-15 图15-14

36 制作Windows背景 其具体操作如下: （1）新建一个件，将舞台大小设为825×600像素（这个数据是根据Windows桌面图片的长宽比例来设置的），导入图片“背景.jpg”，用任意变形工具 将背景图片按比例缩放，使背景图片刚好能覆盖整个舞台，如图16-16所示。 图16-16

37 （2）创建一个名为“背景”的影片剪辑元件，进入其编辑区，选中第1帧，为其添加stop语句。然后在第6帧按【F7】键插入空白关键帧，在第10帧按【F5】键沿用帧。
（4）回到“背景”的元件编辑区，打开“库”面板，将按钮元件“开始”拖放到元件编辑区的中心位置。选中该元件，在“动作”面板中添加如下语句： on (release){ gotoAndStop(6); } //单击该按钮跳转并停止在第6帧

38 （5）选中第6帧，导入图片“菜单”和“开始”，并调整两张图片的位置，效果如图16-17所示。

39 在调整图片位置时，一定要注意让导入的图片“开始”与第1帧中的“开始”按钮元件处于相同位置。可以单击时间轴上的按钮，再单击按钮，在弹出菜单中选择“绘制全部”命令，以观察所有帧中的对象位置 。
（6）新建一个名为“运行”的按钮元件，进入其编辑区，选中“弹起”帧，导入图片“运行.jpg”，在“指针经过”按插入关键帧，在“点击”帧插入普通帧。

40 （7）为了使鼠标光标移到“运行”上时，“运行”选项变颜色，可以新建一个图层，在“指针经过”帧插入关键帧，在其中绘制一个深蓝色矩形，其大小应与“运行”按钮完全相同，矩形颜色的Alpha值设为24%，如图16-18所示。 （8）回到“背景”元件的编辑区，新建一个图层，并命名为“子菜单”，将其移到“开始”层的上方。 图16-18

41 （9）在图层“子菜单”的第6帧插入关键帧，在“库”面板中选中“运行”元件，将其拖动到元件编辑区中，注意其放置位置应与图片“菜单”中的“运行”选项位置完全相同，使得该按钮与原菜单看起来像一个整体，如图16-19所示。 图16-19

42 （10）可以用相同的方法将“开始”菜单中的所有选项都制作成按钮元件，由于篇幅所限，这里不再一一讲述，读者可以自行练习。
（11）在真正的Windows中，当出现“开始”菜单后，单击“开始”菜单外的任意位置可以使“开始”菜单隐藏起来，为了达到这种效果，可在“背景”元件中新建一个图层，并命名为“隐藏”，将其拖到最底层。 （12）在“隐藏”层的第6帧插入关键帧，用任意变形工具 绘制一个足够大的矩形，使其能够覆盖整个工作区域。

43 （13）将绘制的矩形转换为按钮元件，选中矩形按钮，在“属性”面板中将其Alpha值设为0%，这样不会影响桌面背景的显示。然后在“动作”面板中添加如下语句：
on (release) { gotoAndStop(1); } //单击该按钮跳转并停止在第1帧 这样当将鼠标移到“开始”菜单外单击时动画转到第1帧并停止，“开始”菜单消失。

44 设置“运行”菜单的响应 其具体操作如下: 图16-20
（1）进入“背景”元件的 编辑区，在“子菜单”层的第 11帧插入空白关键帧，导入图片“对话框.jpg”，单击时间轴上的 按钮，显示前一帧中的图像位置，然后将“对话框.jpg”移动到如图16-20所示的位置。 图16-20

45 （2）用文本工具 在“运行”对话框的“打开”下拉列表框位置拖拉出一个输入文本框，文本的属性设置如图16-21所示。
图15-21

46 （3）选中“子菜单”层中的“运行”按钮，为其添加如下语句：
on (release) { gotoAndStop(11); } //单击该按钮跳转并停止在第11帧 单击“运行”按钮即可跳转到第11帧，出现“运行”对话框。 （4）创建一个名为“确定”的按钮元件，在“弹起”帧中导入图片“确定.jpg”，回到“背景”元件编辑区中，将“确定”元件拖放到第11帧的“运行”对话框上，注意其位置应与原对话框上的“确定”按钮完全相同。

47 （5）选中“确定”元件，为其添加如下语句：
on (release) { gotoAndStop(1); } //单击该按钮跳转并停止在第1帧 （6）至此Windows XP的模拟动画制作完成。按【Ctrl+Enter】键播放，单击“开始”按钮，在弹出的“开始”菜单中选择“运行”命令，可以打开“运行”对话框，在其中单击“确定”按钮，又可回到桌面，最终效果如图16-14、图16-15所示。

48 课后练习 填空题 判断题 问答题 上机操作题

49 填空题 （1）Flash动画的一个显著特性就是具有强大的 性，它使得用户不仅可以欣赏，也可以参与到Flash动画中。 交互
（2）onClipEvent (load)语句的作用是 。 （3）onClipEvent (mouseUp)语句的含义是 （4）载入其他动画需要用到 语句。 交互 载入当前动画片段 单击鼠标左键 loadMovieNum

50 判断题 （1）所有的Flash动画都具有交互性。 （ ）
（2）语句loadMovieNum(“url”,level[, variables])中的level只能是整数，不能是小数。 （ ） × √

51 问答题 （1）在本课课堂讲解16.1.1节中，如果要使按向下方向键时增加一个蝴蝶，并使增加的蝴蝶在原蝴蝶的上方应该怎么办？
在第（2）步添加语句时将语句改为： onClipEvent (load) { //载入当前动画片段，即影片剪辑“hd” fscommand(“showmenu”,“false”); //不显示控制菜单 } onClipEvent (keydown) { //按向下方向键 duplicateMovieClip(hd,hd1,0); //复制影片剪辑hd，生成动画片段hd1，并将其置于与当前蝴蝶的同一层 setProperty(hd1,_y,y+130); //设置动画片段hd1的y坐标增加130像素 }

52 （3）要在一个动画中自动载入其他动画应该使用什么语句，它的语句格式是怎样的？各参数的含义是什么？
（2）简述如何制作一个弹出式下拉菜单。 （3）要在一个动画中自动载入其他动画应该使用什么语句，它的语句格式是怎样的？各参数的含义是什么？ 参见16.1.2相关内容 参见16.1.3相关内容

53 上机操作题 参照本课上机实战的做法，将“开始”菜单中的所有选项都制作成能够对鼠标响应，就像真正的Windows XP一样。
参见16.2上机实战