Flash8动画设计案例教程

1、1会计学Flash8动画设计案例教程动画设计案例教程图5.1 单击确定按钮进入按钮编辑区，时间轴中将出现按钮的4个状态帧，如图5.2所示。 图5.2图5.3 图5.4 图5.5 图5.6 图5.7 单击确定按钮进入按钮编辑区，时间轴中将出现按钮的4个状态帧，如图5.8 所示。 图5.8图5.9 图5.10 图5.11 图5.12图5.13 图5.14 图5.15 图5.16 图5.17 (6) 单击图层左上角的场景1按钮，返回场景，按钮修改完毕。 图5.18图5.19 “donghua”：是要加载的影片名称，注意要加载的影片名称一定要是英文或数字，不 能用中文命名，影片名字要用双引号。 “1”

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

3、出【创建新元件】对话框，设置如图5.21所示。单击 按钮，【图层】面板如图5.22所示。 图5.21 图5.22 说明： 弹起是指鼠标指针没有移到按钮上时显示的状态。 指针经过是指鼠标指针移到按钮上时显示的状态。 按下是指在按钮上按下鼠标左键时显示的状态。 点击是指鼠标指针触发按钮的范围。图5.23 图5.24 (5) 选择刚绘制的椭圆，选择修改形状柔化填充边缘命令，弹出【柔化填充边缘】 对话框，设置如图5.25所示。单击按钮，得到如图5.26所示的椭圆。 图5.25 图5.26 图5.27 图5.28 图5.29 图5.30(9) 单击【文字】工具，将文字改为如图5.31所示。将文字改为红色

4、，如图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) 单击时间轴左上角的场景1按钮，返回场景。(15) 将“库”中的“简单按钮

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

6、图5.41所示，单击 确定按钮。 图5.41 (3) 单击椭圆填充工具，将笔触颜色设置为 ，设置填充浮动面板，如图 5.42所示。 在工作区绘制一个圆，如图5.43所示。 图5.42 图5.43 图5.44 图5.45 (5) 单击时间轴左上角的场景1按钮，返回场景。(6) 方法同第(3)、(4)步，制作一个“黄白渐变球”的图形元件，如图5.46所示。(7) 方法同第(3)、(4)步，制作一个“绿白渐变球”的图形元件，如图5.47所示。(8) 方法同第(3)、(4)步，制作一个“粉红色白渐变球”的图形元件，如图5.48所示。(9) 选中如图5.47所示的球，选择修改形状柔化填充边缘命令，弹出【

7、柔化填充边 缘】对话框，设置如图5.49所示，效果如图5.50所示。 图5.46 图5.4 图5. 图5.49 图5.50 图5.51 图5.52 图5.53 (14) 在图层的第15帧处插入一个关键帧并调整大小，如图5.54所示。(15) 创建补间动画，如图5.55所示。(16)“图层1”第一帧的元件属性面板设置如图5.56所示。(17) 单击时间轴左上角的场景1按钮，返回场景。 图5.54 图5.5 图5.56 (18) 选择插入新建元件命令，弹出“创建新元件”对话框，设置如图5.57所示。(19) 将“红白渐变球”图形元件放到弹起帧上，位置大小如图5.58所示。(20) 在指针经过帧上单

8、击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧 命令，此时，将插入一个关键帧。删除指针经过帧中的所有元件，将“黄白渐变 球”图形元件放到指针经过帧上，位置大小如图5.59所示。(21) 在按下帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧命 令，此时将插入一个关键帧。删除按下帧中的所有元件，将“绿白渐变球”图形 元件放到按下帧上，位置、大小如图5.60所示。 图5.57 图5.58 图5. 图5.60 图5.61 图5.62 图5.63 图5.64 图5.65 图5.66(26) 单击时间轴左上角的场景1按钮，返回场景。(27) 将“库”中的“动画按钮”拖到舞台中，测试效果，

9、如图5.67图5.69所示。(28) 完整演示动画请观看从本书提供的网页下载的素材第 5 章的“简单按钮”Flash文件。 图5.67 图5.68 图5.69 本案例主要制作了一个动态按钮，主要讲解了动态按钮制作的方法和流程，在制作过程中，可以像前面制作动画一样，创建新图层、引导线和输入脚本。 弹起 指针经过 弹起 指针经过 制作一个当鼠标指针移到按钮上时会弹出“别碰我哦！”文字的按钮。 本案例主要用到的工具或命令有：矩形工具、文字工具、元件的创建、Alpha值的设置、帧动画的创建等。 (1) 运行Flash 8.0，新建一个名为“别碰我”文件。(2) 设置背景色为“纯黑色”。(3) 选择插入

10、新建元件命令，弹出【创建新元件】对话框，设置如图5.70所示。单击 确定按钮。(4) 单击工具箱中的矩形工具，填充浮动面板的设置如图5.71所示。在工作区绘制一个矩 形，如图5.72所示。再绘制一个矩形，如图5.73所示。 图5.70 图5.71 图5.72 图5.73 (5) 单击工具箱中的颜料桶工具，对图5.73进行填充，效果如图5.74所示。(6) 单击时间轴左上角的场景1按钮，返回场景。 图5.74(7) 选择文件导入导入到库命令，弹出【导入到库】对话框，在对话框中选择图片。单 击打开按钮，导入图片。(8) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.75所示。单击确定

11、 按钮。(9) 将刚导入的图片拖到工作区中，在图片上单击鼠标右键，弹出快捷菜单，选择分离命令，将 图片分离，如图5.76所示。 图5.75 图5.76图5.77 图5.78 图5.79 图5.80 (14) 在“图层1”的第10帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键帧 命令，此时就在第10帧处插入了关键帧。用同样的方法在第20帧处插入普通帧。(15) 将第10帧处的“图片元件”水平翻转，效果如图5.81所示。 图5.81 图5.82 (18) 将“库”中的“按钮模型”图形元件拖到工作区的中央位置，再将“库”中的“动画” 影片剪辑元件拖到工作区的中央位置，如图5.83所示。(1

12、9) 分别在指针经过、按下、点击帧处单击鼠标右键，弹出快捷菜单，选择命令，此 时即分别在、帧处插入关键帧。(20) 在指针经过帧上单击，将该帧中的所有元件移到适当的位置。单击文字工具，在工作 区中输入文字，文字的大小、颜色、位置如图5.84所示。 图5.83 图5.84 本案例通过讲解制作按钮的基本流程，制作了一个动态按钮。在制作过程中要明白一个道理，即在按钮中可以导入动画、声音等。 根据前面所学知识制作如下效果的按钮。 弹起 指针经过 当鼠标指针移动到图片上时，出现文字提示。 本案例主要用到的工具或命令有：矩形工具、图片的导入、动作脚本、文字工具、属性面板的设置、元件的创建等。 (1) 运行

13、Flash 8.0，新建一个名为“跟随光标的提示”的文件。(2) 选择文件导入导入到库命令，弹出【导入到库】对话框，在对话框中选择图选 择片。单击打开按钮导入图片，如图5.85所示。 图5.85(3) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.86所示。单 击确定按钮。(4) 将“库”中的“鸡.jpg”图片拖到工作区，调整位置、大小如图5.87所示。 图5.86 图5.87 (5) 单击工具箱中的矩形工具，并设置填充浮动面板如图5.88所示。设置笔触颜色 为 ，在工作区中绘制一个矩形，如图5.89所示。 图5.88 图5.89 图5.90 图5.91 (7) 方法同第(3)第

14、(6)步，分别制作如图5.92所示的影片剪辑。(8) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.93所示。单击 确定按钮。(9) 单击工具箱中的文字工具，在工作区中拖出一文字框，属性面板的设置如图5.94所示。 图5.92图5.93图5.94 (10) 单击时间轴左上角的场景1按钮，返回场景。(11) 将“库”中的所有影片剪辑拖到舞台中，并输入如图5.95所示的文字。 图5.95 图5.96图5.97图5.98 根据前面所学知识制作如下效果，完整的动画演示请观看从网上下载的素材第5章的“跟随光标的提示1”Flash文件。 制作一个利用Flash 8.0自带按钮来控制音乐音量的

15、调节器。 本案例主要用到的工具或命令有：文字工具、线条工具、颜料桶工具、动作脚本、矩形工具，声音的处理等。 图5.99 图5.100 (4) 单击工具箱中的颜料桶工具，设置填充浮动面板如图5.101所示。并对绘制的图形进行 填充，如图5.102所示。(5) 单击时间轴左上角的场景1按钮，返回场景。 图5.101 图5.102 (6) 选择文件导入导入到库命令，弹出【导入到库】对话框，在对话框中选 择要导入的音乐和图片。单击打开按钮，导入的音乐和图片如图5.103所示。(7) 在“库”中的“音乐”文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 属性命令，弹出【声音属性】对话框，设置如图5.1

16、04所示。单击确定按钮。 图5.103 图5.104 图5.105(9) 将“库”中的“底板”图形元件拖到舞台中，并调整好位置，如图5.106所示。(10) 单击工具箱中的文字工具，在舞台中输入文字，并设置颜色，如图5.107所示。 图5.106 图5.107 图5.108(12) 将“库”中的“地球2.jpg”文件拖到舞台中，并进行调整，如图5.109所示。 图5.109图5.110(14) 在公用库中选中如图5.111所示的元件，将其拖到舞台中，位置、大小如图5.112所示。 图5.111 图5.112 图5.113 图5.114 例主要利用Flash 8.0自带的按钮，通过修改来制作音量

17、调节按钮。在制作过程中要特别注意脚本的修改原理。 制作一个通过按钮来控制图片的缩放、移动、旋转的动画。本案例主要用到的工具或命令有：椭圆工具、文字工具、图片的导入、动作脚本等。 图5.115(3) 单击工具箱中的线条工具，在工作区绘制如图5.116所示图形。(4) 单击工具箱中的颜料桶工具，通过设置填充浮动面板，填充出如图5.117所示的图形。 图5.116 图5.117 图5.118 图5.119 (8) 根据前面所学知识制作一个如图5.120所示的按钮。图5.120 图5.121 图5.122(13) 将“库”中的“底板”图形元件拖到舞台中，再将“库”中的“按钮”拖到舞台中，调整 好大小和

18、形状，并复制5个，调整它们之间的位置，如图5.123所示。(14) 将“库”中的“mao_mc”拖到舞台中，位置、大小如图5.124所示。(15)“mao_mc”的属性面板设置如图5.125所示。 图5.123 图5.124 图5.125 (16) 单击工具箱中的文字工具，输入文字如图5.126所示。图5.126 图5.127 图5.128 图5.129 图5.130 图5.131 图5.132 图5.133(20) 完整动画请观看从网上下载的素材第5章的“控制图片变化”Flash文件。 本案例主要介绍了动作脚本的编辑过程，通过本案例的学习，读者应该能够举一反三制作出不同的动画效果。每行脚本的

19、具体含义要慢慢体会、理解。 根据前面所学知识制作如下效果，完整动画演示请观看从网上下载的素材第 5 章的“控制图片变化2”Flash文件。制作一个能控制左右声道的按钮。 本案例主要用到的工具或命令有：矩形工具、椭圆工具、线条工具、文字工具、颜料桶工具，动作脚本、图片处理等。 图5.134 图5.135(4) 单击工具箱中的颜料桶工具，填充浮动面板设置如图5.136所示。(5) 对图形进行填充，效果如图5.137所示。(6) 单击时间轴左上角的场景1按钮，返回场景。 图5.136 图5.137(7) 选择文件导入导入库命令，弹出【导入到库】对话框，在对话框中选择要导 入的音乐和图片。单击打开按钮

20、，导入的音乐和图片如图5.138所示。(8) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.139所示。单击 确定按钮。 图5.138 图5.139 图5.140 图5.141(11) 在库中的“音乐”文件上单 击鼠标右键，弹出快捷菜单， 在快捷菜单中选择属性命 【声音属性】对话框，设置如 图5.142所示。单击确定按 钮。 图5.142 图5.143(13) 将库中的“底板”元件和“图片影片”影片剪辑拖到舞台中，并调整好大小、位置，如图 5.144所示。(14) 单击工具箱中的文字工具，在舞台中输入文字，并设置其颜色、大小、位置，如图5.145 所示。 图5.144 图5.14

21、5 图5.146(16) 选择窗口公用库按钮命令，此时将弹出【库】面板，如图5.147所示。(17) 在公用库中选中如图5.148所示的元件，将其拖到舞台中，位置、大小如图5.149所示。 图5.147 图5.148 图5.149 (18) 在刚拖入到舞台中的按钮元件上双击，进入影片剪辑编辑状态，在“Layer 4”图层的第 1帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择动作命令，弹出“动作-帧” 脚本对话框，将脚本中最后一句修改成如图5.150所示的红色框框住的语句。单击对话框 右上角的 关闭按钮。 图5.150(19) 单击时间轴左上角的场景1按钮，返回场景。(20) 最终效果如图5.

22、151所示。完整演示效果请观看从网上下载的素材第5章的“左右声道均衡 调节”Flash文件。 图5.151本案例制作了一个“左右声道均衡调节”的按钮，在制作过程中输入动作代码时要特别小心。 根据案例六与案例七所学知识，制作如下控制按钮效果。完整的演示效果请观看从网上下载的素材第5章的“左右声道均衡调节1”Flash文件。 制作一个通过选择不同的按钮，分别播放不同歌曲的Flash动画。 本案例主要用到的工具或命令有：线条工具、文字工具、矩形工具、动作脚本、组件检查器、图片处理、元件制作等。 图5.152 图5.153(4) 单击工具箱中的颜料桶工具，并设置填充浮动面板为如图5.154所示。(5)

23、 对图形进行填充，效果如图5.155所示。 图5.154 图5.155 (6) 单击时间轴左上角的场景1按钮，返回场景。(7) 选择文件导入导入到库命令，弹出【导入到库】对话框，在对话框中选择要 导入的图片。单击打开按钮，导入图片，如图5.156所示。(8) 利用前面所学的知识制作如图5.157所示的按钮。 图5.156 图5.157 图5.158 图5.159 图5.160 (12) 选中拖到舞台中的组件，选择窗口组件检查器命令，弹出组件检查器浮动面板。 浮动面板的设置如图5.161所示；属性面板的设置如图5.162所示。(13) 在舞台中的“春之声圆舞曲”按钮上单击鼠标右键，弹出快捷菜单，

24、在快捷菜单中选择 动作命令，随后将弹出“动作-帧”脚本对话框，在对话框中输入如图5.163所示的代码。(14) 其他按钮代码的输入同图5.163一样，只要将红色框框住的部分改为相应的歌曲名称即可。(15) 最终效果如图5.164所示，完整演示效果请观看从网上下载素材第5章的“用组件控制声 音按钮”Flash文件。 图5.161 图5.162 图5.163图5.164 本案例主要使用Flash 8.0自带的组件来制作选择音乐和控制音量效果的Flash动画。在制作过程中要特别注意，将播放组件拖到舞台中后，一定要设置组件的属性面板，否则就无法播放声音。 根据前面所学知识制作如下效果，完整动画演示请观

25、看从网上下载的素材第5章的“用组件控制声音按钮1”Flash文件。5.3.4 案例九：选择乐曲播放 制作一个可以选择音乐播放的效果。 本案例主要用到的工具或命令有：文字工具、组件的使用、矩形工具、分离、动作脚本、声音的处理、图片的处理。(1) 运行Flash 8.0，新建一个名为“选择乐曲播放”的文件。(2) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.165所示。单击 确定按钮。(3) 利用工具箱中的线条工具、矩形工具、椭圆工具，绘制如图5.166所示的图形。(4) 利用工具箱中的颜料桶工具和通过设置填充浮动面板，对所绘制的图形进行填充，填充 好的效果如图5.167所示。 图

26、5.165 图5.166 图5.167 (5) 选择文件导入导入库命令，弹出【导入到库】对话框，在对话框中选择要导入 的音乐和图片。单击按钮，导入的音乐和图片如图5.168所示。 图5.168(6) 将导入的图片拖到工作区，调整大 小，位置效果如图5.169所示。(7) 单击时间轴左上角的场景1按钮，返 回场景。(8) 将库中的“底板”图形元件拖到舞台 中，并输入文字，然后放到适当的位 置，如图5.170所示。 图5.169 图5.170 图5.171 图5.172 图5.173 (11) 在库中的“音乐”文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择属性 命令，弹出【声音属性】对话框，设

27、置如图5.174所示。单击确定按钮。(12) 在“库”中的“音乐”文件上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择 链接命令，弹出【链接属性】对话框，设置如图5.175所示。单击确定按钮。 图5.174 图5.175 (13) 在“图层1”的第1帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择动作命令， 弹出“动作-帧”脚本输入框，在脚本框中输入如图5.176所示的代码。输入完代码后，单 击对话框右上角的 关闭按钮。 图5.176(14) 双击舞台中的如图5.177所示的组件，进入组件编辑状态，在“Layer 4”层的第1帧处， 单击鼠标右键，弹出快捷菜单，在快捷菜单中选择动作命令，弹出“动

28、作-帧”脚本对 话框，将最后一句改为如图5.178所示的红色框框住的语句。(15) 单击时间轴左上角的场景1按钮，返回场景。(16) 双击舞台中的如图5.179所示的组件，进入组件编辑状态，在“Layer 4”层的第1帧处， 单击鼠标右键，弹出快捷菜单，在快捷菜单中选择动作命令，弹出“动作-帧”脚本对 话框，将最后一句改为如图5.180所示的红色框框住的语句。图5.177 图5.178 图5.179 图5.180 图5.181(18) 单击“动作”脚本对话框右上角的 ，关闭对话框。(19) 单击时间轴左下角的插入图层按钮，此时将插入一个新的图层。(20) 单击工具箱中的文字工具，在舞台中拖出一

29、个框来，大小、位置如图5.182所示。(21) 文字属性面板的设置如图5.183所示。 图5.182 图5.183 (22) 利用前面所学的知识制作如图5.184所示的按钮。(23) 在“图层 1”的第 3 帧处单击鼠标右键，弹出快捷菜单，在快捷菜单中选择插入关键 帧命令，此时将插入一个关键帧，将舞台中第3帧不需要的元件删除，再输入需要的文 字，如图5.185所示。(24) 将库中的音乐按钮拖到舞台中，并调整好大小、位置，如图5.186所示。 图5.184 图5.185 图5.186 图5.187 (26) 其他歌曲按钮的代码输入方法与此相同，只要将如图5.187所示的用红色框框住的文字改成

30、相应的歌曲名字即可。(27) 利用前面所学的知识，制作一个“选择乐曲按钮”。(28) 单击“图层2”。将库中的“选择乐曲按钮”拖到舞台中，位置如图5.188所示。(29) 在选择乐曲按钮上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择动作命令，弹出 “动作-按钮”脚本对话框，在“脚本”对话框中输入如图5.189所示的代码，单击“动作- 按钮”脚本对话框右上角的 ，关闭对话框。 图5.188 图5.189 (30) 进行测试，效果如图5.190所示，单击选择乐曲按钮，效果如图5.191所示。 图5.190 图5.191 本案例主要制作了一个乐曲选择播放按钮的效果，制作过程中，在输入动作脚本时要特别细心，因为很容易出错。 根据前面所学的知识制作如下效果，完整演示动画请观看从网上下载的素材第5章的“选择乐曲播放”Flash文件。 制作一个使用按钮载入图片的Flash动画。 本案例主要用到的工具或命令有：矩形工具、线条工具、椭圆工具、动作脚本、浮动面板的设置、元件符号的创建等。 (1) 运行Flash 8.0，新建一个名为“使用按钮载入图片”的文件。(2) 选择插入新建元件命令，弹出【创建新元件】对话框，设置如图5.192所示。 单击确定按钮。(3) 利用工具箱中的线条工具、矩形工具、椭圆工具，绘