flash-第16课制作交互式动画.ppt

《flash-第16课制作交互式动画.ppt》由会员分享，可在线阅读，更多相关《flash-第16课制作交互式动画.ppt（51页珍藏版）》请在三一办公上搜索。

1、第 十六课 制作交互式动画,课堂讲解上机实战课后练习,课前导读,重点知识提高知识,课堂讲解,控制动画对象的数量 制作交互式菜单 自动载入其他动画,Flash动画的一个显著特性就是具有强大的交互性，它使得用户不仅可以欣赏，也可以参与到Flash动画中，通过单击按钮、选择选项等控制动画的播放。本课将介绍制作交互式动画的方法。,控制动画对象的数量,下面通过一个小实例来体会交互式动画的有趣之处。首先打开在第10课课堂讲解中制作的“采花粉的蝴蝶”动画，如图16-1所示。下面实现在单击花丛中的蝴蝶时增加一个蝴蝶的效果，其具体操作如下。,图1-,（1）选中动画中的影片剪辑元件“蝴蝶”，在“属性”面板中将实例

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

3、键播放动画，单击一下鼠标，可以看到在原蝴蝶的左边出现了另外一只相同的蝴蝶，同样在扇动翅膀，如图16-3所示。,图16-3,在为影片剪辑添加语句时，之所以将动画片段hd1的x坐标增加130像素，是为了避免两只蝴蝶的位置相同，发生重叠。,制作交互式菜单,制作主菜单 制作菜单命令 制作菜单动画片段,交互式菜单有多种，如下拉菜单、弹出式菜单、滑动式菜单等，下面制作一个典型的弹出式菜单“文件”菜单，其他菜单的制作方法与此类似，只是按钮元件放置的位置不同而已。,制作主菜单,其具体操作如下：（1）新建一个文件，设置场景大小为200200像素，背景颜色为深绿色。（2）创建一个名为“主菜单”的按钮元件，进入按钮

4、元件编辑区。选中其中的“弹起”帧，单击矩形工具，在场景中绘制一个矩形，将填充色设为白-灰-白的线性渐变，并为其添加黑色的底纹，增加立体感。,（3）用文本工具 在矩形框上输入文字“文件”，并将其设置为“宋体、37、加粗”，如图16-4所示。（4）选择“指针经过”帧，按【F6】键插入一个关键帧，选中矩形的左边框和上边框，用墨水瓶工具 将其设为白色，再将下边框和右边框的颜色设为土黄色，以使指针移到按钮上时有凸起效果。,图16-4,（5）在“按下”帧插入一个关键帧，调整左边框和上边框的颜色为土黄色，下边框和右边框的颜色为白色，并将文字“文件”稍微向右下方移动，使单击时有凹下效果，如图16-5所示。,图

5、16-5,制作菜单命令,其具体操作如下：（1）按【F11】键打开库面板，选中“主菜单”元件，单击鼠标右键，在弹出的快捷菜单中选择“重制”命令，打开“复制元件”对话框，在其中的“名称”文本框中输入“新建”，单击 按钮，得到“新建”元件，如图16-6所示。（2）用同样的方法得到“打开”、“关闭”、“保存”、“另存为”元件，“库”面板如图16-7所示。,图16-7,图16-6,（3）双击“库”面板中“新建”前面的 图标，进入“新建”元件编辑区，将每个帧的文字改为“新建”。（4）用同样的方法改变“打开”、“关闭”、“保存”、“另存为”元件中的文字。,制作菜单动画片段,其具体操作如下：（1）创建一个名为

6、“弹出菜单”的影片剪辑元件。（2）选中元件编辑区中的第1帧，打开“库”面板，拖动“主菜单”元件至编辑区中的适当位置。,（3）在第2帧按【F6】键插入关键帧，分别把元件“打开”、“关闭”、“保存”、“另存为”拖放到编辑区中的适当位置，然后在“对齐”面板中单击 按钮，对齐所有按钮，效果如图16-8所示。,图16-8,（4）为第1帧添加stop语句。选中第10帧，按【F6】键插入关键帧，在“动作”面板中添加语句gotoAndStop(1);。（5）选中第1帧中的“文件”按钮元件，在“动作”面板中为其添加如下语句：on(release)gotoAndStop(2);/单击该按钮跳转并停止在第2帧,（6

7、）在第2帧中选择“新建”按钮，在“动作”面板中添加如下语句：on(rollOut)gotoAndPlay(3);/鼠标离开按钮时延迟一段时间后，回到第1帧，只显示主菜单按钮on(rollOver)gotoAndStop(2);/光标停在各按钮上时，保持第2帧的状态（7）选中为“新建”按钮元件添加的语句，按【Ctrl+C】键复制语句。（8）选中“打开”按钮元件，在“动作”面板中按【Ctrl+V】键粘贴语句。用同样的方法将该语句粘贴到其他按钮元件。,（9）单击 回到场景中，打开“库”面板，将“弹出菜单”元件拖放到场景中，按【Ctrl+Enter】键测试效果，如图16-9所示。,图16-9,自动载入

8、其他动画,通过自动载入其他动画可以实现多个动画的自动连续播放，载入动画需要用到loadMovieNum语句。其语法格式如下：loadMovieNum(url,level,variables)其中：url是指要加载SWF文件的绝对或相对URL。相对路径必须相对于级别0处的SWF文件。需要注意的是，必须将所有的SWF文件存储在同一个文件夹中，并且其文件名不能包含文件夹或磁盘驱动器说明。,level是一个整数，用于指定SWF文件将加载到Flash Player中的哪个级别。variables是一个可选参数，用于指定发送变量所使用的HTTP方法。如果没有要发送的变量，则省略此参数。下面通过一个小实例来

9、实现这种效果。在动画的开始出现一个静止画面，显示说明性文字，单击play按钮播放动画，当播放到第20帧时自动载入下一个动画，其中要载入的动画和素材，大家可以自己另外制作，也可以到http:/www.dx-下的【下载专区】【程序代码】中下载。其具体操作如下：,（1）首先将要载入的动画（本例使用的是第11课的百叶窗效果）复制到某一位置，如桌面上。在Flash中新建一个文件，将背景大小设为400300像素，然后将其保存在与要载入的动画相同的位置，即桌面上。（2）打开“公用库”中的“库-按钮”面板，将其中“Playback”类下的“gel right”拖放到舞台的下方。（3）新建图层2，导入素材“小球

10、.swf”到库中，如图16-10所示，这时库中自动出现一个名为“小球”的影片剪辑元件。,图16-10,（4）选中图层2的第1帧，在“库”面板中选择元件“小球”，将其拖放到舞台的上方，如图16-11所示。,图16-11,（5）新建一个图层，在播放按钮的左边输入如图16-12所示的文字，文本格式可任意设置。,图16-12,（5）新建一个图层，在播放按钮的左边输入如图16-12所示的文字，文本格式可任意设置。（6）新建一个图层，选中第2帧，在播放按钮的右边输入“1”，然后依次在第4、5、620帧按【F6】键插入关键帧，然后将第2帧中的数字改为“10”，第4帧中的数字改为“9”，第6帧中的数字改为“8

11、”，第8帧中的数字改为“7”第20帧中的数字改为“1”。（7）将所有图层的帧均沿用到第20帧，然后再新建一个图层，用于添加Actions语句。在第20帧插入关键帧，打开“动作”面板，添加载入动画的动作，如下：loadMovieNum(“百叶窗效果.swf”,0);/载入影片“百叶窗效果.swf”，并将其设为与当前动画在同一层级。,（8）回到动画的第1帧，添加stop语句，选中其中的播放按钮，为其添加如下语句：on(release)gotoAndPlay(2);/单击该按钮跳转并播放第2帧（9）按【Ctrl+Enter】键播放动画，单击播放按钮，画面开始出现倒计数，当数字变为1时开始播放动画“百

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

13、ndows背景,（1）新建一个件，将舞台大小设为825600像素（这个数据是根据Windows桌面图片的长宽比例来设置的），导入图片“背景.jpg”，用任意变形工具 将背景图片按比例缩放，使背景图片刚好能覆盖整个舞台，如图16-16所示。,图16-16,其具体操作如下:,（2）创建一个名为“背景”的影片剪辑元件，进入其编辑区，选中第1帧，为其添加stop语句。然后在第6帧按【F7】键插入空白关键帧，在第10帧按【F5】键沿用帧。（3）新建一个名为“按钮”的按钮元件，在“弹起”帧中导入图片“开始”，在“点击”帧按【F5】键沿用帧。（4）回到“背景”的元件编辑区，打开“库”面板，将按钮元件“开始”

14、拖放到元件编辑区的中心位置。选中该元件，在“动作”面板中添加如下语句：on(release)gotoAndStop(6);/单击该按钮跳转并停止在第6帧,（5）选中第6帧，导入图片“菜单”和“开始”，并调整两张图片的位置，效果如图16-17所示。,图16-17,（6）新建一个名为“运行”的按钮元件，进入其编辑区，选中“弹起”帧，导入图片“运行.jpg”，在“指针经过”按插入关键帧，在“点击”帧插入普通帧。,在调整图片位置时，一定要注意让导入的图片“开始”与第1帧中的“开始”按钮元件处于相同位置。可以单击时间轴上的按钮，再单击按钮，在弹出菜单中选择“绘制全部”命令，以观察所有帧中的对象位置。,（

15、7）为了使鼠标光标移到“运行”上时，“运行”选项变颜色，可以新建一个图层，在“指针经过”帧插入关键帧，在其中绘制一个深蓝色矩形，其大小应与“运行”按钮完全相同，矩形颜色的Alpha值设为24%，如图16-18所示。（8）回到“背景”元件的编辑区，新建一个图层，并命名为“子菜单”，将其移到“开始”层的上方。,图16-18,（9）在图层“子菜单”的第6帧插入关键帧，在“库”面板中选中“运行”元件，将其拖动到元件编辑区中，注意其放置位置应与图片“菜单”中的“运行”选项位置完全相同，使得该按钮与原菜单看起来像一个整体，如图16-19所示。,图16-19,（10）可以用相同的方法将“开始”菜单中的所有选

16、项都制作成按钮元件，由于篇幅所限，这里不再一一讲述，大家可以自行练习。（11）在真正的Windows中，当出现“开始”菜单后，单击“开始”菜单外的任意位置可以使“开始”菜单隐藏起来，为了达到这种效果，可在“背景”元件中新建一个图层，并命名为“隐藏”，将其拖到最底层。（12）在“隐藏”层的第6帧插入关键帧，用任意变形工具 绘制一个足够大的矩形，使其能够覆盖整个工作区域。,（13）将绘制的矩形转换为按钮元件，选中矩形按钮，在“属性”面板中将其Alpha值设为0%，这样不会影响桌面背景的显示。然后在“动作”面板中添加如下语句：on(release)gotoAndStop(1);/单击该按钮跳转并停止

17、在第1帧 这样当将鼠标移到“开始”菜单外单击时动画转到第1帧并停止，“开始”菜单消失。,设置“运行”菜单的响应,其具体操作如下:（1）进入“背景”元件的 编辑区，在“子菜单”层的第 11帧插入空白关键帧，导入图片“对话框.jpg”，单击时间轴上的 按钮，显示前一帧中的图像位置，然后将“对话框.jpg”移动到如图16-20所示的位置。,图16-20,（2）用文本工具 在“运行”对话框的“打开”下拉列表框位置拖拉出一个输入文本框，文本的属性设置如图16-21所示。,图15-21,（3）选中“子菜单”层中的“运行”按钮，为其添加如下语句：on(release)gotoAndStop(11);/单击该

18、按钮跳转并停止在第11帧 单击“运行”按钮即可跳转到第11帧，出现“运行”对话框。（4）创建一个名为“确定”的按钮元件，在“弹起”帧中导入图片“确定.jpg”，回到“背景”元件编辑区中，将“确定”元件拖放到第11帧的“运行”对话框上，注意其位置应与原对话框上的“确定”按钮完全相同。,（5）选中“确定”元件，为其添加如下语句：on(release)gotoAndStop(1);/单击该按钮跳转并停止在第1帧（6）至此Windows XP的模拟动画制作完成。按【Ctrl+Enter】键播放，单击“开始”按钮，在弹出的“开始”菜单中选择“运行”命令，可以打开“运行”对话框，在其中单击“确定”按钮，又

19、可回到桌面，最终效果如图16-14、图16-15所示。,课后练习,填空题判断题 问答题 上机操作题,填空题,（1）Flash动画的一个显著特性就是具有强大的 性，它使得用户不仅可以欣赏，也可以参与到Flash动画中。（2）onClipEvent(load)语句的作用是。（3）onClipEvent(mouseUp)语句的含义是。（4）载入其他动画需要用到 语句。,交互,单击鼠标左键,载入当前动画片段,loadMovieNum,判断题,（1）所有的Flash动画都具有交互性。（）（2）语句loadMovieNum(“url”,level,variables)中的level只能是整数，不能是小数。

20、（）,问答题,（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像素,（2）简述如何制作一个弹出式下拉菜单。（3）要在一个动画中自动载入其他动画应该使用什么语句，它的语句格式是怎样的？各参数的含义是什么？,参见16.1.2相关内容,参见16.1.3相关内容,上机操作题,参照本课上机实战的做法，将“开始”菜单中的所有选项都制作成能够对鼠标响应，就像真正的Windows XP一样。,参见16.2上机实战,