《Flash CS 3 平面动画案例教程与实训 第3章 Flash平面动画制作》由会员分享，可在线阅读，更多相关《Flash CS 3 平面动画案例教程与实训 第3章 Flash平面动画制作（83页珍藏版）》请在金锄头文库上搜索。
1、Flash平面动画制作第3章 Flash平面动画制作教学目标教学重点、难点本章小结教学内容教学目标 通过这章的学习，学生可以熟练的掌握逐 帧动画、运动补间动画、形状补间动画、遮 罩层动画和引导动画这5种动画的制作方法和 技巧。第3章 Flash平面动画制作教学重点与难点 第3章 Flash平面动画制作逐帧动画、运动补间动画、形状补间动 画、遮罩层动画和引导动画的制作方法和 设计技巧。教学内容 本章小结第3章 Flash平面动画制作本章计划授课14学时本节内容Flash平面动画的基本概念Flash平面动画的基本制作方法平面动画的设计技巧练习3.1 Flash平面动画制作的概述动画任何随着时间而发
2、生的位置或者形态上的改变。Flash动画是由一个个“帧”上的图片连接而成的，帧是动画 最基本的单位。舞台是制作动画的地方，在播放器中播放动画时，只有舞台中的对象被显示。工作区域舞台和周围的灰度区域场景是动画的另一个组成部分是“场景”的变换，就像一部电影不可能只在一个地方拍摄一样，制作Flash动画也需要有不同的场景。 一、 Flash平面动画的基本概念3.1 Flash平面动画制作的概述1、逐帧动画 将动画的每一帧均设置为关键帧，通过改变每一个关键帧中的图像而产生动画效果。逐帧动画是Flash所提供的最基本的动画形式。2、形状补间动画 形状补间动画被应用于基本形状的变化，它是某一个对象在一定时
3、间内其形状发生过渡型渐变的动画。形状补间动画用位于时间轴上动画的开始帧与结束帧之间区域的一个绿色的连续箭头表示。二、 Flash平面动画的基本制作方法3.1 Flash平面动画制作的概述3、运动补间动画运动补间动画被应用于把对象由一个地方移动到另一个地方的情况，也可应用于形成物体的缩放、倾斜或者旋转的动画，还可用于形成元件的颜色和透明度变化的动画。运动补间动画用位于时间轴上动画的开始帧与结束帧之间区域的一个蓝色的连续箭头表示。二、 Flash平面动画的基本制作方法3.1 Flash平面动画制作的概述4、遮罩动画遮罩动画是将一个图层设置为遮罩层，此图层中的对象将相应地转换为遮罩对象。其它图层则为
4、被遮罩层，这些图层的对象被遮罩对象所屏蔽的那部分才可显示。5、引导动画引导动画实际上是在运动补间动画的基础上添加一个引导图层，该图层有一条可以引导运动方向的引导线，使另一个图层中的对象依据此引导线进行运动的动画。二、 Flash平面动画的基本制作方法3.1 Flash平面动画制作的概述注意以下几个要点： 1要想吸引观众，最重要的是让动作具有一定的含义。 2动作应该支持动画的内容和主题。 3动作可以像文章和颜色一样传达情绪、感情和个性。 4在日常生活中仔细观察动作并记录下来，建立一个创建动画时的“资源库”。 5动作的设计要符合自然规律。 三、 Flash平面动画的设计技巧3.1 Flash平面动
5、画制作的概述本节内容案例效果操作步骤技术要点练习3.2 “运动的小青蛙”逐帧动画案例一、案例效果重点与难点：逐帧动画的制作技巧和卡通人物的绘图技巧。3.2 “运动的小青蛙”逐帧动画案例二、操作步骤本案例是在2.5“小青蛙”案例的基础上制作而成。 1：打开素材“青蛙侧面”的Flash工程文件。并把文件另存为“运动的小青蛙”2：制作逐帧动画第一步：建立一个命名为“运动合成”的影片剪辑元件。3.2 “运动的小青蛙”逐帧动画案例二、操作步骤第二步：打开“库”面板把“头”、“身体”、“左手”、“右手”、“左脚”、“右脚”元件拖到“运动合成”元件中，并分布到各个图层以对应的名字命名 。第三步：分别检查左右
6、手、头和脚的中心点位置，根据人的基本运动规律来确定各个关节运动的中心点。 3.2 “运动的小青蛙”逐帧动画案例二、操作步骤第四步：画脚的动作第1帧第2帧第3帧第4帧第5帧第6帧第7帧3.2 “运动的小青蛙”逐帧动画案例二、操作步骤第五步：在对应的帧上依次设置如下相应的动作。3测试影片，保存文件，并导出影片 3.2 “运动的小青蛙”逐帧动画案例三、技术要点1、制作逐帧动画的基本步骤：（1）选择一关键帧作为逐帧动画的开始帧。（2）在开始帧中绘制或导入动画序列中的第1张图片。（3）选择下一关键帧，并进行任意修改或导入绘制一张新图片。（4）继续添加关键帧并改变相应关键帧的内容直到最终完成动画。（5）测
7、试影片并导出一个.swf文件。3.2 “运动的小青蛙”逐帧动画案例2、卡通人物的绘图技巧（1）身体的比例：当你画真实人物时，身高一般是按六至七个头来画的，而卡通人物，最常见的比例是三至四个头高 。（2）基本结构：卡通人物多数是以球体或圆柱体为基础，因为这两种形状比较容易掌握。 下图是绘制卡通人物的一般流程 ：三、技术要点3.2 “运动的小青蛙”逐帧动画案例(1) 在制作逐帧动画时，前后帧之间的位置关系如何？ (2) 利用青蛙为元素制作一组青蛙走路的动画 (参考从前言中所 提供的网址下载的本章的“练习参考”文件夹中的Flash工程文 件“走路参考”) 。四、练习3.2 “运动的小青蛙”逐帧动画案
8、例本节内容案例效果操作步骤技术要点练习3.3 “恭贺新禧”案例一、案例效果重点与难点：形状补间动画的特点、创建方法，及如何设置形状提示点 来控制形状补间动画的中间过程。3.3 “恭贺新禧”案例二、操作步骤1新建文档并命名启动Adobe Flash CS3后，新建一个文档，对背景颜色和舞台大小进行相应的设置，保存文档，命名为“恭贺新禧 ”。2.设置背景图片 将”图层1”改名为“背景” ，把素材中的背景图片文件“焰火”导入到舞台，并设置宽为400、高为300 ，居中对齐，扩展到100帧。锁定图层。3.3 “恭贺新禧”案例二、操作步骤3绘制灯笼 第一步：插入4个新图层 ，分别命名为“恭”、“贺”、“
9、新”、“ 禧”。将“贺”、“新”、“禧”三个图层锁定。单击“恭”图层的第 20帧，按F6键增加一个关键帧。利用“矩形工具”和“椭圆工具” 绘制如下左“灯笼”图形：第二步：分别在“贺”、“新”、“禧”图层中第20帧单击F6键添加 关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如上右图 。 3.3 “恭贺新禧”案例二、操作步骤4绘制“恭贺新禧”四个文字 第一步：解锁“恭”图层，锁定其它所有图层。在第40帧添加一 个关键帧。将原来的灯笼删掉。单击【文本工具】，设置字体 为“华文彩云”，字大小为“74”，字体颜色为纯红色，使用【文 本工具】中输入“恭”字。将此汉字摆在原来灯笼的位置。选中 此汉字，用C
10、trl+B键将其打散成形状。将打散的汉字的内外边 界颜色均设置为纯黄色。 第二步：用同样的方法给“贺”、“新”和“禧”图层也分别在第40 帧绘制一个“贺”、“新”和“禧”字。最终效果如图 3.3 “恭贺新禧”案例二、操作步骤5绘制其它关键帧，并设置形变动画第一步：解锁“恭”、“贺”、“新”和“禧”四个图层。给此四个图层均在第40帧、第60帧和第80帧添加一个关键帧。第二步：鼠标右击“恭”图层的第20帧至第40帧之间，在弹出的 快捷菜单中选择“创建补间形状” ，用同样的方法给“恭”图层的 第60帧至第80帧之间也创建形状补间动画。用同样的方法给“贺”、“新”、“禧”三个图层的第20帧至第 40帧
11、之间、第60帧至第80帧之间也创建形状补间动画。6、测试影片，保存文件，并导出影片。3.3 “恭贺新禧”案例三 、技术要点1. 制作形状补间动画 形状补间动画的方法有如下三种：（1）选择开始关键帧和结束关键帧间的任何一帧，在“ 属性”面板中设置。（2）右击开始关键帧和结束关键帧间的任何一帧，在 快捷菜单中选择“创建补间形状”。（3）单击开始关键帧和结束关键帧间的任何一帧，选 择【插入】【时间轴】【创建补间形状】菜单项。3.3 “恭贺新禧”案例三 、技术要点2. 设置形状提示点 在已经创建了一个基本的形状补间动画后，可以按照 以下步骤添加形状提示点：（1）首先在时间轴中的形状补间动画的开始关键帧
12、中选 择一个形状，然后单击【修改】【形状】【添加形状提 示】菜单项，Flash会在舞台上放置一个用字母标记的红 色小圆圈，这就是形状提示点。可以用以上方法添加多个 形状提示点，它们都按字母顺序标识。（2）在开始关键帧的形状上确定一个点，用【箭头工 具】进行选择并移动第一个形状提示点，把它放在形状上 一个用户想要其与最终形状中的一块区域进行匹配的区域 上（比如说，一个棱角或一段曲线）3.3 “恭贺新禧”案例三 、技术要点（3）当把播放头移动到形状补间动画的结束帧上时，会 看到一个与放在开始帧上的标了字母的形状提示点相 匹配的另一个标了相同字母的形状提示点。把这个形 状提示点用【箭头工具】定位，从
13、而在最终形状上标 记出一块应该与初始形状上特定区域相匹配的区域。 当结束关键帧中的形状提示点的颜色由红色变成了绿 色（如图3.43所示），而在开始关键帧中的形状提示 点由红色变成了黄色，则表示形状提示点已经与作品 建立了正确的连接。 （4）将播放头在时间轴上移动预览新的形变过程。不停 地加入形状提示点，或对它们进行重新定位，直到动 画产生出了理想的形变过程。3.3 “恭贺新禧”案例（1）制作一个笑脸到哭脸的变脸形变动画，效果如下图 所示。（提示：笑脸系列形状可采用【文本工具】输入，字体采 用“Windings”，输入大写字母“L”则可输入一个笑脸， 其它两张脸对应着大写字母“K”和“L”。）
14、四、练习3.3 “恭贺新禧”案例(2) 制作一个变手的形变动画，并通过设置形状提示点来 控制手指之间的对应变换位置。动画中手的姿势如下图所 示。（提示：手的系列形状可采用“文本工具”输入，字体采用 “Windings”，输入大写字母“A”“G”实现） 四、练习3.3 “恭贺新禧”案例本节内容案例效果操作步骤技术要点练习3.4 “宇宙集锦”案例一、案例效果重点与难点：运动补间动画的制作方法和技巧，及如何设置旋转、运动 的快慢和逐渐消失的效果。3.4 “宇宙集锦”案例二、操作步骤1新建文档并命名启动Adobe Flash CS3后，新建一个文档，对舞台大小进行设置宽为400、高为300 ，保存文档
15、，命名为“宇宙集锦 ”。2.创建宇宙图形符号 新建一个“图1”的图形元件，导入本案例对应的素材文件夹中的“宇宙1”的图片文件 。用同样的方法导入文件名为“宇宙2”至“宇宙6”图片文件，分别对应生成名为“图2”至“图6”的图形元件。 3.4 “宇宙集锦”案例二、操作步骤3创建“Loading”文本的拉伸效果第一步：新建一个名称为“Loading”的影片剪辑元件。第二步：选用【文本工具】输入文字“Loading”，在“属 性”面板中设置此文字的字体为“黑体”，字号为25，字体颜色 为白色。用Ctrl+B将文字打散。将第1帧复制到第2帧至第13帧 。鼠标单击第1帧，只保留“L”字母，删除其它字符图形
16、。从第 2帧开始逐步增加字符图形直至第13帧。鼠标单击第18帧，按 F5键增加一个扩展帧。 3.4 “宇宙集锦”案例4创建“光线”图形符号第一步：新建名称为“光线”的图形元件。第二步：利用“椭圆工具”绘制如下图的光线效果：二、操作步骤3.4 “宇宙集锦”案例5创建“光束”影片剪辑第一步：新建名称为“光束”的影片剪辑元件 。 第二步：将“光线”图形符号拖入舞台中央，并用Ctrl+B打散。 鼠标单击第25帧，按F6键插入关键帧，将光线沿直线运动轨迹 拖动至舞台的边缘。鼠标点击第30帧按F5键插入扩展帧。单击 第1帧，将“光线”图形符号缩小并移动至舞台中心点。鼠标右 击第1帧至第25帧之间，在弹出的快捷菜单中选择“创建补间形 状”。再新建多个图层，对每个图层按照上述方法在舞台的不同 角度做“光线”图形符号的形变动画。最终结果如下图 二、操作步骤3.4 “宇宙集锦”案例6设置背景图片导入背景图片到场景1中，选择本案例对应的素材文件夹中的背景图片文件“sky”。设置此图片的宽为400、高为300。
