马海端百度《路径动画》.docVIP

教案 科目：网页制作综合实训 课题：第四章第2节《路径动画》 版本：高等教育出版社 石家庄市矿区职教中心 马 海 端 2012年3月  路径动画 科目：网页制作综合实训 版本：高等教育出版社 课题：第四章第2节路径动画 教学目标： 1、理解路径动画的概念 2、掌握图形元件的制作步骤 3、掌握路径动画的制作步骤 教学重点：路径的概念、路径动画的制作步骤。 教学难点： 1、掌握图形元件的制作步骤 2、掌握路径动画的制作步骤 教学过程： 预习： 通过百度有哪些信誉好的足球投注网站解决下列问题： 1、了解什么是路径动画的概念。 2、制作一个最简单的路径动画，基本掌握路径动画的制作步骤。 导入： 图形元件，是FLASH动画中的三大元件之一，也是应用最多的元件。图形元件一旦创建，就可多次使用。在任何时候，只要在图库中修改图形元件，就能实现动画内容的整体修改，非常方便实用。 本课所讲的路径动画，也称为“引导线”动画，就是指动画对象（必须是元件）沿着事先设计的路线（引导线）运动。下面我们通过实例讲解路径动画的创建过程。 一 、任务描述 模仿写字的过程，随着笔的移动，逐渐显示所写的大写字母“F”。 二、操作步骤 1、新建一个空白文档，大小400×300像素，背景为白色，帧频为10fps。 2、新建一个图形元件。 （1）按CTRL+F8键，在“创建新元件”对话框中，输入元件名称“笔”，类型选“图形”，点“确定”。 （2）在图元“笔”的编辑区制作图形元件。 a.绘制笔杆。利用“矩形”工具，选择线条色为无，填充色为“竖彩色条纹”绘制一个矩形做为笔杆。 b.绘制笔尖。再绘制宽度相同、填充色为灰色的小矩形。利用选择工具调整小矩形形状成为笔尖形状，移动笔尖，放在笔杆下面。 c.组合笔杆与笔尖。同时选中笔杆和笔尖，按CTRL+G组合。组合后如下图： 确认无误后，单击窗口左上方的“场景1”，返回场景。 3、打开库面板，按“CTRL+L”，将“笔”元件拖入场景1。 4、利用“任意变形工具”将笔的中心点移到笔尖的位置。 5、在“笔”层的第20帧，按F6，插入关键帧。 6、单击图层区的“增加引导层”按钮，为“笔”层创建引导层。在引导层进行如下操作： （1）在第1帧，利用文本工具输入字母“F”，并调整到合适大小； （2）按下“CTRL+B”，将字母打散为图形； （3）利用“墨水瓶工具”，为文字图形描边； （4）利用“箭头工具”选择文字图形的填充色，按下键盘上的“DELETE”键将填充色删除； （5）创建新图层，并改名为“文字”，将引导层的第1帧复制，在“文字”层的第1帧按下CTRL+SHIFT+V，原位置粘贴到；隐藏并锁定“文字”层； （6）在“引导层”的第1帧，将字母F的右上角边框线擦出一点缺口，效果如下图： 7、选择“笔”层的第1帧，将该帧的对象移动到引导线的起点，也就是字母F的右上角，让笔的中心点与引导线的起点重合，如下图： 8、选择“笔”层的第20帧，将该帧的对象移动到引导线的终点，如下图； 9、在“笔”层的第1帧至第20帧，创建补间动画。 10、将“笔”层与“引导”层锁定，并隐藏“引导”层。 11、在“文字”层的第2帧到第20帧之间都插入关键帧。 12、选择“文字”层的第1帧，利用工具中的“橡皮擦工具”，将笔对应的从开始到结束位置之间多余的线条全部擦除。 13、“文字”层的第2帧到第19帧重复步骤12. （每帧在擦除多余的线条时，以“笔”的位置做参考）时间轴如图所示： 注：步骤12、13用来逐步显示文字。 14、测试动画，并保存文件。 三、小结 路径动画的制作要注意以下几点： 动画的对象必须是元件； 起始关键帧中元件实例的中心点与引导线的起点重合； 结束关键帧中元件实例的中心点与引导线的终点重合； 当引导线为封闭曲线时，系统默认两点间最短的路径为当前运动路径； 引导线只有在设计时能看见，在导出的动画中无法看见。 四、作业 1、基本技能练习： 制作一个画“心”形效果的动画。 任务描述：模仿画画的过程，随着画笔的移动，逐渐显示出心形的形状。 2、能力拓展： 通过百度有哪些信誉好的足球投注网站“将FLASH小动画制作成QQ表情”的方法，然后将自己在第1题作业中制作的动画制作成QQ表情，发给你的同学。 3、作品交流： 注册百度用户（用真名），将你的作品发布在百度上，通过百度平台，全班进行交流。说说你最喜欢哪个作品，为什么？ 教案《路径动画》 马海端 第6页 共6页 教案《路径动画》 马海端 第1页 共6页