下载文档原格式
《Flash动画制作―引导路径动画》教学设计Flash动画制作引导路径动画教学设计一、教学设想本节课所采用教材是电子工业出版社的网页设计师：FLASH8中文版基础与实例教程（职业版）。
“引导路径动画”位该教材第三章的第6节。
第三章的内容为Flash动画基础，详细讲解了Flash制作动画的原理、方法和技巧。
学好“引导路径动画”技术，可以为后面的Flash动画创作打下扎实的基础。
教材的处理：我在教材的基础上进行了加深和拓展。
总体思路是：借助实例讲解本节的基础知识及注意点，分析典型实例的设计思路，在此基础上引导学生进行自主创作。
二、教学目标根据教材的具体内容和学生的认知心理，我确定本节课的教学目标如下：【知识目标】1.理解引导图层的作用2.能够灵活应用引导图层完成指定的较复杂的动画或者自行设计富有创意的引导路径动画【能力目标】1.提高学生发现问题、分析问题、寻求解决问题办法的能力2.增强学生创新意识和创新能力【情感目标】1.激发探究热情，自主实践2.加强环保意识教育，激发学生热爱大自然、保护大自然的情感三、学习内容分析根据本节课在教材中的地位、作用以及学生的起点和认知规律，我确定本节课的教学重点、教学难点如下：重点：引导图层的含义和建立方法、作用。
难点：运用引导图层，解决椭圆形路径中的起始点。
落实教学重点及难点的关键在：引导图层的应用。
四、教学对象分析我所教学的对象是中职学校计算机应用专业二年级的学生，学生已经具有一定的自学能力和操作能力，教师在课堂上只要引导到位，帮助学生解决疑难问题，学生便能自主完成一定的学习任务。
但是对信息技术，中职二年级的学生仍然停留在感性认识的程度，还没有从理论的角度进行总结。
在教学中，我通过有效的设置情景，调动学生的学习主动性，进而培养学生的自主学习、团队合作学习精神。
五、教学方法与教学策略教学过程主要采用演示操作法，任务驱动学习。
课时一节课。
1.教学方法本节课采用“目标式案例”教学，结合演示、对比竞赛、现场指导等多种教学手段与方法进行课堂教学。
《Flash8基础与实例教程》第一课F LASH8工作环境 (3)第一节工作环境简介 (3)第二节面板 (6)本课小结熟悉F LASH8的操作界面主要包括系统菜单、绘图工具栏、舞台、时间轴、属性面板各其他一些浮动面板。
.......................................................................错误！未定义书签。
第三节范例简介. (9)1.2.2制作步骤 (9)本课小结........................................................................................................错误！未定义书签。
第二课FLASH8.0基础绘图工具 (12)1．绘制和处理线条 (13)2．实例演练——画一片树叶........................................................................ 错误！未定义书签。
3．【刷子工具】的用法................................................................................. 错误！未定义书签。
4．画一个树枝.............................................................................................. 错误！未定义书签。
第三课情人节贺卡........................................................................................错误！未定义书签。
1.绘制“烛焰”元件 .................................................................................... 错误！未定义书签。
实验报告内容实验日期实验室名称实验类型设备状况机器号2013年12月4日非线性编辑网络实验室设计性良好39实验项目名称遮罩动画和引导路径动画一、实验目的掌握制作遮罩动画、引导路径动画的方法；掌握使用按钮元件来实现交互；能够结合遮罩和引导路径两种动画技术制作复杂动画。
二、实验设备环境WindowsXP+Flash8三、实验内容及步骤1.制作放大镜效果①选择“文件-导入-导入到舞台”, 选择一张图片导入到舞台中, 设置大小为“550*400”, 将图层1命名为“背景图”。
②让“背景图”处于选中状态, 单击鼠标右键-复制。
再创建一个新图层, 命名为“图片”, 在舞台中单击右键, 选择粘贴到当前位置, 再利用“任意变形工具”, 将“图片”层的图片拉大于“背景图”的图片。
锁定图层。
③创建“图层3”, 将其命名为“放大镜”。
选择“椭圆工具”, 笔触样式为无, 填充颜色为白色, 透明度30%, 绘制一个圆形, 作为放大镜。
④在时间轴上选择“放大镜”图层的第8帧、第16帧、第24帧、第31帧和第40帧各插入一个关键帧, 并移动其帧中椭圆的相应位置。
再选择各两个关键帧之间的任意一帧创建动作补间动画。
⑤选择“放大镜”图层, 单击鼠标右键-遮罩层, 将放大镜图层设为遮罩层, “图片”层为被遮罩层。
⑥最后保存并测试动画, 一个放大镜效果就这制作完成了。
2.开场动画的制作①创建图层命名为“圆圈”, 绘制一个无填充颜色, 笔触颜色为白色三厘米的圆圈, 并在第67帧处插入帧, 锁定图层。
②创建新图层命名为“竖条”, 选择矩形工具绘制一个无笔触颜色, 填充颜色为白色的矩形, 并在第14帧插入关键帧, 创建形状补间动画（让竖条从圆圈左边移动到圆圈右边）。
在第15帧和第29帧插入关键帧, 创建形状补间动画（让竖条从圆圈右边移动到圆圈左边）。
在第30帧插入关键帧, 在第67帧插入普通帧。
③选择“竖条”图层, 设置为遮罩层, “圆圈”图层为被遮罩层。
教学设计案例分析容，逐层显示内容灰太狼影片剪辑元件：导层。
形成制作时要建立多个图层的印象。
讲解示范故事1-狼来了场景1中1、导入背景图片、灰太狼素材2、修改文档属性。
3、图层1命名为背景，选择库中的背景图片添加到舞台，并在第50帧插入帧4、添加图层2命名为灰太狼，将灰太狼影片剪辑元件拖至舞台5、添加运动引导层，使用铅笔工具绘制灰太狼的行走路线。
并在第70帧插入帧。
6、在灰太狼图层的第50帧插入关键帧，调整第一帧和最后一帧中灰太狼学生观察跟着老师的讲解和提问共同制作引导层的制作过程中需要注意很多问题，在初次的尝试制作中，学生体会制作方法，在错误中感悟制作技巧。
的位置，将灰太狼的中心与引导线交叉。
设置灰太狼的运动起点和终点位置。
学生操作，教师巡视。
时限5分钟作品展示展示学生作品，分析制作失败原因总结制作要点：1、图层内容要分清：引导层中只有引导线，引导线是被引导层（灰太狼）的运动路径，自身没有动画效果。
2、引导线：引导线可以交叉，但是不能有重合和断点学生深刻认识到引导层动画的制作技巧课堂小结，巩固学习内容，为下一任务的独立完成打基础。
故事2-狼抓羊师：灰太狼看到了喜羊羊就立刻追上。
看看你的灰太狼是不是能够抓上羊呢展示狼抓羊时间轴学生尝试制作。
分析时间轴与上一任务的区别，多引导层动画，并合作尝试制作学生认识到多引导层的插入方法。
巡视指导学生完成作业。
作品展示展示学生作品，学生讲述设计的关键学生分享加深对引和目的。
制作经验。
导层动画的知识积累。
故事3-拯救小羊（拓展作业训练）懒羊羊被抓了，小羊们要去救他，请设计动画效果。
参考时间轴和背景效果图：学生分析任务认识一个引导层引导多个对象（被引导层）课堂总结这节课我们主要学习了，影片剪辑元件的制作和引导层动画的制作，在绘制引导线时要注意哪些呢学生：引导线不能过于陡峭，线条不能间断、交叉或闭合。
教学反思：课堂情境的创设符合贴近学生，能够引起学生的学习兴趣。
适当的情境与主题任务的选择是一堂课成功的关键，我分析了书中的教学目标和教学内容，设置了学生比较感兴趣的动画题材。
Flash 8 引导路径动画详解及实例单纯依靠设置关键帧，有时仍然无法实现一些复杂的动画效果，有很多运动是弧线或不规则的，如月亮围绕地球旋转、鱼儿在大海里遨游等，在Flash中能不能做出这种效果呢？答案是肯定的，这就是“引导路径动画”。
将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径动画”。
这种动画可以使一个或多个元件完成曲线或不规则运动。
1．创建引导路径动画的方法（1）创建引导层和被引导层一个最基本“引导路径动画”由二个图层组成，上面一层是“引导层”，它的图层图标为，下面一层是“被引导层”，图标同普通图层一样。
在普通图层上点击时间轴面板的“添加引导层”按钮，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层”，如图3-6-1所示。
图3-6-1 引导路径动画（2）引导层和被引导层中的对象引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。
而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能应用形状。
由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是动作补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。
（3）向被引导层中添加元件“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。
所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头，如图3-6-2所示。
图3-6-2 元件中心十字星对准引导线在图3-6-2中，我们特地把“元件”的透明度设为50%，使你可以透过元件看到下面的引导线，“元件”中心的十字星正好对着线段的端头，这一点非常重要，是引导线动画顺利运行的前提。
2．应用引导路径动画的技巧（1）“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，把【属性】面板上的【路径调整】前打上勾，对象的基线就会调整到运动路径。
而如果在【对齐】前打勾，元件的注册点就会与运动路径对齐，如图3-6-3所示。
图3-6-3 路径调整和对齐（2）引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等，此时，引导层的图标为。
（3）在做引导路径动画时，按下工具栏上的【对齐对象】功能按钮，可以使“对象附着于引导线”的操作更容易成功。
（4）过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。
（5）被引导对象的中心对齐场景中的十字星，也有助于引导动画的成功。
（6）向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要让元件的注册点对准线段的开始和结束的端点，否则无法引导，如果元件为不规则形，可以按下工具栏上的任意变形工具，调整注册点。
（7）如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择【属性】，在对话框中选择“正常”作为图层类型，如图3-6-4所示。
图3-6-4 图层【属性】面板（8）如果想让对象作圆周运动，可以在“引导层”画个圆形线条，再用橡皮擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。
（9）引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。
实例:海底世界实例简介海底是很多人向往的神秘世界，今天，我们就用Flash 来试着描绘这个世界。
这个实例中包括了补间运动动画、补间形状动画、遮罩动画、引导路径动画等四种动画形式，制作上要比前面几课中的实例难度大一些，不过，它能综合复习前面学过的内容，操作原理也是我们熟悉的，相信你一定能顺利完成这个实例，其运行效果如图3-6-19所示。
图3-6-19 海底知识提要综合应用四种动画形式创建透明水泡创建多层遮罩制作步骤（1）创建影片文档新建一个影片文档，舞台尺寸设置为450*300象素，【背景色】设置为深蓝色，如图3-6-20所示。
图3-6-20 文档属性（2）创建元件本例中的元件较前面的实例要多一些，我们把它们分成“水泡部分”、“海底部分”、“游鱼部分”三个部分来叙述。
先来创建和水泡有关的部分。
1、创建“单个水泡”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“单个水泡”。
先在场景中画一个无边的园，颜色任意，大小为30*30，再设置混色器面板的参数，四个调节手柄全为白色，Alpha值从左向右依次为100％、40％、10％、100％，如图3-6-21所示，用油漆筒工具在画好的圆的中心偏左上的地方点一下，如对填充的颜色不满意，可以用填充变形工具进行调整。
图3-6-21 水泡（放大400倍）、填充位置及混色器面板参数2、创建“一个水泡及引导线”元件执行【插入】|【新建元件】命令，新建影片剪辑，名称为“一个水泡及引导线”。
点击添加引导层按钮添加一个引导层，在此层中用铅笔工具从场景的中心向上画一条曲线并在第60帧处加普通帧。
在其下的被引导层的第一帧，拖入库中的名为“单个水泡”的元件，放在引导线的下端，在第60帧加关键帧，把“单个水泡”元件移到引导线的上端并设置Alpha值为50％，如图3-6-22所示。
图 3-6-22 水泡及引导线3、创建“成堆的水泡”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“成堆的水泡”。
从库里拖入数个“一个水泡及引导线”元件，任意改变大小位置，图3-6-23仅供参考。
图3-6-23 成堆的水泡（放大200倍）4 、创建“鱼及引导线”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“鱼及引导线”。
此元件只有引导层和被引导层二层，点击时间轴面板上的添加引导层图标，新建引导层，在引导层中用铅笔工具画一条曲线作鱼儿游动时的路径，在被引导层中执行【文件】|【导入到场景】命令，将本实例中的名为“鱼”的元件导入到场景中，在第1帧及第100帧中分别置于引导线的两端，在第一帧中建立补间运动动画，在【属性】面板上的【路径调整】、【同步】、【对齐】三项前均打勾，如图3-6-25所示。
图3-6-25鱼及引导线下面我们来创建海底实例中“水波荡漾”效果所需的元件。
5、创建“海底”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“海底”。
选择第一帧，然后再执行【文件】|【导入到场景】命令，将本实例中的名为“海底.bmp”的图片导入到场景中。
6、创建“遮罩矩形”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“遮罩矩形”。
在场景中画一个500*4的无边矩形，因为“遮罩层”中的图形在播放时不会显示，所以颜色任意。
复制并粘贴这个矩形，向下移一点位置，使其变成二个，再复制并粘贴这二个矩形，再向下移一点位置，使其变为四个，如此循环，直至创建出一个500*540的矩形，如图3-6-26所示。
图3-6-26遮罩矩形7、创建“水波效果”元件水波荡漾的效果是用遮罩动画的手法做的，看着挺漂亮，实际制作却很简单，只用三层就完成了，里面有二个小技巧，在下面的讲解过程中会着重介绍。
执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“水波效果”，如图3-6-27所示。
图3-6-27创建“水波效果”元件先把最下面图层作为当前编辑图层，从库里拖入名为“海底”的图形元件，在【属性】面板上设置元件的X值为0，Y 值为0，在时间帧上点一下右键，在弹出菜单中选择【复制帧】，在第100帧加普通帧。
然后新建一个图层，在这层的第一帧上点一下右键，在弹出菜单中选择【粘贴帧】，就把刚才的元件粘到第二层里了，在【属性】面板上设置此元件的X值为0，Y值为1，Alpha值为80％，在第100帧加普通帧。
注意：这里是一个技巧：第二层图片与第一层图片的位置差决定水波荡漾的大小！位置差越大，水波越大，其Alpha 值的大小决定水波的清晰程度，Alpha值越大，水波越清晰，反之越模糊。
图3-6-28是第一层和第二层中两张图片在X，Y轴的位置的不同的对比。
图3-6-28两张图片在场景中的位置对比要实现水波荡漾，光有二层图片是不行的，还要用遮罩动画实现光线的明暗变化才行,这样，才能产生水的流动感。
新建一层，在第1帧上拖入库中名为“遮罩矩形”的元件，注意下面的边缘对着“海底图片”的下边缘。
在第100帧上加关键帧，拖动“遮罩矩形”，使其上边缘对着“海底图片”的上边缘，在第1帧创建补间动作动画。
如图3-6-29所示。
图3-6-29遮罩层中矩形元件的位置至此，这个动画所需的基本构件已经制作完成，大功告成，接下来还必需在场景中把各个构件“组装”起来。
在主场景中一共需要5个图层，我们由下而上一层一层地叙述，请随时参考图3-6-32。
（3）创建动画1、创建背景层从库中把名为“水波效果”的元件拖到场景中，在第134帧加普通帧，该层命名为“背景”。
2、创建水泡层新建名为“水泡”的图层，在第1帧，第30帧从库里把名为“成堆的水泡”的元件拖到场景中来，数目、大小、位置任意，在第134帧加普通帧。
3、创建游鱼层新建名为“鱼”的图层，从库里把名为“鱼及引导线”的元件拖放到场景的左侧，数目、大小、位置任意，在第134帧加普通帧。
图3-6-31图片、鱼、水泡的位置从场景中你是否发现，我们在制作过程中免不了会在场景外放置一些对象（图3-6-32所示在场景外就有一条鱼），这些“场外对象”在本地播放器中不会出现，而当你在网上发布swf文件时，由于网站（尤其各种论坛）默认的swf文件的尺寸不尽相同，有的会显示出“场外对象”，这好比一个舞台剧演出时，幕后候台演员的情况也暴露出来，非常不美观，怎么办呢？记得在谈到“遮罩动画”时，我们曾提到过“遮罩”的另外一个作用是“用来遮罩全部场景或某个特殊区域”，那么，下面就试试用遮罩来为我们管理舞台界面！步骤5 创建遮罩层在场景中画一个无边矩形，大小为450*300，盖住全部场景，设此层为遮罩层，此时下面的声音层自动缩进被遮罩了，用鼠标左键分别按住下面的各层，向上略移一点点，松手，各层就会自动缩进被遮罩了，如图3-6-32所示。
这样，在播放时，我们就只能看到场景中的情形了，场景外的元件被遮罩了。
图3-6-32遮罩层遮住下面各层。
