《动画制作基础》PPT课件.ppt

第3章  动画制作基础教学要点l基于帧的动画制作方法l形状补间与动作补间的制作l遮罩动画的制作l动画引导路径的制作3.1  Flash动画基础与Flash文档相关的文件类型时间轴场景动画元素3.1.1  与Flash文档相关的文件类型l FLA格式：是Flash用保存设计时的各种信息的格式FLA格式的文件通常比较大l SWF格式：发布Flash动画时主要使用SWF格式，SWF文件是播放器和网页中实际加载的Flash文件格式l SWC格式：是Flash组件的压缩格式　　　　　　　　　　　　　　　　　　　　　　　　　　   　       概念3.1.2  时间轴l时间轴就是用来组织和控制文档内容在一定时间内播放的图层数和帧数l与胶片一样，Flash 文档也将时长分为帧l图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像　　　　　　　　　　　　　　　　　　　　　　　　　　   　       概念3.1.2  时间轴l时间轴面板分成4个部分：顶区、图层区、时间帧区、状态区　　　　　　　　　　　　　　　　　　　         时间轴面板介绍3.1.2  时间轴l时间轴的顶区由两行组成。

¡  第1行是切换行，只要单击相应的文件名就可以在几个FLA或SWF文件之间进行切换¡  第2行从左向右是当前场景的名称、编辑场景和编辑元件间的切换、场景显示比例　　　　　　　　　　　　　　　　　　　         时间轴—顶区3.1.2  时间轴l每个图层都包含一些动画元素，上面图层中的元素遮盖下面图层中的元素l图层控制按钮如下：l 显示/隐藏图层l 锁定/解除锁定图层l 显示图层的轮廓　　　　　　　　　　　　　　　　         时间轴—图层按钮3.1.2  时间轴l图层有以下几种类型：¡   层文件夹¡   引导层¡   遮罩层¡   普通层　　　　　　　　　　　　　　　             时间轴—图层类型3.1.2  时间轴lFlash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等默认时为每秒播放12帧¡  关键帧¡  普通帧¡  帧标签¡  帧注释¡  播放头　　　　　　　　　　　　　　　             时间轴—时间帧区3.1.2  时间轴l指示所选的帧编号、当前帧频以及到当前帧为止的运行时间l “帧显示模式”按钮，主要用于控制绘图纸效果。

l所谓绘制纸就是允许同时显示当前帧附近的多个帧，这对于估计动画的下一帧的位置有很大的好处　　　　　　　　　　　　　　　             时间轴—状态栏3.1.3  场景l在时间轴面板的下面，占据界面最大的区域就是“场景”l可以增加或删除“场景”　　　　　　　　　　　　　　　                                        场景面板3.1.3  场景l在场景中可以实现以下操作：¡  复制场景¡  增加场景¡  删除场景¡  更改场景名称¡  更改场景顺序¡  转换场景　　　　　　　　　　　　　　                             场景面板的使用3.1.4  动画元素lFlash场景中常用的动画元素有：l矢量图形l位图图像l文字对象¡  静态文本¡  动态文本¡  输入文本　　　　　　　　　　　　　　                             常用动画元素一3.1.4  动画元素l声音对象l按钮对象l影片剪辑l动作脚本语句　　　　　　　　　　　　　　                             常用动画元素二3.2  逐帧动画创建逐帧动画的方法绘图纸上机实训—飞翔的老鹰上机实训—制作会旋转的动画3.2.1  创建逐帧动画的方法l用导入的静态图片建立逐帧动画l绘制矢量逐帧动画l文字逐帧动画l指令逐帧动画l导入序列图像　　　　　　　　　　　　　　                             创建逐帧动画3.2.2  绘图纸l绘画纸是定位和编辑动画的辅助功能。

l这个功能对于制作逐帧动画特别有用l通常情况下，Flash 在舞台中一次只能显示动画序列的一个帧，使用绘画纸功能后，就可以在舞台中一次查看两个或多个帧了　　　　　　　　　　　　　　                             绘图纸的用途3.2.2  绘图纸l使用绘图纸功能后的场景效果l可以看出，当前帧中内容用全彩色显示，其他帧内容以半透明显示　　　　　　　　　　　　　                    绘图纸的用途演示3.2.2  绘图纸l 【绘图纸外观】按钮：拉动外观标记的两端，可以扩大或缩小显示范围l 【绘图纸外观轮廓】按钮：场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程l 【编辑多个帧】按钮，可以显示全部帧内容，并且可以进行“多帧同时编辑”　　　　　　　　　　　　                 绘图纸各个按钮的用途3.2.2  绘图纸l 【修改绘图纸标记】按钮，按下此按钮后弹出一个菜单，菜单中各选项含义如下¡ 【总是显示标记】¡ 【锚定绘图纸】¡ 【绘图纸2】¡ 【绘图纸5】¡ 【绘图全部】　　　　　　　　　　　　                 绘图纸各个按钮的用途3.2.3  上机实训—飞翔的老鹰l这是利用导入gif动画而创建的逐帧动画。

　　　　　　　　　　　　                                                        效果预览3.2.3  上机实训—飞翔的老鹰l新建一个Flash文档l设置大小为288像素×209像素l背景颜色为白色　　　　　　　　　　　　                                                        新建文档3.2.3  上机实训—飞翔的老鹰l导入“背景.bmp”文件l选择第30帧，增加过渡帧　　　　　　　　　　　                                                创建背景图层3.2.3  上机实训—飞翔的老鹰l新建一个图层，选中第1帧，执行【文件】|【导入】|【导入到舞台】命令，导入 “老鹰.gif”文件　　　　　　　　　　　                                                导入gif动画3.2.3  上机实训—飞翔的老鹰l将老鹰适当缩小一些，并适当调节它的位置　　　　　　　　　　                               调整对象大小及位置3.2.3  上机实训—飞翔的老鹰l新建一个图层，输入“天高任鸟飞”。

　　　　　　　　　                                                                      添加文字3.2.3  上机实训—飞翔的老鹰l执行【控制】|【测试影片】命令，观察动画的效果l如果满意，执行【文件】|【保存】命令，将文件保存成“飞翔的老鹰.fla”文件l如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令　　　　　　　　　                                                                      测试存盘3.2.4  上机实训—制作旋转动画l逐帧动画　　　　　　　　　　　　                                                        效果预览3.2.4  上机实训—制作旋转动画l新建一个Flash文档¡  文件大小为550像素×400像素¡ 【背景颜色】为白色　　　　　　　　　　　　                                                        新建文档3.2.4  上机实训—制作旋转动画l选择第1帧，执行【文件】|【导入】|【导入到舞台】命令，将 “背景”图片导入到场景中。

　　　　　　　　　　　　                                                        创建背景3.2.4  上机实训—制作旋转动画l新建一个名为“立方体”的影片剪辑元件l依次绘制各帧中立方体的外形并填充相应的颜色，共18帧　　　　　　　　　　　                                    新建影片剪辑元件3.2.4  上机实训—制作旋转动画l新建一层l在时间轴的第1帧上，把库中的“立方体”影片剪辑拖入主场景中l放在场景的中下部l按Ctrl+回车预览动画效果　　　　　　　　　　　                                    创建“立方体”图层3.3  形状补间动画通过补间形状，可以创建类似于形变的效果，使一个形状看起来随着时间变成另一个形状运用它可以制作出各种奇妙的变形效果3.  形状补间动画基础l在一个关键帧中绘制一个形状l在另一个关键帧中更改该形状或绘制另一个形状lFlash根据二者之间的形状来创建的动画被称为“形状补间动画”　　　　　　　　　                                                                        制作原理3.  形状补间动画基础l形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化。

l其变形的灵活性介于逐帧动画和动作补间动画二者之间l如果使用图形元件、按钮、文字，则必须先“分离”才能创建变形动画　　　　　　　　                                                                        动画的元素3.  形状补间动画基础l形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头　　　　　　　                                                      在时间轴上的表现3.  形状补间动画基础l在动画开始处创建或选择一个关键帧，并设置要开始变形的形状l在动画结束处创建或选择一个关键帧并设置要变成的形状l再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，选择【形状】　　　　　　                                                                                       制作方法3.3.2  形状补间动画的属性面板3.  使用形状提示l在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。

　　　　　                                                               形状提示的作用3.  使用形状提示l单击动画开始帧，执行【修改】|【形状】|【添加形状提示】命令该帧的形状上就会增加一个带字母的红色圆圈，在结束帧形状中也会出现一个“提示圆圈”l用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置　　　　                                                           添加形状提示的方法3.  使用形状提示l“形状提示”可以连续添加，最多26个l将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作更有效l形状提示的摆放位置也要符合逻辑顺序l形状提示要在形状的边缘才能起作用l调整形状提示位置前，按下“贴紧至对象”按钮，会自动把“形状提示”吸附到边缘上　　　　                                                           添加形状提示的技巧3.  上机实训—珍惜水源　　　                                                                                             效果预览3.  上机实训—珍惜水源l新建文档l文件大小为500×410像素l【背景颜色】为白色　　　　                                                                                           新建文档3.  上机实训—珍惜水源l将名为“珍惜水源.jpg”图片导入到舞台。

l选择第80帧，按键盘上的F5键，增加一个普通帧　　　　                                                                                           加入背景3.  上机实训—珍惜水源l新建一个名为“水珠1”图层l使用【椭圆工具】画一个无边的圆l用【颜料桶工具】填充圆　　　　                                                                                           创建水珠3.  上机实训—珍惜水源l复制刚画好的水珠l新建3个图层，在每个图层中粘贴一个水珠，调整水珠的位置l在第20、40帧处为各图层添加关键帧 复制4个水珠3.  上机实训—珍惜水源l选取第一个水珠，在第40帧处用文字“珍”取代水珠l对“庆”字执行【分离】命令，把文字转为形状l在第40帧处的相应图层上依次用“惜”、“水”、“源”3个字取代另外3个水珠，并执行【分散】命令 将文字转为形状取代水珠3.  上机实训—珍惜水源l在“水珠”各图层的第60帧及第80帧处，分别添加关键帧。

l分别复制第20帧中的“水珠”图形，再分别粘贴到第80帧中¡  注意： 应该先清除第80帧处4个“水珠”图层中的内容 文字到水珠的转变3.  上机实训—珍惜水源l在“水珠”各图层的第20、60帧处单击帧，建立形状补间动画 创建形状补间动画3.  上机实训—添加形状提示 效果预览3.  上机实训—添加形状提示l新建文档l创建变形对象l把字符转为形状l创建补间动画l添加形状提示l添加文字 制作步骤3.4  动作补间动画         运用动作补间动画可以做出令人称奇的仿3D的效果3.4.1  动作补间动画的概念           在一个关键帧上放置一个元件在另一个关键帧改变这个元件的大小、颜色、位置、透明度等Flash根据二者之间的帧创建的动画被称为动作补间动画         条件：              二个关键帧              有时间差              关键帧内是元个或成组对象 基本概念3.4.1  动作补间动画的概念l构成动作补间动画的元素是元件(包括影片剪辑、图形元件、按钮、文字、位图、组合等，但不能是形状)。

l只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”                             动作补间动画的构成元素3.4.1  动作补间动画的概念l动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头                                 在时间帧面板上的表现3.4.1  动作补间动画的概念                        形状、动作补间动画的区别3.4.1  动作补间动画的概念l在动画开始处创建或选择一个关键帧并设置一个元件l在动画结束处创建或选择一个关键帧并设置该元件的属性l再单击开始帧，用右键单击帧，在弹出的菜单中选择【创建补间动画】                                                   创建方法3.4.2  动作补间动画的属性设置l【缓动】选项l【旋转】选项l【调整到路径】                                                   帧属性面板l【同步】复选框l【对齐】选项3.4.3  上机实训—网站横幅广告的制作                                                   效果预览3.4.3  上机实训—网站横幅广告的制作l新建一个Flash文档¡  文件大小为520×60像素¡【背景颜色】为白色l将名为“启航背景.bmp” 导入到舞台l调整图片的大小和位置l选中第205帧，按F5键添加普通帧                                              新建影片文档3.4.3  上机实训—网站横幅广告的制作l创建“电脑动画”文字效果l创建“网页设计”文字效果l创建“图像制作”文字效果l创建“闪客启航”文字效果l创建“语音教学”文字效果                                                             创建动画3.5  遮罩动画常见的遮罩动画效果水波万花筒百叶窗放大镜望远镜3.5.1  遮罩动画的概念l在Flash中，可以在遮罩层上创建一个任意形状的“视窗”。

l遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示                                                   什么是遮罩3.5.1  遮罩动画的概念l用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见l用来遮罩住某一元件的一部分，从而实现一些特殊的效果                                              遮罩有什么用3.5.2  创建遮罩的方法l遮罩层其实是由普通图层转化的l在某个图层上单击鼠标右键，在弹出的菜单中选择【遮罩层】，该图层就会成为遮罩层                                                       创建遮罩3.5.2  创建遮罩的方法l遮罩层中内容：¡  按钮、影片剪辑、图形、位图、文字、和转化为“填充”的线条等l被遮罩层中内容：¡  按钮、影片剪辑、图形、位图、文字、线条                             构成遮罩和被遮罩层的元素3.5.2  创建遮罩的方法l可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段。

                                    可以使用的动画形式3.5.2  应用遮罩时的技巧l遮罩层中对象的许多属性如渐变色、透明度、颜色和线条样式等是被忽略的l要显示遮罩效果，要锁定遮罩层和被遮罩层l可以用“Actions”动作语句建立遮罩，但只能有一个“被遮罩层”，同时不能设置_Alpha属性                                                         技巧一                                      3.5.2  应用遮罩时的技巧l不能用一个遮罩层试图遮蔽另一个遮罩层l遮罩可以应用在gif动画上l在被遮罩层中不能放置动态文本                                                         技巧二                                      3.5.4  上机实训—辉光文字                                                     效果预览3.5.4  上机实训—辉光文字l新建一个Flash文档¡  文件大小为400×200像素¡【背景色】为深蓝色                                                         新建文档                                      3.5.4  上机实训—辉光文字l新建一个名为“保护环境”的元件。

l将文字分离2次l用【颜料桶工具】，把字体中心填充成绿色l新建一个名为“白光”的图形元件l在场景中画一个无边矩形                                                         新建元件                                      3.5.4  上机实训—辉光文字l创建一个“文字”图层l创建被遮罩层l创建遮罩层                                                         创建动画                                      3.5.5  上机实训—制作星光闪闪的动画                                                         效果预览                                      3.5.5  上机实训—制作星光闪闪的动画l创建影片文档l创建元件l创建动画                                                         制作方法                                      3.6  引导路径动画将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径动画”。

这种动画可以使一个或多个元件完成曲线或不规则运动3.6.1  创建引导路径动画的方法l引导层的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段l“被引导层”中的对象可以使用影片剪辑、图形元件、按钮、文字等，但不能用形状                                创建引导层和被引导层3.6.1  创建引导路径动画的方法l创建引导路径动画时，要注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头                                  向被引导层中添加元件3.6.2  应用引导路径动画的技巧l选中【路径调整】复选框，对象的基线就会调整到运动路径l如果选中【对齐】复选框，元件的注册点就会与运动路径对齐l可以单独定义一个不含“被引导层”的“引导层”该引导层中可以放置一些文字说明、元件位置参考等                                                          技巧一3.6.2  应用引导路径动画的技巧l【贴紧至对象】按钮，可以使“对象附着于引导线”的操作更容易成功，拖动对象时，对象的中心会自动吸附到路径端点上。

l过于陡峭的引导线可能使引导动画失败，平滑圆润的线段才有利于引导动画成功l向被引导层中放元件时，在动画开始和结束的关键帧上，要让元件的注册点对准线段的开始和结束的端点，否则无法引导                                                          技巧二3.6.2  应用引导路径动画的技巧l如果想解除引导，可以把被引导层拖离“引导层”l如果要做圆周运动，可在“引导层”画一根半圆形线条，再把对象的起始、终点分别对准端点即可l引导线允许重叠，但在重叠处的线段必须保持圆润，否则会使引导失败                                                          技巧三3.6.3  上机实训—制作光芒四射的文字                                                     效果预览3.6.4  上机实训—神奇的海底世界                                                     效果预览3.7  习题与上机操作选择题上机操作习题与上机操作l（1）常见的Flash动画有（      ）用途。

¡  A．网站应用                   B．广告制作¡  C．MTV动画                    D．多媒体动画l（2）在Flash中，图层有（      ）几种¡  A．引导层                        B．普通层¡  C．时间层                        D．遮罩层　　　　　　　　　　　　　                                                           选择题 习题与上机操作l（3）在Flash中，常见的动画元素有（      ）几种¡  A．形状                        B．图形¡  C．影片剪辑               D．按钮l（4）形状补间动画可以实现两个图形之间（      ）的相互变化¡  A．颜色                        B．形状¡  C．位置                        D．大小　　　　　　　　　　　　　                                                           选择题 习题与上机操作l（1）制作探照灯照射文字的效果，某一静帧的效果如下图所示。

　　　　　　　　　　　　　                                                           上机操作 习题与上机操作l（2）制作一个运动着的静止吸烟标志，标志从右边运动出来，最后停留在中央处　　　　　　　　　　　　　                                                           上机操作 习题与上机操作l（3）制作一个旋转的风车，风车在旋转时，大小和颜色都会发生变化，而且要求风车先由大变小，在由小变大　　　　　　　　　　　　　                                                           上机操作 习题与上机操作l（4）参照光盘中提供的“心.fla”文件，制作一个心形闪烁动画效果　　　　　　　　　　　　　                                                           上机操作 。