《Flash CS5实例教程 第2版 配套习题作者 刘杰 许晶华 11章》由会员分享，可在线阅读，更多相关《Flash CS5实例教程 第2版 配套习题作者 刘杰 许晶华 11章（12页珍藏版）》请在金锄头文库上搜索。
1、 交互式动画的制作 11.4 课堂练习制作浏览婚礼照片 【练习知识要点】使用椭圆工具、多角星形工具和颜色面板绘制按钮图形，使用遮罩层命令将 图片遮罩，使用动作面板设置脚本语言，如图 11-1 所示。 【效果所在位置】光盘/Ch11/效果/制作浏览婚礼照片. fla。 图 11-1 11.4.1 制作元件 （1）选择“文件 新建”命令，弹出“新建文档”对话框，单击“确定”按钮，进入新建 文档舞台窗口。按 Ctrl+F3 组合键，弹出文档“属性”面板，单击“大小”选项后面的“编辑” 按钮，在弹出的对话框中将舞台窗口的宽度设为 600，高度设为 397，将“背景”颜色设 为灰色（#999999） ，
2、如图 11-2 所示，单击“确定”按钮，改变舞台的大小和颜色。 （2）调出“库”面板，选择“文件 导入 导入到库”命令，在弹出的“导入到库”对话 框中选择“Ch11 素材 制作浏览婚礼照片 01、02、03、04、05、06、07”文件，单击“打 开”按钮，文件被导入到“库”面板中，如图 11-3 所示。 Flash CS5 实例教程（第 2 版） 2 图 11-2 图 11-3 （3）在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称” 选项的文本框中输入“照片合集” ，在“类型”选项的下拉列表中选择“图形”选项，单击“确定” 按钮，新建一个图形元件“照片合集” ，如图
3、 11-4 所示。舞台窗口也随之转换为图形元件的舞台 窗口。 （4）选择“矩形”工具，在工具箱中将“笔触颜色”设为无， “填充颜色”设为白色，在 舞台窗口中绘制一个矩形，如图 11-5 所示。选择“选择”工具，选中白色矩形，在工具箱中 单击“填充颜色”按钮，弹出纯色面板，在“Alpha”选项框中输入 50，如图 11-6 所示，按 Enter 键，确定操作，舞台窗口中的图形效果如图 11-7 所示。 图 11-4 图 11-5 图 11-6 图 11-7 （5）分别将“库”面板中的位图“02” 、 “03” 、 “04” 、 “05” 、 “06”和“07”拖曳到舞台窗口 中的矩形上，如图 1
4、1-8 所示。选择“选择”工具，将图形上的图片同时选取，如图 11-9 所示。 第 11 章 交互式动画的制作 3 图 11-8 图 11-9 （6）选择“窗口 对齐”命令，弹出“对齐”面板，在“对齐”面板中单击“垂直中齐” 按钮，如图 11-10 所示，将图片水平居中对齐，效果如图 11-11 所示。再单击“对齐”面板中 的“水平居中分布”按钮，如图 11-12 所示，将图片水平居中分布，效果如图 11-13 所示。按 键盘上的方向键，将图片微移到矩形的中心位置，取消图片的选取状态，效果如图 11-14 所示。 图 11-10 图 11-11 图 11-12 图 11-13 图 11-14
5、（7）在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称” 选项的文本框中输入“浏览” ，在“类型”选项的下拉列表中选择“按钮”选项，单击“确定”按 钮，新建一个按钮元件“浏览” ，如图 11-15 所示。舞台窗口也随之转换为按钮元件的舞台窗口。 （8）选择“椭圆”工具，在工具箱下方将“笔触颜色”设为无， “填充颜色”设为白色， 按住 Shfit 键的同时，在舞台窗口中绘制一圆形，如图 11-16 所示。选择“选择”工具，选中 圆形，选择“窗口 颜色”命令，弹出“颜色”面板，在“颜色类型”选项的下拉列表中选择 “线性渐变” ，选中色带上左侧的色块，将其设为深红色（#BF0
6、000） ，选中色带上右侧的色块，将 其设为浅红色（#F26D6D） ，如图 11-17 所示。选择“颜料桶”工具，在白色圆形上单击，将 矩形填充为渐变色，如图 11-18 所示。 Flash CS5 实例教程（第 2 版） 4 图 11-15 图 11-16 图 11-17 图 11-18 （9）用相同的方法再绘制一个圆形，并将其填充相同的渐变色。使用“选择”工具选中圆 形，选择“修改 变形 垂直翻转”命令，将圆形垂直翻转，效果如图 11-19 所示。选择“钢 笔”工具，绘制一个圆角三角形，并将其填充为深红色（#8F0000） ，效果如图 11-20 所示。 图 11-19 图 11-20
7、（10）用选择“钢笔”工具再绘制一个圆角三角形，使用“选择”工具选中圆角三角形， 在“颜色”面板中的“类型”选项的下拉列表中选择“径向渐变” ，添加 1 个色块，分别选中色带 上左侧和中间的色块，将其设为白色，选中色带上右侧的色块，将其设为浅灰色（#E0E0E0） ，如 图 11-21 所示。在圆角三角形上单击鼠标，填充渐变色，并将其渐变图形拖曳到纯色图形上，效 果如图 11-22 所示。 （11）选择“选择”工具，将两个图形同时选取，按 Ctrl+G 组合键，将其组合，并将其拖 曳到圆形的中心位置，效果如图 11-23 所示。 图 11-21 图 11-22 图 11-23 第 11 章 交
8、互式动画的制作 5 11.4.2 制作照片浏览动画 （1）单击舞台窗口左上方的“场景 1”图标，进行“场景 1”的舞台窗口将“图层 1” 重新命名为“底图” 。将“库”面板中的位图“01”文件拖曳到舞台窗口中，并将其放置在中心位 置，效果如图 11-24 所示。选中“底图”图层的第 250 帧，按 F5 键，在该帧上插入普通帧，如图 11-25 所示。 图 11-24 图 11-25 （2）单击“时间轴”面板下方的“新建图层”按钮，创建新图层并将其命名为“照片” 。 选中“照片”图层的第 2 帧，按 F6 键，在该帧上插入关键帧。将“库”面板中的图形元件“照 片合集”拖曳到舞台窗口中，并将其放
9、置在舞台的左侧，效果如图 11-26 所示。选中“照片”图 层的第 250 帧，按 F6 键，在该帧上插入关键帧。按住 Shift 键同时，水平向右拖曳舞台上的图片 到舞台的右侧，效果如图 11-27 所示。 图 11-26 图 11-27 （3）用鼠标右键单击“照片”图层的第 2 帧，在弹出的菜单中选择“创建传统补间”命令， 生成动作补间动画，如图 11-28 所示。新建图层并将其命名为“遮罩” 。选中“遮罩”图层的第 2 帧，按 F6 键，在该帧上插入关键帧。选择“矩形”工具，在矩形工具“属性”面板中，将“笔 触颜色”设为白色， “填充颜色”设为灰色（#999999） ；将“笔触”选项设为
10、 5，如图 11-29 所示， 分别在舞台窗口中绘制三个大小相等的矩形，效果如图 11-30 所示。 图 11-28 图 11-29 图 11-30 Flash CS5 实例教程（第 2 版） 6 （4）新建图层并将其命名为“白框” 。选择“线条”工具，在线条工具“属性”面板中将 “笔触颜色”设为黑色，将“笔触高度”选项设为 5，在舞台窗口中适当的位置分别绘制 5 个边框 图形，效果如图 11-31 所示。用鼠标右键单击“遮罩”图层，在弹出的菜单中选择“遮罩层”命 令，将“遮罩”图层转换为遮罩层，如图 11-32 所示，舞台窗口中的效果如图 11-33 所示。 图 11-31 图 11-32
11、图 11-33 （6）在舞台窗口中选中“黑色”的边框图形，在工具箱下方将“填充颜色”修改为白色，效 果如图 11-34 所示。新建图层并将其命名为“按钮” 。选择“文本”工具，在文本工具“属性” 面板中进行设置，在舞台窗口中输入大小为 12，字体为“方正粗倩简体”的黑色文字，如图 11-35 所示。将“库”面板中的按钮元件“浏览”拖曳到舞台窗口中文字的右侧，效果如图 11-36 所示。 （7）在舞台窗口中选中浏览按钮实例，在按钮元件“属性”面板中的“实例名称”选项框中 输入 start_Btn，如图 11-37 所示。 图 11-34 图 11-35 图 11-36 图 11-37 11.4.
12、3 添加动作脚本 （1）新建图层并将其命名为“动作脚本” 。选择“窗口 动作”命令，弹出“动作”面板（其 快捷键为 F9 键） 。在“脚本窗口”中输入脚本语言， “动作”面板中的效果如图 11-38 所示。浏览 第 11 章 交互式动画的制作 7 婚礼照片效果制作完成，按 Ctrl+Enter 键即可查看效果，如图 11-39 所示。 图 11-38 图 11-39 11.5 课后习题制作化妆品介绍栏 【习题知识要点】使用矩形工具、颜色面板和创建传统补间命令制作闪动条， 使用文本工具添 加文字和文字框，使用动作面板添加脚本语言，如图 11-1 所示。 【效果所在位置】光盘/Ch11/效果/制作
13、化妆品介绍栏. fla。 图 11-1 （1）选择“文件 新建”命令，弹出“新建文档”对话框，单击“确定”按钮，进入新建 文档舞台窗口。按 Ctrl+F3 组合键，弹出文档“属性”面板，单击“大小”选项后面的“编辑” 按钮，在弹出的对话框中将舞台窗口的宽度设为 450，高度设为 504，单击“确定”按钮， 改变舞台的大小。 （2）调出“库”面板，在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对 话框，在“名称”选项的文本框中输入“矩形栏 01” ，在“类型”选项的下拉列表中选择“图形” 选项，单击“确定”按钮，新建一个图形元件“矩形栏 01” ，如图 11-2 所示。舞台窗口也随之转
14、 换为图形元件的舞台窗口。 （3） 选择 “矩形” 工具， 在矩形工具 “属性” 面板中， 将 “笔触颜色” 设为暗红色 （#630000） ， “填充颜色”设为橘红色（#DB4E35） ，将“矩形边角半径”选项设为 15，如图 11-3 所示，在舞 台窗口中绘制圆角矩形，效果如图 11-4 所示。 Flash CS5 实例教程（第 2 版） 8 图 11-2 图 11-3 图 11-4 （4）选择“选择”工具，选择填充颜色部分，如图 11-5 所示，在形状“属性”面板中单 击“填充颜色”按钮，弹出“纯色”面板，在“Alpha”选项文本框中输入 50，如图 11-6 所 示，按 Enter 键
15、，确定操作，图形效果如图 11-7 所示。 图 11-5 图 11-6 图 11-7 （5）选择“选择”工具，用框选的方法框选圆角矩形不需要的部分，如图 11-8 所示，按 Delete 键，将其删除，并将其剩余图形拖曳到舞台的中心位置，效果如图 11-9 所示。用相同的方 法分别制作图形元件“矩形栏 02” 、 “矩形栏 03” 、 “矩形栏 04”文件，分别将其颜色设置为蓝色 （#66CCFF） 、粉红色（#FF3399） 、绿色（#66CC66） ， “库”面板显示如图 11-10 所示。 图 11-8 图 11-9 图 11-10 （6）在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称” 选项的文本框中输入“变色矩形栏 01” ，在“类型”选项的下拉列表中选择“影片剪辑”选项， 第 11 章 交互式动画的制作 9 单击“确定”按钮，新建一个影片剪辑元件“变色矩形栏 01” ，如图 11-11 所示。舞台窗口也随 之转换为影片剪辑元件的舞台窗口。 （7）将“库”面板中的图形元件“矩形栏 01”拖曳到舞台窗口中，如图 11-12 所示。在“时 间轴”面板中，选中“图层 1”的第 1
