1、 第第 5 课课 制作动画“草地上的毛毛虫”制作动画“草地上的毛毛虫” 教学目标 1、了解逐帧动画的基本知识。 2、能制作简单的逐帧动画。 教学重 难点 1、了解逐帧动画的基本知识。 2、能制作简单的逐帧动画。 教学过程 教师谈话 导入新课： 从今天起，我们要开始学习 Flash 8.0 的动画制作了，我们先从“逐帧动画”学起， “逐 帧动画（Frame By Frame）”是一种 常见的动画手法，它的原理是在“连续的关键帧”中 分解动画动 作。也就是说，在逐帧动画中，每一帧中的内容都是不同的，将这些帧连续播 放后就形成了动画。 21 教育网 教学新课： 一、了解逐帧动画的概念 在时间帧上逐帧
2、绘制帧内容称为逐帧动画。 由于逐帧动画的 帧序列内容不一样， 这不 仅增加了制作负担，而且最终输出的文件也很大。但是，它的优势也很明显：因为是一帧一 帧的画，与电影的播放模式相似，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想 表现的内容，如 3D 效果、人物或动物急剧转身 等等很细腻的动画效果。 逐帧动画在时间帧表现为连续出现的关键帧，每个关键帧中 都有一个独立的动画信 息。 二、创建逐帧动画的几种方法 1、用导入的静态图片建立逐帧动画将 JPC、 PNG 等格式的静态图片连续导入 Flash 中， 这样就能建立一段逐帧动画。21 世纪教育网版权所有 2、绘制矢量逐帧动画使用鼠标或者电子
3、画板在场景中一帧帧地画出每帧所需的内容。 3、文字逐帧动画用文字作帧中的元件，实现文字跳跃、旋转等特效。 4、导入序列图像可以导入 GIF 序列图像、SWF 动画文件或者利用第三方软件（如 SwishSwift 3D）产生的动画序列。 三、绘图纸功能绘图纸是一个帮助定位和编辑动画的辅助功能， 这个功能对制作逐帧动 画特别有用。通常情况下，Flash 在舞台上一次只能显示动画序列的单个帧，而通过使用绘 图纸功能，就可以在舞台中一次查看两个或多个帧。www.21-cn- 当创建好一个动画后，我们可以用鼠标左键单击时间轴下方的“绘图纸外观”按钮，这 样就可以切换到“绘画纸外观”。 21世纪*教育网
4、可以看出，在当前帧中内容用全彩色显示，其他帧的内容以半透明示时，看起来好像所 有帧的内容都画在一张半透明的绘图纸上， 这些内容相互层叠在一起。 使用绘图纸功能有助 于我们观 察动画中的每一帧的情况，发现问题并及时进行修改。当然，即使在绘图纸模式 下也只能编辑当前帧的内容。 21cnjycom 四、动手制作逐帧动画 教师：学习了逐帧动画的特点和创建方法后，现在就让我们来动手制作逐帧动画，以加 深对逐帧动画的认识。 一条毛毛虫在一片绿色的草地上快速前行， 这是一个利用导入连续位图而创建的逐帧动 画。在下面的逐帧动画制作过程中，我们会用到一张包含有动画序列的 GIF 图和一张作为 背景的 JPG 图
5、处。同学们在开始制作逐 帧动画以前可以到互联网上搜索自己喜欢的动画 图片和背景图片，虽然图片的内容各不相同，但是制作逐帧动画的方法与过程 是相同的。 教师演示操作步骤： 步骤 1：执行“文件”“新建”命令，在弹出的“新建文 档”对话框中选择“常规” 选项卡中的“Flash 文档”选项，点击“确定”按钮，新建一个影片文档。 步骤 2：将“图层 1”重命名为“草地”，用鼠标单击选中时间轴上的第一帧，然后执 行“文件”“导入”“导入到舞台”命令，将名为“草地.jog”的图片导入到场景中， 使用“任意变形工具”将图片的大小调整到与舞台尺寸相同。 www-2-1-cnjy-com 步骤 3：新建一个图层
6、并命名为“毛毛虫”，选择第一帧，执行“文件”“导入” “导入到舞台”命令，将名为“毛毛虫.gif”的图片导入，Flash8.0 会自动把 GIF 图片序列 按序以 逐帧形式导入舞台。2-1-c-n-j-y GIF 图处序列被 Flash 导入后，它们就被 Flash 自动分配在关键帧中，有多少个图片序 列就会创建多少个关键帧。21*cnjy*com 通过预览我们会发现， 被导入的图片序列的位置不是我们需 要摆放的地方， 默认状况 下，被导入的对象都被放在场景坐标中“0,0”处，必须通过调整使他们移动到合适的位置 上。（学生按照教师的操作方法，自主进行练习。教师检查学生完成情况。 ） 五、我们可
7、以一帧一帧地调整位置， 完成一幅图片后记下其坐标值， 再把其他图片设置 成相同坐标值。不过这样做太耗费时间了，好在 Flash 8.0 为我们提供了更方面的功能 “多帧编辑”。 【来源：21cnj*y.co*m】 教师讲解操作步骤 步骤 1：先把“草地”图层加锁，然后按下时间轴面板下方 的“编辑多个帧”按钮， 再单击“个改绘图纸标记”按钮，在弹 出的菜单中选择“绘制全部”选项。 步骤 2：执行“编辑”“全选”命令，此时我们可以看到，时间轴中的全部帧和场景 中的全部元件都被选中了。【出处：21 教育名师】 步骤 3：用“选择工具”对们于场景上方的毛毛虫进行拖动，就可以一次把所有帧中的 图片全部移
8、动到场景中的指定位置了。 【版权所有：21 教育】 步骤 4：新建一个图层并命名为“标题”，单击工具箱中的“文本工具”按钮，在“属 性”在板中进行设置，其参数如下：文本类型“静态文本”，字体为“黑体”，字体大小为 “45”，颜色为“深绿色（#006600）”。21cnjy 步骤 5：在文本框输入“草地上的毛毛虫”几个字，然后将 其移动到合适的位置。 六、小结 教师：此时，“草地上的毛毛虫”已经基本制作完毕，不过还有一点小问题，当使用播 放头浏览动画过程的时候会发现，“草地”背景只在第一帧出现。那是因为我们没有给“草 地”背景添加过渡帧。首先应给“草地”层解锁，然后在第 20 帧的位置点击鼠标左
9、键选中 该帧，按下键盘上的【F5】键插入一帧，程序会自动添加过渡帧使帧内容延续（如图 513 所示）。【来源：21世纪教育网】 还有两种方法可以插入帧：一种是在“时间轴”上要插入帧 的地方点击鼠标右键，在 弹出的快捷菜单中选择“插入帧”命令；另外还可以通过执行“插入”“时间轴”“帧” 命令来完成插入帧的操作。 21 教育名师原创作品 思考：为什么要到最后才给“草地”层添加过渡帧呢？（因为我们首先创建了“草地” 层，但当时并不知道整个动画的长度，所以要等动画制作完成后才添加。而“标题”层是最 后创建 的，所以自动添加了过渡帧。现在 3 个图层的帧数是 20，这样 就能保证动画的 完整了）。 21
10、*cnjy*com 七、测试存盘 教师：动画制作完成了，应该先预览一下。执行“控制”“测试影片”命令，这时会 弹出一个动画播放窗口。 仔细观察动画有无问题， 如果满意，就将它保存起来。执行“文件” “保存”命令，随后会弹出一个“另存为”对话框。在这里我们可以 设置文件存放的路 径和文件名，我们将文件命名为“草地上的毛毛虫”，以“FLA”的文件格式存盘。 FLA 的文件格式是 Flash 的播放文件，就要使用 Flash 的“发布设置”功能了。要发布 Flash 文档，请首先选择发布文件 格式，执行“文件”“发布设置”命令后就会弹出“发 布设置”对话框，在“发布设置”对话框中可以设置要发布的文件模式、文件名称、保存目 录等，设置完毕后单击“发布”按钮就可以导出 Flash 的播放文件。 四、课后拓展： 想一想 1、既然完成“毛毛虫”层的制作后再添加图层可以自然添 加过渡帧，那为什么我们 要先制作“草地”层呢？ 2、为什么使用“绘图外观”功能时只有当前帧中的内容用 全彩色显示，而其他帧的 内容却是半透明的呢？ 学生练习 练一练 1、结合所学内容制作一个简单的逐帧动画。 2、使用“发布设置”功能尝试发布各种不同的文件。
