《flash8动画设计实例教程》第六章课件.ppt

1、 本章目录本章目录6.1 6.1 自建按钮自建按钮6.2 6.2 利用按钮库制作按纽利用按钮库制作按纽6.3 Flash6.3 Flash中声音的控制实例中声音的控制实例 本章重点：按钮元件制作及如何导入声音文件 本章难点：创建动态按钮和音效动画制作6.1 自建按钮自建按钮按钮元件可以改变动画的播放顺序，控制动画的播放时间和播放速度，并可以随时调用电影片段和控制它的属性，按钮是交互动画中的常用对象。按钮元件的四种状态是：弹起状态：鼠标和按钮不发生接触，按钮处于一般状态。指针经过状态：鼠标经过按钮但没有按下时的状态。按下状态：在按钮按下鼠标时的状态。点击状态：此状态定义响应鼠标事件的有效区域范围

2、，且此区域不会显示在影片中。6.1.1 6.1.1 绘制按钮绘制按钮创建按钮元件的方式有以下几种：创建按钮元件的方式有以下几种：1）选择菜单栏中的）选择菜单栏中的“插入插入”“新建元件新建元件”命令，直接新建一个按钮命令，直接新建一个按钮元件，然后进入按钮元件的编辑模式，对按钮的每种状态进行编辑；元件，然后进入按钮元件的编辑模式，对按钮的每种状态进行编辑；2）在舞台上画一个任意形状的图形，然后选中它，单击鼠标右键，从）在舞台上画一个任意形状的图形，然后选中它，单击鼠标右键，从弹出的快捷菜单中选择【转换为元件弹出的快捷菜单中选择【转换为元件】命令，将它转换为按钮元件，】命令，将它转换为按钮元件，

3、再进入按钮元件编辑模式编辑按钮；再进入按钮元件编辑模式编辑按钮；3）把图形元件或影片剪辑元件转换为按钮元件。选中图形元件或影片）把图形元件或影片剪辑元件转换为按钮元件。选中图形元件或影片剪辑元件，单击鼠标右键，从弹出的快捷菜单中选择【转换为元件剪辑元件，单击鼠标右键，从弹出的快捷菜单中选择【转换为元件】命令，在打开的命令，在打开的“转换为元件转换为元件”对话框中，将类型修改为按钮，就将其对话框中，将类型修改为按钮，就将其转换为按钮元件了。转换为按钮元件了。制作动画：绘制按钮制作动画：绘制按钮步骤：步骤：1）打开）打开Flash 8，新建一个，新建一个Flash文档，设置影片尺寸为文档，设置影片

4、尺寸为“200px200px”,背景颜色为背景颜色为“白白色色”，帧频为，帧频为“12”。2）选择）选择“插入插入”“新建元件新建元件”命令，打开命令，打开“创建新元件创建新元件”对话框，对话框，名称框设为名称框设为“按钮元件按钮元件”，类型为，类型为“按钮按钮”，如图示。，如图示。3）单击“确定”，进入按钮元件的编辑模式。4）在按钮元件编辑模式下，将当前图层名称修改为按钮外观，单击第1帧（弹起），选择工具箱中“椭圆”工具按钮，设置笔触颜色为无，填充色为“红色”。按住Shift键，在场景编辑区画一个无边框的圆，调整圆的位置，使圆心与中心点对齐。5）单击插入图层按钮，新建一个图层，重新命名为文本

5、。6）单击文本图层的第1帧，选择工具箱中的文本工具按钮，设置填充色为黑色。在场景中绘制一个文本框，在文本框中输入文字弹起，调整文字位置，将它置于圆上。7）右键单击按钮外观图层的第2帧（指针经过），从弹出的快捷菜单中选择【插入关键帧】命令。设置工具箱中的填充色为绿色，使用工具箱中的颜料桶工具按钮，将图形的填充色改为绿色。右键单击文本图层的第2帧，从弹出的快捷菜单中选择【插入关键帧】命令，双击文本框，在文本框编辑模式下，修改文本框中的文字为经过。8）右键单击按钮外观图层的第3帧（按下），从弹出的快捷菜单中选择【插入关键帧】命令。设置工具箱中的填充色为蓝色，使用工具箱中颜料桶工具按钮，将图形的填充色

6、改为蓝色。右键单击文本图层的第3帧，从弹出的快捷菜单中选择【插入关键帧】命令，双击文本框，在文本框编辑模式下，修改文本框中的文字为按下。9）右键单击按钮外观图层的第四帧（点击），从弹出的快捷菜单中选择【插入关键帧】命令，使用工具箱中的椭圆工具按钮，重新绘制一个无边框的黄色的圆，将它盖住蓝色的圆，作为按钮的有效点击区。10）单击返回场景按钮，回到场景编辑模式。选择菜单栏“窗口”“库”命令，打开库面板，会看到将刚才制作的按钮元件已经添加到库中。11）拖到按钮元件到舞台，创建一个按钮元件实例。12）选择菜单栏“控制”“启用简单按钮”命令，就可以在编辑区中测试按钮元件的效果，也可以按【Ctrl】+【E

7、nter】键预览动画效果。13）选择菜单栏“文件”“保存文件”命令，将文件命名为“绘制按钮.fla”。14）选择菜单栏“文件”“发布”命令，生成“绘制按钮.swf”。6.1.2 创建动态按钮创建动态按钮为了增加按钮的动感和交互性，在按钮的制作过程中还可以为按钮元件不同的帧添加简单动画或者声音，制作动态按钮。制作动画：“飞舞的蝴蝶”动态按钮。1）打开上节制作的“绘制按钮.fla”文件。2）选择菜单栏“窗口”“库”命令，打开“库”面板。单击“库”面板下方的新建元件图标按钮，在弹出的“创建新元件”对话框中，设置名称框为蝴蝶，类型为影片剪辑。3）在蝴蝶影片剪辑的编辑模式，选择菜单栏“文件”“导入”命令

8、，导入一张蝴蝶图片，调整图片至适当大小，调整图片位置到中心点的左侧，双击图层名称框，修改该图层名称为蝴蝶。4）右键单击第30帧，从弹出的快捷菜单中选择【插入关键帧】命令。5）右键单击第1帧，从弹出的快捷菜单中选择【创建补间动画】命令。6）在蝴蝶图层名称框上单击鼠标右键，从弹出的快捷菜单中选择【添加引导层】命令。7）选择工具箱中的铅笔工具，在引导层第帧处绘制蝴蝶运转的轨迹，然后再移动蝴蝶图层中第1帧中的蝴蝶到所绘制轨迹的起点处，移动第30帧中的蝴蝶到所绘制的终点处。8）单击编辑元件图标，在弹出的选项中选择“按钮元件”选项。9）在按钮元件编辑区，选择插入图层按钮，在文本图层的上面，新建一个图层，将

9、该图层命名为蝴蝶飞。10）在蝴蝶飞图层的第3帧（按下），单击鼠标右键，选择【插入关键帧】命令。11）选择菜单栏“窗口”“库”命令，打开“库”面板，将蝴蝶影片剪辑拖入到第3帧（按下）中。12）单击返回场景按钮，回到场景编辑模式。13）在按钮元件中做了添加蝴蝶影片剪辑的改动，这种改动会自动对场景中的按钮元件实例进行更新，所以返回场景后，不用再将库中改动后的按钮元件添加到场景中。14）按【Ctrl】+【Enter】键预览动画效果。15）选择菜单栏“文件”“保存文件”命令，将文件命名为“飞舞的蝴蝶.fla”。16）选择菜单栏“文件”“发布命令”，生成“飞舞的蝴蝶.swf”。6.2 利用按钮库制作按钮利

10、用按钮库制作按钮6.2.1 介绍按钮库介绍按钮库Flash自带了一个按钮库，在这个按钮库中有许多样式精美的按钮。6.2.2 添加和修改按钮库添加和修改按钮库如果要将自己制作的按钮、图片或影片元件放到公用库中，也就是说，要在“公用库”中添加素材，则需要打开Flash 8的库文件夹，在库文件夹中进行添加。一般情况下，库文件夹的路径是：c:ProgramFilesMacromediaFlash8zh_cnConfigurationLibraries6.3 FlashFlash中声音的控制实例中声音的控制实例6.3.1 介绍介绍FlashFlash中的声音类型中的声音类型按钮元件可以改变动画的播放顺序

11、，控制动画的播放时间和播放速度，并可以随时调用电影片段和控制它的属性，按钮是交互动画中的常用对象。将上节中制作的“按钮.fla”文件添加到公用库中。步骤为：1）打开“绘制按钮.fla”文件。2）选择菜单栏“文件”“保存”命令，将该文件保存到ProgramFilesMacromediaFlash8zh_cnConfigurationLibraries文件夹。3）打开Libraries文件夹。4）单击菜单栏“窗口”“公用库”命令，在弹出的下级菜单中增加了一个“绘制按钮”选项。5）单击“绘制按钮”选项，就可以像使用公用库中的其它按钮一样，使用该按钮。6）打开的“库-绘制按钮”窗口，直接将其拖入场景使

12、用。6.3 Flash中声音的控制实例 6.3.1 6.3.1 介绍介绍flashflash中的声音类型中的声音类型 Flash 8中声音类型有两种：事件声音和数据流声音。在Flash 8中，可导入的声音文件格式有两类：MP3：MP3具有压缩的高效性，能使小文件产生高质量的音频效果，跨平台性能好。WAV：是默认的声音文件，导入的WAV文件既可以是单声道的，也可以是双声道的，该类声音文件支持不同的采样率和位分辨率。6.3.2 导入声音导入声音导入一个外部声音文件到库中导入一个外部声音文件到库中步骤：步骤：打开打开Flash 8，新建一个，新建一个Flash文档。文档。1）选择菜单栏）选择菜单栏“

13、文件文件”“导入导入”“导入到库导入到库“命令，打开命令，打开“导入到库导入到库”对话框。对话框。2）选择声音文件，单击）选择声音文件，单击“打开打开”，就将声音文件导入到库中了。，就将声音文件导入到库中了。3）选择菜单栏“窗口”“库“命令，打开“库”面板，会看到刚才导入的声音文件。4）单击波形右上方的按钮，试听一下效果。6.3.3 声音的编辑在“效果”下拉列表框中，可以设置音频效果：无：不使用任何效果，选择此项可删除以前所设置的效果。左声道：只有左边的声道才会有音效。右声道：只有右边的声道才会有音效。从左到右淡出：音效会从左边的声道转移到右边的声道。从右到左淡出：音效会从右边的声道转移到左边

14、的声道。淡入：音效从无声渐渐变成正常音效。淡出：音效从有声渐渐变成无声音效。自定义：可以自己设置音效。6.3.4 声音的使用方法声音的使用方法制作音效动画：架子鼓步骤：1）打开Flash 8，新建一个Flash文档，设置影片尺寸为“400px292px”,背景颜色为“白色”，帧频为“12”。2）选择菜单栏“文件”“导入”“导入到舞台”命令，导入一幅图片jzg.bmp（图片在所附光盘中）到舞台，适当调整图片的位置。3）选择菜单栏“文件”“导入”“导入到库”命令，打开“导入到库”窗口，将架子鼓中各部件的图片g1、g2、g3、g4、g5、g6、g7分别导入到库中。4）按【Ctrl】+【R】快捷键，打

15、开“导入”窗口，快速导入架子鼓中各部件所对应的声音文件s1、s2、s3、s4、s5、s6、s7。5）选择菜单栏“插入”“新建元件”命令，新建一个图形元件t1。6）在图形元件t1编辑模式下，选择第1帧，单击鼠标右键，从弹出的快捷菜单中选择【插入关键帧】命令。7）选择菜单栏“窗口”“库”命令，打开“库”面板，拖动g1.bmp到t1第1帧。8）重复步骤5至7，分别建立图形元件t2，t3，t4，t5，t6,t7。9）选择菜单栏“插入”“新建元件”命令，新建一个按钮元件b1。10）选择按钮元件的弹起帧，单击鼠标右键，从弹出的快捷菜单中选择【插入关键帧】命令；选择按钮元件的指针经过帧，单击鼠标右键，从弹出

16、的快捷菜单中选择【插入关键帧】命令。11）选择指针经过帧，选择菜单栏“窗口”“库”命令，打开“库”面板，拖动s1.mp3到指针经过帧。12）选择按钮元件的点击帧，单击鼠标右键，从弹出的快捷菜单中选择【插入关键帧】命令，选择菜单栏“窗口”“库”命令，打开“库”面板，拖动图形元件t1到点击帧。13）重复步骤9至12，分别建立按钮元件b2，b3，b4，b5，b6,b7,如图627所示。14）选择菜单栏“插入”“新建元件”命令，新建一个影片剪辑元件m1。15）选择m1的第1帧，单击鼠标右键，从弹出的快捷菜单中选择【插入关键帧】命令，选择第1帧，单击“动作”面板，在面板中添加脚本：stop();表示没部

17、触发时，影片剪辑是停止状态。16）选择m1的第2帧，单击鼠标右键，从弹出的快捷菜单中选择【插入关键帧】命令，选择菜单栏“窗口”“库”命令，打开“库”面板，将图形元件t1拖到该帧。17）选中该图形元件，在属性面板中，选择”颜色”选项中的Alpha，设置其透明度值为“10%”。18）在第5帧处插入一关键帧，选中第2关键帧，单击鼠标右键，选择“创建补间动画”创建一个渐变动画。19）重复步骤14至17,分别建立影片剪辑元件m2、m3、m4、m5、m6、m7。20）单击返回主场景按钮，双击默认图层名称框，重新命名为架子鼓。21）单击插入图层按钮，新建一个图层，命名为movies。将制作好的7个影片剪辑m

18、1、m2、m3、m4、m5、m6、m7拖放到工作区架子鼓图片对应的各部件上，创建7个实例。22）单击场景中按钮b1，选中b1，单击动作面板，在动作面板中为按钮b1添加脚本，当按下键盘数字键1时，开始播放场景中的实例m1。b1的脚本如下：on(keyPress1)tellTarget(this.m1)play();23）重复步骤23，分别在按钮b2、b3、b4、b5、b6、b7k中添加脚本，当按下键盘数字键2至7时，开始播放实例m2至m7。24）按【Ctrl】+【Enter】键预览动画效果。25）选择菜单栏“文件”“保存文件”命令，将文件命名为“架子鼓.fla”。26）选择菜单栏“文件”“发布命令”，生成“架子鼓.swf”。本章到此结束，谢谢！