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

在本课上机实战中将制作一个模拟Windows XP的工作界面，最终效果如图16-14所示。其制作过程为：首先制作Windows的主要工作界面，然后制作“开始”按钮和“开始”菜单。将“开始”按钮和“开始”菜单中的每一项制作成按钮元件，单击“开始”按钮，弹出“开始”菜单，在其中选择“运行”命令，则打开“运行”对话框，如图16-15所示。制作的关键是几个按钮元件的制作和为按钮添加响应语句。通过本上机实战的练习，大家可以对交互式动画有一个更深刻的认识。 图15-14 图15-15 制作Windows背景 （1）新建一个件，将舞台大小设为825×600像素（这个数据是根据Windows桌面图片的长宽比例来设置的），导入图片“背景.jpg”，用任意变形工具 将背景图片按比例缩放，使背景图片刚好能覆盖整个舞台，如图16-16所示。 图16-16 其具体操作如下: （2）创建一个名为“背景”的影片剪辑元件，进入其编辑区，选中第1帧，为其添加stop语句。然后在第6帧按【F7】键插入空白关键帧，在第10帧按【F5】键沿用帧。 （3）新建一个名为“按钮”的按钮元件，在“弹起”帧中导入图片“开始”，在“点击”帧按【F5】键沿用帧。 （4）回到“背景”的元件编辑区，打开“库”面板，将按钮元件“开始”拖放到元件编辑区的中心位置。选中该元件，在“动作”面板中添加如下语句： on (release){ gotoAndStop(6); } //单击该按钮跳转并停止在第6帧 （5）选中第6帧，导入图片“菜单”和“开始”，并调整两张图片的位置，效果如图16-17所示。 图16-17 （6）新建一个名为“运行”的按钮元件，进入其编辑区，选中“弹起”帧，导入图片“运行.jpg”，在“指针经过”按插入关键帧，在“点击”帧插入普通帧。 在调整图片位置时，一定要注意让导入的图片“开始”与第1帧中的“开始”按钮元件处于相同位置。可以单击时间轴上的按钮，再单击按钮，在弹出菜单中选择“绘制全部”命令，以观察所有帧中的对象位置 。 （7）为了使鼠标光标移到“运行”上时，“运行”选项变颜色，可以新建一个图层，在“指针经过”帧插入关键帧，在其中绘制一个深蓝色矩形，其大小应与“运行”按钮完全相同，矩形颜色的Alpha值设为24%，如图16-18所示。 （8）回到“背景”元件的编辑区，新建一个图层，并命名为“子菜单”，将其移到“开始”层的上方。 图16-18 （9）在图层“子菜单”的第6帧插入关键帧，在“库”面板中选中“运行”元件，将其拖动到元件编辑区中，注意其放置位置应与图片“菜单”中的“运行”选项位置完全相同，使得该按钮与原菜单看起来像一个整体，如图16-19所示。 图16-19 （10）可以用相同的方法将“开始”菜单中的所有选项都制作成按钮元件，由于篇幅所限，这里不再一一讲述，大家可以自行练习。 （11）在真正的Windows中，当出现“开始”菜单后，单击“开始”菜单外的任意位置可以使“开始”菜单隐藏起来，为了达到这种效果，可在“背景”元件中新建一个图层，并命名为“隐藏”，将其拖到最底层。 （12）在“隐藏”层的第6帧插入关键帧，用任意变形工具 绘制一个足够大的矩形，使其能够覆盖整个工作区域。 （13）将绘制的矩形转换为按钮元件，选中矩形按钮，在“属性”面板中将其Alpha值设为0%，这样不会影响桌面背景的显示。然后在“动作”面板中添加如下语句： on (release) { gotoAndStop(1); } //单击该按钮跳转并停止在第1帧 这样当将鼠标移到“开始”菜单外单击时动画转到第1帧并停止，“开始”菜单消失。 设置“运行”菜单的响应 其具体操作如下: （1）进入“背景”元件的 编辑区，在“子菜单”层的第 11帧插入空白关键帧，导入图片“对话框.jpg”，单击时间轴上的 按钮，显示前一帧中的图像位置，然后将“对话框.jpg”移动到如图16-20所示的位置。 图16-20 （2）用文本工具 在“运行”对话框的“打开”下拉列表框位置拖拉出一个输入文本框，文本的属性设置如图16-21所示。 图15-21 （3）选中“子菜单”层中的“运行”按钮，为其添加如下语句： on (release) { gotoAndStop(11); } //单击该按钮跳转并停止在第11帧 单击“运行”按钮即可跳转到第11帧，出现“运行”对