flash-第6制作交互式动画

1、Flash 动画制作河南工程学院第 六章 制作交互式动画 课堂讲解上机实战课后练习Flash 动画制作河南工程学院课前导读重点知识提高知识Flash 动画制作河南工程学院课堂讲解控制动画对象的数量 制作交互式菜单 自动载入其他动画 Flash 动画制作河南工程学院 Flash动画的一个显著特性就是具有强大的交互性，它使得用户不仅可以欣赏，也可以参与到Flash动画中，通过单击按钮、选择选项等控制动画的播放。本课将介绍制作交互式动画的方法。 Flash 动画制作河南工程学院控制动画对象的数量 下面通过一个小实例来体会交互式动画的有趣之处。首先打开在第10课课堂讲解中制作的“采花粉的蝴蝶”动画，如

2、图16-1所示。下面实现在单击花丛中的蝴蝶时增加一个蝴蝶的效果，其具体操作如下。 图1-Flash 动画制作河南工程学院 （1）选中动画中的影片剪辑元件“蝴蝶”，在“属性”面板中将实例名称设为“hd”，如“图16-2所示。图16-2Flash 动画制作河南工程学院 （2）为了实现单击蝴蝶时出现两只蝴蝶的结果，选中影片剪辑元件“蝴蝶”，在“动作”面板中输入如下语句：onClipEvent (load) /载入当前动画片段，即影片剪辑“hd”fscommand(showmenu,false); /不显示控制菜单onClipEvent (mouseUp) /单击鼠标左键duplicateMovieC

3、lip(hd,hd1,0); /复制影片剪辑hd，生成动画片段hd1，并将其置于与当前蝴蝶的同一层setProperty(hd1,_x,x+130); /设置动画片段hd1的x坐标增加130像素Flash 动画制作河南工程学院 （3）按【Ctrl+Enter】键播放动画，单击一下鼠标，可以看到在原蝴蝶的左边出现了另外一只相同的蝴蝶，同样在扇动翅膀，如图16-3所示。图16-3在为影片剪辑添加语句时，之所以将动画片段hd1的x坐标增加130像素，是为了避免两只蝴蝶的位置相同，发生重叠。Flash 动画制作河南工程学院制作交互式菜单 制作主菜单 制作菜单命令 制作菜单动画片段 Flash 动画制作

4、河南工程学院 交互式菜单有多种，如下拉菜单、弹出式菜单、滑动式菜单等，下面制作一个典型的弹出式菜单“文件”菜单，其他菜单的制作方法与此类似，只是按钮元件放置的位置不同而已。 Flash 动画制作河南工程学院制作主菜单 其具体操作如下： （ 1 ） 新 建 一 个 文 件 ， 设 置 场 景 大 小 为200200像素，背景颜色为深绿色。 （2）创建一个名为“主菜单”的按钮元件，进入按钮元件编辑区。选中其中的“弹起”帧，单击矩形工具 ，在场景中绘制一个矩形，将填充色设为白-灰-白的线性渐变，并为其添加黑色的底纹，增加立体感。 Flash 动画制作河南工程学院 （3）用文本工具 在矩形框上输入文字

5、“文件”，并将其设置为“宋体、37、加粗”，如图16-4所示。 （4）选择“指针经过”帧，按【F6】键插入一个关键帧，选中矩形的左边框和上边框，用墨水瓶工具 将其设为白色，再将下边框和右边框的颜色设为土黄色，以使指针移到按钮上时有凸起效果。 图16-4Flash 动画制作河南工程学院 （5）在“按下”帧插入一个关键帧，调整左边框和上边框的颜色为土黄色，下边框和右边框的颜色为白色，并将文字“文件”稍微向右下方移动，使单击时有凹下效果，如图16-5所示。 图16-5Flash 动画制作河南工程学院制作菜单命令 其具体操作如下： （1）按【F11】键打开库面板，选中“主菜单”元件，单击鼠标右键，在弹

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

7、菜单”的影片剪辑元件。 （2）选中元件编辑区中的第1帧，打开“库”面板，拖动“主菜单”元件至编辑区中的适当位置。 Flash 动画制作河南工程学院 （3） 在第2帧按【F6】键插入关键帧，分别把元件“打开”、“关闭”、“保存”、“另存为”拖放到编辑区中的适当位置，然后在“对齐”面板中单击 按钮，对齐所有按钮，效果如图16-8所示。 图16-8 Flash 动画制作河南工程学院 （4）为第1帧添加stop语句。选中第10帧，按【F6】键插入关键帧，在“动作”面板中添加语句gotoAndStop(1);。 （5）选中第1帧中的“文件”按钮元件，在“动作”面板中为其添加如下语句： on (relea

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

9、工程学院 （9）单击 回到场景中，打开“库”面板，将“弹出菜单”元件拖放到场景中，按【Ctrl+Enter】键测试效果，如图16-9所示。 图16-9 Flash 动画制作河南工程学院自动载入其他动画 通过自动载入其他动画可以实现多个动画的自动连续播放，载入动画需要用到loadMovieNum语句。其语法格式如下： loadMovieNum(url,level,variables) 其中： url是指要加载SWF文件的绝对或相对URL。相对路径必须相对于级别0处的SWF文件。需要注意的是，必须将所有的SWF文件存储在同一个文件夹中，并且其文件名不能包含文件夹或磁盘驱动器说明。Flash 动画制

10、作河南工程学院 level是一个整数，用于指定SWF文件将加载到Flash Player中的哪个级别。 variables是一个可选参数，用于指定发送变量所使用的HTTP方法。如果没有要发送的变量，则省略此参数。 下面通过一个小实例来实现这种效果。在动画的开始出现一个静止画面，显示说明性文字，单击play按钮播放动画，当播放到第20帧时自动载入下一个动画，其中要载入的动画和素材，大家可以自己另外制作，也可以到http:/www.dx-下的【下载专区】【程序代码】中下载。其具体操作如下：Flash 动画制作河南工程学院 （1）首先将要载入的动画（本例使用的是第11课的百叶窗效果）复制到某一位置，

11、如桌面上。在Flash中新建一个文件，将背景大小设为400300像素，然后将其保存在与要载入的动画相同的位置，即桌面上。 （2）打开“公用库”中的“库-按钮”面板，将其中“Playback”类下的“gel right”拖放到舞台的下方。 （3）新建图层2，导入素材“小球.swf”到库中，如图16-10所示，这时库中自动出现一个名为“小球”的影片剪辑元件。 Flash 动画制作河南工程学院图16-10 Flash 动画制作河南工程学院 （4）选中图层2的第1帧，在“库”面板中选择元件“小球”，将其拖放到舞台的上方，如图16-11所示。 图16-11 Flash 动画制作河南工程学院 （5）新建一

12、个图层，在播放按钮的左边输入如图16-12所示的文字，文本格式可任意设置。图16-12 Flash 动画制作河南工程学院 （5）新建一个图层，在播放按钮的左边输入如图16-12所示的文字，文本格式可任意设置。 （6）新建一个图层，选中第2帧，在播放按钮的右边输入“1”，然后依次在第4、5、620帧按【F6】键插入关键帧，然后将第2帧中的数字改为“10”，第4帧中的数字改为“9”，第6帧中的数字改为“8”，第8帧中的数字改为“7”第20帧中的数字改为“1”。 （7）将所有图层的帧均沿用到第20帧，然后再新建一个图层，用于添加Actions语句。在第20帧插入关键帧，打开“动作”面板，添加载入动画

13、的动作，如下： loadMovieNum(“百叶窗效果.swf”,0); /载入影片“百叶窗效果.swf”，并将其设为与当前动画在同一层级。Flash 动画制作河南工程学院 （8）回到动画的第1帧，添加stop语句，选中其中的播放按钮，为其添加如下语句：on (release) gotoAndPlay(2); /单击该按钮跳转并播放第2帧 （9）按【Ctrl+Enter】键播放动画，单击播放按钮，画面开始出现倒计数，当数字变为1时开始播放动画“百叶窗效果”，几个画面如图16-13所示。Flash 动画制作河南工程学院图16-13 Flash 动画制作河南工程学院上机实战 制作Windows背景

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

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

16、件编辑区，打开“库”面板，将按钮元件“开始”拖放到元件编辑区的中心位置。选中该元件，在“动作”面板中添加如下语句：on (release) gotoAndStop(6); /单击该按钮跳转并停止在第6帧 Flash 动画制作河南工程学院 （5）选中第6帧，导入图片“菜单”和“开始”，并调整两张图片的位置，效果如图16-17所示。 图16-17Flash 动画制作河南工程学院 （6）新建一个名为“运行”的按钮元件，进入其编辑区，选中“弹起”帧，导入图片“运行.jpg”，在“指针经过”按插入关键帧，在“点击”帧插入普通帧。 在调整图片位置时，一定要注意让导入的图片“开始”与第1帧中的“开始”按钮元

17、件处于相同位置。可以单击时间轴上的按钮，再单击按钮，在弹出菜单中选择“绘制全部”命令，以观察所有帧中的对象位置 。Flash 动画制作河南工程学院 （7）为了使鼠标光标移到“运行”上时，“运行”选项变颜色，可以新建一个图层，在“指针经过”帧插入关键帧，在其中绘制一个深蓝色矩形，其大小应与“运行”按钮完全相同，矩形颜色的Alpha值设为24%，如图16-18所示。 （8）回到“背景”元件的编辑区，新建一个图层，并命名为“子菜单”，将其移到“开始”层的上方。 图16-18Flash 动画制作河南工程学院 （9）在图层“子菜单”的第6帧插入关键帧，在“库”面板中选中“运行”元件，将其拖动到元件编辑区

18、中，注意其放置位置应与图片“菜单”中的“运行”选项位置完全相同，使得该按钮与原菜单看起来像一个整体，如图16-19所示。 图16-19Flash 动画制作河南工程学院 （10）可以用相同的方法将“开始”菜单中的所有选项都制作成按钮元件，由于篇幅所限，这里不再一一讲述，大家可以自行练习。 （11）在真正的Windows中，当出现“开始”菜单后，单击“开始”菜单外的任意位置可以使“开始”菜单隐藏起来，为了达到这种效果，可在“背景”元件中新建一个图层，并命名为“隐藏”，将其拖到最底层。 （12）在“隐藏”层的第6帧插入关键帧，用任意变形工具 绘制一个足够大的矩形，使其能够覆盖整个工作区域。 Flas

19、h 动画制作河南工程学院 （13）将绘制的矩形转换为按钮元件，选中矩形按钮，在“属性”面板中将其Alpha值设为0%，这样不会影响桌面背景的显示。然后在“动作”面板中添加如下语句： on (release) gotoAndStop(1); /单击该按钮跳转并停止在第1帧 这样当将鼠标移到“开始”菜单外单击时动画转到第1帧并停止，“开始”菜单消失。Flash 动画制作河南工程学院设置“运行”菜单的响应 其具体操作如下: （1）进入“背景”元件的 编辑区，在“子菜单”层的第 11帧插入空白关键帧，导入图片“对话框.jpg”，单击时间轴上的 按钮，显示前一帧中的图像位置，然后将“对话框.jpg”移动

20、到如图16-20所示的位置。图16-20Flash 动画制作河南工程学院 （2）用文本工具 在“运行”对话框的“打开”下拉列表框位置拖拉出一个输入文本框，文本的属性设置如图16-21所示。 图15-21Flash 动画制作河南工程学院 （3）选中“子菜单”层中的“运行”按钮，为其添加如下语句： on (release) gotoAndStop(11); /单击该按钮跳转并停止在第11帧 单击“运行”按钮即可跳转到第11帧，出现“运行”对话框。 （4）创建一个名为“确定”的按钮元件，在“弹起”帧中导入图片“确定.jpg”，回到“背景”元件编辑区中，将“确定”元件拖放到第11帧的“运行”对话框上，

21、注意其位置应与原对话框上的“确定”按钮完全相同。 Flash 动画制作河南工程学院 （5）选中“确定”元件，为其添加如下语句： on (release) gotoAndStop(1); /单击该按钮跳转并停止在第1帧 （6）至此Windows XP的模拟动画制作完成。按【Ctrl+Enter】键播放，单击“开始”按钮，在弹出的“开始”菜单中选择“运行”命令，可以打开“运行”对话框，在其中单击“确定”按钮，又可回到桌面，最终效果如图16-14、图16-15所示。 Flash 动画制作河南工程学院课后练习填空题判断题 问答题 上机操作题Flash 动画制作河南工程学院填空题 （1）Flash动画的一个显著特性就是具有强大的 性，它使得用户不仅可以欣赏，也可以参与到Flash动画中。 （2）onClipEvent (load)语句的作用是