第一篇：逐帧动画是一种常见的动画形式

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

5．1 利用逐帧动画制作林中散步的女孩

学习目的

本节你将学习掌握以下知识： u 逐帧动画的制作方法

u 【绘图纸外观】按钮的使用方法 u 【编辑多个帧】按钮的使用方法 u 【修改绘图纸标记】按钮的使用方法 u 【对齐面板】的使用方法 u 插入帧与删除帧

学习方法

本节要学习的是将几张静态图片连续导入到Flash中，并利用【绘图纸】功能及【对齐面板】将图像对齐，最后建立一段林中散步女孩的逐帧动画。

对于初学者来说，将图片导入到Flash中非常容易做到，但是同时编辑所有导入的图片，并且将它们对齐放在合适的位置，在这点上初学者可能就会一知半解了。本节主要教给你一种同时编辑多个对象的简单方法，并且通过本节的讲解，初学者可以照葫芦画瓢的制作出精彩的课后练习，来加强学习成果，提高学习兴趣。

课前热身

（1）创建影片文档

执行【文件】|【新建】命令，在弹出的对话框中选择【常规】|【Flash文档】选项后，单击【确定】按钮，新建一个影片文档。在【文档属性】对话框中进行设置：文件大小为550×480像素，【背景色】为白色，如图5-1-1所示。

图5-1-1 设置文档属性

（2）修改图层名称

双击 【图层1】的图层名称，将其图层名称修改为【背景】，如图5-1-2所示。

图5-1-2 修改图层名称

专家提示：及时修改图层名称让其与内容相对应，可以更准确快速的找到每个图层中的内容，方便编辑与修改，所以养成一个良好的图层命名习惯是必要的。（3）导入背景图片及人物图片

单击【背景】层第一帧，执行【文件】|【导入】|【导入到舞台】命令，将素材包1中的“背景.bmp”图片导入到场景中，选择第16帧，按下F5插入帧，使帧的内容延续到第16帧，如图5-1-3所示。

图5-1-3 导入背景图片

新建一个图层，命名为【人物】。单击此层第1帧，执行【文件】|【导入】|【导入到舞台】命令，弹出。。。将素材包1中的走路系列图片导入（只需选中走路1.gif导入即可）。此时会弹出一个对话框，如图5-1-4所示。

图5-1-4 系列图片导入

选择【是】按钮，Flash会自动把gif中的图片序列按序号以逐帧形式导入到场景中，如图5-1-5所示。

图5-1-5 导入的gif动画在场景的上方形成帧帧动画

如下图5-1-6所示是导入后的动画序列，它们被Flash自动分配在8个关键帧中。

图5-1-6 导入的8张图片（4）多帧编辑调整对象大小

虽然图片已经导入进来了，但是导入的序列图片大小已经超出了场景范围。我们可以一帧帧来调整图片大小：先将一幅图缩小，将其位图的宽高值记下，再把其它图片设置成相同坐标值。但是这种作法非常浪费时间，Flash软件已经为大家准备好了【编辑多个帧】按钮，下面就一起来进行多帧编辑。

专家提示：缺省状况下，导入的对象被放在场景坐标“0，0”处，而且大小有可能与场景内容不符，所以我们必须调整其大小并移动它们。

单击【背景】图层在【时间轴】面板小黄锁下方的黑点，对此图层进行加锁，如图5-1-7所示。

图5-1-7 锁定背景层

专家提示：在进行多帧编辑时，编辑的是场景中全部对象，为了避免误操作，所以要将一些不需要编辑的图层进行锁定。

单击【时间轴】面板下方的【编辑多个帧】按钮，再单击【修改绘图纸标记】按钮，在弹出的菜单中选择【绘制全部】命令，如图5-1-8所示。

图5-1-8 选择显示全部选项 最后执行【编辑】|【全选】命令，此时时间轴和场景效果如图5-1-9所示。

图5-1-9 选取多帧编辑

在【属性】面板上单击黑锁按钮将长宽比例锁定，设置宽为120，按下【回车】键后所有选中的图像变小，如图5-1-10所示。

图5-1-10 调整位图大小

利用【工具箱】中的【选择工具】将所有图片拖放到场景中央，执行【窗口】|【设置面板】|【对齐】命令（快捷键Ctrl+K），在弹出的【对齐】面板中单击【上对齐】按钮，将所有的图像上方对齐，如图5-1-11所示。

图5-1-11 上对齐位图 单击【编辑多个帧】按钮，取消编辑多个帧。再单击一下【绘图纸外观】按钮，用鼠标选中每一帧上的位图，利用键盘上的左右方向键移动位图，使所有位图重叠在一起，如图5-1-12所示。

图5-1-12 移动图像使其重叠

单击【绘图纸外观】按钮取消其多帧查看效果。（5）插入帧与删除多余的帧

现在可以按“Ctrl+Enter”测试一下动画效果，会发现，一帧一个动作对于人物走动来说速度过于太快，所以在【人物】图层的各帧上按一下F5（插入一帧），如图5-1-13所示。

图5-1-13 将【人物】层各帧延长一帧

指点迷津——插入帧的其它两种方法是：①在【时间轴】要插入帧的地方右击，在弹出的快捷菜单中选择【插入帧】命令。②执行【插入】|【时间轴】|【帧】命令。

选中17帧至24帧，在时间轴上右击，在弹出的快捷菜单中选择【删除帧】命令，将多余的帧删除，如图5-1-14所示。

图5-1-14 删除帧

（6）测试存盘

执行【控制】|【测试影片】命令（快捷键Ctrl+Enter），观察动画效果，如果满意，执行【文件】|【保存】命令，将文件保存成“走路.fla”文件，如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令。

至此，一个在林中散步的漂亮女孩逐帧动画就制作完成了（参见素材包1）。

课堂讲解

在前面的“课前热身”中，我们利用实例讲解了【对齐面板】中的上对齐功能，利用导入静态图片创建逐帧动画的方法，还讲解了【绘画纸】里的【绘图纸外观】按钮、【编辑多个帧】按钮、【修改绘图纸标记】按钮的使用方法。下面详细的讲解一下【绘画纸】的功能、【对齐面板】的应用，并给大家归纳总结创建逐帧动画的方法。

1．【绘画纸】的功能

【绘画纸】是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash 在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了。

如图5-1-15所示，这是使用【绘画纸】功能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时你只能编辑当前帧的内容。

如图5-1-15 同时显示多帧内容的变化

【绘画纸】各个按钮的功能：

● 【绘图纸外观】按钮：按下此按钮后，在时间帧的上方，出现绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。

● 【绘图纸外观轮廓】按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。

● 【编辑多个帧】按钮：按下后可以显示全部帧内容，并且可以进行“多帧同时编辑”。

● 【修改绘图纸标记】按钮：按下后，弹出菜单，菜单中有以下选项：

【总是显示标记】选项：会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开。

【锚定绘图纸】选项：会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。【绘图纸 2】选项；会在当前帧的两边显示两个帧。

【绘图纸 5】选项；会在当前帧的两边显示五个帧。

【绘制全部】选项；会在当前帧的两边显示全部帧。2．【对齐面板】的应用

使用【对齐面板】，可以对编辑区中多个对像进行排列、分布、匹配大小、调整间隔等操作，使布局整齐美观，如图5-1-16所示。

图5-1-16 对齐面板

【对齐面板】由排列对齐、分布对齐、匹配大小、间隔以及相对舞台同几部分组成：

（1）排列对齐（水平排列和垂直排列）

①水平排列对齐、右对齐。

②垂直排列

：从左到右分边是垂直方向的上对齐、上下居中：从左到右分边是水平方向的左对齐、左右居中对齐、下对齐。

（2）分布对齐（水平分布和垂直分布）：

①水平分布：从左到右分别为垂直方向基于上边缘的分布、基于中心的分布、基于下边缘的分布。

②垂直分布：从左到右分别为水平方向基于左边缘的分布、基于中心的分布、基于右边缘的分布。（3）匹配大小

：将一组对象的宽度、高度或两者调整为对象的最大尺寸。从左到右分别为水平对齐、垂直对齐、水平垂直对齐。（4）间隔：将一组对象在水平或垂直方向上按照等间距的方式排列。从左到右分别为水平间距的调整、垂直间距的调整。（5）相对舞台：在默认状态时上述按钮的操作是对于对象本身的，单击此按钮后，则所做的操作是相对于舞台的。3．创建逐帧动画的方法：

（1）用导入的静态图片建立逐帧动画：用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画（参考实例：走路）。

（2）绘制矢量逐帧动画：用鼠标或压感笔在场景中一帧帧的画出帧内容（参考实例：雪莲花）。

（3）文字逐帧动画：用文字作帧中的元件，实现文字跳跃、旋转等特效。

（4）指令逐帧动画：在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。

（5）导入序列图像：可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。

课后练习

1．利用导入静态图片建立逐帧动画法制作骏马飞奔的动画。（素材包2）

2．利用绘制矢量逐帧动画法制作盛开的雪莲花（请参考下载资源中的范例源文件）。

3．利用文字逐帧动画制作文字跳跃、旋转特效。

4．利用导入素材包4中的7.gif动画图片制作小鸟飞的逐帧动画。

5．利用素材包4中sucai.fla制作出天篷元帅斗篷的飘动效果（在斗篷与领带两层制作逐帧动画）。

专家提示：用选择工具及部分选取工具逐帧修改对象衣角，形成斗篷与领带飘动效果，其每帧图像效果如图5-1-17所示。

逐帧动画第1帧

逐帧动画第2帧

逐帧动画第3帧 图5-1-17 天篷元帅斗篷的飘动效果逐帧动画

逐帧动画 来自费尔教育。

第二篇：逐帧动画教案

逐帧动画教案

一、教学目标： 知识与能力：

1．知道帧、帧频与关键帧的含义。

2．学会用绘制的图形来制作“逐帧动画”。

3．插入、编辑关键帧。

4．掌握制作“逐帧动画”的方法。过程与方法：

能综合运用所学知识制作一幅主题鲜明、具有动画效果的作品。亲身参与探究过程，在交流、沟通与合作中，共同掌握“逐帧动画”制作方法，提高Flash动画制作水平。情感态度与价值观：

体会创作的乐趣，进一步培养制作动画的兴趣；培养学生创新能力与探究问题的能力；培养创造性思维能力。

二、教学重难点：

重点：用绘图工具制作“逐帧动画”的方法。

难点：通过改变帧频控制动画的播放时间。

三、教学手段：

1．演示教学法：通过在多媒体教室，实际操作演示用Flash制作动画的过程，活跃课堂气氛，激发学生学习情趣。

2．任务驱动式：该方法主要是通过设计一些学习目标，让学生自己上机去实现，让他们在亲身实践中体会、提高，在同学之间的互相学习和交流、甚至争论中提高学习兴趣，开阔思路。既培养了学生的动手实践能力，又加强了学生的实践探究、交流合作解决问题的能力。

四、教学方法： 小组合作、自主学习

五、课时安排：1课时

六、教学过程：

一、导入

上节课我们一起学习了FLASH的工具栏，那时候就有同学迫不及待的想尝试制作动画，但是没有成功。没关系，通过这节课的学习，我相信你们每个人都可以用FLASH制作出动画。老师给大家带来了一个小东西，（教师出示装订好的几页纸）

这是什么？（装订好的几张纸）纸上有什么？

纸上是有连续动作的一匹马。我现在把这些纸快速的翻动一下，你看到了什么？（效果不明显，我用WORD来演示一下）（看到一匹马在走动）

这是一种古老的看动画效果方法，称为“快捷翻书法”。我们看到的每一幅画面在FLASH中称为一个“帧”。帧——是进行flash动画制作的最基本的单位，每一个精彩的flash动画都是由很多个精心制作的帧构成的。

二、讲解帧的含义

1、FLASH中的帧有三种类型，我现在来给大家讲一下。

[当用户新建一个Flash文档后，第一帧是空心圆点，空白关键帧。除第一帧之外，所有的帧都是空白帧，这些帧只有用户定义了之后才有意义。] 关键帧——顾名思义，有关键内容的帧。

空白关键帧——空白关键帧是没有包含舞台上的实例内容的关键帧。

普通帧——在时间轴上能显示实例对象，但不能对实例对象进行编辑操作的帧。

2、教师讲解插入帧的方法

把鼠标放到时间轴的第二帧上单击鼠标右键会出现弹出的菜单，点击相应的选项。

三、霓虹灯闪闪亮

1、看来有好多同学已经迫不及待的想制作动画了，那我们就来模仿传统手工动画来制作FLASH动画。

2、当夜晚来临的时候，街边的商店门口会出现很多的霓虹灯文字，非常的漂亮。其实用FLASH软件也可以制作出漂亮的霓虹灯。效果是这样的（教师放映动画效果）

3、你想怎么去制作？来当小老师讲给大家听。（如果学生不会制作，教师讲解制作方法）第一步：新建一个文件，用箭头工具单击舞台，在下方属性面板将舞台颜色设为淡蓝色。第二步：单击工具箱中的文字工具，在下方属性面板将字体改为宋体，字号改为80，颜色变成橘黄色，单击“B”把字体加粗。

第三步：在舞台上输入“信息技术”四个字，用箭头工具调整位置。单击时间轴窗口的帧窗格中的第2帧，然后插入关键帧。（插入关键帧快捷键F6）第四步：单击箭头工具，点击文字，把文字颜色设置成绿色。

第五步：用上一步相同的方法在第3、4、5帧的文字创建关键帧，并将文字颜色分别设为黄色、红色、白色。

第六步：保存文件，测试影片。

（讲解完毕后）那动手做一做吧。看谁能做的又快又好。

4、学生自由制作，教师巡视指导。（发现问题教师集中讲解）

（教师巡视指导）差不多等一位同学做完，其他没做完也没关系。都停下看他的屏幕。）师：同学们，眼睛看这里，刚才老师巡视的时候，发现有位同学做的很漂亮，大家一起用欣赏的眼光来看一看。

（找出做的好的请大家说说优点，并让他介绍是如何制作的）（介绍过程中讲解）听了同学的讲解，快来修改一下你自己的作品吧。（等学生做完后，找几位同学的作品展示）

四、奔跑的豹子

1、看来漂亮的霓虹灯难不倒大家，那我们在来学习另外一个动画，奔跑的豹子。

2、教师讲解制作步骤

第一步：新建一个文件，单击“文件”菜单中的“导入”命令，在弹出的“导入”对话框中找到存放图片的文件夹。

第二步：单击“奔跑1”图片，在单击“打开”按钮，在弹出的对话框中单击“是”按钮。第三步：测试影片，单击“修改”菜单中的“文档”命令，在弹出的对话框中，将“帧频”数值改为30。

第四步：保存文件，测试影片。

（讲解完毕后）那动手做一做吧。看谁能做的又快又好。

3、学生自由制作，教师巡视指导。（教师多发给学生一些素材，学生想制作哪个就做哪个。）（发现问题教师集中讲解）

（教师巡视指导）差不多等一位同学做完，其他没做完也没关系。都停下看他的屏幕。）（找出做的好的请大家说说优点，并让他介绍是如何制作的）（介绍过程中讲解）听了同学的讲解，快来修改一下你自己的作品吧。

（选择部分有代表性的作品进行展示，分别从动画创意、使用技术、动画效果等方面给予评价。充分肯定学生的创新精神、动画中使用的方法和技巧，对优秀作品给予表扬，对不足的作品给予鼓励。

作品相互的展示交流，互评互进，取长补短。考察了学生对知识的综合运用能力，通过主题学习，培养学生爱家乡、爱祖国的美好情感，激发学生爱国主义情怀。）

五、练习总结

1、看来这个动画制作也难不倒大家，那老师就来考考你们。（二选一制作动画）（1）制作逐帧动画“我们爱祖国”，要求逐字出现。（2）制作一个数字10—1的倒计时小动画。

学生制作完后，请一位小老师讲解制作过程。

通过本节课的学习，我想同学们都可以做出简单的动画，我相信在今后的学习生活中你们制作的动画会越来越漂亮。

七、教学反思

本节课的设计主要是根据本校学生的知识、技能水平，内容涉及动画原理、“逐帧动画”原理、“逐帧动画”制作。当然也有一些问题：比如几个关键帧画面有抖动现象，几个图层时间上不同步现象，用错关键帧和空白关键帧的现象等。这些问题有学生操作的失误，有概念的混淆，需要在以后的学习和练习中不断纠正、强化。在学生制作之前，一定要努力做到让学生先理解制作过程，再去制作。这样学生可以独立的去完成动画制作。

本课成功之处：能够精心导入，激发学生学习兴趣。在教学中合理运用“任务驱动法”进行教学。以学生为主体，学生在轻松、优美和谐的情境中自主探究、协作交流，完成知识的意义建构，提升自身的审美情趣。我把自己的角色定位为教学活动的设计者、导学者、合作者、评价者。教师适时指导、点拨。

第三篇：《逐帧动画》教案

第4课

逐帧动画

——导入外部图片和直接在flash中绘制创

建逐帧动画

学习目标：

1、理解逐帧动画的制作原理。

2、掌握导入图片及手工绘制两种制作逐帧动画的方法。

3、掌握改变播放速度的两种方法：改变帧频值和在关键帧后插入帧延续画面。

4、掌握保存文件的方法、播放及测试影片的方法。

5、了解帧、关键帧、空白关键帧的区别。

6、掌握编辑多个帧的方法。重点：

利用“钢笔工具”临摹图片的方法。转换为元件的方法，在库中复制元件的方法，修改元件的方法。

难点：利用“钢笔工具”临摹图片的方法。教法：任务驱动法，小组合作 教学过程：

一、展示目标

任务一：利用提供的“卡通人物”图片，利用“钢笔工具”绘制卡通人物正面奔跑的逐帧动画。要求：只描绘人物轮廓即可。

1、简单的学习下钢笔工具的使用方法（演示）

2、导入图片，新建图层中临摹图片（只描绘人物轮廓即可）

3、将描绘好的轮廓图转化为元件（附：原件的转换方法----）

4、在库中复制元件，利用“水平翻转”创造下一帧啊。

5、制作正面奔跑的逐帧动画。（方法：自己思考下上周学的跷跷板的例子）

同学们是不是观察下这个小女孩手中的包不在一个手上啊，咱们怎样把她手中的包放到一个手中去？？？？

（提示：导入图片，新建图层中临摹图片，转换为元件，利用“水平翻转”创造另一张图片，制作人物正面奔跑的逐帧动画。）

任务二：修正任务一中的动画，使人物的包在同一个手中。

的包

1、进选上

2、（提改人同动教师层，工具可在二、学生具”教师

三、学生

四、演示修在在入择。保改第二帧的元件中的图形使小女孩同一只手中。

库中找到第二个变化动作的元件，帧的编辑状态，按住shift键鼠标包的区域----然后鼠标拖动到另一

存---演示

手中双击单击只手示：在库中复制元件，创建另一个元件，物的包都在同一个手中，此时库中有两个作的元件。）

用精炼简短的语言，演示导入图片，新建在新建的图层中临摹，要求看学案用“钢”，钢笔工具使用方法先让学生探究学习第三第四环节中讲。合作交流，实践操作

看学案，小组探究学习。熟练掌握“钢笔的使用方法和技巧。巡回指导答疑。学生展示作品

讲解自己的操作方法。教师补充强调。质疑点拨（针对巡回发现的问题，集中讲）

后应个按限线线束方，的点住制的段曲向

修不图笔，工

解用【钢笔工具】画路径是非常容易的。选择【钢笔工具】绘制出相击最后一说明：以将线条创建曲要绘制曲你想要结朝相反的在舞台上不断地单击鼠标，就可以路径，如果想结束路径的绘制，双。

Shift 键的同时再进行单击，可为倾斜 45 度的倍数方向。要诀是在按下鼠标的同时向你想的方向拖动鼠标，然后将指针放在线段的地方，按下鼠标按钮，然后拖动来完成线段。如果觉得这条曲线不满意，我们还可以用部分选取工具来进行调整。

在画线时鼠标按下的地方出现了一个个节点，在会状手工出。柄具现按。箱两住拖中选个手Alt动节

择柄键点

【，并可

部拖拖以

分动动改

选手手变

取柄柄节

工具】，单击节点，可以改变曲线的形，可以不影响另一个点的位置，五、巩固反馈

完善卡通人物，填上颜色等。课后反思：

附：

广文中学54321自主课堂

广教以巩内全值价学互自的课“自霞实目一学喜讲 “对角的教 “与做以文中学成立以来，各学科从调整教学关系、转变学方式入手，成功构建了“54321自主课堂”，它“明确目标，自主学习，讨论质疑，精讲点拨，固落实”为五步教学流程，以“教学环节，教学容，师生配合，教学方法”为四个关键设计要素，面落实“知识与技能，过程与方法，情感态度价观”三个纬度目标，实现“高效、愉悦”的课堂值追求，其中“阅读文本”是一个必备环节。生最喜欢的课堂是：开放性的，师生互动、生生动的，注重实践、体验的，联系学生生活实际的，主互助、高效愉悦的，契合学生年龄、心理阶段，促进学生个体成长进步的..广文中学的“54321堂”由此确立：

5”是课堂教学的五步教学流程，即“明确目标，主学习，讨论质疑，精讲点拨，巩固落实”。赵桂解释说，“自主学习”在本质上是学生自我生成、现、发展知识的过程，是学生对学习要求、目的、标、行为、意义的充分觉醒，与“明确目标”是脉相承的。“讨论质疑”不仅仅是互动互助，更是习个体生命的互相关照和共同发展。虽然学生不欢老师的喋喋长篇，但欢迎及时、适时、精当的解点拨。“巩固落实”也是不可缺少的重要环节。4”是象，针度，在四个关学方法2007对高5000键要。

年6月广文中学面向教师、学生两类效、愉悦两个目标，正向、反向两个名师生中调研出来的“高效愉悦课堂”素：教学环节，教学内容，师生配合，3”是应该实现的三个纬度的课程目标，技能，过程与方法，情感态度价值观”。好三维目标的整合，而不是把维度简单知识与能力为主线，渗透情感态度价值即关叠观“键加并知在，充识于要分体 “愉法 “习学生的“两和示人然现在过程和方法中。

2”是独具特色的广文课堂价值追求，即“高效、悦”，在教学环节、教学内容、师生配合和教学方上多下功夫。

1”是“阅读文本”，即阅读教科书内容。自主学的灵魂是自立，本质是自为。教科书是最重要的习载体，“阅读教材”就是自立、自为行为，是学实现自我探索、自我选择、自我建构、自我创造重要途径。

54321课堂”展现出来的是：个人自主学习的安静，人小组互动巩固的扎实有效，4人小组合作的默契分工明确，8人大组讨论的唇枪舌剑，小组组际展时的几十人争相解题板演，还有一个人面对几十大胆而又精彩的讲解，全体互动却有条不紊、井有序的课堂„.

第四篇：第一