第五章基础动画

1、信管系信管系 孟东霞孟东霞主要内容主要内容f帧；帧；f逐帧逐帧动画；动画；f练习练习1 1：数字倒计时、数字倒计时、人物行走人物行走、蝴蝶蝴蝶飞舞；飞舞；f形状补间动画；形状补间动画；f练习练习2 2：摇曳的烛光；摇曳的烛光；f传统补间动画；传统补间动画；f传统补间动画中运动路径的添加；传统补间动画中运动路径的添加；f练习练习3 3：春天来了春天来了；f自定义缓入缓出动画；自定义缓入缓出动画；f练习练习4 4：由远及近的弹跳小球由远及近的弹跳小球1 1 帧的基本概念帧的基本概念f帧帧是动画中最小单位的是动画中最小单位的单幅影像画面单幅影像画面，相当于电影胶片上相当于电影胶片上的一个镜头。一帧就

2、是一副静止的画面，连续的帧就形成的一个镜头。一帧就是一副静止的画面，连续的帧就形成动画。外在特征是时间轴上的一个小方格，根据性质的不动画。外在特征是时间轴上的一个小方格，根据性质的不同，分为同，分为“关键帧关键帧”和和“普通帧普通帧”。f关键帧：关键帧：定义动画的变化，有定义动画的变化，有空白关键帧空白关键帧和和实关键帧实关键帧；f普通帧：普通帧：显示为普通的单元格，有显示为普通的单元格，有空白的和有内容空白的和有内容的两种；的两种；f播放头：播放头：指示当前显示在舞台上的帧，移动其位置，可以指示当前显示在舞台上的帧，移动其位置，可以定位当前帧。定位当前帧。1 1 帧的基本操作帧的基本操作f选

3、择帧：选择帧：单帧、连续多帧单帧、连续多帧(shift)(shift)、不连续的多帧、不连续的多帧(ctrl)(ctrl)、选择所有帧选择所有帧f翻转翻转帧：帧：将动画播放顺序颠倒将动画播放顺序颠倒f移动播放头：移动播放头：通过时间轴标尺定位和移动播放头通过时间轴标尺定位和移动播放头f添加添加帧：帧：插入帧（插入帧（F5F5，延续前面的画面、延长动画的变化，延续前面的画面、延长动画的变化时间）、插入关键帧（时间）、插入关键帧（F6F6）和空白关键帧（）和空白关键帧（F7F7）f移动和复制帧：移动和复制帧：先选中要操作的帧先选中要操作的帧f删除删除帧：帧：将关键帧变为普通帧、删除任意类型的帧将关

4、键帧变为普通帧、删除任意类型的帧2 2 逐帧动画逐帧动画f逐帧逐帧动画是一种常见的动画形式，其原理是在动画是一种常见的动画形式，其原理是在“连续的关连续的关键帧键帧”中分解动画动作，也就是中分解动画动作，也就是在时间轴的每帧上逐帧绘在时间轴的每帧上逐帧绘制不同的画面制不同的画面，使其连续播放而成动画。，使其连续播放而成动画。f绘制要点：绘制要点：添加若干个连续的关键帧；添加若干个连续的关键帧；在关键帧上创在关键帧上创建不同的，但有一定关联的画面。建不同的，但有一定关联的画面。f例如：例如：书写文字的动画书写文字的动画、数字的变化数字的变化、行走的人物、舞动、行走的人物、舞动翅膀的小鸟、蜜蜂和蝴

5、蝶、飞奔翅膀的小鸟、蜜蜂和蝴蝶、飞奔的的骏马等动画。骏马等动画。2 2 练习练习1 1：数字倒计时：数字倒计时f在图层在图层1 1上，使用椭圆工具绘制倒计时的背景；上，使用椭圆工具绘制倒计时的背景；f在图在图层层2 2上，首先在第上，首先在第1 1个关键帧个关键帧上输入数字上输入数字5 5，然后连续，然后连续插入插入5 5个关键帧，按照顺序将文字修改为个关键帧，按照顺序将文字修改为4 4、3 3、2 2、1 1和和startstart！，调整每个关键帧上的字符位置和大小；！，调整每个关键帧上的字符位置和大小；f在最后的关键帧上在最后的关键帧上添加脚本函数添加脚本函数stop():stop():

6、选中最后一个关选中最后一个关键帧，单击鼠标右键，在弹出的快捷菜单上选择键帧，单击鼠标右键，在弹出的快捷菜单上选择“动作动作”命令，在弹出的对话框中使用英文输入命令，在弹出的对话框中使用英文输入“stop()stop()”；f调整帧频，调整帧频，若要保持每秒钟出现一个数字的频率，应将时若要保持每秒钟出现一个数字的频率，应将时间轴下方的帧频改为间轴下方的帧频改为1fps1fps；f测试并导出影片。测试并导出影片。2 2 练习练习2 2：行走的人物：行走的人物f新建文档，将行走的动作图片导入到库；新建文档，将行走的动作图片导入到库；f在第一帧上，将在第一帧上，将“走路走路1.jpg1.jpg”拖动到

7、舞台上；拖动到舞台上；f选择第二帧插入关键帧，选中第二帧上的人物图像，在选择第二帧插入关键帧，选中第二帧上的人物图像，在“属性属性”面板上单击面板上单击“交换交换”按钮，打开按钮，打开“交换位图交换位图”对对话框，选择话框，选择“走路走路2.jpg2.jpg”位图，单击确定进行交换。位图，单击确定进行交换。f按照类似方法，从第三帧一直到十二帧为止；按照类似方法，从第三帧一直到十二帧为止；f通过在关键帧之间插入普通帧，降低行走速度。通过在关键帧之间插入普通帧，降低行走速度。2 2 逐帧动画逐帧动画绘图纸功能绘图纸功能f绘画纸是一个绘画纸是一个帮助定位和编辑动画帮助定位和编辑动画的辅助功能，这个功

8、能的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，对制作逐帧动画特别有用。通常情况下，Flash Flash 在舞台中在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后，你一次只能显示动画序列的单个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个就可以在舞台中一次查看两个或多个帧。帧。 使用绘图纸功能后，当前帧中的画面用全彩色显示，其他帧的画面以半透明显示，这时可以借助其他帧的画面对当前帧的编辑起到辅助作用。f【绘图纸外观绘图纸外观】按钮按钮：在：在时间帧的上方，出现绘图纸外观时间帧的上方，出现绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。标记。拉动外观标记的

9、两端，可以扩大或缩小显示范围。f【绘图纸外观轮廓绘图纸外观轮廓】按钮：按下此按钮后，场景中显示各按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。另外可以节省系统资源，加快显示过程。f【编辑多个帧编辑多个帧】按钮：按下后可以显示全部帧内容，并且按钮：按下后可以显示全部帧内容，并且可以进行可以进行“多帧同时编辑多帧同时编辑”。例如：整体移动全部帧的位。例如：整体移动全部帧的位置。置。2 2 逐帧动画逐帧动画绘图纸功能绘图纸功能【修改绘图纸标记修改绘图纸标记】按钮：按下后，弹出菜单

10、，菜单中有以按钮：按下后，弹出菜单，菜单中有以下下选项：选项：、【总是显示标记总是显示标记】选项：会在时间轴标题中显示绘图纸选项：会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开。外观标记，无论绘图纸外观是否打开。、【锚定绘图纸锚定绘图纸】选项：会将绘图纸外观标记锁定在它们选项：会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。图纸外观标记，可以防止它们随

11、当前帧的指针移动。、【绘图纸绘图纸 2 2】选项；会在当前帧的两边显示两个帧。选项；会在当前帧的两边显示两个帧。、【绘图纸绘图纸 5 5】选项；会在当前帧的两边显示五个帧。选项；会在当前帧的两边显示五个帧。、【绘制全部绘制全部】选项；会在当前帧的两边显示全部帧。选项；会在当前帧的两边显示全部帧。2 2 逐帧动画逐帧动画绘图纸功能绘图纸功能2 2 练习练习3 3：飞舞的蝴蝶：飞舞的蝴蝶/ /蜻蜓蜻蜓f新建三个图层，每个图层上分别使用线条工具和颜料桶工新建三个图层，每个图层上分别使用线条工具和颜料桶工具绘制蝴蝶（具绘制蝴蝶（蜻蜓蜻蜓）的躯干、左边翅膀和右边翅膀。）的躯干、左边翅膀和右边翅膀。f新建

12、若干个关键帧，在每个关键帧上使用新建若干个关键帧，在每个关键帧上使用变形面板和任意变形面板和任意变形工具变形工具调整躯干的位置和翅膀的形状，注意绘图纸功能调整躯干的位置和翅膀的形状，注意绘图纸功能的使用。的使用。f通过在中间插入普通帧的方法调整动画播放的速度。通过在中间插入普通帧的方法调整动画播放的速度。f播放并且测试动画。播放并且测试动画。3 3 形状补间动画形状补间动画f创建类似于形变的动画效果，使一个形状逐渐变成另一个创建类似于形变的动画效果，使一个形状逐渐变成另一个形状。例如：形状变化、头发飘动、烛光闪动等。形状。例如：形状变化、头发飘动、烛光闪动等。f基本基本制作方法：制作方法：在一

13、个关键帧上绘制一个形状，然后在另在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状（位置、大小、颜色变化）或者一个关键帧上更改该形状（位置、大小、颜色变化）或者绘制另一个形状。定义形状补间动画后，绘制另一个形状。定义形状补间动画后，FlashFlash自动补上自动补上中间的形状渐变过程。中间的形状渐变过程。f形状补间在时间轴上显示形状补间在时间轴上显示绿色背景绿色背景。f注意：注意：绘制图形时，图形必须为形状，不能是对象模式绘制图形时，图形必须为形状，不能是对象模式。3 3 形状补间动画形状补间动画f参数设置：参数设置：f“缓动缓动”选项：默认情况下，补间帧之间的变化速率不变。选项：默

14、认情况下，补间帧之间的变化速率不变。-1-1至至-100-100，速度由慢变快；，速度由慢变快；1 1至至100100之间，速度又快变慢。之间，速度又快变慢。f“混合混合”选项：分布式能使创建的中间形状更为平滑和不选项：分布式能使创建的中间形状更为平滑和不规则；角形会保留明显的角和直线。规则；角形会保留明显的角和直线。3 3 形状补间动画形状补间动画f添加形状提示：添加形状提示：f形状提示会标识起始形状和结束形状中相对应的点，可被形状提示会标识起始形状和结束形状中相对应的点，可被用来控制更加复杂或特殊的形状变化。用来控制更加复杂或特殊的形状变化。f“修改修改”菜单菜单”形状形状”添加形状提示添

15、加形状提示”f先连续添加多个，再调整对应位置。先连续添加多个，再调整对应位置。3 3 形状补间动画形状补间动画f1 1.“.“形状提示形状提示”可以连续添加，最多能添加可以连续添加，最多能添加2626个。个。 f2 2. .按逆时针顺序从形状的左上角开始放置形状提示，它们按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。的工作效果最好。 f3.3. 形状形状提示要在形状的边缘才能起作用，在调整形状提提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具栏上示位置前，要打开工具栏上【选项选项】下面的下面的【吸咐开关吸咐开关】，这样，会自动把这样，会自动把“形状提示形状提示”

16、吸咐到边缘上，如果你发觉吸咐到边缘上，如果你发觉“形状提示形状提示”仍然无效，则可以用工具栏上的放大工具仍然无效，则可以用工具栏上的放大工具 点击形状，放大到点击形状，放大到20002000倍，以确保倍，以确保“形状提示形状提示”位于图形位于图形边缘上边缘上。f 4.4.另外另外，要删除所有的形状提示，选择，要删除所有的形状提示，选择【修改修改】| |【形状形状】| |【删除所有提示删除所有提示】。删除单个形状提示，单击右键，在。删除单个形状提示，单击右键，在弹出菜单中选择弹出菜单中选择【删除提示删除提示】。 3 3 练习练习4 4：摇曳的烛光：摇曳的烛光1.1.新建新建flashflash文

17、档，背景舞台为黑色；文档，背景舞台为黑色；2.2.制作蜡烛杆：制作蜡烛杆：将图层将图层1 1命名为命名为“蜡烛杆蜡烛杆”，使用，使用椭圆工具和线条工具椭圆工具和线条工具绘绘制圆柱体图形的轮廓。制圆柱体图形的轮廓。颜料颜料桶工具，径向渐变的桶工具，径向渐变的4 4个颜色从左到右依次为个颜色从左到右依次为#FDA682#FDA682、#FC6525#FC6525、#DA4303#DA4303、#8E2C02#8E2C02，填圆柱体侧面，填圆柱体侧面，并用渐变变形工具调整渐变中心到侧面顶部。并用渐变变形工具调整渐变中心到侧面顶部。3 3 练习练习4 4：摇曳的烛光：摇曳的烛光径向渐变的径向渐变的6

18、6个颜色从左到右依次为个颜色从左到右依次为#FCA783#FCA783、#FCB347#FCB347、#FC8958#FC8958、#FDC48A#FDC48A、#DA4303#DA4303、#8E2C02#8E2C02，填充圆柱体顶，填充圆柱体顶面。面。删除白色笔触；删除白色笔触；插入新图层插入新图层“蜡烛芯蜡烛芯”，用刷子工具绘制填充颜色为，用刷子工具绘制填充颜色为#541101#541101的蜡烛芯。的蜡烛芯。3 3 练习练习4 4：摇曳的烛光：摇曳的烛光3.3.用形状补间动画制作蜡烛火焰效果用形状补间动画制作蜡烛火焰效果新建图层，命名为新建图层，命名为“蜡烛火焰蜡烛火焰”，使用椭圆工具

19、笔触为无、，使用椭圆工具笔触为无、填充为线性渐变（从填充为线性渐变（从#FFFF99#FFFF99、AlphaAlpha为为100%100%到到#9E8E03#9E8E03、AlpahAlpah为为30%30%）的椭圆，并用渐变变形工具调整。）的椭圆，并用渐变变形工具调整。在在“蜡烛火焰蜡烛火焰”图层的第图层的第5 5、9 9、1313、2121、2525、2929帧上创帧上创建关键帧，并用选择工具调整各个关键帧上的椭圆形状。建关键帧，并用选择工具调整各个关键帧上的椭圆形状。在每两个关键帧之间添加形状补间动画在每两个关键帧之间添加形状补间动画播放、测试和调整火焰形状。播放、测试和调整火焰形状。

20、3 3 练习练习4 4：摇曳的烛光：摇曳的烛光4.4.用形状补间动画制作光晕效果用形状补间动画制作光晕效果新建图层，命名为新建图层，命名为“光晕光晕”，使用椭圆工具绘制笔触为无、，使用椭圆工具绘制笔触为无、填充为径向填充为径向渐变（左渐变（左FFFF00 Alpha100%,FFFF00 Alpha100%,中中FFFF6E FFFF6E Alpha77% ,Alpha77% ,右右FFFFCC Alpha0%,FFFFCC Alpha0%,）的圆，并用渐变变形工）的圆，并用渐变变形工具调整。具调整。在在“光晕光晕”图层的第图层的第1515、2929帧上创建关键帧，帧上创建关键帧，1515帧上

21、的帧上的圆尺寸放大到圆尺寸放大到150%150%。在每两个关键帧之间创建形状补间动画在每两个关键帧之间创建形状补间动画测试影片并导出。测试影片并导出。4 4 传统补间动画传统补间动画 f在某一个时间点（即关键帧处）可以设置在某一个时间点（即关键帧处）可以设置实例、组或文本实例、组或文本等对象的位置、尺寸和旋转等属性，在另一个时间点（即等对象的位置、尺寸和旋转等属性，在另一个时间点（即关键帧）可以改变对象的这些属性。在这两个关键帧之间关键帧）可以改变对象的这些属性。在这两个关键帧之间定义了传统补间，定义了传统补间，FlashFlash就自动补上中间的动画过程。就自动补上中间的动画过程。f特别注意

22、：特别注意：传统补间动画的对象包括传统补间动画的对象包括元件元件（影片剪辑元件、（影片剪辑元件、图形元件、按钮元件）图形元件、按钮元件）、文字、位图、文字、位图等，等，但不能是形状，但不能是形状，只有只有把形状组合成把形状组合成“组组”或转换成或转换成“元件元件”后才可以成为后才可以成为传统补间动画中的传统补间动画中的“演员演员”。4 4 传统补间动画传统补间动画 f补间创建成功：在两个关键帧之间生成从起点到终点的箭补间创建成功：在两个关键帧之间生成从起点到终点的箭头，填充的帧为紫色头，填充的帧为紫色f创建失败：创建失败：f例如：利用文本工具中的例如：利用文本工具中的“WebdingsWebd

23、ings”字体系列中的字体系列中的“J J”按键绘制飞行的飞机。按键绘制飞行的飞机。4 4 传统补间动画传统补间动画参数设置参数设置f缓动：缓动：-1-1至至-100-100，运动速度又慢到快；，运动速度又慢到快；1 1至至100100，由快到慢，由快到慢f旋转：设置运动过程中的旋转动作旋转：设置运动过程中的旋转动作f贴紧和调整到路径：用来引导路径动画，适用于添加了物贴紧和调整到路径：用来引导路径动画，适用于添加了物体运动路径的情况体运动路径的情况f同步：使图形元件的动画和主时间轴同步同步：使图形元件的动画和主时间轴同步f缩放：若选中，会将大小变化的动画补间出来。缩放：若选中，会将大小变化的动

24、画补间出来。f注意：注意：对于颜色变化的动画，需要将对于颜色变化的动画，需要将“演员演员”主体设置为主体设置为“元件元件”才会自动补间变化。因此，建议尽量使用元件创才会自动补间变化。因此，建议尽量使用元件创建图形和影片。建图形和影片。4 4 传统补间动画中运动路径的添加传统补间动画中运动路径的添加f传统补间动画制作的位置移动动画是沿着直线进行的，可传统补间动画制作的位置移动动画是沿着直线进行的，可是生活中，有很多运动路径是弧线或者不规则的，如雪花是生活中，有很多运动路径是弧线或者不规则的，如雪花（花瓣）飘落、月亮绕地球旋转、蝴蝶（等动物）的运动。（花瓣）飘落、月亮绕地球旋转、蝴蝶（等动物）的运动。f若要完成曲线或不规则运动，可以借助若要完成曲线或不规则运动，可以借助“路径动画路径动画”实现。实现。即将一个或多个图层链接到一个引导图层，使一个或多个即将一个或多个图层链接到一个引导图层，使一个或多个对象沿同一条路径运动。对象沿同一条路径运动。f路径动画由两个图层组成，上面是路径动画由