案例20：中秋节快乐——制作电子贺卡（课件）-《Animate CC动画制作案例教程》（电子工业出版社第2版）同步精品课堂

中秋节快乐——制作电子贺卡 -案例20- Animate CC动画制作案例教程 电工版第二版 案例描述 制作如图所示的“中秋节快乐”电子贺卡动画短片。镜头中花枝轻轻摇曳，花瓣纷纷飘落，云朵缓缓飘过:诗句伴随着背景音乐逐字出，镜头中各种中秋元素烘托出浓浓的思乡之情。最后呼应主题，呈现祝福语“中秋”文字。 案例分析 创建背景图像渐显的传统补间动画;添加背景音乐。 01 利用 GIF 动画创建“花瓣雨”影片剪辑，制作花瓣纷纷飘落的效果 制作诗句文字逐字出现的遮罩动画效果。 02 03 操作流程演示 第一部分 操作流程演示 1.在 Animate 中新建 ActionScript 3.0 文档，设置舞台大小为“900x300”像素，背景颜色为“黑色”。按【Ctrl+S】组合键保存文件，命名为“中秋节快乐.fla”。 操作流程演示 2.执行菜单“文件”一“导入”一“导入到库”命令，将素材文件夹中除“花瓣雨.gif”以外的所有素材导入库，素材文件夹如图所示。 操作流程演示 3.将“图层_1”重命名为“背景”，将库中的“背景”图像拖入舞台，利用对齐面板调整其大小及位置与舞台匹配。用鼠标右键单击背景图像，在弹出的快捷菜单中执行“转化为元件”命令，将其转化为图形元件。在“背景”图层的第 30 帧处插入关键帧，在第 300 帧处插入帧。 操作流程演示 4.选中第1帧处的“背景”元件，在其属性面板中设置 Alpha 值为 0%。选择第 1~30 帧之间的任一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令，此时“背景”图层效果如图所示。 操作流程演示 5.在“背景”图层上方新建图层，命名为“月亮”。选中“月亮”图层的第1帧，将库中的“月亮.png”拖入舞台，并将其转化为图形元件。在“月亮”图层的第 50 帧处插入关键帧，效果如图所示。 操作流程演示 6.选中第1帧中的“月亮”元件，在其属性面板中设置 Alpha 值为 10%，并向舞台下方调整其位置，如图 7-5 所示。选择第 1~50 帧之间的任一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令。 操作流程演示 7.在“月亮”图层上方新建图层，命名为“云”。选中“云”图层的第1帧，将库中的云.png”拖入舞台，将其转化为图形元件并调整大小及位置如图所示。在“云”图层第300 帧处插入关键帧，将云水平向右移动。在第 1~300 帧之间创建传统补间动画。 操作流程演示 8.在“云”图层上方新建图层，命名为“花枝”。在“花枝”图层第 50 帧处插入关键帧将库中的“花枝.png”拖入舞台，将其转化为图形元件并调整大小及位置，利用“任意变形工具”将其中心点移至左侧树干处，效果如图所示。 操作流程演示 8.分别在第 80 帧、110 帧处插入关键帧，调整 80 帧处花枝效果如图所示。分别在第 50~80 帧、80~110 帧之间创建传统补间动画。 操作流程演示 9.执行“插入”一“新建元件”命令,新建名为“花瓣”的影片剪辑,将素材“花瓣雨.gif导入当前影片剪辑的舞台中，效果如图所示。 操作流程演示 10.返回场景，在“花枝”图层上方新建图层，命名为“花瓣雨”。在该图层第 50 帧处插入关键帧，将库中的“花瓣”影片剪辑拖入舞台。利用“任意变形工具”调整其大小及位置如图所示。 操作流程演示 11.在“花瓣雨”图层上方新建图层，命名为“诗句”。在该图层第 80 帧处插入关键帧,将库中的“文字-诗句.png”拖入舞台，并调整其大小及位置如图所示。 操作流程演示 12.在“诗句”图层上方新建图层，命名为“矩形”。在该图层第 80 帧处插入关键帧，利用“矩形工具”绘制有填充色的小矩形，效果如图所示。在 130 帧处插入关键帧，调整矩形形状如图所示。在第 80~130 帧之间创建补间形状动画。 操作流程演示 13.在“矩形”图层的第 131 帧处插入关键帧，继续绘制有填充色的小矩形，如图所示。在第 181 帧处，调整矩形形状如图所示。在第 131~181 帧之间创建补间形状动画。 操作流程演示 14.继续在“矩形”图层的第 182~202 帧之间创建补间形状动画。第 182、202 帧处矩形形状分别如图所示。 操作流程演示 15.在时间轴面板中用鼠标右键单击“矩形”图层，在打开的快捷菜单中执行“遮罩层命令。 操作流程演示 16.在“矩形”图层上方新建图层，命名为“中秋”。在该图层第 210 帧处插入关键帧,将库中的“文字-中秋.png”拖入舞台，将其转化为图形元件并调整大小。在第 260帧处插入关键帧。调整第 210 帧及第 260 帧处元件的大小分别如图 7-19、图 7-20 所示。在第 210~260帧之间创建传统补间动画。 操作流程演示 17.在“中秋”图层上方新建图层，命名为“音乐”。选中该图层时间轴的第1帧，将库中的“背景音乐.wav“拖入舞台。打开属性面板，设置声音属性如图所示。 操作流程演示 18.新建按钮元件“重播”，选择“文本工具”，设置文字大小为“61 点”;字符系列为“Broadway”;文本(填充)颜色为“白色”，在元件编辑窗口输入文字“replay”。分别在“指针经过”及“按下”帧中插入关键帧，调整“指针经过”帧中的文字大小为“50 点”，颜色为“#ffff00”。返回场景。 操作流程演示 19.在“音乐”图层上方新建“按钮”图层，在该图层第 300 帧处插入关键帧，将“重播”按钮元件放置到舞台中。将“按钮”元件实例命名为“replay"，效果如图所示。 操作流程演示 20.将播放头放到第 300 帧处，打开代码片段面板，展开“时间轴导航”分类。双击“在此帧处停止”选项，打开如图所示的动作面板，新添加的脚本语言高亮显示。此时时间轴自动创建一个新图层“Actions”。 操作流程演示 21.选择“按钮”元件，打开代码片段面板，展开“时间轴导航”分类，双击“单击以转到帧并播放”选项，打开动作面板，在添加的脚本语言中将“gotoAndPlay(5)”替换成gotoAndPlay(1)”，效果如图所示。 操作流程演示 22.按【Ctrl+S】组合键保存文件，按【Ctrl+Enter】组合键测试影片。播放效果如图所示。 分组实践 第二部分 分组实践 布置任务：在学生端电脑完成案例制作，可根据小组讨论结果适当添加有趣效果。 巩固练习 随堂练习 1. 若制作“月亮”从云层后缓缓升起并变圆的动画，最适合使用（ ） A. 传统补间动画（结合Alpha和缩放） B. 补间形状动画 C. 骨骼动画 D. 遮罩动画 【答案】A 【解析】 “月亮升起”涉及位置的移动（补间）和可能的大小/透明度变化（从模糊到清晰，从小变大）。传统补间动画能够很好地控制影片剪辑实例的位置、缩放、Alpha等属性，实现这种综合效果。 随堂练习 2. 制作“祝福语”文字逐个如打字般出现的效果，最合适且高效的方法是（ ） A. 逐帧绘制每个字出现的状态 B. 使用遮罩层，用一个移动的矩形从左到右揭示文字 C. 使用动态文本，通过ActionScript逐个字符地添加到文本框 D. 使用补间形状将文字变形出来 【答案】C 【解析】 使用ActionScript控制动态文本框，通过循环或定时器逐个将预设的完整祝福语字符串的字符添加到文本框的text属性中，可以精确控制打字速度、节奏，并且易于修改文字内容，是制作打字机效果最灵活高效的方法。 随堂练习 3. 希望贺卡背景播放一首循环的、柔和的背景音乐，并且音乐在贺卡打开（动画开始）时就自动播放，应该设置声音的同步选项为（ ） A. 事件 B. 开始 C. 停止 D. 数据流 【答案】A 【解析】 “事件”同步模式的声音在触发（播放头到达该帧）后，会独立于时间轴完整播放，适合背景音乐。将它放在动画开始的第一帧（或贺卡封面打开后的帧），并设置循环，即可实现自动播放且不受时间轴影响的背景音乐。 随堂练习 4. 在贺卡最后，要添加一个“点击此处发送祝福”的按钮，点击后跳转到默认的邮件客户端并填充主题和收件人，可以使用（ ） A. gotoAndPlay()跳转到邮件动画场景 B. navigateToURL()函数打开一个mailto:链接 C. 加载外部SWF文件 D. 播放一段发送邮件的动画 【答案】B 【解析】 ActionScript 3.0的navigateToURL()函数可以用于在浏览器中打开URL。使用mailto:协议可以调用系统默认邮件客户端，并预设收件人、主题和正文，例如：navigateToURL(new URLRequest("mailto:friend@example.com?subject=中秋快乐&body=诚挚的祝福..."));。 随堂练习 5. 要制作花瓣缓缓飘落的动画，并且希望每片花瓣的飘落路径和速度都略有不同，最高效的方法是（ ） A. 为每一片花瓣单独制作引导层动画 B. 将一片花瓣的飘落动画做成影片剪辑，然后复制多个实例，并微调它们的起始时间、位置和运动参数 C. 使用骨骼动画控制所有花瓣 D. 使用补间形状一次制作所有花瓣 【答案】B 【解析】 制作一个包含完整飘落路径动画的“花瓣”影片剪辑元件。然后从库中多次拖出该元件的实例到舞台上。分别选中每个实例，在属性面板中微调其起始帧（延迟）、色调（颜色）、缩放大小，甚至可以复制其内部的运动路径并稍作修改，即可快速创建出丰富多样的花瓣飘落效果。 随堂练习 6.在贺卡中嵌入一段展示制作过程的短视频，希望视频播放时有播放、暂停控制，应该选择哪种视频导入方式？（ ） A. 在SWF中嵌入FLV/F4V并在时间轴中播放 B. 使用播放组件加载外部视频 C. 转换为逐帧动画 D. 仅作为背景图片 【答案】B 【解析】 使用播放组件（如FLVPlayback）加载外部视频，组件自带了播放控制UI（播放、暂停、进度条等），用户交互性好，且视频文件独立，便于更新。 THANKS 谢谢观看 $