课堂导入

  在前面的课程中，我们学习了元件的绘制及使用，都还没有做一个简单的动画，是不是？那么我们先来看看下面这个简单的动画——街舞动画。这个其实没有很复杂。你还记得动画的原理吗？这个就是使用逐帧动画的原理来完成的。下面，我们来学习一下。

学习目标

1、了解普通帧、关键帧、空白关键帧；

2、了解逐帧动画的概念；

3、掌握逐帧动画的制作。

学习任务单

教学视频

教学课件

教学内容

一、导入

播放翻书视频

提问：这些明明是静态的一张张纸上图片，为什么我们看到的是动的呢？

 人的眼睛看物体时，能把物体的影像暂时留在视觉中一小会儿，叫“视觉暂留”。卡通片中的连续动作画面一秒钟大约放送24帧或18帧，画面在视觉中不断地闪烁变化，看上去画面就会动起来。

二、什么是逐帧动画？

 逐帧动画的原理是逐一创建出每一帧上的动画内容，然后顺序播放各动画帧上的内容，从而实现连续的动画效果

三、认识Flash中的帧

关于帧

 构成Flash动画的基础就是帧，用【时间轴】面板中的帧，来完成对舞台中对象的时间控制。

1．关键帧

 关键帧是在动画播放过程中，表现关键性动作或关键性内容变化的帧。关键帧定义了动画的变化环节，一般图像都必须在关键帧中进行编辑。关键帧是以黑色的小圆点显示的。

2.普通帧

 以灰色显示两个关键帧之间的部分就是普通帧，普通帧的最后一帧显示为一个中空矩形。它是开始关键帧动作向结束关键帧动作变化的过渡部分，使画面处于保持不变的状态。

3．空白关键帧

 以白色空心圆点显示，没有放置任何动画对象的关键帧。插入空白关键帧的作用是清除前面帧中的动画对象。

下图中第15帧就是空白关键帧。

常用的帧操作命令的快捷键及功能

四、Flash创建逐帧动画的三种方法

（1）文字或数字逐帧动画

用文字作帧中的元件，实现文字跳跃、旋转等特效。

案例演示：做一个从数字3~0的倒计时逐帧动画

步骤指导：

• 1、在第1帧插入关键帧，使用文本工具输入数字“3”

• 2、在第2帧插入关键帧，使用文本工具输入数字“2”

• 3、在第3帧插入关键帧，使用文本工具输入数字“1”

• 4、在第4帧插入关键帧，使用文本工具输入数字“0”

• 5、调整倒计时速度。每个关键帧后插入5个普通帧。

学生基础任务1

请同学们试着做一个从数字4~0的倒计时动画。

请同学们试着做一个闪烁变色数字4~0的倒计时动画。

小妙招

• 第1帧输入文字3，直接在第6帧插入关键帧，将文字3改为2，同理在第11帧插入关键帧，将文字2改为1
  

• 注意：最后一个关键帧，舞台中为0，记得要加入普通帧延长0显示的时间。

（2）绘制矢量逐帧动画

①第1帧绘制笑脸。

②右击第1帧，选择“复制帧”，右击第7帧，选择粘贴帧，将第7帧的嘴巴变形。

③在第8帧至14帧插入普通帧。

效果

（3）用导入的静态图片建立逐帧动画

• 用jpg、png等格式的静态图片连续导入Flash中，就会建立一段逐帧动画。

• 任务：将6张小狗序列图片导入，制作小狗连雪奔跑的动画

小提示：

如何让小狗位于舞台中心？

实战演练

Flash人物走动动画的制作技巧分析

      人的动作是复杂的，但却有规律可寻。人的走路的运动规律：出右脚甩动左臂（朝前），右臂同时朝后摆。上肢与下肢的运动方向正好相反。另外，人在走路动作过 程中，头的高低也必然成波浪形运动。当迈开步子时，头顶就略低，当一脚着地，另一只脚提起朝前弯曲时，头就略高。由此以有前辈们总结了，人走路可以用五幅 画组成一个完步。

走路图1

走动画01

走动画02

01

动画02

走动画03

03

拓展资源

（一）思考一下：如何利用逐帧动画制作人走路、鸟飞行的动画呢？

（二）操作步骤

步骤1：新建一个FLASH文件，设置舞台的尺寸为550px*500px，然后将文件以“人走路鸟飞行”命名并保存到电脑中指定的目录。

步骤2：在图层1中绘制背景，如下图所示，其中天空的颜色设为线性的从浅蓝（#04B6E1）到白色；云朵的颜色设为线性的从蓝色（#86B1F0）到白色；土地的颜色设为线性的从土黄（#C98725）到褐绿（#606622），如下图：

步骤3：创建影片剪辑—鸟，执行“插入-新建元件”（或按“Ctrl+F8”组合键），如下图：

步骤4：进入影片剪辑—鸟的编辑区，新建3个图层，分别是“翅1、身体、翅2”。

步骤5：分别选择“铅笔工具”和“选择工具”，在图层“身体”中绘制鸟的身体，如下图：

步骤6：然后用“刷子工具”绘制鸟的眼睛，放置到适当的位置，如下图：

步骤7：将鸟的身体进行组合，然后在该图层中插入6个关键帧。

步骤8：在图层“翅1”、“翅2”中绘制鸟的翅膀，各个帧的动作如下图：

步骤9：返回到场景1，新建图层“鸟1”，并将库中的影片剪辑“鸟”拖入到该图层中，放置于舞台左侧。

步骤10：然后再第50帧中插入关键帧，将鸟拖到画面的另一侧，并调整其大小。在图层“鸟1”中的第1—50帧，单击鼠标右键，在弹出的命令菜单中选择“创建传统补间”命令。

步骤11：新建图层“鸟2”和图层“鸟3”，参照步骤第9—10，制作鸟飞行的效果。如下图：

步骤12： 创建影片剪辑—人，执行“插入-新建元件”（或按“Ctrl+F8”组合键）。进入该影片剪辑的编辑区，新建3个图层，分别是“手臂、身体、腿”。

步骤13： 分别用“椭圆工具”和“线条工具”，在3个图层中分别绘制人的身体，并进行填色。各个帧的动作如下图：

步骤14：返回到场景1，新建图层“人”，并将库中的影片剪辑“人”拖入到该图层中，放置于舞台左下侧。

步骤15：然后在第50帧中插入关键帧，将人拖到画面的另一侧。在该图层中的第1—50帧，单击鼠标右键，在弹出的命令菜单中选择“创建传统补间”命令。

步骤16：保存文件，按Ctrl+Enter组合键发布动画。