Flash 8动画设计案例教程

《Flash 8动画设计案例教程》由会员分享，可在线阅读，更多相关《Flash 8动画设计案例教程（94页珍藏版）》请在金锄头文库上搜索。

1、第5章 Flash 8.0按钮制作制作者:伍福军 张家瑞知识点： 1. 简单按钮 2. 动画按钮 3.“别碰我”文字制作 4. 跟随光标的提示 5. 调节音量 6. 控制图片变化 7. 左右声道均衡调节 8. 用组件控制声音按钮 9. 选择乐曲播放 10. 使用按钮载入图片 说明：本章主要介绍Flash 8.0按钮的制作，通 过10个案例全面讲解了按钮的制作方法与技巧 ，学生对本章内容一定要掌握，它是制作交互 动画的基础。 教学建议课时数： 一般情况下需18课时：理论6课时，实际 操作12课时(可根据特殊情况做相应调整)。 5.1 按钮基础知识 5.1.1 按钮的介绍 1. 按钮简介按钮是人机

2、进行信息交互的基础，它对鼠标单击事件进行响应。按钮可对按钮静止、将 鼠标指针移到按钮上、按下鼠标左键3种事件作出响应。这3种事件对应着按钮的4种状态： 弹起(按钮静止)、指针经过(将鼠标指针移动到按钮上)、按下(按下按钮)、点击(定义按钮 响应区域)。这4种状态定义了按钮的4个关键帧。下面详细介绍按钮的这4种关键帧。 (1)【弹起】帧：在【弹起】帧中定义按钮的正常显示效果，也就是按钮未被鼠标单击时所显示 的效果。 (2)【指针经过】帧：定义当鼠标指针移到按钮上但不单击它时按钮的效果。一般该帧相对于【 弹起】帧应有所改变。比如：可以定义当鼠标指针移到按钮上时按钮变色或放大、缩小等， 对于文字按钮

3、，可以定义当鼠标指针移到按钮上时文字变色或改变文字的字体等。 (3)【按下】帧：定义按钮时按下所出现的效果。对于图形按钮来说，按钮被按下时一般会定义 得比未被按下时要小一些，这样，当按下按钮时，按钮会自动缩小，出现动态效果。 (4)【点击】帧：定义按钮的响应区域。在响应区域按下按钮时，系统才能响应按钮按下的事件 。该区域在工作区中是不可见的。如要定义该帧，必须保证此区域包括按钮的弹起、指针经 过和按下3种状态的区域；如不定义该帧，则系统会默认【弹起】帧状态为按钮的区域响应 。 5.1 按钮基础知识 注意：按钮虽然有4种状态，但可根据需要定义这4种帧状态，也可只定义一部分，但一些基本的 帧必须定

4、义，一般而言，【弹起】帧和【指针经过】帧必须定义。 2. 按钮的创建 (1) 创建图形按钮的步骤如下。 选择插入新建元件命令，弹出【创建新元件】对话框，按如图5.1所示设置。 图5.1 单击确定按钮进入按钮编辑区，时间轴中将出现按钮的4个状态帧，如图5.2所示。 图5.25.1 按钮基础知识 定义按钮的4个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件对象。在这 里我们利用绘图工具绘制按钮的4个帧。定义【弹起】帧：利用前面所学知识在工作区域中绘制如图5.3所示的图形。定义【指针经过】帧：用鼠标在【指针经过】帧处插入一个关键帧，此时【弹起】帧的 图形被复制到【指针经过】帧的工作区。确

5、保图形被选中，在混色器面板中进行色彩调整， 得到如图5.4所示的图形。定义【按下】帧：用鼠标在【按下】帧处插入一个关键帧，此时【指针经过】帧帧的图 形被复制到“按下”的工作区。确保图形被选中，在混色器面板中进行色彩调整，得到如图 5.5所示的图形。定义【点击】帧：用鼠标在【点击】帧处插入一个关键帧，并进行大小的调整，得到如 图5.6所示的图形。该帧主要是定义按钮的有效单击范围，在有效范围里按下按钮时，系统 才认为该事件已经发生。如果不定义该帧，则系统默认“弹起”帧为响应区域。 图5.3 图5.4 图5.5 图5.6 5.1 按钮基础知识 单击图层左上角的场景1按钮，返回场景，按钮制作完毕。 (

6、2) 创建文字按钮的步骤如下。 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.7所示。 图5.7 单击确定按钮进入按钮编辑区，时间轴中将出现按钮的4个状态帧，如图5.8 所示。 图5.85.1 按钮基础知识 定义按钮的4个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件对象。在这 里我们利用绘图工具绘制按钮的4个帧。定义【弹起】帧：利用文字工具和前面所学知识在工作区域中输入如图5.9所示的图形 。定义【指针经过】帧：用鼠标在“指针经过”帧处插入一个关键帧，此时【弹起】帧的 文字被复制到【指针经过】帧的工作区。确保文字被选中，在文字属性面板中进行色彩调整 ，得到如图5.1

7、0所示的文字。定义【按下】帧：用鼠标在【按下】帧处插入一个关键帧，此时【指针经过帧】帧的文 字被复制到“按下”的工作区。确保文字被选中，在文字属性面板中进行色彩调整，得到如 图5.11所示的文字。定义【点击】帧：用鼠标在【点击】帧处插入一个关键帧，并进行大小的调整，得到如 图5.12所示的文字。该帧主要是定义按钮的有效单击范围，在有效范围里按下按钮时，系统 才认为该事件已经发生。如果不定义该帧，则系统默认【弹起】帧为响应区域。 图5.9 图5.10 图5.11 图5.125.1 按钮基础知识 单击图层左上角的场景1按钮，返回场景，按钮制作完毕。 (3) 将按钮加入到场景中的方法：打开【库】面板

8、，在场景中选中要插入的层中的关键帧，将“ 库”中的按钮拖到场景中的舞台中即可。 (4) 预览按钮的两种方法：第一种，选择控制测试影片命令；第二种，在场景中浏览按钮 效果，选择控制启动简单按钮命令。 5.1.2 基本按钮的制作 1. 为图形按钮添加文字通过给前面制作的图形按钮添加“瞬间艺术”文字，来讲解怎样为图形按钮添加文字， 方法如下。 (1) 在场景中双击“图形按钮”，进入按钮编辑状态，如图5.13所示。 (2) 单击图层左下角的【插入图层】按钮，添加一个新的图层，如图5.14所示。 图5.13 图5.14 5.1 按钮基础知识 (3) 单击“图层2”的【弹起】帧，此时选中【弹起】帧，利用文

9、字工具和前面所学的知识在图 形上面输入如图5.15所示的文字。 (4) 在“图层2”的【指针经过】帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关 键帧命令，插入一个关键帧。此时，该帧将复制【弹起】帧的文字，将文字修改成如图 5.16所示的效果。 图5.15 图5.16 5.1 按钮基础知识 (5) 在“图层2”的【按下】帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧 命令，插入一个关键帧，此时，它将复制【指针经过】帧的文字，将该文字修改成如图 5.17所示的效果。 图5.17 (6) 单击图层左上角的场景1按钮，返回场景，按钮修改完毕。 5.1 按钮基础知识2. 使用按钮加

10、载外部影片可以通过按钮将所做的其他影片加载到当前影片中进行播放，此功能在课件制作中使用 频率非常高。在这里，我们来讲解怎样加载外部影片的方法。 (1) 选中场景中的按钮，打开【动作】面板，输入“on(press)”语句，将闪动的光标移到 “”中间。 (2) 选择【动作】面板中的“loadMovie”语句，如图5.18所示。 图5.185.1 按钮基础知识(3) 在“loadMovie()”的“()”中输入参数，如图5.19所示。图5.19“donghua”：是要加载的影片名称，注意要加载的影片名称一定要是英文或数字，不 能用中文命名，影片名字要用双引号。“1”：表示加载的动画所处的层的位置。代

11、码、函数、参数将在后面做详细介绍。(4) 关闭【动作】面板，制作完毕。 3. 为按钮添加电子邮件在工作和学习中，电子邮件的使用非常频繁，在按钮中加入电子邮件对我们取用网上信 息更为方便。其方法与按钮加载方法相同，只是要在URL框中输入E-mail地址，在添加地址前 应先加入“mailto”。在【动作】面板中输入的语句如图5.20所示。 图5.20 5.2 简单控制按钮的制作 5.2.1 案例一：简单按钮 制作一个简单按钮。 本案例主要用到的工具或命令有：选择工具、椭圆工具、元件、柔化填充边缘、文字 工具、填充浮动面板的设置等。 5.2 简单控制按钮的制作 (1) 运行Flash 8.0，新建一

12、个名为“简单按钮”文件。 (2) 单击插入新建元件命令，弹出【创建新元件】对话框，设置如图5.21所示。单击按钮，【图层】面板如图5.22所示。 图5.21 图5.22 说明：弹起是指鼠标指针没有移到按钮上时显示的状态。指针经过是指鼠标指针移到按钮上时显示的状态。按下是指在按钮上按下鼠标左键时显示的状态。点击是指鼠标指针触发按钮的范围。5.2 简单控制按钮的制作 (3) 单击并选中图层的弹起帧。 (4) 单击工具箱中的椭圆工具。将笔触颜色设置为 ，椭圆渐变填充浮动面板的设置如图 5.23所示。在工作区绘制一个圆，如图5.24所示。 图5.23 图5.24 (5) 选择刚绘制的椭圆，选择修改形状

13、柔化填充边缘命令，弹出【柔化填充边缘】对话框，设置如图5.25所示。单击按钮，得到如图5.26所示的椭圆。 图5.25 图5.26 5.2 简单控制按钮的制作 (6) 单击文字工具。在工作区中输入文字，大小、位置如图5.27所示。 (7) 在指针经过帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧命令，此 时，在指针经过帧处插入一个关键帧。 (8) 单击选择工具，选中如图5.28所示的部分，设置填充浮动面板如图5.29所示。此时，图形 效果如图5.30所示。 图5.27 图5.28 图5.29 图5.30(9) 单击【文字】工具，将文字改为如图5.31所示。将文字改为红色，如图5.3

14、2所示。 (10) 在按下帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧命令，此时，在按下帧处插入一个关键帧。 (11) 单击选择工具，选中如图5.33所示的部分，设置填充浮动面板如图5.34所示。此时，图形效果如图5.35所示。 5.2 简单控制按钮的制作 图5.31 图5.32 图5.33 图5.34 图5.35(12) 单击文字工具，将文字改为如图5.36所示。将文字改为深红色，如图 5.37所示。 (13) 在点击帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧命令，此时，在点击帧处插入一个关键帧。 (14) 单击时间轴左上角的场景1按钮，返回场景。 (15) 将

15、“库”中的“简单按钮”拖到舞台中并测试效果，如图5.38所示。将鼠标指针移到按钮上时的效果如图5.39所示。 (16) 按下鼠标指针时的效果如图5.40所示。 图5.36 图5.37 图5.38 图5.39 图5.405.2 简单控制按钮的制作 本案例制作了一简单的按钮，主要讲解了按钮的制作原理，基本流程及各帧的作用。 利用前面所学知识制作如下效果的按钮。5.2 简单控制按钮的制作 5.2.2 案例二：动画按钮弹起 指针经过 按下 制作一个动画按钮。本案例主要用到的工具与功能有：椭圆工具、文字工具、填充浮动面板的设置、创建 补间动画、Alpha值的设置、柔化填充边缘等。5.2 简单控制按钮的制作 (1) 运行Flash 8.0，新建一个名为“简单按钮”的文件。 (2) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.41所示，单击确定按钮。 图5.41 (3) 单击椭圆填充工具，将笔触颜色设置为