1、逐帧动画制作逐帧动画制作学习目标：1、认识逐帧动画的动画原理2、会制作逐帧动画重、难点：认识逐帧动画的动画原理,，会制作逐帧动画教学方法：演示法、讲授法、练习法学时：1课时教学过程：一、 引入由演示逐帧动画几个实例引入二、 新课学习1. 逐帧动画的动画原理原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画2. 帧、关键帧、空白关键帧帧时间轴上的小方格叫单元格。可以把单元格转化为帧、关键帧、空白关键帧。 当播放头移到帧上时，帧的内容就显示在舞台上。 帧与关键帧都用来记录舞台的内容，但是帧只能显示离它最左边关键帧的内容，我们不能对帧的内容直接进行修改编辑，要想修改帧
2、的内容，必须把它转变成关键帧，后者修改帧最左边关键帧的内容。 关键帧是可以直接编辑的帧。 空白关键帧是在舞台上没有任何内容的关键帧，一旦在空白关键帧上绘制了内容，它就变成关键帧。3. 创建逐帧动画的几种方法（1）用导入的静态图片建立逐帧动画用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画（参考实例：奔跑的豹子）。（2）绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧帧的画出帧内容（参考实例：旋转的立方体）。（3）文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。（4）指令逐帧动画在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。（5）导入序列图像可以导入g
3、if序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。三、 学生练习任务：熟悉逐帧动画的制作1. 根据老师所提供的学习资料制作逐帧动画2. 从网上搜索更多的教程学习四、 课堂小结小结本节的主要内容和学生中存在的问题附：学生资料逐帧动画(1)从本节起，我们将逐渐给大家介绍Flash MX 2004中的五种常见的动画形式：逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导线动画。本节着重介绍逐帧动画（Frame By Frame），这是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。由于逐帧动
4、画的帧序列内容不一样，不仅增加制作负担而且最终输出的文件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。1逐帧动画的概念和在时间帧上的表现形式在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧地画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画在时间帧上表现为连续出现的关键帧，如图3-2-1所示。图 3-2-1 逐帧动画2创建逐帧动画的几种方法（1）用导入的静态图片建立逐帧动画用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画（参考实例：奔跑的豹子）。（2）绘制矢量逐帧
5、动画 用鼠标或压感笔在场景中一帧帧的画出帧内容（参考实例：旋转的立方体）。（3）文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。（4）指令逐帧动画在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。（5）导入序列图像可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。3绘图纸功能（1）绘画纸的功能 绘画纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash 在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了。如图3-2-2所示，这是使用绘画纸功
6、能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时你只能编辑当前帧的内容。图3-2-2 同时显示多帧内容的变化（2）绘图纸各个按钮的介绍 【绘图纸外观】按钮：按下此按钮后，在时间帧的上方，出现 绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。 【绘图纸外观轮廓】按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。 【编辑多个帧】按钮：按下后可以显示全部帧内容，并且可以进行“多帧同时编辑”。 【修改绘图纸标记
7、】按钮：按下后，弹出菜单，菜单中有以下选项：【总是显示标记】选项：会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开。【锚定绘图纸】选项：会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。【绘图纸 2】选项；会在当前帧的两边显示两个帧。【绘图纸 5】选项；会在当前帧的两边显示五个帧。【绘制全部】选项；会在当前帧的两边显示全部帧。上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制作二个逐帧动画实例，以加深对逐帧动画的认识。逐帧动画(2)4实例1奔跑
8、的豹子实例简介茫茫雪原上，有一只矫健的豹子在奔跑跳跃，这是一个利用导入连续位图而创建的逐帧动画，如图3-2-3所示。图 3-2-3 奔跑的豹子知识提要 导入位图的方法 创建逐帧动画 创建文字对象 利用洋葱皮工具移动多帧元件步骤1 创建影片文档执行【文件】|【新建】命令，在弹出的对话框中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400260像素，【背景色】为白色，如图3-2-4所示。图 3-2-4 创建新文档步骤2 创建背景图层选择第一帧，执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的名为“雪景.bmp”图片导入到场景中
9、，（“雪景”图片位置：光盘examplepart3*图片雪景.bmp）。选择第8帧，按F5键，增加过渡帧，使帧内容延续到第8帧。步骤3 导入gif动画新建一个图层，选择第一帧，执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的“奔跑的豹子”系列图片导入，（“奔跑的豹子”系列图片位置：光盘examplepart3*图片奔跑的豹子1.png）。此时，会弹出一个对话框，如图3-2-5所示。图3-2-5 系列图片导入选择【是】按钮，Flash会自动把gif中的图片序列按序以逐帧形式导入场景的左上角，如图3-2-6所示。图3-2-6 导入的gif动画在场景的上方形成帧帧动画如图3-2-7所示是导
10、入后的动画序列，它们被Flash自动分配在8个关键帧中。图3-2-7 导入的8张图片逐帧动画(3)步骤4 调整对象位置此时，时间帧区出现连续的关键帧，从左向右拉动播放头，就会看到一头勇猛的豹子在向前奔跑，但是，被导入的动画序列位置尚未处于我们需要的地方，缺省状况下，导入的对象被放在场景坐标“0，0”处，我们必须移动它们。你当然可以一帧帧调整位置，完成一幅图片后记下其坐标值，再把其它图片设置成相同坐标值，如果你有足够耐性和时间，也无妨，那么，我们何不试试“多帧编辑”功能呢？先把“雪景”图层加锁，然后按下时间轴面板下方的【编辑多个帧】按钮，再单击【修改绘图纸标记】按钮，在弹出的菜单中选择【显示全部
11、】选项，如图3-2-8所示。图3-2-8 选择显示全部选项最后执行【编辑】|【全选】命令，此时时间轴和场景效果如图3-2-9所示。图3-2-9 选取多帧编辑用鼠标左键按住场景左上方的豹子拖动，就可以把8帧中的图片一次全移动到场景中央了。步骤5 设置标题文字在场景中新建一个图层，单击工具箱中的【文字工具】，设置【属性】面板上的文本参数如下，文本类型为【静态文本】；字体为【隶书】；字体大小为35；颜色为深蓝色。如图3-2-10所示。图 3-2-10 字体【属性】面板参数设置在文本框中输入“奔跑的豹子”五个字，居中放置。步骤6 测试存盘执行【控制】|【测试影片】命令（快捷键Ctrl+Enter），观
12、察动画效果，如果满意，执行【文件】|【保存】命令，将文件保存成“奔跑的豹子.fla”文件，如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令。5实例2旋转的立方体实例简介在蓝天白云的衬托下，一个蓝色的立方体在不停的旋转，这种三维效果只有逐帧动画才能实现，本例很好的体现了逐帧动画的优势。如图3-2-11所示。图3-2-11 旋转的立方体逐帧动画(4)知识提要 绘制矢量线条 使用填充工具 创建矢量图逐帧动画步骤1 建立新文档执行【文件】|【新建】命令，在弹出的对话框中选择【Flash 文档】选项后，单击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为550400
13、象素，【背景色】为白色，如图3-2-12所示。图3-2-12 文档属性步骤2 创建背景图片元件 选择第一帧，执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的“天空”图片导入到场景中。（“天空”图片位置：光盘examplepart3*图片天空.jpg）。步骤3 建立名为“立方体”的影片剪辑元件执行【插入】|【新建元件】命令，新建一个影片剪辑元件，名称为“立方体”，如图3-2-13所示。图3-2-13 创建立方体元件说明：影片剪辑是Flash中最重要的元件之一，在制作动画时经常需要用到它。有关影片剪辑的详细信息，请参阅本书第四章的相关内容。在第一帧中，选择工具箱中的【线条工具】，在【属性
14、】面板上设置【笔触样式】为实线，【笔触高度】为1，【颜色】为#003366，如图3-2-14所示。图3-2-14 【直线工具】的【属性】面板参数设置在场景中画一个立方体的边线，分别选择深蓝、蓝、浅蓝三种颜色，用【颜料桶工具】填充各个面，参考颜色为：000099、0033FF、00CCFF，如图 3-2-15所示。图3-2-15 立方体的第一帧绘制参考下图依次绘制各帧中立方体的外形并填充相应的颜色，共18帧，如图3-2-16所示。(在配套光盘的源文件的库中提供了一个“立方体”的矢量线条图形元件供参考，源文件位置：光盘example)图3-2-16 立方体各帧线条轮廓步骤4 创建“立方体”图层 单击【图层】面板上的【插入图层】按钮，新建一层，在时间轴的第一帧上，把库里的“立方体”影片剪辑拖入主场景中，放在场景的中下部，如图3-2-17所示。图3-2-17 时间轴面板和场景中的元件步骤5 创建标题文字再添加一个新图层，选择工具箱中的【文字工具】，在【属性】面板上设置参数：【静态文本】、字体为【黑体】、字号为45、颜色为蓝色，如图3-2-18所示。图 3-2-18 文字参数设置在场景上方输入“矢量图逐帧动画”七个文字，文字的位置请参考图3-2-17。至此，整个实例制作完成。
