《Flash8.0案例实训全面培训教程Flash 8.0按钮制作(第五章)》由会员分享,可在线阅读,更多相关《Flash8.0案例实训全面培训教程Flash 8.0按钮制作(第五章)(98页珍藏版)》请在金锄头文库上搜索。
1、Flash8.0案例实训全面培训教程本书内 容 简 介 本书是根据编者多年的教学经验和学生的实际情况(学生对实际操作较感兴趣)编写的,全书精心挑选了53个案例进行详细讲解,再通过与这些案例配套的练习来巩固所学内容。本书采用实际与理论相结合的方法编写,学生可以在制作过程中学习理论,反过来理论又为实际操作奠定基础,使学生每做完一个案例就会有一种成就感,这样可大大提高学生的学习兴趣。 本书内容分为Flash 8.0基础知识、Flash 8.0图形绘制、Flash 8.0文字特效、Flash 8.0动画制作、Flash 8.0按钮制作、Flash 8.0综合制作六大部分。编者将Flash 8.0的基本
2、功能和新功能融入实例的讲解过程中,使读者可以边学边练,既能掌握软件功能,又能快速进入案例操作过程中。 本书内容实用,可作为高职高专院校及中等职业院校计算机专业教材,也可以作为网页动画设计者与爱好者的参考用书。前 言 本书是根据编者多年的教学经验和对高职高专、中等职业学校及技工学校学生实际情况(强调学生的动手能力)的了解编写的,精心挑选了53个案例进行详细讲解,再通过这些案例的配套练习来巩固所学内容。本书采用实际操作与理论分析相结合的方法,让学生在案例制作过程中学习、体会理论知识,同时扎实的理论知识又为实际操作奠定坚实的基础,使学生每做完一个案例就会有一种成就感,这样大大提高了学生的学习兴趣。
3、本书内容分为Flash 8.0基础知识、Flash 8.0图形绘制、Flash 8.0文字特效、Flash 8.0动画制作、Flash 8.0按钮制作、Flash 8.0综合制作六大部分。编者将Flash 8.0的基本功能和新功能融入实例的讲解过程中,使读者可以边学边练,既能掌握软件功能,又能快速进入案例操作过程中。本书内容丰富,可以作为网页动画设计者与爱好者及学生的工具书,通过本书可随时翻阅、查找需要的效果的制作内容。本书的每一章都有学时供老师教学和学生自学时参考,同时配有每一章的案例Flash效果文件,可通过网上下载使用(http:/ 参与本书编写工作的有伍福军、张祝强、张珈瑞、唐颖颖、罗
4、越、向隅,在此表示感谢! 本书不仅适用于高职高专及中等职业院校学生,也适于作为短期培训的案例教程,对于初学者和自学者尤为适合。第第5章章 Flash 8.0按钮制作培训内容: 5.1 按钮基础知识5.1.1 按钮的介绍5.1.2 基本按钮的制作5.2 简单控制按钮的制作5.2.1 案例一:简单按钮5.2.2 案例二:动画按钮5.2.3 案例三:“别碰我”文字制作5.2.4 案例四:跟随光标的提示5.2.5 案例五:调节音量5.3 复杂控制按钮的制作5.3.1 案例六:控制图片变化5.3.2 案例七:左右声道均衡调节5.3.3 案例八:用组件控制声音按钮5.3.4 案例九:选择乐曲播放5.3.5
5、 案例十:使用按钮载入图片 知识点: 1. 简单按钮2. 动画按钮3.“别碰我”文字制作4. 跟随光标的提示5. 调节音量6. 控制图片变化7. 左右声道均衡调节8. 用组件控制声音按钮9. 选择乐曲播放10. 使用按钮载入图片 说明: 本章主要介绍Flash 8.0按钮的制作,通过10个案例全面讲解了按钮的制作方法与技巧,学生对本章内容一定要掌握,它是制作交互动画的基础。 教学建议课时数: 一般情况下需18课时:理论6课时,实际操作12课时(可根据特殊情况做相应调整)。 5.1 按钮基础知识 5.1.1 按钮的介绍1. 按钮简介 按钮是人机进行信息交互的基础,它对鼠标单击事件进行响应。按钮可
6、对按钮静止、将鼠标指针移到按钮上、按下鼠标左键3种事件作出响应。这3种事件对应着按钮的4种状态:弹起(按钮静止)、指针经过(将鼠标指针移动到按钮上)、按下(按下按钮)、点击(定义按钮响应区域)。这4种状态定义了按钮的4个关键帧。下面详细介绍按钮的这4种关键帧。(1)【弹起】帧:在【弹起】帧中定义按钮的正常显示效果,也就是按钮未被鼠标单击时所显示的效果。(2)【指针经过】帧:定义当鼠标指针移到按钮上但不单击它时按钮的效果。一般该帧相对于【弹起】帧应有所改变。比如:可以定义当鼠标指针移到按钮上时按钮变色或放大、缩小等,对于文字按钮,可以定义当鼠标指针移到按钮上时文字变色或改变文字的字体等。(3)【
7、按下】帧:定义按钮时按下所出现的效果。对于图形按钮来说,按钮被按下时一般会定义得比未被按下时要小一些,这样,当按下按钮时,按钮会自动缩小,出现动态效果。(4)【点击】帧:定义按钮的响应区域。在响应区域按下按钮时,系统才能响应按钮按下的事件。该区域在工作区中是不可见的。如要定义该帧,必须保证此区域包括按钮的弹起、指针经过和按下3种状态的区域;如不定义该帧,则系统会默认【弹起】帧状态为按钮的区域响应。 5.1 按钮基础知识 注意:按钮虽然有4种状态,但可根据需要定义这4种帧状态,也可只定义一部分,但一些基本的帧必须定义,一般而言,【弹起】帧和【指针经过】帧必须定义。2. 按钮的创建(1) 创建图形
8、按钮的步骤如下。 选择插入新建元件命令,弹出【创建新元件】对话框,按如图5.1所示设置。 图5.1 单击确定按钮进入按钮编辑区,时间轴中将出现按钮的4个状态帧,如图5.2所示。 图5.25.1 按钮基础知识 定义按钮的4个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件对象。在这里我们利用绘图工具绘制按钮的4个帧。 定义【弹起】帧:利用前面所学知识在工作区域中绘制如图5.3所示的图形。 定义【指针经过】帧:用鼠标在【指针经过】帧处插入一个关键帧,此时【弹起】帧的图形被复制到【指针经过】帧的工作区。确保图形被选中,在混色器面板中进行色彩调整,得到如图5.4所示的图形。 定义【按下】帧:
9、用鼠标在【按下】帧处插入一个关键帧,此时【指针经过】帧帧的图形被复制到“按下”的工作区。确保图形被选中,在混色器面板中进行色彩调整,得到如图5.5所示的图形。 定义【点击】帧:用鼠标在【点击】帧处插入一个关键帧,并进行大小的调整,得到如图5.6所示的图形。该帧主要是定义按钮的有效单击范围,在有效范围里按下按钮时,系统才认为该事件已经发生。如果不定义该帧,则系统默认“弹起”帧为响应区域。 图5.3 图5.4 图5.5 图5.6 5.1 按钮基础知识 单击图层左上角的场景1按钮,返回场景,按钮制作完毕。(2) 创建文字按钮的步骤如下。 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.7
10、所示。 图5.7 单击确定按钮进入按钮编辑区,时间轴中将出现按钮的4个状态帧,如图5.8 所示。 图5.85.1 按钮基础知识 定义按钮的4个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件对象。在这里我们利用绘图工具绘制按钮的4个帧。 定义【弹起】帧:利用文字工具和前面所学知识在工作区域中输入如图5.9所示的图形。 定义【指针经过】帧:用鼠标在“指针经过”帧处插入一个关键帧,此时【弹起】帧的文字被复制到【指针经过】帧的工作区。确保文字被选中,在文字属性面板中进行色彩调整,得到如图5.10所示的文字。 定义【按下】帧:用鼠标在【按下】帧处插入一个关键帧,此时【指针经过帧】帧的文字被复
11、制到“按下”的工作区。确保文字被选中,在文字属性面板中进行色彩调整,得到如图5.11所示的文字。 定义【点击】帧:用鼠标在【点击】帧处插入一个关键帧,并进行大小的调整,得到如图5.12所示的文字。该帧主要是定义按钮的有效单击范围,在有效范围里按下按钮时,系统才认为该事件已经发生。如果不定义该帧,则系统默认【弹起】帧为响应区域。 图5.9 图5.10 图5.11 图5.125.1 按钮基础知识 单击图层左上角的场景1按钮,返回场景,按钮制作完毕。(3) 将按钮加入到场景中的方法:打开【库】面板,在场景中选中要插入的层中的关键帧,将“库”中的按钮拖到场景中的舞台中即可。(4) 预览按钮的两种方法:
12、第一种,选择控制测试影片命令;第二种,在场景中浏览按钮效果,选择控制启动简单按钮命令。5.1.2 基本按钮的制作1. 为图形按钮添加文字 通过给前面制作的图形按钮添加“瞬间艺术”文字,来讲解怎样为图形按钮添加文字,方法如下。(1) 在场景中双击“图形按钮”,进入按钮编辑状态,如图5.13所示。(2) 单击图层左下角的【插入图层】按钮,添加一个新的图层,如图5.14所示。 图5.13 图5.14 5.1 按钮基础知识 (3) 单击“图层2”的【弹起】帧,此时选中【弹起】帧,利用文字工具和前面所学的知识在图形上面输入如图5.15所示的文字。(4) 在“图层2”的【指针经过】帧上单击鼠标右键,弹出快
13、捷菜单,在快捷菜单中选择插入关键帧命令,插入一个关键帧。此时,该帧将复制【弹起】帧的文字,将文字修改成如图5.16所示的效果。 图5.15 图5.16 5.1 按钮基础知识 (5) 在“图层2”的【按下】帧上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择插入关键帧命令,插入一个关键帧,此时,它将复制【指针经过】帧的文字,将该文字修改成如图5.17所示的效果。 图5.17 (6) 单击图层左上角的场景1按钮,返回场景,按钮修改完毕。 5.1 按钮基础知识2. 使用按钮加载外部影片 可以通过按钮将所做的其他影片加载到当前影片中进行播放,此功能在课件制作中使用频率非常高。在这里,我们来讲解怎样加载外部
14、影片的方法。(1) 选中场景中的按钮,打开【动作】面板,输入“on(press)”语句,将闪动的光标移到“”中间。(2) 选择【动作】面板中的“loadMovie”语句,如图5.18所示。 图5.185.1 按钮基础知识(3) 在“loadMovie()”的“()”中输入参数,如图5.19所示。图5.19 “donghua”:是要加载的影片名称,注意要加载的影片名称一定要是英文或数字,不 能用中文命名,影片名字要用双引号。 “1”:表示加载的动画所处的层的位置。代码、函数、参数将在后面做详细介绍。 (4) 关闭【动作】面板,制作完毕。3. 为按钮添加电子邮件 在工作和学习中,电子邮件的使用非常
15、频繁,在按钮中加入电子邮件对我们取用网上信息更为方便。其方法与按钮加载方法相同,只是要在URL框中输入E-mail地址,在添加地址前应先加入“mailto”。在【动作】面板中输入的语句如图5.20所示。 图5.20 5.2 简单控制按钮的制作 5.2.1 案例一:简单按钮 制作一个简单按钮。 本案例主要用到的工具或命令有:选择工具、椭圆工具、元件、柔化填充边缘、文字工具、填充浮动面板的设置等。 5.2 简单控制按钮的制作 (1) 运行Flash 8.0,新建一个名为“简单按钮”文件。(2) 单击插入新建元件命令,弹出【创建新元件】对话框,设置如图5.21所示。单击 按钮,【图层】面板如图5.2
16、2所示。 图5.21 图5.22 说明: 弹起是指鼠标指针没有移到按钮上时显示的状态。 指针经过是指鼠标指针移到按钮上时显示的状态。 按下是指在按钮上按下鼠标左键时显示的状态。 点击是指鼠标指针触发按钮的范围。5.2 简单控制按钮的制作 (3) 单击并选中图层的弹起帧。(4) 单击工具箱中的椭圆工具。将笔触颜色设置为 ,椭圆渐变填充浮动面板的设置如图5.23所示。在工作区绘制一个圆,如图5.24所示。 图5.23 图5.24 (5) 选择刚绘制的椭圆,选择修改形状柔化填充边缘命令,弹出【柔化填充边缘】 对话框,设置如图5.25所示。单击按钮,得到如图5.26所示的椭圆。 图5.25 图5.26
17、 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.32所示。(10) 在按下帧上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择插入关键帧命令,此 时,在按下帧处插入一个关键帧。(11) 单击选
18、择工具,选中如图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) 将“库”中的“简单按钮”拖到舞台中并测试效果,如图5.38所示。将鼠标指针移到按 钮上时的效果如图5.39所示。(16) 按下鼠标指针时的效果如图
19、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所
20、示,单击 确定按钮。 图5.41 (3) 单击椭圆填充工具,将笔触颜色设置为 ,设置填充浮动面板,如图5.42所示。 在工作区绘制一个圆,如图5.43所示。 图5.42 图5.43 5.2 简单控制按钮的制作 (4) 选中该椭圆,选择单击修改形状柔化填充边缘命令,弹出【柔化填充边缘】对话框,设置如图5.44所示,效果如图5.45所示。 图5.44 图5.45 (5) 单击时间轴左上角的场景1按钮,返回场景。(6) 方法同第(3)、(4)步,制作一个“黄白渐变球”的图形元件,如图5.46所示。(7) 方法同第(3)、(4)步,制作一个“绿白渐变球”的图形元件,如图5.47所示。(8) 方法同第(
21、3)、(4)步,制作一个“粉红色白渐变球”的图形元件,如图5.48所示。(9) 选中如图5.47所示的球,选择修改形状柔化填充边缘命令,弹出【柔化填充边 缘】对话框,设置如图5.49所示,效果如图5.50所示。 图5.46 图5.4 图5. 图5.49 图5.50 5.2 简单控制按钮的制作 (10) 将图5.50中不要的部分删除,如图5.51所示。(11) 单击时间轴左上角的场景1按钮,返回场景。(12) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.52所示。单击确定按钮。(13) 将“粉红色白渐变球”拖到工作区中,调整其大小及位置,如图5.33所示。 图5.51 图5.52
22、 图5.53 (14) 在图层的第15帧处插入一个关键帧并调整大小,如图5.54所示。(15) 创建补间动画,如图5.55所示。(16)“图层1”第一帧的元件属性面板设置如图5.56所示。(17) 单击时间轴左上角的场景1按钮,返回场景。 5.2 简单控制按钮的制作 图5.54 图5.5 图5.56 (18) 选择插入新建元件命令,弹出“创建新元件”对话框,设置如图5.57所示。(19) 将“红白渐变球”图形元件放到弹起帧上,位置大小如图5.58所示。(20) 在指针经过帧上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择插入关键帧 命令,此时,将插入一个关键帧。删除指针经过帧中的所有元件,将“黄
23、白渐变 球”图形元件放到指针经过帧上,位置大小如图5.59所示。(21) 在按下帧上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择插入关键帧命 令,此时将插入一个关键帧。删除按下帧中的所有元件,将“绿白渐变球”图形 元件放到按下帧上,位置、大小如图5.60所示。 图5.57 图5.58 图5. 图5.60 5.2 简单控制按钮的制作(22) 在点击帧上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择命令将此时,插入一个关键帧。(23) 单击弹起帧,选中该帧,将“库”中的“动画”影片剪辑元件拖到工作区中,位置如图5.61所示。输入文字,如图5.62所示。(24) 单击指针经过帧,选中该帧,将“库”中的
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) 单击时间轴左上角的场景1按钮,返回场景。(27) 将“库”中的“动画按钮”拖到舞台中,测试效果,如图5.67图5.69所示。(28) 完整演示动画请观看从本书提供的网页下载的素材第5章的“简单按钮”Flash文件。 5.2 简单控制按钮的制作 图5.67 图5.68 图5.69 本案例主要制作了一个动
25、态按钮,主要讲解了动态按钮制作的方法和流程,在制作过程中,可以像前面制作动画一样,创建新图层、引导线和输入脚本。 5.2 简单控制按钮的制作 根据前面所学知识制作如下效果的按钮。提示:在制作如下效果的按钮时,要特别注意在对绘制的矩形进行“柔化填充边缘”时,要进行两次,第一次选择【插入】单选按钮,第二次选择【扩展】单选按钮。完整的演示动画请观看从本书提供的网页下载的素材第5章的“简单按钮1”Flash文件。 弹起 指针经过 5.2 简单控制按钮的制作 5.2.3 案例三:“别碰我”文字制作 弹起 指针经过 制作一个当鼠标指针移到按钮上时会弹出“别碰我哦!”文字的按钮。 本案例主要用到的工具或命令
26、有:矩形工具、文字工具、元件的创建、Alpha值的设置、帧动画的创建等。 5.2 简单控制按钮的制作 (1) 运行Flash 8.0,新建一个名为“别碰我”文件。(2) 设置背景色为“纯黑色”。(3) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.70所示。单击 确定按钮。(4) 单击工具箱中的矩形工具,填充浮动面板的设置如图5.71所示。在工作区绘制一个矩 形,如图5.72所示。再绘制一个矩形,如图5.73所示。 图5.70 图5.71 图5.72 图5.73 (5) 单击工具箱中的颜料桶工具,对图5.73进行填充,效果如图5.74所示。(6) 单击时间轴左上角的场景1按钮,返
27、回场景。 5.2 简单控制按钮的制作 图5.74(7) 选择文件导入导入到库命令,弹出【导入到库】对话框,在对话框中选择图片。单 击打开按钮,导入图片。(8) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.75所示。单击确定 按钮。(9) 将刚导入的图片拖到工作区中,在图片上单击鼠标右键,弹出快捷菜单,选择分离命令,将 图片分离,如图5.76所示。 图5.75 图5.765.2 简单控制按钮的制作 (10) 单击工具箱中的套索工具,在选项中选择 项,将猫的白色部分选中,并删除,效果如图5.77所示。(11) 单击时间轴左上角的场景1按钮,返回场景。 图5.775.2 简单控制按钮
28、的制作(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 5.2 简单控制按钮的制作(16) 单击时间轴左上角的场景1按钮,返回场景。(17) 选择插入
29、新建元件命令,弹出【创建新元件】对话框,设置如图5.82所示。单击确定按钮。 图5.82 (18) 将“库”中的“按钮模型”图形元件拖到工作区的中央位置,再将“库”中的“动画” 影片剪辑元件拖到工作区的中央位置,如图5.83所示。(19) 分别在指针经过、按下、点击帧处单击鼠标右键,弹出快捷菜单,选择命令,此 时即分别在、帧处插入关键帧。(20) 在指针经过帧上单击,将该帧中的所有元件移到适当的位置。单击文字工具,在工作 区中输入文字,文字的大小、颜色、位置如图5.84所示。 图5.83 图5.84 5.2 简单控制按钮的制作(21) 单击时间轴左上角的场景1按钮,返回场景。(22) 将“库”
30、中的“按钮”拖到舞台中进行测试,效果如图5.83和图5.84所示。 本案例通过讲解制作按钮的基本流程,制作了一个动态按钮。在制作过程中要明白一个道理,即在按钮中可以导入动画、声音等。 根据前面所学知识制作如下效果的按钮。 弹起 指针经过 5.2 简单控制按钮的制作5.2.4 案例四:跟随光标的提示 当鼠标指针移动到图片上时,出现文字提示。 本案例主要用到的工具或命令有:矩形工具、图片的导入、动作脚本、文字工具、属性面板的设置、元件的创建等。 5.2 简单控制按钮的制作(1) 运行Flash 8.0,新建一个名为“跟随光标的提示”的文件。(2) 选择文件导入导入到库命令,弹出【导入到库】对话框,
31、在对话框中选择图选 择片。单击打开按钮导入图片,如图5.85所示。 图5.85(3) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.86所示。单 击确定按钮。(4) 将“库”中的“鸡.jpg”图片拖到工作区,调整位置、大小如图5.87所示。 5.2 简单控制按钮的制作 图5.86 图5.87 (5) 单击工具箱中的矩形工具,并设置填充浮动面板如图5.88所示。设置笔触颜色 为 ,在工作区中绘制一个矩形,如图5.89所示。 图5.88 图5.89 5.2 简单控制按钮的制作(6) 选中绘制的“矩形”,将“矩形”转换为“图形”元件,设置属性面板如图5.90所示,效果如图5.91所示。
32、 图5.90 图5.91 (7) 方法同第(3)第(6)步,分别制作如图5.92所示的影片剪辑。(8) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.93所示。单击 确定按钮。(9) 单击工具箱中的文字工具,在工作区中拖出一文字框,属性面板的设置如图5.94所示。 图5.925.2 简单控制按钮的制作图5.93图5.94 (10) 单击时间轴左上角的场景1按钮,返回场景。(11) 将“库”中的所有影片剪辑拖到舞台中,并输入如图5.95所示的文字。 图5.95 5.2 简单控制按钮的制作(12) 将“库”中的“信息框”拖到舞台中,设置【属性】面板如图5.96所示。(13) 在舞台中
33、的第一个影片剪辑元件上单击鼠标右键,选择动作命令,弹出“动作”脚本对话框,在对话框中输入如图5.97所示的脚本代码。 图5.96图5.975.2 简单控制按钮的制作(14) 方法同第(13)步,语法相同,只要将如图5.97所示的用红色矩形框框出来的文字改成相应的提示文字即可。(15) 最终效果如图5.98所示,演示效果请观看网上下载的素材第5章的“跟随光标的提示”Flash文件。 图5.985.2 简单控制按钮的制作 本案例主要制作了一个跟随光标提示的效果,在输入语言时要特别细心,只要有一点输入不对,效果就无法实现。 根据前面所学知识制作如下效果,完整的动画演示请观看从网上下载的素材第5章的“
34、跟随光标的提示1”Flash文件。 5.2 简单控制按钮的制作5.2.5 案例五:调节音量 制作一个利用Flash 8.0自带按钮来控制音乐音量的调节器。 本案例主要用到的工具或命令有:文字工具、线条工具、颜料桶工具、动作脚本、矩形工具,声音的处理等。 5.2 简单控制按钮的制作(1) 运行Flash 8.0,新建一个名为“调节音量”的文件。(2) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.99所示。单击确定按钮。(3) 单击工具箱中的【线条】工具,在工作区绘制如图5.100所示的图形。 图5.99 图5.100 (4) 单击工具箱中的颜料桶工具,设置填充浮动面板如图5.10
35、1所示。并对绘制的图形进行 填充,如图5.102所示。(5) 单击时间轴左上角的场景1按钮,返回场景。 5.2 简单控制按钮的制作图5.101 图5.102 (6) 选择文件导入导入到库命令,弹出【导入到库】对话框,在对话框中选 择要导入的音乐和图片。单击打开按钮,导入的音乐和图片如图5.103所示。(7) 在“库”中的“音乐”文件上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择 属性命令,弹出【声音属性】对话框,设置如图5.104所示。单击确定按钮。 5.2 简单控制按钮的制作图5.103 图5.104 5.2 简单控制按钮的制作(8) 在“库”中的“音乐”文件上单击鼠标右键,弹出快捷菜单,在
36、快捷菜单中选择链接命令,弹出“链接属性”对话框,设置如图5.105所示。单击确定按钮。 图5.105(9) 将“库”中的“底板”图形元件拖到舞台中,并调整好位置,如图5.106所示。(10) 单击工具箱中的文字工具,在舞台中输入文字,并设置颜色,如图5.107所示。 图5.106 图5.107 5.2 简单控制按钮的制作(11) 在“图层1”的第1帧处单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出“动作-帧”脚本输入框,在脚本框中输入如图5.108所示的代码。输入完代码后,单击对话框右上角的 关闭按钮。 图5.108(12) 将“库”中的“地球2.jpg”文件拖到舞台中,并进行调整
37、,如图5.109所示。 图5.1095.2 简单控制按钮的制作(13) 选择窗口公用库按钮命令,此时将弹出“公用库”对话框,如图5.110所示。 图5.110(14) 在公用库中选中如图5.111所示的元件,将其拖到舞台中,位置、大小如图5.112所示。 图5.111 图5.112 5.2 简单控制按钮的制作(15) 在刚拖入的舞台中的按钮元件上双击,进入影片剪辑编辑状态,在“Layer 4”图层的第1帧处单击鼠标右键,在弹出的快捷菜单中选择动作命令,弹出“动作-帧”脚本对话框,将脚本中最后一句修改成如图5.113所示红色框框住的语句,然后单击 按钮关闭对话框。 图5.113 5.2 简单控制
38、按钮的制作(16) 将按钮上的“GIN”改为“音量调节”。(17) 单击时间轴左上角的场景1按钮,返回场景。(18) 最终效果如图5.114所示。完整演示效果请观看从网上下载的素材第5章的“调节音量”Flash文件。 图5.114 例主要利用Flash 8.0自带的按钮,通过修改来制作音量调节按钮。在制作过程中要特别注意脚本的修改原理。 5.2 简单控制按钮的制作 根据前面所学知识制作如下效果,完整演示请观看从网上下载的素材第5章的“音量调节1”Flash文件。5.3 复杂控制按钮的制作 5.3.1 案例六:控制图片变化 制作一个通过按钮来控制图片的缩放、移动、旋转的动画。本案例主要用到的工具
39、或命令有:椭圆工具、文字工具、图片的导入、动作脚本等。 5.3 复杂控制按钮的制作 (1) 运行Flash 8.0,新建一个名为“控制图片变化”文件。(2) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.115所示。单击确定按钮。 图5.115(3) 单击工具箱中的线条工具,在工作区绘制如图5.116所示图形。(4) 单击工具箱中的颜料桶工具,通过设置填充浮动面板,填充出如图5.117所示的图形。 图5.116 图5.117 5.3 复杂控制按钮的制作 (5) 单击工具箱中的线条工具,在工作区绘制如图5.118所示的图形。(6) 单击工具箱中的颜料桶工具,填充出如图5.119所示
40、的图形。(7) 单击时间轴左上角的场景1按钮,返回场景。 图5.118 图5.119 (8) 根据前面所学知识制作一个如图5.120所示的按钮。图5.120 5.3 复杂控制按钮的制作 (9) 选择文件导入导入到库命令,弹出【导入到库】对话框,在对话框中选择图片。单击打开按钮,导入图片。(10) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.121所示。单击确定按钮。(11) 将导入的图片拖到工作区,并将图片分离,将白色部分删除,如图5.122所示。(12) 单击时间轴左上角的场景1按钮,返回场景。 图5.121 图5.122(13) 将“库”中的“底板”图形元件拖到舞台中,再将
41、“库”中的“按钮”拖到舞台中,调整 好大小和形状,并复制5个,调整它们之间的位置,如图5.123所示。(14) 将“库”中的“mao_mc”拖到舞台中,位置、大小如图5.124所示。(15)“mao_mc”的属性面板设置如图5.125所示。 5.3 复杂控制按钮的制作 图5.123 图5.124 图5.125 (16) 单击工具箱中的文字工具,输入文字如图5.126所示。图5.126 5.3 复杂控制按钮的制作 (17) 在“图片放大”按钮上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出“动作-帧”对话框。在对话框中输入如图5.127所示的代码。(18) 方法同上,分别在“图片缩小
42、”、“逆时旋转”、“顺时旋转”、“向上移动”、“向下移动”按钮的脚本对话框中输入如图5.128图5.132所示的代码。 图5.127 图5.128 图5.129 图5.130 图5.131 图5.132 5.3 复杂控制按钮的制作 (19) 最终效果如图5.133所示。图5.133(20) 完整动画请观看从网上下载的素材第5章的“控制图片变化”Flash文件。 本案例主要介绍了动作脚本的编辑过程,通过本案例的学习,读者应该能够举一反三制作出不同的动画效果。每行脚本的具体含义要慢慢体会、理解。 5.3 复杂控制按钮的制作 根据前面所学知识制作如下效果,完整动画演示请观看从网上下载的素材第5章的“
43、控制图片变化2”Flash文件。5.3 复杂控制按钮的制作 5.3.2 案例七:左右声道均衡调节制作一个能控制左右声道的按钮。 本案例主要用到的工具或命令有:矩形工具、椭圆工具、线条工具、文字工具、颜料桶工具,动作脚本、图片处理等。 5.3 复杂控制按钮的制作 (1) 运行Flash 8.0,新建一个名为“调节音量”的文件。(2) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.134所示。单击确定按钮。(3) 利用工具箱中的线条工具、矩形工具、椭圆工具,绘制如图5.135所示的图形。 图5.134 图5.135(4) 单击工具箱中的颜料桶工具,填充浮动面板设置如图5.136所示。
44、(5) 对图形进行填充,效果如图5.137所示。(6) 单击时间轴左上角的场景1按钮,返回场景。 5.3 复杂控制按钮的制作 图5.136 图5.137(7) 选择文件导入导入库命令,弹出【导入到库】对话框,在对话框中选择要导 入的音乐和图片。单击打开按钮,导入的音乐和图片如图5.138所示。(8) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.139所示。单击 确定按钮。 图5.138 图5.139 5.3 复杂控制按钮的制作 (9) 利用前面所学知识,制作一个图片渐变的效果,将导入到库中的3张图片分别放在“图层1”的第1、第5、第10帧处。此时,创建一个帧动画,图层效果如图5
45、.140所示,最终效果如图5.141所示。(10) 单击时间轴左上角的场景1按钮,返回场景。 图5.140 图5.141(11) 在库中的“音乐”文件上单 击鼠标右键,弹出快捷菜单, 在快捷菜单中选择属性命 【声音属性】对话框,设置如 图5.142所示。单击确定按 钮。 图5.142 5.3 复杂控制按钮的制作 12) 在库中的“音乐”文件上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择属性命令,弹出【链接属性】对话框,设置如图5.143所示。单击确定按钮。 图5.143(13) 将库中的“底板”元件和“图片影片”影片剪辑拖到舞台中,并调整好大小、位置,如图 5.144所示。(14) 单击工具箱
46、中的文字工具,在舞台中输入文字,并设置其颜色、大小、位置,如图5.145 所示。 图5.144 图5.145 5.3 复杂控制按钮的制作 (15) 在“图层1”的第1帧处单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出动作脚本输入框,在脚本框中输入如图5.146所示的代码。输入完代码后,单击对话框右上角的 关闭按钮。 图5.146(16) 选择窗口公用库按钮命令,此时将弹出【库】面板,如图5.147所示。(17) 在公用库中选中如图5.148所示的元件,将其拖到舞台中,位置、大小如图5.149所示。 5.3 复杂控制按钮的制作 图5.147 图5.148 图5.149 (18) 在刚
47、拖入到舞台中的按钮元件上双击,进入影片剪辑编辑状态,在“Layer 4”图层的第 1帧处单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出“动作-帧” 脚本对话框,将脚本中最后一句修改成如图5.150所示的红色框框住的语句。单击对话框 右上角的 关闭按钮。 5.3 复杂控制按钮的制作 图5.150(19) 单击时间轴左上角的场景1按钮,返回场景。(20) 最终效果如图5.151所示。完整演示效果请观看从网上下载的素材第5章的“左右声道均衡 调节”Flash文件。 图5.1515.3 复杂控制按钮的制作 本案例制作了一个“左右声道均衡调节”的按钮,在制作过程中输入动作代码时要特别小心。
48、根据案例六与案例七所学知识,制作如下控制按钮效果。完整的演示效果请观看从网上下载的素材第5章的“左右声道均衡调节1”Flash文件。 5.3 复杂控制按钮的制作 5.3.3 案例八:用组件控制声音按钮 制作一个通过选择不同的按钮,分别播放不同歌曲的Flash动画。 本案例主要用到的工具或命令有:线条工具、文字工具、矩形工具、动作脚本、组件检查器、图片处理、元件制作等。 5.3 复杂控制按钮的制作 (1) 运行Flash 8.0,新建一个名为“用组件控制声音按钮”的文件。(2) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.152所示。单击按钮。(3) 利用工具箱中的线条工具、矩形
49、工具、椭圆工具,绘制如图5.153所示的图形。 图5.152 图5.153(4) 单击工具箱中的颜料桶工具,并设置填充浮动面板为如图5.154所示。(5) 对图形进行填充,效果如图5.155所示。 5.3 复杂控制按钮的制作 图5.154 图5.155 (6) 单击时间轴左上角的场景1按钮,返回场景。(7) 选择文件导入导入到库命令,弹出【导入到库】对话框,在对话框中选择要 导入的图片。单击打开按钮,导入图片,如图5.156所示。(8) 利用前面所学的知识制作如图5.157所示的按钮。 图5.156 图5.157 5.3 复杂控制按钮的制作 (9) 将库中的“底板”图形元件、图片、按钮依次拖到
50、舞台中,并调整它们的大小和位置,如图5.158所示。(10) 选择窗口组件命令,弹出组件浮动面板,将选中的组件拖到舞台中,如图5.159所示。(11) 组件在舞台中的位置、大小如图5.160所示。 图5.158 图5.159 图5.160 (12) 选中拖到舞台中的组件,选择窗口组件检查器命令,弹出组件检查器浮动面板。 浮动面板的设置如图5.161所示;属性面板的设置如图5.162所示。(13) 在舞台中的“春之声圆舞曲”按钮上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择 动作命令,随后将弹出“动作-帧”脚本对话框,在对话框中输入如图5.163所示的代码。(14) 其他按钮代码的输入同图5.1
51、63一样,只要将红色框框住的部分改为相应的歌曲名称即可。(15) 最终效果如图5.164所示,完整演示效果请观看从网上下载素材第5章的“用组件控制声 音按钮”Flash文件。 5.3 复杂控制按钮的制作 图5.161 图5.162 图5.163图5.1645.3 复杂控制按钮的制作 本案例主要使用Flash 8.0自带的组件来制作选择音乐和控制音量效果的Flash动画。在制作过程中要特别注意,将播放组件拖到舞台中后,一定要设置组件的属性面板,否则就无法播放声音。 根据前面所学知识制作如下效果,完整动画演示请观看从网上下载的素材第5章的“用组件控制声音按钮1”Flash文件。5.3 复杂控制按钮
52、的制作 5.3.4 案例九:选择乐曲播放 制作一个可以选择音乐播放的效果。 本案例主要用到的工具或命令有:文字工具、组件的使用、矩形工具、分离、动作脚本、声音的处理、图片的处理。5.3 复杂控制按钮的制作 (1) 运行Flash 8.0,新建一个名为“选择乐曲播放”的文件。(2) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.165所示。单击 确定按钮。(3) 利用工具箱中的线条工具、矩形工具、椭圆工具,绘制如图5.166所示的图形。(4) 利用工具箱中的颜料桶工具和通过设置填充浮动面板,对所绘制的图形进行填充,填充 好的效果如图5.167所示。 图5.165 图5.166 图5
53、.167 (5) 选择文件导入导入库命令,弹出【导入到库】对话框,在对话框中选择要导入 的音乐和图片。单击按钮,导入的音乐和图片如图5.168所示。 5.3 复杂控制按钮的制作 图5.168(6) 将导入的图片拖到工作区,调整大 小,位置效果如图5.169所示。(7) 单击时间轴左上角的场景1按钮,返 回场景。(8) 将库中的“底板”图形元件拖到舞台 中,并输入文字,然后放到适当的位 置,如图5.170所示。 图5.169 图5.170 5.3 复杂控制按钮的制作 (9) 选择窗口公用库按钮命令,此时将弹出【库】面板,如图5.171所示。(10) 在库中选中如图5.172所示的元件,将其拖到舞
54、台中,位置、大小如图5.173所示。 图5.171 图5.172 图5.173 (11) 在库中的“音乐”文件上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择属性 命令,弹出【声音属性】对话框,设置如图5.174所示。单击确定按钮。(12) 在“库”中的“音乐”文件上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择 链接命令,弹出【链接属性】对话框,设置如图5.175所示。单击确定按钮。 5.3 复杂控制按钮的制作 图5.174 图5.175 (13) 在“图层1”的第1帧处单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令, 弹出“动作-帧”脚本输入框,在脚本框中输入如图5.176所示的代码。输
55、入完代码后,单 击对话框右上角的 关闭按钮。 5.3 复杂控制按钮的制作 图5.176(14) 双击舞台中的如图5.177所示的组件,进入组件编辑状态,在“Layer 4”层的第1帧处, 单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出“动作-帧”脚本对 话框,将最后一句改为如图5.178所示的红色框框住的语句。(15) 单击时间轴左上角的场景1按钮,返回场景。(16) 双击舞台中的如图5.179所示的组件,进入组件编辑状态,在“Layer 4”层的第1帧处, 单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出“动作-帧”脚本对 话框,将最后一句改为如图5.180所示的红色框
56、框住的语句。5.3 复杂控制按钮的制作 图5.177 图5.178 图5.179 图5.180 5.3 复杂控制按钮的制作 (17) 在“图层1”的第2帧处单击鼠标右键,弹出快捷菜单,在快捷菜单中选择插入关键帧命令,此时,插入一个关键帧。在关键帧上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出“动作-帧”脚本对话框,在“动作-帧”脚本对话框中输入如图5.181所示的语句。 图5.181(18) 单击“动作”脚本对话框右上角的 ,关闭对话框。(19) 单击时间轴左下角的插入图层按钮,此时将插入一个新的图层。(20) 单击工具箱中的文字工具,在舞台中拖出一个框来,大小、位置如图5.18
57、2所示。(21) 文字属性面板的设置如图5.183所示。 5.3 复杂控制按钮的制作 图5.182 图5.183 (22) 利用前面所学的知识制作如图5.184所示的按钮。(23) 在“图层1”的第3帧处单击鼠标右键,弹出快捷菜单,在快捷菜单中选择插入关键 帧命令,此时将插入一个关键帧,将舞台中第3帧不需要的元件删除,再输入需要的文 字,如图5.185所示。(24) 将库中的音乐按钮拖到舞台中,并调整好大小、位置,如图5.186所示。 图5.184 图5.185 图5.186 5.3 复杂控制按钮的制作 (25) 在舞台中的“春之声圆舞曲”按钮上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作
58、命令,随后将弹出“动作-按钮”脚本对话框,输入如图5.187所示的语句。 图5.187 (26) 其他歌曲按钮的代码输入方法与此相同,只要将如图5.187所示的用红色框框住的文字改成 相应的歌曲名字即可。(27) 利用前面所学的知识,制作一个“选择乐曲按钮”。(28) 单击“图层2”。将库中的“选择乐曲按钮”拖到舞台中,位置如图5.188所示。(29) 在选择乐曲按钮上单击鼠标右键,弹出快捷菜单,在快捷菜单中选择动作命令,弹出 “动作-按钮”脚本对话框,在“脚本”对话框中输入如图5.189所示的代码,单击“动作- 按钮”脚本对话框右上角的 ,关闭对话框。 5.3 复杂控制按钮的制作 图5.18
59、8 图5.189 (30) 进行测试,效果如图5.190所示,单击选择乐曲按钮,效果如图5.191所示。 图5.190 图5.191 5.3 复杂控制按钮的制作 本案例主要制作了一个乐曲选择播放按钮的效果,制作过程中,在输入动作脚本时要特别细心,因为很容易出错。 根据前面所学的知识制作如下效果,完整演示动画请观看从网上下载的素材第5章的“选择乐曲播放”Flash文件。 5.3 复杂控制按钮的制作 5.3.5 案例十:使用按钮载入图片制作一个使用按钮载入图片的Flash动画。 本案例主要用到的工具或命令有:矩形工具、线条工具、椭圆工具、动作脚本、浮动面板的设置、元件符号的创建等。 5.3 复杂控
60、制按钮的制作 (1) 运行Flash 8.0,新建一个名为“使用按钮载入图片”的文件。(2) 选择插入新建元件命令,弹出【创建新元件】对话框,设置如图5.192所示。 单击确定按钮。(3) 利用工具箱中的线条工具、矩形工具、椭圆工具,绘制如图5.193所示的图形。 图5.192 图5.193 (4) 利用工具箱中的颜料桶工具,并设置填充浮动面板,对所绘制的图形进行填充, 填充好后的效果如图5.194所示。(5) 单击时间轴左上角的场景1按钮,返回场景。(6) 利用前面所学的知识制作如图5.195所示的两个按钮。 5.3 复杂控制按钮的制作 图5.194 图5.195(7) 将库中的“底板”图形
61、元件和两个按钮拖到舞台中,调整好位置,如图5.196所示。图5.196(8)“下一张”按钮的属性面板设置如图5.197所示,“上一张”按钮的属性面板设置如图5.198所示。 图5.197 图5.1985.3 复杂控制按钮的制作 (9) 单击工具箱中的文字工具,在舞台中拖出一个框,文字属性面板的设置如图5.199所示。 图5.199 (10) 利用前面所学的知识,插入一个“图 层2”,在“图层2”的第1帧处单击 鼠标右键,弹出快捷菜单,在快捷 菜单中选择动作命令,弹出“动 作”脚本对话框,在该对话框中输 入如图5.200所示的代码。 图5.2005.3 复杂控制按钮的制作 (11) 最终效果如图5.201所示。完整动画演示效果请观看从网上下载的素材第5章的“使用按钮载入图片”Flash文件。 图5.201 本案例主要制作了一个使用按钮控制图片载入的效果,在制作过程中,要特别注意文件和图片应保存在同一个文件夹中,否则在运行时就会找不到图片。 5.3 复杂控制按钮的制作 根据前面所学知识制作如下效果。完整动画演示效果请观看从网上下载的素材第5章的“使用按钮载入图片1”Flash文件。