第3章 动画制作基础

第3章动画制作基础教学要点基于帧的动画制作方法形状补间与动作补间的制作遮罩动画的制作动画引导路径的制作3.1Flash动画基础与Flash文档相关的文件类型时间轴场景动画元素3.1.1与Flash文档相关的文件类型FLA格式：是Flash用保存设计时的各种信息的格式。FLA格式的文件通常比较大。SWF格式：发布Flash动画时主要使用SWF格式，SWF文件是播放器和网页中实际加载的Flash文件格式。SWC格式：是Flash组件的压缩格式。

概念3.1.2时间轴时间轴就是用来组织和控制文档内容在一定时间内播放的图层数和帧数。与胶片一样，Flash文档也将时长分为帧。图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。

概念3.1.2时间轴时间轴面板分成4个部分：顶区、图层区、时间帧区、状态区。

时间轴面板介绍3.1.2时间轴时间轴的顶区由两行组成。第1行是切换行，只要单击相应的文件名就可以在几个FLA或SWF文件之间进行切换。第2行从左向右是当前场景的名称、编辑场景和编辑元件间的切换、场景显示比例。

时间轴——顶区3.1.2时间轴每个图层都包含一些动画元素，上面图层中的元素遮盖下面图层中的元素。图层控制按钮如下：显示/隐藏图层锁定/解除锁定图层显示图层的轮廓

时间轴——图层按钮3.1.2时间轴图层有以下几种类型：层文件夹引导层遮罩层普通层

时间轴——图层类型3.1.2时间轴Flash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等。默认时为每秒播放12帧。关键帧普通帧帧标签帧注释播放头

时间轴——时间帧区3.1.2时间轴指示所选的帧编号、当前帧频以及到当前帧为止的运行时间。“帧显示模式”按钮，主要用于控制绘图纸效果。所谓绘制纸就是允许同时显示当前帧附近的多个帧，这对于估计动画的下一帧的位置有很大的好处。

时间轴——状态栏3.1.3场景在时间轴面板的下面，占据界面最大的区域就是“场景”。可以增加或删除“场景”。

场景面板3.1.3场景在场景中可以实现以下操作：复制场景增加场景删除场景更改场景名称更改场景顺序转换场景

场景面板的使用3.1.4动画元素Flash场景中常用的动画元素有：矢量图形位图图像文字对象（静态文本、动态文本、输入文本）声音对象按钮对象影片剪辑动作脚本语句

常用动画元素3.1.5元件与实例元件是在Flash中创建的图形、按钮和影片剪辑。实例是位于舞台上或嵌套在另一个元件内的元件副本。改变实例的大小、颜色、方向等不会影响元件，但元件修改后会影响该元件的所有实例。元件实例1实例2实例33.2逐帧动画创建逐帧动画的方法绘图纸上机实训—飞翔的老鹰上机实训—制作会旋转的动画3.2.1创建逐帧动画的方法用导入的静态图片建立逐帧动画绘制矢量逐帧动画文字逐帧动画指令逐帧动画导入序列图像

创建逐帧动画3.2.2绘图纸绘画纸是定位和编辑动画的辅助功能。这个功能对于制作逐帧动画特别有用。通常情况下，Flash在舞台中一次只能动画序列的一个帧，使用绘画纸功能后，就可以在舞台中一次查看两个或多个帧了。

绘图纸的用途3.2.2绘图纸使用绘图纸功能后的场景效果。可以得知，当前帧中内容用全彩色显示，其他帧内容以半透明显示。

绘图纸的用途演示3.2.2绘图纸【绘图纸外观】按钮：拉动外观标记的两端，可以扩大或缩小显示范围。【绘图纸外观轮廓】按钮：场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。【编辑多个帧】按钮，可以显示全部帧内容，并且可以进行“多帧同时编辑”。

绘图纸各个按钮的用途3.2.2绘图纸

【修改绘图纸标记】按钮，按下此按钮后弹出一个菜单，菜单中各选项含义如下【总是显示标记】【锚定绘图纸】【绘图纸2】【绘图纸5】【绘图全部】

绘图纸各个按钮的用途3.2.3实例——飞翔的老鹰这是利用导入gif动画而创建的逐帧动画。

效果预览新建一个Flash文档。设置大小为288像素×209像素。背景颜色为白色。

新建文档3.2.3实例——飞翔的老鹰导入“背景.bmp”文件选择第30帧，增加过渡帧

创建背景图层3.2.3实例——飞翔的老鹰新建一个图层，选中第1帧，执行【文件】|【导入】|【导入到舞台】命令，导入“老鹰.gif”文件。

导入gif动画3.2.3实例——飞翔的老鹰将老鹰适当缩小一些，并适当调节它的位置。

调整对象大小及位置3.2.3实例——飞翔的老鹰新建一个图层，输入“天高任鸟飞”。

添加文字3.2.3实例——飞翔的老鹰执行【控制】|【测试影片】命令，观察动画的效果。如果满意，执行【文件】|【保存】命令，将文件保存成“飞翔的老鹰.fla”文件。如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令。

测试存盘3.2.3实例——飞翔的老鹰逐帧动画

效果预览3.2.4实例—制作旋转动画新建一个Flash文档。文件大小为550像素×400像素。【背景颜色】为白色。

新建文档3.2.4实例——制作旋转动画选择第1帧，执行【文件】|【导入】|【导入到舞台】命令，将“背景”图片导入到场景中。

创建背景3.2.4实例——制作旋转动画新建一个名为“立方体”的影片剪辑元件。依次绘制各帧中立方体的外形并填充相应的颜色，共18帧。

新建影片剪辑元件3.2.4实例——制作旋转动画新建一层。在时间轴的第1帧上，把库中的“立方体”影片剪辑拖入主场景中。放在场景的中下部。按Ctrl+回车预览动画效果。

创建“立方体”图层3.2.4实例——制作旋转动画3.3形状补间动画通过补间形状，可以创建类似于形变的效果，使一个形状看起来随着时间变成另一个形状。运用它可以制作出各种奇妙的变形效果。3.3.1形状补间动画基础在一个关键帧中绘制一个形状。在另一个关键帧中更改该形状或绘制另一个形状。Flash根据二者之间的形状来创建的动画被称为“形状补间动画”。

制作原理形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化。其变形的灵活性介于逐帧动画和动作补间动画二者之间。如果使用图形元件、按钮、文字，则必须先“分离”才能创建变形动画。

动画的元素3.3.1形状补间动画基础形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。

在时间轴上的表现3.3.1形状补间动画基础在动画开始处创建或选择一个关键帧，并设置要开始变形的形状。在动画结束处创建或选择一个关键帧并设置要变成的形状。再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，选择【形状】。

制作方法3.3.1形状补间动画基础3.3.2形状补间动画的属性面板在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。

形状提示的作用3.3.3使用形状提示单击动画开始帧，执行【修改】|【形状】|【添加形状提示】命令。该帧的形状上就会增加一个带字母的红色圆圈，在结束帧形状中也会出现一个“提示圆圈”。用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置。

添加形状提示的方法3.3.3使用形状提示“形状提示”可以连续添加，最多26个。将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作更有效。形状提示的摆放位置也要符合逻辑顺序。形状提示要在形状的边缘才能起作用。调整形状提示位置前，按下“贴紧至对象”按钮，会自动把“形状提示”吸附到边缘上。

添加形状提示的技巧3.3.3使用形状提示效果预览3.3.4实例——添加形状提示新建文档创建变形对象把字符转为形状创建补间动画添加形状提示添加文字制作步骤3.3.4实例——添加形状提示3.3.5实例——珍惜水源

效果预览打开源文件预览动画效果新建文档文件大小为500×410像素【背景颜色】为白色

新建文档3.3.5实例——珍惜水源将名为“珍惜水源.jpg”图片导入到舞台。选择第80帧，按键盘上的F5键，增加一个普通帧。

加入背景3.3.5实例——珍惜水源新建一个名为“水珠1”图层。使用【椭圆工具】画一个无边的圆。用【颜料桶工具】填充圆。

创建水珠3.3.5实例——珍惜水源复制刚画好的水珠。新建3个图层，在每个图层中粘贴一个水珠，调整水珠的位置。在第20、40帧处为各图层添加关键帧。复制4个水珠3.3.5实例——珍惜水源选取第一个水珠，在第40帧处用文字“珍”取代水珠。对“庆”字执行【分离】命令，把文字转为形状。在第40帧处的相应图层上依次用“惜”、“水”、“源”3个字取代另外3个水珠，并执行【分散】命令。将文字转为形状取代水珠3.3.5实例——珍惜水源在“水珠”各图层的第60帧及第80帧处，分别添加关键帧。分别复制第20帧中的“水珠”图形，再分别粘贴到第80帧中。注意：应该先清除第80帧处4个“水珠”图层中的内容。文字到水珠的转变3.3.5实例——珍惜水源在“水珠”各图层的第20、60帧处单击帧，建立形状补间动画。创建形状补间动画3.3.5实例——珍惜水源3.4动作补间动画运用动作补间动画可以做出令人称奇的仿3D的效果。3.4.1

动作补间动画的概念在一个关键帧上放置一个元件。在另一个关键帧改变这个元件的大小、颜色、位置、透明度等。Flash根据二者之间的帧创建的动画被称为动作补间动画。基本概念构成动作补间动画的元素是元件。包括影片剪辑、图形元件、按钮、文字、位图、组合等，但不能是形状。只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

动作补间动画的构成元素3.4.1

动作补间动画的概念动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头。

在时间帧面板上的表现3.4.1

动作补间动画的概念

形状、动作补间动画的区别3.4.1

动作补间动画的概念在动画开始处创建或选择一个关键帧并设置一个元件。在动画结束处创建或选择一个关键帧并设置该元件的属性。再单击开始帧，用右键单击帧，在弹出的菜单中选择【创建补间动画】。

创建方法3.4.1

动作补间动画的概念3.4.2

动作补间动画的属性设置【缓动】选项【旋转】选项【调整到路径】

帧属性面板【同步】复选框【对齐】选项3.4.3

实例——网站横幅广告的制作

效果预览新建一个Flash文档文件大小为930×140像素【背景颜色】为黑色将准备好的背景图片导入到舞台调整图片的大小和位置选中第100帧，按F5键添加普通帧创建影片文档3.4.3

实例——网站横幅广告的制作创建“第”字的图形元件。为“第”字图形元件添加滤镜效果。重复上面两个步骤，分别创建“29”、“届”、“奥”、“运”、“会”几个图形元件，并为它们添加滤镜效果。创建“北京2008”元件，并设置发光滤镜效果。创建“方块”元件。创建元件3.4.3

实例——网站横幅广告的制作本实例中文字的动画效果：“第29届奥运会”从上向下，渐变进入。然后一组方块从右到左依次出现又隐没，同时“北京2008”一组字以同样的方式移动到舞台中央，上面的“第29届奥运会”渐渐变大变淡直至消失。创建动画3.4.3

实例——网站横幅广告的制作3.5遮罩动画常见的遮罩动画效果水波万花筒百叶窗放大镜望远镜3.5.1

遮罩动画的概念在Flash中，可以在遮罩层上创建一个任意形状的“视窗”。遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。

什么是遮罩用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见。用来遮罩住某一元件的一部