《-电子商务网页设计-》课程教案项目8-2

《电子商务网页设计》课程教案项目八（2）授课教师班级学时6授课日期主题或任务第8章使用Animate制作网页中的动画课型专业课授课地点●多媒体教室○企业○专业教室○实训室教学目标1、知识目标：了解AdobeAnimate2020的基础知识、工作界面2、技能目标：掌握AdobeAnimate2020的基本操作和常用工具的使用方法3、素质目标：利用AdobeAnimate2020制作电子商务网页中常用的简单动画学习内容使用Animate2020制作节日活动动画遮罩文字效果制作按钮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.1遮罩文字效果任务实施1.教师布置任务，发送网页素材和效果图，演示遮罩文字的操作方法。(1)运行Animate2020,执行“文件”→“新建”菜单命令,在弹出的“新建文档”对话框中,选择预设中的“标准”，,然后单击“创建”按钮,如图8—26所示。图8—26“新建文档”对话框(2)选择菜单栏的“窗口”→“库”菜单命令,打开库面板，在库面板中单击新建元件按钮，在弹出的“创建新元件”对话框中,在名称栏输入文字，如图8-27所示。图8—27创建新元件对话框(3)设置工具面板的前景色为黑色，如图9-28所示，单击文字工具，在文字元件中输入一个“福”字。图8—29创建新元件(4)选择菜单栏的“窗口”→“属性”菜单命令，打开属性面板，选择工具栏的选择工具，单击“福”字，在属性面板里设置文字大小为150px，如图8-30所示。图8-30属性面板图8-31福到了（5）单击工具栏的任意变形工具，将文字180度翻转，如图8-31所示。（6）在库面板中单击新建元件按钮，在弹出的“创建新元件”对话框中,在名称栏输入遮罩文字，类型选择为“影片剪辑”，单击“确定”，如图8-27所示。图8-32创建新元件（7）将库面板的文字元件拖动到影片剪辑窗口中，再新建图层，设置前景色为红色，在图层中使用矩形工具绘制一个矩形，再单击菜单栏“修改”→“变形”→“缩放与旋转”，在弹出的对话框中设置旋转为45度，单击“确定”，如图8-33所示图8-33缩放和旋转对话框（8）在新建图层2的文字上双击，修改图层名为背景，并将它拖动到图层1的下面。再修改图层1的名字为底字，并调整文字的位置使文字能在红色背景的中心，如图8-34所示图8-34图层操作图8-35图层操作（9）在“底字”图层的上面再新一个图层，并命名为遮罩文字，再次将文字元件拖动到“遮罩文字”图层上，并调整位置使两个文字元件重合，如图8-35所示。（10）选择“遮罩文字”图层的文字，在属性面板中选择色彩效果下的色调选项，并将色调的调到最右边使文字变成白色，如图8-36所示。图8-36属性面板设置（11）在最上层新建图层命名为遮罩，设置前景色为黑色，用矩形工具绘制一个长方形，并用任意变形工具旋转矩形，如图8-37所示。图8-37遮罩层内容（12）黑色矩形的上面右键在弹出的菜单上面选择“转换为元件”，在弹出的“转换为元件“对话框中单击”，单击“确定”。（13）在时间轴上20帧上按左键拖动，选择全部图层的20帧。在面板的“插入键”按钮上左键按着，在弹出的列表中选择帧，为全部图层添加帧，如图8-38所示。图8-38插入帧（14）单击遮罩层的黑色矩形，右键在弹出的菜单中选择“创建补间动画”，单击遮罩层最后一帧，将黑色矩形拖动到文字的下方，如图8-39所示。图8-39添加补间动画图8-40设置遮罩（15）在遮罩层上右键，在弹出的菜单中选择“遮罩层”，如图8-40所示。这样黑色矩形经过的地方，下方白色的文字就能显示出来，就像文字发光一样。（16）单击舞台左上方“←”，返回“场景1”，将库中的“遮罩文字”拖到舞台上，按“Ctrl+Enter”测试动画，如图8-41所示。图8-41测试动画（17）单击菜单栏的“文件”→“保存”,在保存对话框中输入文件名为简单动画，类型为Animate文档（*.fla），完成操作。2．学生按要求上机实践完成任务。3．教师指导检查任务完成效果。小结：本任务通过Animate遮罩动画制作网页常看到的发光文字效果。发光效果不仅仅只有文字，还可以是图像，如果大家留意就会发现很多网址上也会有发光的动画效果。任务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中按钮主要是负责鼠标的各种事件处理。任务3.3ActionScript脚本任务实施1.教师布置任务，演示ActionScript脚本的操作方法。(1)运行Animate2020,执行“文件”→“打开”菜单命令,在弹出的“打开”对话框中,选择上次任务文件简单动画.fla。(2)在红包雨图层的上面新建一个图层并命名为红包,单击菜单栏“窗口”→“库”，打开库面板，将红包按钮拖动到新建的红包图层，如图8-49所示。图8-49新建红包图层（3）单击菜单栏“窗口”→“属性”，打开属性面板，选择红包按钮，在属性面板中实例名称输入btn，如图8-50所示。图8-50属性面板（4）在红包按钮上面右键，在弹出的菜单中选择“创建补间动画”，选择40帧，再将红包按钮移动一下位置，如图8-51所示。图8-51补间动画（5）选择第40帧，单击菜单栏“窗口”→“动作”，打开动作面板，单击动作面板的“代码片断”按钮，在弹出的对话框中选择“ActionScript”→“时间轴导航”→“在此帧处停止”，双击“在此帧处停止”，Animate就会在自动添加一个Action图层并在40帧处加上stop();这个语句，同时40帧上还会有一a，表示该帧上有动作，如图8-52所示。图8-52动作面板（6）修改stop();为gotoAndPlay(1);让动画到第40帧的时候再从头开始。（7）在前景图层下新建一个图层并命名为中奖，在第41帧处单击时间轴面板插入关键帧按钮，同时在前景、背景图层的41帧处同样插入关键帧，如图8-53所示。图8-53插入关键键（8）中将图层中使用文字工具，在舞台中输入“恭喜您抽中巧克力一盒”，打开属性面板，设置大小为50Pt，填充颜色为红色，调整文字位置，如图8-54所示。图8-54添加文字（9）选择Action图层的第40帧，单击菜单栏“窗口”→“动作”，打开动作面板，单击动作面板的“代码片断”按钮，在弹出的对话框中选择“ActionScript”→“时间轴导航”→“单击以跳以转到帧并停止”，单击舞台中红包图层的红包按钮，双击“单击以跳以转到帧并停止”，如图8-55所示。图8-55添加按钮动作（10）将gotoAndStop(5);修改为gotoAndStop(41);完成ActionScript的脚本添加，关闭动作面板，Ctrl+s保存文件，Ctrl+Enter测试动画。(11)单击菜单栏“文件”→“发布设置”，在打开的发布设置对话框中单击“发布”，如图8-56所示，文件夹中就会有扩展名为.swf和.html的文件。图8-56发布设置2．学生按要求上机实践完成任务。3．教师指导检查任务完成效果。教师总结（10分钟）(1)绘图和编辑图形不但是创作Animate动画的基本功,也是进行多媒体创作的基本功。在绘图过程中要学习怎样使用元件来组织图形元素,这是Animate动画的一个特点。(2)补间动画是整个Animate动画设计的核心,也是Animate动画的最大优点,它有动画补间和形状补间两种形式。(3)遮罩是Animate动作创作中不可缺少的,使用遮罩配合补间动画,可以创建更多丰富多彩的动画效果。(4)几种类型帧的小结:关键帧在时间轴上显示为实心圆点,空白关键帧在时间轴上显示为空心圆点,普通帧在时间轴上显示为灰色填充的小方格。同一图层中,在前一个关键帧的后面任何一帧处插入关键帧,都是复制前一个关键帧上的对象,并可对其进行编辑;如果插入普通帧,是延续前一个关键帧上的内容,不可对其进行编辑;如果插入空白关键帧,则可以清除该帧后面的延续内容,可以在空白关键帧上添加新的实例对象。另外,关键帧和空白关键帧上都可以添加帧动作脚本,普通帧上则不能。(5)几种类型元件的小结:影片剪辑元件可以理解为电影中的小电影,可以完全独立于主场景时间轴,并且可以重复播放。按钮元件实际上是一个只有4帧的影片剪辑,但它的时间轴不能播放,只是根据鼠标指针的动作做出简单的响应,并转到响应的帧。通过给舞台上的按钮实例添加动作语句而实现Flash影片强大的交互性。图形元件是可以重复使用的静态图像,或连接到主影片时间轴上的可重复播放的动画片段。图形元件与影片的时间轴同步运行。思考并讨论（5分钟）同学们将学习过程中的疑难问题记录下来,和大家交