搜索
学习目标第4讲制作逐帧动画了解帧的种类及对帧的操作。掌握逐帧动画的原理和制作方法。掌握使用逐帧动画进行细腻表达的方法。使用逐帧动画表现绘图效果。•4.1逐帧动画原理•4.2认识原件和库•4.3课后作业本章大纲4.1逐帧动画原理4.1.1知识点讲解逐帧动画的原理比较简单，但是要制作出优秀的逐帧动画对制作者的动画技能要求较高。本节从逐帧原理入手再配合一个较简单的逐帧动画来向读者讲述如何制作逐帧动画.一、帧的类型（1）关键帧。动作补间动画、形状补间动画、AS代码、关键帧、空白关键帧在【时间轴】中的显示如图4-1所示。（2）普通帧。普通帧的最后一帧显示为一个中空矩形，图4-2所示为普通帧在【时间轴】中显示的效果。图4-1关键帧图4-2普通帧效果二、对帧的操作。对帧的操作有3种方式：菜单命令（见图4-3）、鼠标右键快捷菜单（见图4-4）和键盘快捷键。图4-3选择【编辑】下的菜单命令图4-4用鼠标右键单击帧弹出的快捷菜单常用的帧操作命令的快捷键及功能如表4-1所示。表4-1常用的帧操作命令的快捷键及功能命令快捷键功能说明创建补间动画在当前选择的帧的关键帧之间创建动作补间动画创建补间形状在当前选择的帧的关键帧之间创建形状补间动画插入帧F5在当前位置插入一个普通帧，此帧将延继上帧的内容删除帧Shift+F5删除所选择的帧插入关键帧F6在当前位置插入关键帧并将前一关键帧的作用时间延长到该帧之前插入空白关键帧F7在当前位置插入一个空白关键帧清除关键帧Shift+F6清除所选择的关键帧，使其变为普通帧转换为关键帧将选择的普通帧转换为关键帧转换空白关键帧将选择的帧转换为空白关键帧剪切帧Ctrl+Alt+X剪切当前选择的帧复制帧Ctrl+Alt+C复制当前选择的帧粘贴帧Ctrl+Alt+V将剪切或复制的帧粘贴到当前位置清除帧Alt+Backspace清除所选择的关键帧选择所有帧Ctrl+Alt+A选择时间轴中的所有帧翻转帧将所选择的帧翻转，只有在选择了两个或两个以上的关键帧时该命令才有效同步符号如果所选帧中包含图形元件实例，那么执行此命令将确保在制作动作补间动画时图形元件的帧数与动作补间动画的帧数同步动作F9为当前选择的帧添加ActionScript代码三、逐帧动画的原理。逐帧动画的原理是逐一创建出每一帧上的动画内容，然后顺序播放各动画帧上的内容，从而实现连续的动画效果，如图4-5所示。图4-5逐帧动画原理创建逐帧动画的典型方法主要有以下3种。从外部导入素材生成逐帧动画，如导入静态的图片、序列图像和GIF动态图片等。使用数字或者文字制作逐帧动画，如实现文字跳跃或旋转等特效动画。绘制矢量逐帧动画，利用各种制作工具在场景中绘制连续变化的矢量图形，从而形成逐帧动画4.2.1范例解析（一）──对操作帧的练习请同学们在老师的带领下对帧的操作进行进一步的熟悉，并跟随以下要求进行操作训练。1、新建一个Flash文档，然后在舞台上输入“Flash帧操作”几个字，并设置文字颜色为“暗红色”,如图4-6所示。2、选中默认“图层1”的第10帧，按键盘上的F5快捷键插入帧，如图4-7所示。然后拖动时间轴控制柄观看舞台上文字的变化图4-6输入文字图4-7插入帧3、选中默认“图层1”的第5帧，按键盘上的F6快捷键插入关键帧，如图4-8所示，在第5帧处改变文字的颜色为“蓝色”，然后拖动时间轴控制柄观察第5帧前和第5帧后文字的变换。4、按F7快捷键，分别在第3帧和第8帧处插入空白关键帧，如图4-9所示，然后拖动时间轴控制柄观察舞台的变化。图4-8插入关键帧图4-9插入空白关键帧5、按Ctrl+Alt+A快捷键选中所有帧，如图4-10所示。6、按Ctrl+Alt+C快捷键复制所有帧，然后选中第10帧，按下Ctrl+Alt+V快捷键粘贴帧，此时，【时间轴】面板如图4-11所示，然后拖动时间轴控制柄观察舞台的效果。图4-10选中所有帧图4-11粘贴帧请根据【知识点讲解】栏目讲解的帧知识和此处进行的操作和观察，思考帧、关键帧、空白关键帧的意义和用法。4.2.1范例解析（一）──对操作帧的练习本例使用从外部导入静态图片和使用文字的方式来制作逐帧动画，从而制作“一马平川”的动画效果，其制作思路及结果如图4-12所示。图4-12制作思路及效果1、制作背景。（1）新建一个Flash文档，设置文档【尺寸】为“550px×250px”，【帧频】为“6fps”，其他属性使用默认参数。（2）将默认的“图层1”重命名为“背景”层，执行【文件】/【导入】/【导入到舞台】菜单命令，将教学资源中的“素材\第4讲\一马平川\背景.png”的图像文件导入到舞台中，并相对舞台居中对齐，如图4-13所示。图4-13导入背景后的舞台效果2、制作骏马奔跑动画。（1）在“背景”图层之上新建一个图层并重命名为“骏马”层，然后选中“背景”图层和“骏马”的第8帧，按下F5快捷键插入帧，此时的【时间轴】状态如图4-14所示。图4-14【时间轴】状态一（2）新建一个影片剪辑元件并命名为“骏马”，进入元件的编辑模式。（3）在元件内执行【文件】/【导入】/【导入到舞台】菜单命令，将教学资源中的“素材\第4讲\一马平川\骏马\马1.png”的图像文件导入到舞台中，此时会弹出提示对话框，询问是否导入序列图片的对话框，如图4-15所示。（4）选择按钮，将序列图片全部导入到时间轴上，时间轴效果如图4-16所示（5）返回主场景，将刚才创建好的“骏马”影片剪辑元件拖入到“骏马”图层，并相对舞台居中对齐，如图4-17所示。图4-15导入序列图片图4-16【时间轴】效果图4-17导入“骏马”元件3、制作文字逐帧动画。（1）在“骏马”图层上面新建一个图层并重命名为“文字效果”，选中“文字效果”图层的第2帧，然后按F6快捷键插入一个关键帧。（2）选择【文本】工具，在【属性】面板中设置【字体】为“隶书”，【字体颜色】为“#FFFFFF”，【字体大小】为“80”，然后在舞台上输入“一”字，并移动文字到舞台的上边，如图4-18所示。（3）选中“文字效果”图层的第3帧，按F6快捷键插入一个关键帧，在该帧输入一个“马”字，并移动“马”字的位置到“一”字右侧，效果如图4-19所示。（4）使用相同的方法，分别在第4帧和第5帧输入“平”、“川”字，如图4-20和图4-21所示。图4-18第2帧添加“一”图4-19第3帧添加“马”图4-20第4帧添加“平”图4-21第5帧添加“川”（5）保存测试影片，一马平川的动画效果制作完成。4.1.4课堂练习──制作“旗帜飘扬”请同学们使用绘图工具，在不同的帧上绘制红旗在空中不同的状态，从而制作如图4-22所示的动态效果。第1帧第2帧第3帧第4帧第5帧图4-22动态红旗效果1、新建一个Flash文档，设置文档【尺寸】为“250px×350px”，【帧频】为“5”，其他属性使用默认参数。2、将默认的“图层1”重命名为“背景”图层，并在上面绘制背景和旗杆，如图4-23所示。3、新建一个图层并重命名为“红旗”图层，在第1帧绘制如图4-24所示的红旗。4、在第2帧处按F6快捷键插入关键帧，然后修改图形效果如图4-25所示。图4-23绘制背景和旗杆图4-24绘制红旗图4-25修改红旗5、使用同样的方法制作余下的红旗。6、选择“背景”图层的第5帧，按F5快捷键添加帧。7、保存测试影片，一个红旗在微风中飘动的动画制作完成。4.2认识原件和库元件是Flash动画中的重要元素，灵活的使用元件可以使开发工作达到事半功倍的效果，所以本任务首先从认识元件入手，再配合一个逐帧动画案例剖析来讲述元件这一知识点。4.2.1知识点讲解一、元件和库的概念。元件是指创建一次即可以多次重复使用的图形、按钮或影片剪辑，而元件是以实例的形式来体现，库是容纳和管理元件的工具。形象地说，元件是动画的“演员”，而实例是“演员”在舞台上的“角色”，库是容纳“演员”的“房子”。如图4-26所示，舞台上的图形如“苹果”、“盘子”都是元件，都存在于【库】中，如图4-27所示。图4-26元件在舞台上的显示图4-27元件和库元件只需创建一次，就可以在当前文档或其他文档中重复使用，如图4-27中的“苹果”图形。二、使用元件的优点。（1）可以简化动画的编辑。（2）减小动画文件尺寸。（3）加快文件的播放速度。三、元件的类型。元件的类型有3种，即【图形元件】、【按钮元件】和【影片剪辑元件】。4.2.2范例解析（一）──辨别元件练习Flash中的3种元件对于很多Flash用户来说都比较容易混淆，特别是图形元件和影片剪辑元件的不同更是很难区分，所以请同学们在老师的带领下做以下操作和观察来区别元件1、新建一个Flash文档，文档属性使用默认参数。2、单击【库】面板下面的按钮，打开【创建新元件】对话框，设置参数如图4-28所示。3、单击按钮新建元件并进入元件的编辑模式，然后在元件内制作一个简单的文字逐个出现的逐帧动画，如图4-29所示。图4-28创建新元件图4-29文字逐帧出现动画4、新建一个图形元件，并命名为“图形”，进入该元件编辑模式进行编辑。使用同样的方法制作一个文字逐帧出现的简单动画，如图4-30所示。5、新建一个按钮元件，并命名为“按钮”，进入该元件编辑模式进行编辑。在不同的帧上输入不同文字，如图4-31所示。图4-30文字逐帧动画图4-31在不同帧输入文字6、返回主场景，将【库】面板中的“影片剪辑”、“图形”、“按钮”放置到舞台上，按Ctrl+Enter快捷键测试影片观看效果。（1）影片剪辑”元件不停的循环播放；（2）“图形”元件不播放；（3）当鼠标移动到“按钮”元件之上或用鼠标单击“按钮”元件时都会引起“按钮”元件文字的变化。7、关闭测试播放器，在主场景的默认“图层1”的第10帧处插入帧，然后再次测试播放影片观看效果，此时“图形”元件开始循环播放。8、选中舞台上的“图形”元件，然后在【属性】面板中分别设置播放方式为“循环”、“播放一次”、“单帧”3种不同选项值，如图4-32所示，并播放测试观看影片。图4-32设置播放模式4.2.3范例解析（二）──书写“生日快乐”本例将使用逐帧动画来细腻描摹在蛋糕上书写“生日快乐”4个字的动画，其操作思路及效果如图4-33所示。1、制作背景。（1）新建一个Flash文档，设置文档【尺寸】为“800px×700px”，文档其他属性使用默认参数。图4-33操作思路及效果（2）将默认的“图层1”重命名为“背景”图层，然后执行【文件】/【导入】/【导入到舞台】菜单命令，将教学资源中的“素材\第4讲\生日快乐\背景.png”图像文件导入到舞台，如图4-34所示。2、制作“生”字的书写效果。（1）新建一个【影片剪辑】元件并命名为“文字”，单击按钮进入元件的编辑模式。（2）选中默认“图层1”的第1帧，利用【文本】工具在舞台上输入“生日快乐”4个字，在【属性】面板中设置其【字体】为“方正舒体”，【字体大小】为“95”，【文本颜色】为“红色”，如图4-35所示，调整使其相对舞台居中对齐。图4-34导入背景后的舞台效果图4-35设置文本属性（3）选中文字，按下Ctrl+B快捷键将文本打散，如图4-36所示，用鼠标右键单击文字，在弹出的快捷菜单中选择【分散到图层】命令，将4个文字分散到不同的图层上，此时的【时间轴】状态如图4-37所示。图4-36文字打散后的效果图4-37【时间轴】状态二（4）删除“图层1”图层，然后调整图层的顺序从下到上为“生”、“日”、“快”、“乐”，如图4-38所示。（5）选中最下层“生”图层上的文字，按下Ctrl+B快捷键将文字打散。（6）选中“生”图层的第2帧，按F6快捷键插入一个关键帧，选择【橡皮檫】工具，擦除“生”的最下边一横右边的一小部分，效果如图4-39所示。图4-38调整图层顺图4-39第2帧的文字这里擦除文字的顺序和文字被书写出来的顺序刚好相反，其目的是为了后续步骤翻转帧之后，即可制作出文字被逐渐写出的效果。（7）在“生”图层的第3帧插入一个关键帧，继续擦除“生”字最下边一横右端的一小部分，效果如图4-40所示。（8）重复