项目八：任务3.2制作按钮 ( 教学设计)《电子商务网页设计》（中国人民大学出版社）

授课教师 班级 学时 6 授课日期 主题或任务 第8章 使用Animate制作网页中的动画 课型 专业课 授课地点 ●多媒体教室○企业○专业教室○实训室 教学目标 1、知识目标：了解Adobe Animate2020的基础知识、工作界面 2、技能目标：掌握Adobe Animate2020的基本操作和常用工具的使用方法 3、素质目标：利用Adobe Animate2020制作电子商务网页中常用的简单动画 学习内容 使用Animate2020制作节日活动动画 1. 遮罩文字效果 2. 制作按钮 3. ActionScript脚本 重点难点 · 重点：Animate2020的基本操作及使用实例 · 难点：Animate2020基本操作的掌握 教学方法 ●理论讲授 ●小组讨论 ●项目教学 ●任务驱动 ○参观教学 ○模拟教学 ○实验实训 ○演示教学 ○其他 素材资源 ○文本素材○实物展示●PPT幻灯片 ○音频素材●视频素材○动画素材 ●图形/图像素材●网络资源○其他 教学设计 本章分3次进行授课，每次90分钟，具体: 1、课程导入 （1）课程内容回顾 （2）宣布教学内容、目的 （3）新知导入（10分钟） 参考说辞：本任务在Animate动画中为红包按钮加入ActionScript脚本用于控制动画。当没有点中正确的红包时红包雨不停，在帧上的ActionScript脚本自动跳到第1帧重新开始动画，只到点到正确的红包按钮ActionScript脚本跳到中奖信息帧。通过动画以实现网站与消费者之间的互动。 互动讨论（5分钟） 1、你觉得Animate2020软件最难掌握的工具是什么？ 观察环节(5分钟)：你觉得以下图片有什么特别之处？ 通过观察，让学生进一步加深对动画的兴趣。 2、教学内容 任务三：使用Animate2020制作节日活动动画 1.动画的基本类型 (1)逐帧动画。 (2)传统补间 (3)补间动画 (4)补间形状 (5)运动引导层动画 (6)遮罩层动画 2.图层 在Flash中,图层是最基本也是最重要的概念之一。图层基本可以处理所有对象,包括文本、图形等。 任务3.2制作按钮 任务实施 1. 教师布置任务，演示制作按钮的操作方法。 (1)运行Animate2020,执行“文件”→“打开”菜单命令,在弹出的“打开”对话框中,选择上次任务文件简单动画.fla。 （2）执行“文件”→“导入”→“导入到库”菜单命令,在“导入”对话框中,打开图片文件“红包.jpg”、“背景云1.jpg”、“背景云2.jpg”，在库面板中我们就看到了导入的三个jpg内容。 （3）单击库面板的新建元件按钮，在打开的创建新元件对话框中在名称中输入红包，类型选择为按钮，单击“确定”，如图8-42所示。 图8-42 创建新元件对话框 （3）将库面板中的图像红包.jpg拖动到按钮舞台上，打开属性面板设置图像宽为50，高为50。 （4）在时间轴面板上点击关键帧按钮分别为“指针经过”、“按下”、“点击”添加关键帧，如图8-43所示。 图8-43按钮状态键 （5）单击库面板的新建元件按钮，在打开的创建新元件对话框中在名称中输入红包雨，类型选择为图形，单击“确定”，如图8-44所示。 图8-44创建新元件 （6）在红包雨元件的舞台上放多个红包按钮，返回场景1。 （7）在场景新建两个图层，分别命名为背景、前景，调整图层的位置，将背景层放在最底部，前景图层放在最上面，再把图层1重命名为福字，如图8-45所示。 图 8-45新建图层 （8）在背景图层放背景云1.jpg、在前景图层上放背景云2.jpg，调整图像的位置，如图8-46所示。 图8-46添加背景 （9）在前景图层下新建图层并命名为红包雨，把库面板中的红包雨元件拖动到舞台上，并调整位置，如图8-47所示。 图8-47添加红包雨 （10）在40帧处拖动鼠标从第一个图层到最后一个图层并添加帧，在红包雨元件上右键选择“创建补间动画”，并在40帧处向下移动红包雨元件，完成补间动画，如图8-48所示。 图8-48创建补间动画 （11）单击菜单栏“文件”→“保存”，Ctrl+Enter测试动画，完成操作。 2．学生按要求上机实践完成任务。 3．教师指导检查任务完成效果。 小结：本任务是在Animate下制作红包雨动画效果，这在很多网址、APP上都有抢红包活动，点击红包抢优惠，在Animate中按钮主要是负责鼠标的各种事件处理。 学科网（北京）股份有限公司 $$