《flash8动画设计实例教程》第六

机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》目标技能了解按钮元件时间轴的4种状态熟练掌握自建按钮元件的制作方法能够利用按钮元件制作交互动画熟悉按钮库中的按钮元件，能够熟练操作按钮库了解Flash中的声音类型能够熟练地导入声音文件，能够编辑声音文件第6章按钮制作与声音设置机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》本章目录6.1自建按钮6.2利用按钮库制作按纽6.3Flash中声音的控制实例机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》•本章重点：按钮元件制作及如何导入声音文件•本章难点：创建动态按钮和音效动画制作机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.1自建按钮按钮元件可以改变动画的播放顺序，控制动画的播放时间和播放速度，并可以随时调用电影片段和控制它的属性，按钮是交互动画中的常用对象。按钮元件的四种状态是：弹起状态：鼠标和按钮不发生接触，按钮处于一般状态。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》指针经过状态：鼠标经过按钮但没有按下时的状态。按下状态：在按钮按下鼠标时的状态。点击状态：此状态定义响应鼠标事件的有效区域范围，且此区域不会显示在影片中。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.1.1绘制按钮创建按钮元件的方式有以下几种：1）选择菜单栏中的“插入”“新建元件”命令，直接新建一个按钮元件，然后进入按钮元件的编辑模式，对按钮的每种状态进行编辑；2）在舞台上画一个任意形状的图形，然后选中它，单击鼠标右键，从弹出的快捷菜单中选择【转换为元件…】命令，将它转换为按钮元件，再进入按钮元件编辑模式编辑按钮；机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》3）把图形元件或影片剪辑元件转换为按钮元件。选中图形元件或影片剪辑元件，单击鼠标右键，从弹出的快捷菜单中选择【转换为元件…】命令，在打开的“转换为元件”对话框中，将类型修改为按钮，就将其转换为按钮元件了。制作动画：绘制按钮步骤：1）打开Flash8，新建一个Flash文档，设置影片尺寸为“200px×200px”,背景颜色为“白机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》色”，帧频为“12”。2）选择“插入”“新建元件”命令，打开“创建新元件”对话框，名称框设为“按钮元件”，类型为“按钮”，如图示。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》3）单击“确定”，进入按钮元件的编辑模式。4）在按钮元件编辑模式下，将当前图层名称修改为按钮外观，单击第1帧（弹起），选择工具箱中“椭圆”工具按钮，设置笔触颜色为无，填充色为“红色”。按住Shift键，在场景编辑区画一个无边框的圆，，调整圆的位置，使圆心与中心点对齐。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》5）单击插入图层按钮，新建一个图层，重新命名为文本。6）单击文本图层的第1帧，选择工具箱中的文本工具按钮，设置填充色为黑色。在场景中绘制一个文本框，在文本框中输入文字——弹起，，调整文字位置，将它置于圆上。7）右键单击按钮外观图层的第2帧（指针经过），从弹出的快捷菜单中选择【插入关键帧】命令。设置工具箱中的填充色为绿色，使用工具箱中的颜料桶工具按钮，将图形的填充色改为绿色。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》右键单击文本图层的第2帧，从弹出的快捷菜单中选择【插入关键帧】命令，双击文本框，在文本框编辑模式下，修改文本框中的文字为——经过。8）右键单击按钮外观图层的第3帧（按下），从弹出的快捷菜单中选择【插入关键帧】命令。设置工具箱中的填充色为蓝色，使用工具箱中颜料桶工具按钮，将图形的填充色改为蓝色。右键单击文本图层的第3帧，从弹出的快捷菜单中选择【插入关键帧】命令，双击文本框，在文本框编辑模式下，修改文本框中的文字为——按下。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》9）右键单击按钮外观图层的第四帧（点击），从弹出的快捷菜单中选择【插入关键帧】命令，使用工具箱中的椭圆工具按钮，重新绘制一个无边框的黄色的圆，将它盖住蓝色的圆，作为按钮的有效点击区。10）单击返回场景按钮，回到场景编辑模式。选择菜单栏“窗口”“库”命令，打开库面板，会看到将刚才制作的按钮元件已经添加到库中。11）拖到按钮元件到舞台，创建一个按钮元件实例。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》12）选择菜单栏“控制”“启用简单按钮”命令，就可以在编辑区中测试按钮元件的效果，也可以按【Ctrl】+【Enter】键预览动画效果。13）选择菜单栏“文件”“保存文件”命令，将文件命名为“绘制按钮.fla”。14）选择菜单栏“文件”“发布”命令，生成“绘制按钮.swf”。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.1.2创建动态按钮为了增加按钮的动感和交互性，在按钮的制作过程中还可以为按钮元件不同的帧添加简单动画或者声音，制作动态按钮。制作动画：“飞舞的蝴蝶”动态按钮。1）打开上节制作的“绘制按钮.fla”文件。2）选择菜单栏“窗口”“库”命令，打开“库”面板。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》单击“库”面板下方的新建元件图标按钮，在弹出的“创建新元件”对话框中，设置名称框为蝴蝶，类型为影片剪辑。3）在蝴蝶影片剪辑的编辑模式，选择菜单栏“文件”“导入”命令，导入一张蝴蝶图片，调整图片至适当大小，调整图片位置到中心点的左侧，双击图层１名称框，修改该图层名称为蝴蝶。4）右键单击第30帧，从弹出的快捷菜单中选择【插入关键帧】命令。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》5）右键单击第1帧，从弹出的快捷菜单中选择【创建补间动画】命令。6）在蝴蝶图层名称框上单击鼠标右键，从弹出的快捷菜单中选择【添加引导层】命令。7）选择工具箱中的铅笔工具，在引导层第１帧处绘制蝴蝶运转的轨迹，然后再移动蝴蝶图层中第1帧中的蝴蝶到所绘制轨迹的起点处，移动第30帧中的蝴蝶到所绘制的终点处。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》8）单击编辑元件图标，在弹出的选项中选择“按钮元件”选项。9）在按钮元件编辑区，选择插入图层按钮，在文本图层的上面，新建一个图层，将该图层命名为蝴蝶飞。10）在蝴蝶飞图层的第3帧（按下），单击鼠标右键，选择【插入关键帧】命令。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》11）选择菜单栏“窗口”“库”命令，打开“库”面板，将蝴蝶影片剪辑拖入到第3帧（按下）中。12）单击返回场景按钮，回到场景编辑模式。13）在按钮元件中做了添加蝴蝶影片剪辑的改动，这种改动会自动对场景中的按钮元件实例进行更新，所以返回场景后，不用再将库中改动后的按钮元件添加到场景中。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》14）按【Ctrl】+【Enter】键预览动画效果。15）选择菜单栏“文件”“保存文件”命令，将文件命名为“飞舞的蝴蝶.fla”。16）选择菜单栏“文件”“发布命令”，生成“飞舞的蝴蝶.swf”。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.2利用按钮库制作按钮6.2.1介绍按钮库Flash自带了一个按钮库，在这个按钮库中有许多样式精美的按钮。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.2.2添加和修改按钮库如果要将自己制作的按钮、图片或影片元件放到公用库中，也就是说，要在“公用库”中添加素材，则需要打开Flash8的库文件夹，在库文件夹中进行添加。一般情况下，库文件夹的路径是：c:\ProgramFiles\Macromedia\Flash8\zh_cn\Configuration\Libraries机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.3Flash中声音的控制实例6.3.1介绍Flash中的声音类型按钮元件可以改变动画的播放顺序，控制动画的播放时间和播放速度，并可以随时调用电影片段和控制它的属性，按钮是交互动画中的常用对象。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》将上节中制作的“按钮.fla”文件添加到公用库中。步骤为：1）打开“绘制按钮.fla”文件。2）选择菜单栏“文件”“保存”命令，将该文件保存到\ProgramFiles\Macromedia\Flash8\zh_cn\Configuration\Libraries文件夹。3）打开Libraries文件夹。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》4）单击菜单栏“窗口”“公用库”命令，在弹出的下级菜单中增加了一个“绘制按钮”选项。5）单击“绘制按钮”选项，就可以像使用公用库中的其它按钮一样，使用该按钮。6）打开的“库-绘制按钮”窗口，直接将其拖入场景使用。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.3Flash中声音的控制实例6.3.1介绍flash中的声音类型Flash8中声音类型有两种：事件声音和数据流声音。在Flash8中，可导入的声音文件格式有两类：MP3：MP3具有压缩的高效性，能使小文件产生高质量的音频效果，跨平台性能好。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》WAV：是默认的声音文件，导入的WAV文件既可以是单声道的，也可以是双声道的，该类声音文件支持不同的采样率和位分辨率。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.3.2导入声音导入一个外部声音文件到库中步骤：打开Flash8，新建一个Flash文档。1）选择菜单栏“文件”“导入”“导入到库“命令，打开“导入到库”对话框。2）选择声音文件，单击“打开”，就将声音文件导入到库中了。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》3）选择菜单栏“窗口”“库“命令，打开“库”面板，会看到刚才导入的声音文件。4）单击波形右上方的按钮，试听一下效果。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业机械工业出版社《Flash8动画设计实例教程》6.3.3声音的编辑在“效果”下拉列表框中，可以设置音频效果：无：不使用任何效果，选择此项可删除以前所设置的效果。左声道：只有左边的声道才会有音效。右声道：只有右边的声道才会有音效。从左到右淡出：音效会从左边的声道转移到右边的声道。从右到左淡出：音效会从右边的声