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

第十六课制作交互式动画 课堂讲解上机实战课后练习 课前导读 重点知识提高知识 课堂讲解 控制动画对象的数量制作交互式菜单自动载入其他动画 Flash动画的一个显著特性就是具有强大的交互性 它使得用户不仅可以欣赏 也可以参与到Flash动画中 通过单击按钮 选择选项等控制动画的播放 本课将介绍制作交互式动画的方法 控制动画对象的数量 下面通过一个小实例来体会交互式动画的有趣之处 首先打开在第10课课堂讲解中制作的 采花粉的蝴蝶 动画 如图16 1所示 下面实现在单击花丛中的蝴蝶时增加一个蝴蝶的效果 其具体操作如下 图1 1 选中动画中的影片剪辑元件 蝴蝶 在 属性 面板中将实例名称设为 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 键播放动画 单击一下鼠标 可以看到在原蝴蝶的左边出现了另外一只相同的蝴蝶 同样在扇动翅膀 如图16 3所示 图16 3 在为影片剪辑添加语句时 之所以将动画片段hd1的x坐标增加130像素 是为了避免两只蝴蝶的位置相同 发生重叠 制作交互式菜单 制作主菜单制作菜单命令制作菜单动画片段 交互式菜单有多种 如下拉菜单 弹出式菜单 滑动式菜单等 下面制作一个典型的弹出式菜单 文件 菜单 其他菜单的制作方法与此类似 只是按钮元件放置的位置不同而已 制作主菜单 其具体操作如下 1 新建一个文件 设置场景大小为200 200像素 背景颜色为深绿色 2 创建一个名为 主菜单 的按钮元件 进入按钮元件编辑区 选中其中的 弹起 帧 单击矩形工具 在场景中绘制一个矩形 将填充色设为白 灰 白的线性渐变 并为其添加黑色的底纹 增加立体感 3 用文本工具在矩形框上输入文字 文件 并将其设置为 宋体 37 加粗 如图16 4所示 4 选择 指针经过 帧 按 F6 键插入一个关键帧 选中矩形的左边框和上边框 用墨水瓶工具将其设为白色 再将下边框和右边框的颜色设为土黄色 以使指针移到按钮上时有凸起效果 图16 4 5 在 按下 帧插入一个关键帧 调整左边框和上边框的颜色为土黄色 下边框和右边框的颜色为白色 并将文字 文件 稍微向右下方移动 使单击时有凹下效果 如图16 5所示 图16 5 制作菜单命令 其具体操作如下 1 按 F11 键打开库面板 选中 主菜单 元件 单击鼠标右键 在弹出的快捷菜单中选择 重制 命令 打开 复制元件 对话框 在其中的 名称 文本框中输入 新建 单击按钮 得到 新建 元件 如图16 6所示 2 用同样的方法得到 打开 关闭 保存 另存为 元件 库 面板如图16 7所示 图16 7 图16 6 3 双击 库 面板中 新建 前面的图标 进入 新建 元件编辑区 将每个帧的文字改为 新建 4 用同样的方法改变 打开 关闭 保存 另存为 元件中的文字 制作菜单动画片段 其具体操作如下 1 创建一个名为 弹出菜单 的影片剪辑元件 2 选中元件编辑区中的第1帧 打开 库 面板 拖动 主菜单 元件至编辑区中的适当位置 3 在第2帧按 F6 键插入关键帧 分别把元件 打开 关闭 保存 另存为 拖放到编辑区中的适当位置 然后在 对齐 面板中单击按钮 对齐所有按钮 效果如图16 8所示 图16 8 4 为第1帧添加stop语句 选中第10帧 按 F6 键插入关键帧 在 动作 面板中添加语句gotoAndStop 1 5 选中第1帧中的 文件 按钮元件 在 动作 面板中为其添加如下语句 on release gotoAndStop 2 单击该按钮跳转并停止在第2帧 6 在第2帧中选择 新建 按钮 在 动作 面板中添加如下语句 on rollOut gotoAndPlay 3 鼠标离开按钮时延迟一段时间后 回到第1帧 只显示主菜单按钮on rollOver gotoAndStop 2 光标停在各按钮上时 保持第2帧的状态 7 选中为 新建 按钮元件添加的语句 按 Ctrl C 键复制语句 8 选中 打开 按钮元件 在 动作 面板中按 Ctrl V 键粘贴语句 用同样的方法将该语句粘贴到其他按钮元件 9 单击回到场景中 打开 库 面板 将 弹出菜单 元件拖放到场景中 按 Ctrl Enter 键测试效果 如图16 9所示 图16 9 自动载入其他动画 通过自动载入其他动画可以实现多个动画的自动连续播放 载入动画需要用到loadMovieNum语句 其语法格式如下 loadMovieNum url level variables 其中 url是指要加载SWF文件的绝对或相对URL 相对路径必须相对于级别0处的SWF文件 需要注意的是 必须将所有的SWF文件存储在同一个文件夹中 并且其文件名不能包含文件夹或磁盘驱动器说明 level是一个整数 用于指定SWF文件将加载到FlashPlayer中的哪个级别 variables是一个可选参数 用于指定发送变量所使用的HTTP方法 如果没有要发送的变量 则省略此参数 下面通过一个小实例来实现这种效果 在动画的开始出现一个静止画面 显示说明性文字 单击play按钮播放动画 当播放到第20帧时自动载入下一个动画 其中要载入的动画和素材 大家可以自己另外制作 也可以到http www dx 下的 下载专区 程序代码 中下载 其具体操作如下 1 首先将要载入的动画 本例使用的是第11课的百叶窗效果 复制到某一位置 如桌面上 在Flash中新建一个文件 将背景大小设为400 300像素 然后将其保存在与要载入的动画相同的位置 即桌面上 2 打开 公用库 中的 库 按钮 面板 将其中 Playback 类下的 gelright 拖放到舞台的下方 3 新建图层2 导入素材 小球 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 6 20帧按 F6 键插入关键帧 然后将第2帧中的数字改为 10 第4帧中的数字改为 9 第6帧中的数字改为 8 第8帧中的数字改为 7 第20帧中的数字改为 1 7 将所有图层的帧均沿用到第20帧 然后再新建一个图层 用于添加Actions语句 在第20帧插入关键帧 打开 动作 面板 添加载入动画的动作 如下 loadMovieNum 百叶窗效果 swf 0 载入影片 百叶窗效果 swf 并将其设为与当前动画在同一层级 8 回到动画的第1帧 添加stop语句 选中其中的播放按钮 为其添加如下语句 on release gotoAndPlay 2 单击该按钮跳转并播放第2帧 9 按 Ctrl Enter 键播放动画 单击播放按钮 画面开始出现倒计数 当数字变为1时开始播放动画 百叶窗效果 几个画面如图16 13所示 图16 13 上机实战 制作Windows背景设置 运行 菜单的响应 在本课上机实战中将制作一个模拟WindowsXP的工作界面 最终效果如图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帧 出现 运行 对话框 4 创建一个名为 确定 的按钮元件 在 弹起 帧中导入图片 确定 jpg 回到 背景 元件编辑区中 将 确定 元件拖放到第11帧的 运行 对话框上 注意其位置应与原对话框上的 确定 按钮完全相同 5 选中 确定 元件 为其添加如下语句 on release gotoAndStop 1 单击该按钮跳转并停止在第1帧 6 至此WindowsXP的模拟动画制作完成 按 Ctrl Enter 键播放 单击 开始 按钮 在弹出的 开始 菜单中选择 运行 命令 可以打开 运行 对话框 在其中单击 确定 按钮 又可回到桌面 最终效果如图16 14 图16 15所示 课后练习 填空题判断题问答题上机操作题 填空题 1 Flash动画的一个显著特性就是具有强大的性 它使得用户不仅可以欣赏 也可以参与到Flash动画中 2 onClipEvent load 语句的作用是 3 onClipEvent mouseUp 语句的含义是 4 载入其他动画需要用到语句 交互 单击鼠标左键 载入当前动画片段 loadMovieNum 判断题 1 所有的Flash动画都具有交互性 2 语句loadMovieNum url level variables 中的level只能是整数 不能是小数 问答题 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相关内容 上机操作题 参照本课上机实战的做法 将 开始 菜单中的所有选项都制作成能够对鼠标响应 就像真正的WindowsXP一样 参见16 2上机实战