flash8按钮制作

flash8按钮制作 第 5 Flash 8.0 按钮制 章 作 知识点: 1. 简单按钮 2. 动画按钮 3."别碰我"文字制作 4. 跟随光标的提示 5. 调节音量 6. 控制图片变化 7. 左右声道均衡调节 8. 用组件控制声音按钮 9. 选择乐曲播放 10. 使用按钮载入图片 说明: 本章主要介绍 Flash 8.0 按钮的制作，通过 10 个案例全面讲解 了按钮的制作与技巧，学生对本章一定要掌握，它是制作 交互动画的基础。 教学建议课时数: 一般情况下需 18 课时:理论 6 课时，实际操作 12 课时(可根 据特殊情况做相应调整)。 Flash 8.0 动画设计案例教程 5.1 按钮基础知识 5.1.1 按钮的介绍 1. 按钮简介 按钮是人机进行信息交互的基础，它对鼠标单击事件进行响应。按钮可对按钮静止、 将鼠标指针移到按钮上、按下鼠标左键 3 种事件作出响应。这 3 种事件对应着按钮的 4 种 状态:弹起(按钮静止)、指针经过(将鼠标指针移动到按钮上)、按下(按下按钮)、点击(定义 按钮响应区域)。这 4 种状态定义了按钮的 4 个关键帧。下面详细介绍按钮的这 4 种关键帧。 (1)【弹起】帧:在【弹起】帧中定义按钮的正常显示效果，也就是按钮未被鼠标单击 时所显示的效果。 (2)【指针经过】帧:定义当鼠标指针移到按钮上但不单击它时按钮的效果。一般该帧 相对于【弹起】帧应有所改变。比如:可以定义当鼠标指针移到按钮上时按钮变色或放大、 缩小等，对于文字按钮，可以定义当鼠标指针移到按钮上时文字变色或改变文字的字体等。 (3)【按下】帧:定义按钮时按下所出现的效果。对于图形按钮来说，按钮被按下时一 般会定义得比未被按下时要小一些，这样，当按下按钮时，按钮会自动缩小，出现动态效果。 (4)【点击】帧:定义按钮的响应区域。在响应区域按下按钮时，系统才能响应按钮按 下的事件。该区域在工作区中是不可见的。如要定义该帧，必须保证此区域包括按钮的弹 起、指针经过和按下 3 种状态的区域;如不定义该帧，则系统会默认【弹起】帧状态为按 钮的区域响应。 注意:按钮虽然有 4 种状态，但可根据需要定义这 4 种帧状态，也可只定义一部分，但一 些基本的帧必须定义，一般而言， 弹起】帧和 指针经过】帧必须定义。 2. 按钮的创建 (1) 创建图形按钮的步骤如下。 ? 选择 , 命令，弹出【创建新元件】对话框，按如 图 5.1 所示设置。 图 5.1 按钮进入按钮编辑区，时间轴中将出现按钮的 4 个状态帧，如图 5.2 ? 单 击 所示。 200 第 5 章 Flash 8.0 按钮制 作 图 5.2 ? 定义按钮的 4 个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件 对象。在这里我们利用绘图工具绘制按钮的 4 个帧。 定义【弹起】帧:利用前面所学知识在工作区域中绘制如图 5.3 所示的图形。 定义【指针经过】帧:用鼠标在【指针经过】帧处插入一个关键帧，此时【弹起】帧 的图形被复制到【指针经过】帧的工作区。确保图形被选中，在混色器面板中进行色彩调 整，得到如图 5.4 所示的图形。 定义【按下】帧:用鼠标在【按下】帧处插入一个关键帧，此时【指针经过】帧帧的 图形被复制到"按下"的工作区。确保图形被选中，在混色器面板中进行色彩调整，得到 如图 5.5 所示的图形。 定义【点击】帧:用鼠标在【点击】帧处插入一个关键帧，并进行大小的调整，得到 如图 5.6 所示的图形。该帧主要是定义按钮的有效单击范围，在有效范围里按下按钮时， 系统才认为该事件已经发生。如果不定义该帧，则系统默认"弹起"帧为响应区域。 图 5.3 图 5.4 图 5.5 图 5.6 ? 单击图层左上角的 按钮，返回场景，按钮制作完毕。 (2) 创建文字按钮的步骤如下。 ? 选择 , 命令，弹出【创建新元件】对话框，设置 如图 5.7 所示。 图 5.7 201 Flash 8.0 动画设计案例教程 按钮进入按钮编辑区，时间轴中将出现按钮的 4 个状态帧，如图 5.8 ? 单 击 所示。 图 5.8 ? 定义按钮的 4 个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件 对象。在这里我们利用绘图工具绘制按钮的 4 个帧。 定义【弹起】帧:利用文字工具和前面所学知识在工作区域中输入如图 5.9 所示的 图形。 定义【指针经过】帧:用鼠标在"指针经过"帧处插入一个关键帧，此时【弹起】帧 的文字被复制到【指针经过】帧的工作区。确保文字被选中，在文字属性面板中进行色彩 调整，得到如图 5.10 所示的文字。 定义【按下】帧:用鼠标在【按下】帧处插入一个关键帧，此时【指针经过帧】帧的 文字被复制到"按下"的工作区。确保文字被选中，在文字属性面板中进行色彩调整，得 到如图 5.11 所示的文字。 定义【点击】帧:用鼠标在【点击】帧处插入一个关键帧，并进行大小的调整，得到 如图 5.12 所示的文字。该帧主要是定义按钮的有效单击范围，在有效范围里按下按钮时， 系统才认为该事件已经发生。如果不定义该帧，则系统默认【弹起】帧为响应区域。 图 5.9 图 5.10 图 5.11 图 5.12 ? 单击图层左上角的 按钮，返回场景，按钮制作完毕。 (3) 将按钮加入到场景中的方法:打开【库】面板，在场景中选中要插入的层中的关 键帧，将"库"中的按钮拖到场景中的舞台中即可。 (4) 预览按钮的两种方法:第一种，选择 , 命令; 第二种，在场景中浏览按钮效果，选择 命令。 , 5.1.2 基本按钮的制作 1. 为图形按钮添加文字 通过给前面制作的图形按钮添加"瞬间艺术"文字，来讲解怎样为图形按钮添加文字， 方法如下。 (1) 在场景中双击"图形按钮"，进入按钮编辑状态，如图 5.13 所示。 202 第 5 章 Flash 8.0 按钮制 作 (2) 单击图层左下角的 【插入图层】按钮，添加一个新的图层，如图 5.14 所示。 图 5.13 图 5.14 (3) 单击"图层 2"的【弹起】帧，此时选中【弹起】帧，利用文字工具和前面所学的 知识在图形上面输入如图 5.15 所示的文字。 (4) 在"图层 2"的【指针经过】帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选 择 命令，插入一个关键帧。此时，该帧将复制【弹起】帧的文字，将文字修改 成如图 5.16 所示的效果。 图 5.15 图 5.16 (5) 在"图层 2"的【按下】帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，插入一个关键帧，此时，它将复制【指针经过】帧的文字，将该文字修改 成如图 5.17 所示的效果。 图 5.17 203 Flash 8.0 动画设计案例教程 (6) 单击图层左上角的 按钮，返回场景，按钮修改完毕。 2. 使用按钮加载外部影片 可以通过按钮将所做的其他影片加载到当前影片中进行播放，此功能在制作中使 用频率非常高。在这里，我们来讲解怎样加载外部影片的方法。 (1) 选中场景中的按钮，打开【动作】面板，输入"on(press){}"语句，将闪动的光标 移到"{}"中间。 (2) 选择【动作】面板中的"loadMovie"语句，如图 5.18 所示。 图 5.18 (3) 在"loadMovie()"的"()"中输入参数，如图 5.19 所示。 图 5.19 :是要加载的影片名称，注意要加载的影片名称一定要是英文或数字，不能 用中文命名，影片名字要用双引号。 " ":表示加载的动画所处的层的位置。代码、、参数将在后面做详细介绍。 (4) 关闭【动作】面板，制作完毕。 3. 为按钮添加电子邮件 在工作和学习中，电子邮件的使用非常频繁，在按钮中加入电子邮件对我们取用网上 信息更为方便。其方法与按钮加载方法相同，只是要在 URL 框中输入 E-mail 地址，在添 加地址前应先加入"mailto"。在【动作】面板中输入的语句如图 5.20 所示。 图 5.20 204 第 5 章 Flash 8.0 按钮制 作 5.2 简单控制按钮的制作 5.2.1 案例一:简单按钮 制作一个简单按钮。 本案例主要用到的工具或命令有:选择工具、椭圆工具、元件、柔化填充边缘、文字 工具、填充浮动面板的设置等。 (1) 运行 Flash 8.0，新建一个名为"简单按钮"文件。 (2) 单击 , 命令，弹出【创建新元件】对话框，设置如 图 5.21 所示。单击 按钮，【图层】面板如图 5.22 所示。 图 5.21 图 5.22 205 Flash 8.0 动画设计案例教程 说明: 是指鼠标指针没有移到按钮上时显示的状态。 是指鼠标指针移到按钮上时显示的状态。 是指在按钮上按下鼠标左键时显示的状态。 是指鼠标指针触发按钮的范围。 (3) 单击并选中图层的 帧。 (4) 单击工具箱中的 椭圆工具。将笔触颜色设置为 ，椭圆渐变填充浮动面板 的设置如图 5.23 所示。在工作区绘制一个圆，如图 5.24 所示。 图 5.23 图 5.24 (5) 选择刚绘制的椭圆，选择 命令，弹出【柔 , , 按钮，得到如图 5.26 所示的椭圆。 化填充边缘】对话框，设置如图 5.25 所示。单击 图 5.25 图 5.26 (6) 单击 文字工具。在工作区中输入文字，大小、位置如图 5.27 所示。 (7) 在 帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命 令，此时，在 帧处插入一个关键帧。 (8) 单击 选择工具，选中如图 5.28 所示的部分，设置填充浮动面板如图 5.29 所示。 此时，图形效果如图 5.30 所示。 206 第 5 章 Flash 8.0 按钮制 作 图 5.27 图 5.28 图 5.29 图 5.30 (9) 单击 【文字】工具，将文字改为如图 5.31 所示。将文字改为红色，如图 5.32 所示。 (10) 在 帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命 令，此时，在 帧处插入一个关键帧。 (11) 单击 选择工具，选中如图 5.33 所示的部分，设置填充浮动面板如图 5.34 所示。 此时，图形效果如图 5.35 所示。 图 5.31 图 5.32 图 5.33 图 5.34 图 5.35 (12) 单击 文字工具，将文字改为如图 5.36 所示。将文字改为深红色，如图 5.37 所示。 (13) 在 帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命 令，此时，在 帧处插入一个关键帧。 (14) 单击时间轴左上角的 按钮，返回场景。 (15) 将"库"中的"简单按钮"拖到舞台中并测试效果，如图 5.38 所示。将鼠标指针 移到按钮上时的效果如图 5.39 所示。 (16) 按下鼠标指针时的效果如图 5.40 所示。 207 Flash 8.0 动画设计案例教程 图 5.36 图 5.37 图 5.38 图 5.39 图 5.40 本案例制作了一简单的按钮，主要讲解了按钮的制作原理，基本流程及各帧的作用。 利用前面所学知识制作如下效果的按钮。 5.2.2 案例二:动画按钮 弹起 指针经过 按下 制作一个动画按钮。 208 第 5 章 Flash 8.0 按钮制 作 本案例主要用到的工具与功能有:椭圆工具、文字工具、填充浮动面板的设置、创建 补间动画、Alpha 值的设置、柔化填充边缘等。 (1) 运行 Flash 8.0，新建一个名为"简单按钮"的文件。 (2) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.41 所示，单击 按钮。 图 5.41 (3) 单击 椭圆填充工具，将笔触颜色设置为 ，设置填充浮动面板，如图 5.42 所示。在工作区绘制一个圆，如图 5.43 所示。 图 5.42 图 5.43 (4) 选中该椭圆，选择单击 , , 命令，弹出【柔化填 充边缘】对话框，设置如图 5.44 所示，效果如图 5.45 所示。 图 5.44 图 5.45 209 Flash 8.0 动画设计案例教程 (5) 单击时间轴左上角的 按钮，返回场景。 (6) 方法同第(3)、(4)步，制作一个"黄白渐变球"的图形元件，如图 5.46 所示。 (7) 方法同第(3)、(4)步，制作一个"绿白渐变球"的图形元件，如图 5.47 所示。 (8) 方法同第(3)、(4)步，制作一个"粉红色白渐变球"的图形元件，如图 5.48 所示。 (9) 选中如图 5.47 所示的球，选择 , 命令，弹出【柔 , 化填充边缘】对话框，设置如图 5.49 所示，效果如图 5.50 所示。 图 5.46 图 5.47 图 5.48 图 5.49 图 5.50 (10) 将图 5.50 中不要的部分删除，如图 5.51 所示。 (11) 单击时间轴左上角的 按钮，返回场景。 命令，弹出【创建新元件】对话框，设置如 (12) 选择 , 图 5.52 所示。单击 按钮。 (13) 将"粉红色白渐变球"拖到工作区中，调整其大小及位置，如图 5.33 所示。 图 5.51 图 5.52 图 5.53 (14) 在图层的第 15 帧处插入一个关键帧并调整大小，如图 5.54 所示。 (15) 创建补间动画，如图 5.55 所示。 (16)"图层 1"第一帧的元件属性面板设置如图 5.56 所示。 (17) 单击时间轴左上角的 按钮，返回场景。 图 5.54 图 5.55 图 5.56 210 第 5 章 Flash 8.0 按钮制作 命令，弹出"创建新元件"对话框，设置如 (18) 选择 , 图 5.57 所示。 (19) 将"红白渐变球"图形元件放到 帧上，位置大小如图 5.58 所示。 (20) 帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命 在 令，此时，将插入一个关键帧。删除 帧中的所有元件，将"黄白渐变球"图形元 帧上，位置大小如图 5.59 所示。 件放到 (21) 命 帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 在 令，此时将插入一个关键帧。删除 帧中的所有元件，将"绿白渐变球"图形元件 帧上，位置、大小如图 5.60 所示。 放到 图 5.57 图 5.58 图 5.59 图 5.60 (22) 帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命 在 令将此时，插入一个关键帧。 (23) 单击 帧，选中该帧，将"库"中的"动画"影片剪辑元件拖到工作区中， 位置如图 5.61 所示。输入文字，如图 5.62 所示。 (24) 单击 帧，选中该帧，将"库"中的"动画"影片剪辑元件拖 4 次到工作 区，位置如图 5.63 所示。输入文字，如图 5.64 所示。 (25) 单击 帧，选中该帧，将"库"中的"动画"影片剪辑元件拖 4 次到工作 区，位置如图 5.65 所示。输入文字，如图 5.66 所示。 图 5.61 图 5.62 图 5.63 图 5.64 图 5.65 图 5.66 (26) 单击时间轴左上角的 按钮，返回场景。 (27) 将"库"中的"动画按钮"拖到舞台中，测试效果，如图 5.67,图 5.69 所示。 (28) 完整演示动画请观看从本书提供的网页下载的素材第 5 章的"简单按钮"Flash 文件。 211 Flash 8.0 动画设计案例教程 图 5.67 图 5.68 图 5.69 本案例主要制作了一个动态按钮，主要讲解了动态按钮制作的方法和流程，在制作过 程中，可以像前面制作动画一样，创建新图层、引导线和输入脚本。 根据前面所学知识制作如下效果的按钮。 提示:在制作如下效果的按钮时，要特别注意在对绘制的矩形进行"柔化填充边缘"时， 要进行两次，第一次选择 插入】单选按钮，第二次选择 扩展】单选按钮。完整 的演示动画请观看从本书提供的网页下载的素材第 5 章的"简单按钮 1"Flash 文件。 弹起 指针经过 212 第 5 章 Flash 8.0 按钮制 作 5.2.3 案例三:"别碰我"文字制作 弹起 指针经过 制作一个当鼠标指针移到按钮上时会弹出"别碰我哦～"文字的按钮。 本案例主要用到的工具或命令有:矩形工具、文字工具、元件的创建、Alpha 值的设 置、帧动画的创建等。 (1) 运行 Flash 8.0，新建一个名为"别碰我"文件。 (2) 设置背景色为"纯黑色"。 (3) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.70 所示。单击 按钮。 (4) 单击工具箱中的 矩形工具，填充浮动面板的设置如图 5.71 所示。在工作区绘制 一个矩形，如图 5.72 所示。再绘制一个矩形，如图 5.73 所示。 图 5.70 图 5.71 213 Flash 8.0 动画设计案例教程 图 5.72 图 5.73 (5) 单击工具箱中的颜料桶工具，对图 5.73 进行填充，效果如图 5.74 所示。 (6) 单击时间轴左上角的 按钮，返回场景。 图 5.74 命令，弹出【导入到库】对话框，在对话框 (7) 选择 , , 中选择图片。单击 按钮，导入图片。 (8) 选择 命令，弹出【创建新元件】对话框，设置如 , 图 5.75 所示。单击 按钮。 (9) 将刚导入的图片拖到工作区中，在图片上单击鼠标右键，弹出快捷菜单，选择 命令，将图片分离，如图 5.76 所示。 图 5.75 图 5.76 (10) 单击工具箱中的 套索工具，在选项中选择 项，将猫的白色部分选中，并删除， 效果如图 5.77 所示。 (11) 单击时间轴左上角的 按钮，返回场景。 214 第 5 章 Flash 8.0 按钮制 作 图 5.77 命令，弹出【创建新元件】对话框，设置如 (12) 选择 , 图 5.78 所示。单击 按钮。 (13) 将"库"中的"图片元件"拖到工作区，并设置"图片元件"的属性如图 5.79 所 示。工作区图像的效果如图 5.80 所示。 图 5.78 图 5.79 图 5.80 (14) 在"图层 1"的第 10 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，此时就在第 10 帧处插入了关键帧。用同样的方法在第 20 帧处插入普通帧。 (15) 将第 10 帧处的"图片元件"水平翻转，效果如图 5.81 所示。 图 5.81 (16) 单击时间轴左上角的 按钮，返回场景。 命令，弹出【创建新元件】对话框，设置 (17) 选择 , 按钮。 如图 5.82 所示。单击 215 Flash 8.0 动画设计案例教程 图 5.82 (18) 将"库"中的"按钮模型"图形元件拖到工作区的中央位置，再将"库"中的"动 画"影片剪辑元件拖到工作区的中央位置，如图 5.83 所示。 (19) 分别在 、 、 帧处单击鼠标右键，弹出快捷菜单，选 择 命令，此时即分别在 、 、 帧处插入关键帧。 (20) 帧上单击，将该帧中的所有元件移到适当的位置。单击文字工具，在 在 工作区中输入文字，文字的大小、颜色、位置如图 5.84 所示。 图 5.83 图 5.84 (21) 单击时间轴左上角的 按钮，返回场景。 (22) 将"库"中的"按钮"拖到舞台中进行测试，效果如图 5.83 和图 5.84 所示。 本案例通过讲解制作按钮的基本流程，制作了一个动态按钮。在制作过程中要明白一 个道理，即在按钮中可以导入动画、声音等。 根据前面所学知识制作如下效果的按钮。 弹起 指针经过 216 第 5 章 Flash 8.0 按钮制 作 5.2.4 案例四:跟随光标的提示 当鼠标指针移动到图片上时，出现文字提示。 本案例主要用到的工具或命令有:矩形工具、图片的导入、动作脚本、文字工具、属 性面板的设置、元件的创建等。 (1) 运行 Flash 8.0，新建一个名为"跟随光标的提示"的文件。 (2) 选择 , 命令，弹出【导入到库】对话框，在对话框 , 按钮导入图片，如图 5.85 所示。 中选择图选择片。单击 图 5.85 217 Flash 8.0 动画设计案例教程 (3) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.86 所示。单击 按钮。 (4) 将"库"中的"2008 年北京.jpg"图片拖到工作区，调整位置、大小如图 5.87 所示。 图 5.86 图 5.87 (5) 单击工具箱中的 矩形工具，并设置填充浮动面板如图 5.88 所示。设置笔触颜色 ，在工作区中绘制一个矩形，如图 5.89 所示。 为 图 5.88 图 5.89 (6) 选中绘制的"矩形"，将"矩形"转换为"图形"元件，设置属性面板如图 5.90 所示，效果如图 5.91 所示。 图 5.90 图 5.91 (7) 方法同第(3),第(6)步，分别制作如图 5.92 所示的影片剪辑。 (8) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.93 所示。单击 按钮。 (9) 单击工具箱中的 文字工具，在工作区中拖出一文字框，属性面板的设置如图 5.94 所示。 218 第 5 章 Flash 8.0 按钮制 作 图 5.92 图 5.93 图 5.94 按钮，返回场景。 (10) 单击时间轴左上角的 (11) 将"库"中的所有影片剪辑拖到舞台中，并输入如图 5.95 所示的文字。 图 5.95 (12) 将"库"中的"信息框"拖到舞台中，设置【属性】面板如图 5.96 所示。 (13) 在舞台中的第一个影片剪辑元件上单击鼠标右键，选择 命令，弹出"动作" 脚本对话框，在对话框中输入如图 5.97 所示的脚本代码。 219 Flash 8.0 动画设计案例教程 图 5.96 图 5.97 (14) 方法同第(13)步，语法相同，只要将如图 5.97 所示的用红色矩形框框出来的文字 改成相应的提示文字即可。 (15) 最终效果如图 5.98 所示，演示效果请观看网上下载的素材第 5 章的"跟随光标的 提示"Flash 文件。 图 5.98 220 第 5 章 Flash 8.0 按钮制 作 本案例主要制作了一个跟随光标提示的效果，在输入语言时要特别细心，只要有一点 输入不对，效果就无法实现。 根据前面所学知识制作如下效果，完整的动画演示请观看从网上下载的素材第 5 章的 "跟随光标的提示 1"Flash 文件。 5.2.5 案例五:调节音量 制作一个利用 Flash 8.0 自带按钮来控制音乐音量的调节器。 221 Flash 8.0 动画设计案例教程 本案例主要用到的工具或命令有:文字工具、线条工具、颜料桶工具、动作脚本、矩 形工具，声音的处理等。 (1) 运行 Flash 8.0，新建一个名为"调节音量"的文件。 (2) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.99 所示。单击 按钮。 (3) 单击工具箱中的 【线条】工具，在工作区绘制如图 5.100 所示的图形。 图 5.99 图 5.100 (4) 单击工具箱中的 颜料桶工具，设置填充浮动面板如图 5.101 所示。并对绘制的 图形进行填充，如图 5.102 所示。 (5) 单击时间轴左上角的 按钮，返回场景。 图 5.101 图 5.102 (6) 选择 命令，弹出【导入到库】对话框，在对话框 , , 按钮，导入的音乐和图片如图 5.103 所示。 中选择要导入的音乐和图片。单击 (7) 在"库"中的"音乐"文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出【声音属性】对话框，设置如图 5.104 所示。单击 按钮。 222 第 5 章 Flash 8.0 按钮制 作 图 5.103 图 5.104 (8) 在"库"中的"音乐"文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"链接属性"对话框，设置如图 5.105 所示。单击 按钮。 图 5.105 (9) 将"库"中的"底板"图形元件拖到舞台中，并调整好位置，如图 5.106 所示。 (10) 单击工具箱中的 文字工具，在舞台中输入文字，并设置颜色，如图 5.107 所示。 图 5.106 图 5.107 223 Flash 8.0 动画设计案例教程 (11) 在"图层 1"的第 1 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"动作-帧"脚本输入框，在脚本框中输入如图 5.108 所示的代码。输入完代码 后，单击对话框右上角的 关闭按钮。 图 5.108 (12) 将"库"中的"地球 2.jpg"文件拖到舞台中，并进行调整，如图 5.109 所示。 图 5.109 命令，此时将弹出"公用库"对话框，如图 5.110 (13) 选, , 择 所示。 图 5.110 224 第 5 章 Flash 8.0 按钮制作 (14) 在公用库中选中如图 5.111 所示的元件，将其拖到舞台中，位置、大小如图 5.112 所示。 图 5.111 图 5.112 (15) 在刚拖入的舞台中的按钮元件上双击，进入影片剪辑编辑状态，在"Layer 4"图 层的第 1 帧处单击鼠标右键，在弹出的快捷菜单中选择 命令，弹出"动作-帧"脚本 对话框，将脚本中最后一句修改成如图 5.113 所示红色框框住的语句，然后单击 按钮关 闭对话框。 图 5.113 (16) 将按钮上的"GIN"改为"音量调节"。 (17) 单击时间轴左上角的 按钮，返回场景。 (18) 最终效果如图 5.114 所示。完整演示效果请观看从网上下载的素材第 5 章的"调 节音量"Flash 文件。 225 Flash 8.0 动画设计案例教程 图 5.114 本案例主要利用 Flash 8.0 自带的按钮，通过修改来制作音量调节按钮。在制作过程中 要特别注意脚本的修改原理。 根据前面所学知识制作如下效果，完整演示请观看从网上下载的素材第 5 章的"音 量调节 1"Flash 文件。 226 第 5 章 Flash 8.0 按钮制 作 5.3 复杂控制按钮的制作 5.3.1 案例六:控制图片变化 制作一个通过按钮来控制图片的缩放、移动、旋转的动画。 本案例主要用到的工具或命令有:椭圆工具、文字工具、图片的导入、动作脚本等。 (1) 运行 Flash 8.0，新建一个名为"控制图片变化"文件。 (2) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.115 所示。单击 按钮。 图 5.115 227 Flash 8.0 动画设计案例教程 (3) 单击工具箱中的 线条工具，在工作区绘制如图 5.116 所示图形。 (4) 单击工具箱中的 颜料桶工具，通过设置填充浮动面板，填充出如图 5.117 所示 的图形。 图 5.116 图 5.117 (5) 单击工具箱中的 线条工具，在工作区绘制如图 5.118 所示的图形。 (6) 单击工具箱中的 颜料桶工具，填充出如图 5.119 所示的图形。 (7) 单击时间轴左上角的 按钮，返回场景。 图 5.118 图 5.119 (8) 根据前面所学知识制作一个如图 5.120 所示的按钮。 图 5.120 (9) 选择 命令，弹出【导入到库】对话框，在对话框 , , 中选择图片。单击 按钮，导入图片。 (10) 选择 命令，弹出【创建新元件】对话框，设置如 , 图 5.121 所示。单击 按钮。 228 第 5 章 Flash 8.0 按钮制 作 (11) 将导入的图片拖到工作区，并将图片分离，将白色部分删除，如图 5.122 所示。 (12) 单击时间轴左上角的 按钮，返回场景。 图 5.121 图 5.122 (13) 将"库"中的"底板"图形元件拖到舞台中，再将"库"中的"按钮"拖到舞台 中，调整好大小和形状，并复制 5 个，调整它们之间的位置，如图 5.123 所示。 (14) 将"库"中的"mao_mc"拖到舞台中，位置、大小如图 5.124 所示。 (15)"mao_mc"的属性面板设置如图 5.125 所示。 图 5.123 图 5.124 图 5.125 (16) 单击工具箱中的 文字工具，输入文字如图 5.126 所示。 图 5.126 (17) 在"图片放大"按钮上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命 令，弹出"动作-帧"对话框。在对话框中输入如图 5.127 所示的代码。 (18) 方法同上，分别在"图片缩小"、"逆时旋转"、"顺时旋转"、"向上移动"、 "向下移动"按钮的脚本对话框中输入如图 5.128,图 5.132 所示的代码。 229 Flash 8.0 动画设计案例教程 图 5.127 图 5.128 图 5.129 图 5.130 图 5.131 图 5.132 (19) 最终效果如图 5.133 所示。 图 5.133 (20) 完整动画请观看从网上下载的素材第 5 章的"控制图片变化"Flash 文件。 本案例主要介绍了动作脚本的编辑过程，通过本案例的学习，读者应该能够举一反三 制作出不同的动画效果。每行脚本的具体含义要慢慢体会、理解。 根据前面所学知识制作如下效果，完整动画演示请观看从网上下载的素材第 5 章的 "控制图片变化 2"Flash 文件。 230 第 5 章 Flash 8.0 按钮制 作 5.3.2 案例七:左右声道均衡调节 制作一个能控制左右声道的按钮。 本案例主要用到的工具或命令有:矩形工具、椭圆工具、线条工具、文字工具、颜料 桶工具，动作脚本、图片处理等。 (1) 运行 Flash 8.0，新建一个名为"调节音量"的文件。 (2) 选择 命令，弹出【创建新元件】对话框，设置如 , 231 Flash 8.0 动画设计案例教程 图 5.134 所示。单击 按钮。 (3) 利用工具箱中的 线条工具、 矩形工椭圆工具，绘制如图 5.135 所示 具、 的图形。 图 5.134 图 5.135 (4) 单击工具箱中的 颜料桶工具，填充浮动面板设置如图 5.136 所示。 (5) 对图形进行填充，效果如图 5.137 所示。 (6) 单击时间轴左上角的 按钮，返回场景。 图 5.136 图 5.137 (7) 选择 命令，弹出【导入到库】对话框，在对话框中选 , , 按钮，导入的音乐和图片如图 5.138 所示。 择要导入的音乐和图片。单击 命令，弹出【创建新元件】对话框，设置如 (8) 选择 , 图 5.139 所示。单击 按钮。 232 第 5 章 Flash 8.0 按钮制 作 图 5.138 图 5.139 (9) 利用前面所学知识，制作一个图片渐变的效果，将导入到库中的 3 张图片分别放 在"图层 1"的第 1、第 5、第 10 帧处。此时，创建一个帧动画，图层效果如图 5.140 所示， 最终效果如图 5.141 所示。 (10) 单击时间轴左上角的 按钮，返回场景。 图 5.140 图 5.141 (11) 在库中的"音乐"文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，此时将弹出【声音属性】对话框，设置如图 5.142 所示。单击 按钮。 图 5.142 233 Flash 8.0 动画设计案例教程 (12) 在库中的"音乐"文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出【链接属性】对话框，设置如图 5.143 所示。单击 按钮。 图 5.143 (13) 将库中的"底板"元件和"图片影片"影片剪辑拖到舞台中，并调整好大小、位 置，如图 5.144 所示。 (14) 单击工具箱中的文字工具，在舞台中输入文字，并设置其颜色、大小、位置，如 图 5.145 所示。 图 5.144 图 5.145 (15) 在"图层 1"的第 1 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出动作脚本输入框，在脚本框中输入如图 5.146 所示的代码。输入完代码后，单 击对话框右上角的 关闭按钮。 图 5.146 234 第 5 章 Flash 8.0 按钮制作 命令，此时将弹出【库】面板，如图 5.147 所示。 (16) 选, , 择 (17) 在公用库中选中如图 5.148 所示的元件，将其拖到舞台中，位置、大小如图 5.149 所示。 图 5.147 图 5.148 图 5.149 (18) 在刚拖入到舞台中的按钮元件上双击，进入影片剪辑编辑状态，在"Layer 4" 图层的第 1 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"动 作-帧"脚本对话框，将脚本中最后一句修改成如图 5.150 所示的红色框框住的语句。单击 对话框右上角的 关闭按钮。 图 5.150 按钮，返回场景。 (19) 单击时间轴左上角的 (20) 最终效果如图 5.151 所示。完整演示效果请观看从网上下载的素材第 5 章的"左 右声道均衡调节"Flash 文件。 235 Flash 8.0 动画设计案例教程 图 5.151 本案例制作了一个"左右声道均衡调节"的按钮，在制作过程中输入动作代码时要特 别小心。 根据案例六与案例七所学知识，制作如下控制按钮效果。完整的演示效果请观看从网 上下载的素材第 5 章的"左右声道均衡调节 1"Flash 文件。 5.3.3 案例八:用组件控制声音按钮 236 第 5 章 Flash 8.0 按钮制 作 制作一个通过选择不同的按钮，分别播放不同歌曲的 Flash 动画。 本案例主要用到的工具或命令有:线条工具、文字工具、矩形工具、动作脚本、组件 检查器、图片处理、元件制作等。 (1) 运行 Flash 8.0，新建一个名为"用组件控制声音按钮"的文件。 (2) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.152 所示。单击 按钮。 (3) 利用工具箱中的 线条工具、 矩形工具、 椭圆工具，绘制如图 5.153 所示 的图形。 图 5.152 图 5.153 (4) 单击工具箱中的 颜料桶工具，并设置填充浮动面板为如图 5.154 所示。 (5) 对图形进行填充，效果如图 5.155 所示。 图 5.154 图 5.155 237 Flash 8.0 动画设计案例教程 (6) 单击时间轴左上角的 按钮，返回场景。 (7) 选择 , 命令，弹出【导入到库】对话框，在对话框中 , 按钮，导入图片，如图 5.156 所示。 选择要导入的图片。单击 (8) 利用前面所学的知识制作如图 5.157 所示的按钮。 图 5.156 图 5.157 (9) 将库中的"底板"图形元件、图片、按钮依次拖到舞台中，并调整它们的大小和 位置，如图 5.158 所示。 (10) 选择 , 命令，弹出组件浮动面板，将选中的组件拖到舞台中，如 图 5.159 所示。 (11) 组件在舞台中的位置、大小如图 5.160 所示。 图 5.158 图 5.159 图 5.160 (12) 选中拖到舞台中的组件，选择 , 命令，弹出组件检查器浮 动面板。浮动面板的设置如图 5.161 所示;属性面板的设置如图 5.162 所示。 (13) 在舞台中的"春之声圆舞曲"按钮上单击鼠标右键，弹出快捷菜单，在快捷菜 命令，随后将弹出"动作-帧"脚本对话框，在对话框中输入如图 5.163 所 单中选择 示的代码。 (14) 其他按钮代码的输入同图 5.163 一样，只要将红色框框住的部分改为相应的歌曲 名称即可。 (15) 最终效果如图 5.164 所示，完整演示效果请观看从网上下载素材第 5 章的"用组 件控制声音按钮"Flash 文件。 238 第 5 章 Flash 8.0 按钮制 作 图 5.161 图 5.162 图 5.163 图 5.164 239 Flash 8.0 动画设计案例教程 本案例主要使用 Flash 8.0 自带的组件来制作选择音乐和控制音量效果的 Flash 动画。 在制作过程中要特别注意，将播放组件拖到舞台中后，一定要设置组件的属性面板，否则 就无法播放声音。 根据前面所学知识制作如下效果，完整动画演示请观看从网上下载的素材第 5 章的 "用组件控制声音按钮 1"Flash 文件。 5.3.4 案例九:选择乐曲播放 制作一个可以选择音乐播放的效果。 240 第 5 章 Flash 8.0 按钮制 作 本案例主要用到的工具或命令有:文字工具、组件的使用、矩形工具、分离、动作脚 本、声音的处理、图片的处理。 (1) 运行 Flash 8.0，新建一个名为"选择乐曲播放"的文件。 (2) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.165 所示。单击 按钮。 (3) 利用工具箱中的 线条工具、 矩形工具、 椭圆工具，绘制如图 5.166 所示的 图形。 (4) 利用工具箱中的 颜料桶工具和通过设置填充浮动面板，对所绘制的图形进行填 充，填充好的效果如图 5.167 所示。 图 5.165 图 5.166 图 5.167 , (5) 选, 命令，弹出【导入到库】对话框，在对话框 择 按钮，导入的音乐和图片如图 5.168 所示。 中选择要导入的音乐和图片。单击 图 5.168 (6) 将导入的图片拖到工作区，调整大小，位置效果如图 5.169 所示。 (7) 单击时间轴左上角的 按钮，返回场景。 241 Flash 8.0 动画设计案例教程 (8) 将库中的"底板"图形元件拖到舞台中，并输入文字，然后放到适当的位置，如 图 5.170 所示。 图 5.169 图 5.170 , 命令，此时将弹出【库】面板，如图 5.171 所示。 (9) 选, 择 (10) 在库中选中如图 5.172 所示的元件，将其拖到舞台中，位置、大小如图 5.173 所示。 图 5.171 图 5.172 图 5.173 (11) 在库中的"音乐"文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出【声音属性】对话框，设置如图 5.174 所示。单击 按钮。 (12) 在"库"中的"音乐"文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出【链接属性】对话框，设置如图 5.175 所示。单击 按钮。 242 第 5 章 Flash 8.0 按钮制 作 图 5.174 图 5.175 (13) 在"图层 1"的第 1 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"动作-帧"脚本输入框，在脚本框中输入如图 5.176 所示的代码。输入完代码 后，单击对话框右上角的 关闭按钮。 图 5.176 (14) 双击舞台中的如图 5.177 所示的组件，进入组件编辑状态，在"Layer 4"层的第 1 帧处，单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"动作-帧" 脚本对话框，将最后一句改为如图 5.178 所示的红色框框住的语句。 (15) 单击时间轴左上角的 按钮，返回场景。 (16) 双击舞台中的如图 5.179 所示的组件，进入组件编辑状态，在"Layer 4"层的第 1 帧处，单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"动作-帧" 脚本对话框，将最后一句改为如图 5.180 所示的红色框框住的语句。 243 Flash 8.0 动画设计案例教程 图 5.177 图 5.178 图 5.179 图 5.180 (17) 在"图层 1"的第 2 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，此时，插入一个关键帧。在关键帧上单击鼠标右键，弹出快捷菜单，在 快捷菜单中选择 命令，弹出"动作-帧"脚本对话框，在"动作-帧"脚本对话框中输 入如图 5.181 所示的语句。 图 5.181 (18) 单击"动作"脚本对话框右上角的 ，关闭对话框。 (19) 单击时间轴左下角的 插入图层按钮，此时将插入一个新的图层。 (20) 单击工具箱中的 文字工具，在舞台中拖出一个框来，大小、位置如图 5.182 所示。 (21) 文字属性面板的设置如图 5.183 所示。 244 第 5 章 Flash 8.0 按钮制 作 图 5.182 图 5.183 (22) 利用前面所学的知识制作如图 5.184 所示的按钮。 (23) 在"图层 1"的第 3 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令，此时将插入一个关键帧，将舞台中第 3 帧不需要的元件删除，再输入需 要的文字，如图 5.185 所示。 (24) 将库中的音乐按钮拖到舞台中，并调整好大小、位置，如图 5.186 所示。 图 5.184 图 5.185 图 5.186 (25) 在舞台中的"春之声圆舞曲"按钮上单击鼠标右键，弹出快捷菜单，在快捷菜单 中选择 命令，随后将弹出"动作-按钮"脚本对话框，输入如图 5.187 所示的语句。 图 5.187 245 Flash 8.0 动画设计案例教程 (26) 其他歌曲按钮的代码输入方法与此相同，只要将如图 5.187 所示的用红色框框住 的文字改成相应的歌曲名字即可。 (27) 利用前面所学的知识，制作一个"选择乐曲按钮"。 (28) 单击"图层 2"。将库中的"选择乐曲按钮"拖到舞台中，位置如图 5.188 所示。 (29) 在选择乐曲按钮上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 命令， 弹出"动作-按钮"脚本对话框，在"脚本"对话框中输入如图 5.189 所示的代码，单击"动 作-按钮"脚本对话框右上角的 ，关闭对话框。 图 5.188 图 5.189 (30) 进行测试，效果如图 5.190 所示，单击选择乐曲按钮，效果如图 5.191 所示。 图 5.190 图 5.191 本案例主要制作了一个乐曲选择播放按钮的效果，制作过程中，在输入动作脚本时要 特别细心，因为很容易出错。 根据前面所学的知识制作如下效果，完整演示动画请观看从网上下载的素材第 5 章的 "选择乐曲播放"Flash 文件。 246 第 5 章 Flash 8.0 按钮制 作 5.3.5 案例十:使用按钮载入图片 制作一个使用按钮载入图片的 Flash 动画。 本案例主要用到的工具或命令有:矩形工具、线条工具、椭圆工具、动作脚本、浮动 面板的设置、元件符号的创建等。 (1) 运行 Flash 8.0，新建一个名为"使用按钮载入图片"的文件。 (2) 选择 , 命令，弹出【创建新元件】对话框，设置如 图 5.192 所示。单击 按钮。 (3) 利用工具箱中的 线条工具、 矩形工椭圆工具，绘制如图 5.193 所示 具、 的图形。 247 Flash 8.0 动画设计案例教程 图 5.192 图 5.193 (4) 利用工具箱中的 颜料桶工具，并设置填充浮动面板，对所绘制的图形进行填充， 填充好后的效果如图 5.194 所示。 (5) 单击时间轴左上角的 按钮，返回场景。 (6) 利用前面所学的知识制作如图 5.195 所示的两个按钮。 图 5.194 图 5.195 (7) 将库中的"底板"图形元件和两个按钮拖到舞台中，调整好位置，如图 5.196 所示。 图 5.196 (8)"下一张"按钮的属性面板设置如图 5.197 所示，"上一张"按钮的属性面板设置 如图 5.198 所示。 图 5.197 图 5.198 248 第 5 章 Flash 8.0 按钮制作 (9) 单击工具箱中的文字工具，在舞台中拖出一个框，文字属性面板的设置如图 5.199 所示。 图 5.199 (10) 利用前面所学的知识，插入一个"图层 2"，在"图层 2"的第 1 帧处单击鼠标 右键，弹出快捷菜单，在快捷菜单中选择 命令，弹出"动作"脚本对话框，在该对话 框中输入如图 5.200 所示的代码。 图 5.200 (11) 最终效果如图 5.201 所示。完整动画演示效果请观看从网上下载的素材第 5 章的 "使用按钮载入图片"Flash 文件。 249 Flash 8.0 动画设计案例教程 图 5.201 本案例主要制作了一个使用按钮控制图片载入的效果，在制作过程中，要特别注意文 件和图片应保存在同一个文件夹中，否则在运行时就会找不到图片。 根据前面所学知识制作如下效果。完整动画演示效果请观看从网上下载的素材第 5 章 的"使用按钮载入图片 1"Flash 文件。 250