《中文版flash cs6网页动画设计教程第12章资料》由会员分享，可在线阅读，更多相关《中文版flash cs6网页动画设计教程第12章资料（20页珍藏版）》请在金锄头文库上搜索。
1、 第12章 按钮动画拍照效果 本章通过“拍照效果”的制作，介绍绘图工具栏中部分 工具的组合使用，遮罩动画制作的基本操作。“拍照效 果”的动画效果如图12-1所示。本章首先介绍文档属性 的设置，然后是用矢量工具绘制矩形、编辑图形、制 作遮罩效果、制作按钮、插入声音、制作遮丑图形。 2 1.12.1 思路剖析及制作流程 整个实例的 创建过程如 图12-2所示 。 3 12.2 拍 照 效 果 12.2.1 设置文档属性 设置文档属性的具体操作步骤如下。 (1) 新建Flash文档，右击工作区域，在弹出的快捷 菜单中选择“文档属性”命令，如图12-3所示。 (2) 在弹出的“文档设置”对话框中设置舞
2、台大小为宽 300像素、高300像素，背景颜色为白色，单击“确 定”按钮，如图12-4所示。 4 12.2.2 制作拍照过程 制作拍照过程的具体操作步骤如下所示。 (1) 选择“插入”|“新建元件”命令，如图12-5所示。 (2) 在弹出的“创建新元件”对话框中对新建元件命 名为“图片”，类型为“影片剪辑”，单击“确定”按钮 ，如图12-6所示。 (3) 在“图片”元件中导入图片“孩子”，方法是选择“ 文件”“导入”“导入到库”命令，如图12-7所示 。 (4) 将图库中的“孩子”图片拖入到图片元件的编辑 区，然后利用“信息”面板对它的大小进行设置，大 小为300300，如图12-8所示。 5
3、 12.2.2 制作拍照过程 (5) 设置好图片在编辑区的大小后，再利用“对齐”面板将它 相对于舞台垂直水平居中，如图12-9所示。 (6) 返回场景，将图片元件拖放到舞台上，利用“对齐”面板 将元件实例与舞台完全重合，如图12-10所示。 (7) 将图层1重新命名为图片，然后在第10帧处插入关键帧 ，右击第110帧之间的任何一帧，在弹出的快捷菜单中选 择“创建补间动画”命令，如图12-11所示。 (8) 利用“信息”面板将第10帧中的实例大小更改为400400 。设置完成后按Enter键确认设置，如图12-12所示。 6 12.2.2 制作拍照过程 (9) 设置大小完成后，仍然利用“对齐”
4、面板将放大的实例相对于舞台垂直水平 居中，如图12-13所示。 (10) 在第12帧处插入普通帧。接下来在 图片图层上方新建一图层，命名为“遮 罩”，在第12帧处插入关键帧，如图12- 14所示。 (11) 在遮罩图层的第12帧处绘制没有边 框线，填充色任意的矩形，大小为 210170。设置完成后，按Enter键确 认设置，如图12-15所示。 (12) 通过“选取工具”调整矩形的位置， 具体位置以遮盖住想要拍摄的位置为宜 。如图12-16所示为边框显示方式。 7 12.2.2 制作拍照过程 (13) 使用“墨水瓶工具”给矩形添加边框，颜色为#0000FF，如图12-17 所示。 (14) 选
5、中刚才添加的边框，按Ctrl+X组合键，将它剪切下来，然后在“ 遮罩”图层上方新建一图层，命名为“边框”，将剪切下来的边框粘贴到 新图层的源位置，粘贴时按Ctrl+Shift+V组合键，如图12-18所示。 (15) 选中“边框”图层中的第1帧，使用鼠标将它拖动到第12帧处。此时 ，“边框”图层的第1帧处没有任何内容，直到第12帧处边框才会出现， “边框”图层中时间轴内容，如图12-19所示。 (16) 在“遮罩”图层上方新建一图层，命名为“闪光”。在“闪光”图层的第 11帧处插入关键帧，选中绘图工具栏中的“矩形工具”，对它的颜色进 行设置，无边框颜色，白色填充颜色，如图12-20所示。 8
6、12.2.2 制作拍照过程 (17) 设置好颜色后，在“闪光”图层的第11帧处，使 用“矩形工具”绘制矩形。大小为300300，位置的 橫纵坐标分别为0，如图12-21所示。 (18) 在“边框”图层上方新建一图层，命名为“界定线 ”，在“界定线”图层的第2帧处插入关键帧，然后复 制“边框”图层中的框线，粘贴到“界定线”图层的第2 帧处，位置不变，如图12-22所示。 (19) 利用“选取工具”，选择一部分线条删除。使角 部形状变化如图12-23所示。 (20) 同理，利用选取工具，选择其余部分线条删除 。将4个角全部保留，效果如图12-24所示。 (21) 界定线编辑完成后，在第11帧处插入
7、空白关键 帧。右键单击“遮罩”图层，从弹出的快捷菜单中选 择“遮罩层”命令。使“遮罩”图层遮罩下面的图层， 如图12-25所示。 9 12.2.3 制作按钮 制作按钮的具体操作步骤如下。 (1) 选择“文件”“新建元件”命令，在弹出的“创建 新元件”对话框中设置元件名称为“快门”，类型为“ 按钮”，单击“确定”按钮，如图12-26所示。 (2) 在工具栏的“矩形工具”上长按鼠标左键，在弹 出的矩形列表中选择“基本矩形工具”，如图12-27 所示。 (3) 在快门按钮元件的编辑区内绘制一个基本矩形 ，然后在绘图工具栏中选中“选取工具”，使用“选 取工具”拖动右上角的控制点向内移动形成圆角矩 形，
8、如图12-28所示。 10 12.2.3 制作按钮 (4) 设置圆角矩形的颜色，边框线颜色 为#FFFFCE，填充颜色为#CEFF63。 对“颜色”面板进行设置，如图12-29所 示。 (5) 设置完成后，在编辑区内绘制矩形 ，大小为6030，如图12-30所示。 (6) 利用“对齐”面板将矩形相对于舞台 垂直水平居中，如图12-31所示。 (7) 将图层1重命名为“矩形”，在矩形图 层上新建一图层命名为“文字”。在“矩 形”图层的点击帧上按F5键，插入普通 帧。锁定“矩形”图层，在“文字”图层第 1帧上利用文本工具输入文本“快门”， 如图12-32所示。 11 12.2.3 制作按钮 (8)
9、 在文本对应的“属性”面板中设置字体为华文楷体，字号 为20号，颜色为#00CFFF，如图12-33所示。 (9) 设置好字体属性后，调整文本位置，然后在“文本”图层 的第2帧、第3帧处插入关键帧。在第4帧处插入普通帧，如 图12-34所示。 (10) 选中“文本”图层中的第2帧，对第2帧中的文本进行缩 放，如图12-35所示。 (11) 返回到场景中，在“界定线”图层上方新建一图层，命 名为“按钮”。将制作好的按钮元件拖放到按钮图层第1帧的 舞台中，如图12-36所示。 12 12.2.3 制作按钮 (12) 单击舞台中的按钮元件，按F9键，打开“动作 ”面板。在“动作”面板中输入命令，如图
10、12-37所示 。 (13) 在按钮图层上新建一图层，命名为as，在as 图层的第11帧处插入关键帧。按F9键打开“动作” 面板，给两个关键帧添加命令是一样的，如图12- 38所示。 13 12.2.4 添加声音 添加声音的具体操作步骤如下。 (1) 在as图层的上方新建一图层，命名为“声音”， 在“声音”图层的第9帧处插入关键帧，如图12-39所 示。 (2) 选择“文件”“导入”“导入到库”命令，将“快 门音效”声音导入到图库中，如图12-40所示。 14 12.2.4 添加声音 (3) 单击“声音”图层的第9帧，单击“属性”面板中的 “声音”下拉列表框，从中选择快门声效，如图12- 41
11、所示。 (4) 再次选中第9帧，在“属性”面板的“同步”下拉列 表框中选择“数据流”。使声音和动画持续时间相同 ，同时结束，如图12-42所示。 15 12.2.5 制作遮丑效果 制作遮丑效果的具体操作步骤如下。 (1) 在“声音”图层上新建图层，名称为“遮丑”，如 图12-43所示。 (2) 单击时间轴面板下方标签右侧的缩放比例下拉 列表框的下拉按钮，从中选择25%，如图12-44所 示。 (3) 选择“矩形工具”，在下面对应的选项面板中设 置为无边框颜色，填充颜色为#FFFFCE。如图12- 45所示。 16 12.2.5 制作遮丑效果 (4) 在工作区绘制一个大矩形，将整个舞台全部遮 罩
12、住。如图12-46所示。 (5) 使用边框显示方式，选择“矩形工具”，通过下 面的对应选项面板设置边框颜色为#0000FF，填充 颜色任意，如图12-47所示。 (6) 在工作区中绘制矩形将整个舞台全部遮罩住， 如图12-48所示(边框显示方式)。 (7) 取消边框显示方式，利用“选取工具”，选中覆 盖舞台的小矩形，然后按Delete键，将它删除，如 图12-49所示。 17 12.2.5 制作遮丑效果 (8) 在“遮丑”图层上新建一图层，命名为“添缝”， 然后在第10帧处插入关键帧，效果如图12-50所示 。 (9) 分别将“遮丑”图层中的边框及“边框”图层中的 边框复制粘贴到“添缝”图层的
13、第12帧的当前位置， 如图12-51所示。 (10) 利用“颜料桶工具”将两个边框之间的部分填充 成黑色，如图12-52所示。 (11) 使用“选择工具”分别选中两个边框，按Delete 键将它删除，如图12-53所示。 18 12.2.5 制作遮丑效果 (12) 鼠标拖动“添缝”图层到“按钮”图层之下，使按 钮在整个动画过程中都是可见的，如图12-54所示 。 (13) 至此，完整的动画已经完成。这时按 Ctrl+Enter组合键测试动画，可以看到完整作品的 动画效果。测试调整完毕，选择“文件”“保存”命 令保存文档。测试后效果如图12-55所示。 19 12.3 课后练习手机广告 本练习中制作的手机广告是通过遮罩及逐帧、 运动补间动画完成手机拍照及文字的变化效果 ，效果如图12-56所示。 参见教材P242 20
