2012多媒体技术6+动画制作与flash+11.18.ppt

第五章动画制作,5.1动画制作原理,5.1.1什么是动画？动画是通过连续播放一系列画面，给视觉造成连续变化（运动）的图画。动画的原理即视觉原理医学已经证明，人类具有视觉暂留的特性，就是说人的眼睛看到一幅画或一个物体后在1/24秒内不会消失。利用这一原理，在前一幅画还没有消失之前播放出下一幅画面，就会给人造成一种连续变化的视觉效果。,帧：动画的每一幅画面。帧速率：每秒播放的帧数。动画的播放速度有三种常用的制式电影中，24帧/秒；电视中，25帧/秒（PAL制式）；30帧/秒（NTSC制式）动画是由一个个帧组成的。动画的制作实际上就是改变连续帧内容的过程。每个帧代表了一个时刻，每个帧的内容不同，则画面会随时间的变化而改变，连续播放就形成了动画效果。,5.1.2动画的分类,按制作技术和手段分，可以将动画分为以手工绘制为主的传统动画和以计算机制作为主的电脑动画；按视觉的空间效果分，可以将动画分为二维动画和三维立体动画；二维平面动画目前最常用的二维动画创作软件是Flash三维立体动画目前常用的三维动画创作软件是3dstudioMAX、Maya,动画的分类,按播放的形式分，可以将动画分为顺序动画和交互式动画；按每秒播放的幅数分，可以分为全动画(24幅/s以上)和半动画(24幅/s以下)。,5.1.3常用的动画文件格式,1.GIF文件格式(.gif)GIF文件格式无法存储声音信息，只能形成“无声动画”。2.FLC文件格式(.fli/.flc)FLC文件格式是Autodesk公司在出品的动画制作软件中采用的彩色动画文件格式。FLI是最初基于320200分辨率的动画文件格式，而FLC则是FLI的进一步扩展，采用更高效的数据压缩技术，其分辨率也不再局限于320200；FLC采用行程编码RLE算法和Delta算法进行无损的数据压缩，首先压缩并保存整个动画序列中的第一幅图像，然后逐帧计算前后两幅相邻图像的差异或改变部分，并对这部分数据进行RLE压缩，由于动画序列中前后相邻图像的差别通常不大，因此采用行程编码可以获得相当高的数据压缩率。FLC文件格式仍然不能存储声音信息，也是一种“无声动画”格式。,3.SWF文件格式(.swf)SWF是一种矢量动画格式，由于其采用矢量图形记录画面信息，因此这种格式的动画在缩放时不会失真，非常适合描述由几何图形组成的动画。Micromedia公司的二维动画制作软件Flash，专门用于生成SWF文件格式的动画，由于这种格式的动画可以与HTML文件充分结合，并能添加音乐，形成二维“有声动画”，因此被广泛地应用于网页上，成为一种“准”流式媒体文件。,5.2动画制作软件FLASH,5.2.1矢量图FlashCS3是一款优秀的二维动画制作软件，在学习之前，应掌握其界面的基本布局和基本文档操作。而矢量图形是Flash动画的基本元素之一，Flash提供了多种工具来绘制和编辑矢量图形作为动画中的元素。,根据生成原理的不同，计算机中的图形可以分为位图和矢量图两种。,Flash动画采用了矢量图形技术，制作出的动画文件体积特别小。凭借这一特色，Flash动画在网络中占有不可替代的位置。,5.2.2Flash软件的界面,1.工具箱,工具箱中包含了多种常用的绘制图形的工具和辅助工具，单击工具箱最顶端的小图标，可将工具箱变成长单条和短双条结构。,2、面板,面板位于工作界面右侧，利用它们，可以为动画添加非常丰富的特殊效果。FlashCS3中的面板现在以方便的、自动调节的停靠方式进行排列，单击顶端的小图标，可以将面板缩小。,2、面板,面板位于工作界面右侧，利用它们，可以为动画添加非常丰富的特殊效果。FlashCS3中的面板现在以方便的、自动调节的停靠方式进行排列，单击顶端的小图标，可以将面板缩小。,例1：绘制花朵,1、新建一个文件2、选择椭圆工具，在颜色栏中设置笔触颜色为无色，填充颜色为红色，在场景中创建一个没有边框，红色填充的椭圆。3、选择颜料桶工具，在混色器面板中设置类型为渐变填充，渐变颜色为红色到白色。在椭圆上拖动鼠标，制作一个由红色到白色过度的椭圆作为花瓣。,5、执行窗口|控制面板|变形(或窗口|变形)命令，打开变形控制面板。使用任意变形工具将椭圆的中心移动到椭圆的最下方，在变形控制面板中设置旋转角度为45度，多次单击“复制并应用变形”按钮复制花瓣，产生花的轮廓。,5、在花的旁边绘制一个黄色的圆，拖动到花的中心作为花蕊。一朵小花制作好了。,3、时间轴,时间轴用于组织和控制一定时间内的图层和帧中的文档内容。时间轴左边为图层，右边为帧，动画从左向右逐帧进行播放。,5.2.3Flash的基本操作,1、创建新文档2、设置文档属性3、保存文档4、测试影片5、发布影片,1、创建新文档,两种方法：启动Flash，弹出开始页面对话框，单击“新建”栏下的“Flash文件”选项执行菜单中的“文件|新建”命令，在弹出的“新建文档”对话框中选择“Flash文件”。,提示：在“新建文档”对话框中也可以选择其他类型的Flash文档，比如“Flash幻灯片演示文稿”、“Flash表单应用程序”，以及从模板创建等。,2、设置文档属性,“属性”面板位于工作区的底部。利用“属性”面板可以很容易的设置、更改舞台或时间轴上当前选项最常用的属性。选择不同的对象时，面板上显示的项目会有所不同。,单击“大小”右侧的按钮，在弹出的文档属性对话框中可以对文档尺寸、背景颜色、帧频、标尺单位等参数进行设置，设置完成后单击“确定”按钮即可。,提示：执行菜单中的“修改|文档”(快捷键)命令，也可调出“文档属性”对话框。,3、保存文档,执行菜单中的“文件|保存”命令,4、测试影片,Flash动画在制作完成后，执行菜单中的“控制|测试影片”（快捷键）命令，即可测试影片。将播放头定位在第1帧上，然后按键盘上的键，动画就会从第1帧播播放最后一帧停止播放。循环播放动画，可以执行菜单中的“控制|循环播放”命令，此时该命令会被勾选。然后在按键盘上的键即可循环播放。,5、发布影片,在保存完动画后，按键盘上的键进行播放，即可在同一目录下自动生成相同名称，但后缀为“.swf”的文件。这种动画可以直接插入网页中去。,图1-17自动生成的动画文件,还可以根据需要将影片发布为.mov、.avi等格式的视频格式,帧是时间轴上最基本的时间单位，一个帧对应一个时间点。,5.2.4帧,播放头,“播放头”可以指示当前播放的帧。使用鼠标拖动播放头，可以预览动画效果。,Flash中帧分为空白关键帧、关键帧、普通帧、普通空白帧4种，它们的显示状态如图所示。,1、帧类型,空白关键帧：空心圆，可以在上面创建内容，一旦创建了内容，空白关键帧就变成了关键帧。关键帧：实心圆点，用于定义动画的变化环节，逐帧动画的每一帧都是关键帧，而补间动画则在动画的重要位置创建关键帧。普通帧：一个个单元格，不同颜色代表不同的动画，如“动作补间动画”的普通帧显示为浅蓝色；“形状补间动画”的普通帧显示为浅绿色；而静止关键帧后面的普通帧显示为灰色。普通空白帧：显示为白色，表示该帧没有任何内容。,选中需要编辑的帧，然后单击鼠标右键，从弹出如图所示的快捷菜单中选择相关命令即可。,2、编辑帧,编辑帧的快捷键,“插入帧”的快捷键F5；“删除帧”的快捷键Shift+F5；“插入关键帧”的快捷键F6；“插入空白关键帧”的快捷键F7；“清除关键帧”的快捷键Shift+F6；,5.2.5图层,时间轴中的“图层控制区”是对图层进行各种操作的区域，在该区域中可以创建和编辑各种类型的图层。,1、创建图层,1）单击“时间轴”面板下方的（插入图层）按钮，可新增一个图层。2）单击“时间轴”面板下方的（添加运动导引层）按钮，可新增一个运动导引层。3）单击“时间轴”面板下方的（插入图层文件夹）按钮，可新增一个图层文件夹，其中可以包含若干个图层。,2、删除图层,1）选择要删除的图层。2）单击“时间轴”图层控制区下方的（删除图层）按钮。,3、重命名图层,1）鼠标双击图层的名称，进入名称编辑状态。2）输入新的名称后按Enter键确认。,5.2.6逐帧动画和补间动画,逐帧动画,每一个帧上创建一个画面，画面随着时间的推移而连续出现，形成动画；制作逐帧动画的方法非常简单，只需要一帧一帧的绘制就可以了，关键在于动作设计及节奏的掌握。,人物走路的逐帧动画的画面分解图。,创建逐帧动画的方法：导入静态图片：分别在每帧中导入静态图片，建立逐帧动画，静态图片的格式可以是jpg、png等。绘制矢量图：在每个关键帧中，直接用Flash的绘图工具绘制出每一帧中的图形。,例2打字动画(逐帧动画),1、新建一个文件2、使用“文本”工具在场景中输入“山_”，选定输入的文字对象，在属性栏中设置字体、字号、文字颜色等属性，如图所示：,3、在第2桢插入关键帧，使用文本工具在“山”后面单击，插入汉字“东”4、重复步骤3操作，在3、4、5、6帧建立关键帧、分别插入字符中医药大学。5、按ctrl+Enter键测试动画。6、如果放映速度太快，可以单击右键，在文档属性中减少帧频的值。,例3霓虹灯文字,1、新建一个文件，设置文件大小为300*100像素，背景颜色为白色。2、选择文本工具在场景中输入文字“霓虹灯”，设置文字颜色为蓝色。3、在第6、11、16帧分别插入关键帧，将这四个关键帧中的文字颜色改为红色、黄色、绿色。4、在第20帧插入帧，使最后的绿色文字能够保留5帧，此时测试可以看到文字颜色变换效果.,5、在第5、10、15、20帧分别插入空白关键帧，产生文字闪烁效果。,补间动画,只需确定动画起点帧和终点帧的画面，而中间部分的画面由Flash根据两帧的内容自动生成。,动作补间动画：使实例、组合或文字产生位置、大小和旋转等运动（山坡羊）形状补间动画：使图形形状变化，一个图形可以变成另一个图形。,例4小球落下（动作补间）,1、新建一个文件2、在第一帧中使用椭圆工具创建一个无边框的圆3、选择颜料桶工具，在混色器面板中设置填充方式为放射状填充，颜色为白色到红色过渡，在圆的中下部填充，产生高光效果。,4、在第20帧插入一个关键帧，在时间轴中选定第20帧，在场景中将小球拖动到场景下方。5、右击时间轴上的第一帧，在弹出的快捷菜单中执行“创建补间动画”命令，第1帧和第2帧之间变成了蓝色背景的箭头，表示Flash创建了动作补间动画。,6、选择第一帧，将补间动画属性中的“缓动”滑块拖动到-100，产生小球加速下落效果。,1）执行菜单中的“文件|打开”命令，飞机-素材.fla文件。2）从“库”面板中将“背面”、“侧面”、“正面”和“天空”元件拖入舞台，同时选中这4个元件，单击右键，从弹出的快捷菜单中选择“分散到图层”命令，此时4个元件会被分散到4个不同的层上，并自动命名其所在图层。3）删除多余的“图层1”。,例5飞机飞行动画,4）同时选中4个图层的第135帧，按快捷键F5，插入普通帧，从而使4个图层的总长度延长到第135帧。,5）隐藏“背面”和“正面”图层。然后在“侧面”图层的第70帧，按快捷键F6，插入关键帧。再在第1帧，将舞台中的“侧面”元件移动到舞台左上角，并适当缩小。接着在第70帧，将舞台中的“侧面”元件移动到舞台右侧中间部分，并适当缩小和旋转一定角度，如图2-68所示。再单击“侧面”图层第1-70帧之间的任意一帧，在“属性”面板中将“补间”设为“动画”，“缓动”设为“-100”，最后在“侧面”层的第71帧，按快捷键F7，插入空白关键帧。,飞机加速从远方逐渐飞近,第1帧飞机的位置第70帧飞机的位置,6）显现“正面”图层，然后将“正面”图层的第1帧移动到第75帧，再调整“正面”元件的位置和大小如左图所示。接着在第95帧按快捷键F6,插入关键帧，再调整“正面”元件的位置和大小如右图所示。最后在“正面”层的第96帧，按快捷键F7插入空白关键帧。此时时间轴分布如下图。（旋转？）,第75帧飞机的位置第95帧飞机的位置,飞机旋转着冲向镜头,7）制作飞机掉头逐渐飞远的效果。方法：显现“背面”图层，然后将“背面”图层的第1帧移动到第96帧，再调整“背面”元件的位置和大小如左图所示。接着在第135帧按快捷键F6,插入关键帧，再调整“背面”元件的位置和大小如右图所示。创建补间动画。,在第96帧调整“背面”元件的位置和大小调整“背面”元件的位置和大小,8）执行菜单中“控制|测试影片”(快捷键Ctrl+Enter)命令，就可以看到飞机从左上方飞入舞台，然后旋转着冲向镜头，再掉头逐渐飞远的效果。,形状补间动画,形状补间适用于图形对象，可以在两个关键帧之间制作出变形效果，即让一种形状随时间变化变为另外一种形状，还可以对形状的位置、大小和颜色进行渐变。,1）按快捷键Ctrl+N，新建Flash文档。2）选择工具箱中的（文本工具），在“属性”面板中设置文本颜色为红色，字号为300。然后在舞台中输入文本“理”。,例6汉字变形（形状补间）,3）利用“对齐”面板，将文本居中对齐。然后执行菜单中的“修改|分离”（快捷键Ctrl+B）命令，将文本分离为图形。,4）在第10帧，按快捷键F7，插入空白关键帧，然后输入文字“工”，字色设为蓝色，然后执行菜单中的“修改|分离”（快捷键Ctrl+B）命令，将文本分离为图形。,5）同上，分别在第20帧、第30帧，按快捷键按快捷键F7，插入空白关键帧，分别输入文字“学”和“院”，并设置为不同颜色，然后将文本分离为图形。6）选中“图层1”，然后在“属性”面板中设置“补间”为“形状”。,9）执行菜单中的“控制|测试影片”（快捷键Ctrl+Enter）命令，即可看到文字从“理”过渡到“工”、然后从“工”过渡到“学”，接着从“学”过渡到“院”的效果。,与动画补间一样，形状补间动画的创建及属性设置也是在“属性”面板中完成的。,缓动：用于控制形状补间的速度变化。取值范围为-100到100。当数值小于0时，动画为加速运动；当数值大于0时，动画为减速运动；当数值为0时，动画为匀速运动。混合：用于选择变形的过渡模式。选择“角形”，可以使中间帧的过渡形状保持关键帧上图形的棱角，此模式只适用于友尖锐角的图形变换；选中“分布式”可以使中间帧的形状过渡更光滑、更随意。,5.2.7遮罩,遮罩动画是Flash中的一个重要的动画类型，遮罩是一种特殊的图层，就像一张被镂空的纸，遮罩层中的物体所处的区域相当于被镂空的部分，透过镂空区域可以看见下面被遮罩层中的内容，遮罩层可以遮盖任何同遮罩层相关联的被遮罩层中的内容。,例7探照灯效果,1、新建一个文件，背景为黑色。2、执行“文件|导入|导入到舞台”，将素材库中的图片导入到场景中，并在35帧插入关键帧。3、新建一个图层，在图层中绘制一个黑色的圆，创建圆从左边移动到右边的动画。如后图所示。,4、右击图层2，在快捷菜单中选择“遮罩层”命令，产生遮罩效果。,例8遮罩文字,1、新建一个文件2、在图层1的第一帧中创建一个彩色线性填充的矩形，在第一帧到第三十帧之间创建矩形从右到左的运动动画。3、新建一个图层，使用文本工具输入文字FLASH，颜色为黑色，效果如图所示。,4、右击图层2，在快捷菜单中选择“遮罩层”命令，产生遮罩效果。5、测试并保存动画。,例9信封和邮箱,1)执行菜单中的“文件|打开”命令，打开配套光盘“寄信-素材.fla”文件。2)从“库”面板中将“信封”和“信箱”两个元件拖入舞台，单击右键，从弹出的快捷菜单中选择“分散到图层”命令，此时两个元件会被分配到两个新的图层中，且图层的名称和元件的名称相同。,3）同时选择3个图层，在第30帧按快捷键F5，插入普通帧，从而使这3个层的总长度延长到第30帧。然后在“信封”层的第30帧按快捷键F6，插入关键帧。,4）在第1帧将“信封”移动到左图所示，在第30帧帧将信封移动到右图所示的位置。然后单击“信封”层第1-30帧之间的任意一帧，在“属性”面板中将“补间”设置为“动画”，如左下所示，此时时间轴分布如右下图所示。,制作信封移动动画,5）利用(钢笔工具)绘制图形并调整形状。然后选择“图层1”，单击右键，从弹出的快捷菜单中选择“遮罩层”命令。,利用遮罩制作信封进入信箱后消失的动画,6）执行菜单中“控制|测试影片”(快捷键Ctrl+Enter)命令，即可信封元件进入邮箱后消失的动画。,5.2.8引导层动画,前面讲解了多种类型的动画效果，大家一定注意到了，这些动画的运动轨迹都是直线。可是在实际中，有很多运动轨迹是圆形的、弧形的，甚至是不规则曲线的，比如围绕太阳旋转的行星运动轨迹等。在Flash中我们可以通过引导层动画来实现动画效果。要制作引导层动画至少需要两个图层，一是引导层，在这个图层中有一条辅助线作为运动路径，引导层中的对象在动画播放时是看不到的；二是被引导层，用于放置沿路径运动的动画。图2-88引导层和被引导层的图解说明。,1.引导层动画的特点,2.创建引导层动画的方法,下面通过一个小实例来讲解引导层动画的创建方法，具体操作步骤如下：1）按快捷键Ctrl+N，新建Flash文档。2）选择工具箱上的（椭圆工具），在笔触颜色选项中选择，填充颜色选项中选择，然后在舞台中绘制正圆形。3）执行菜单中的“修改|转换为元件”（快捷键F8）命令，在弹出的“转换为元件”对话框中设置如图2-89所示，然后单击“确定”按钮。4）在时间轴的第30帧按快捷键F6，插入一个关键帧。然后右键单击第1帧，在弹出菜单中选择“创建补间动画”命令，结果如图2-90所示。5）单击时间轴面板左下方的（添加运动引导层）按钮，添加导引线如图2-91所示。,2.创建引导层动画的方法,6）选择工具箱上的（椭圆工具），边线颜色设为，填充颜色设为，然后在工作区中绘制椭圆形，结果如图2-92所示。7）选择工具箱上的（选择工具），框选椭圆的下半部分，按下键盘上的Delete键删除，结果如图2-93所示。提示：每两个椭圆间只能有一个点相连接，如果相接的不是一个点而是线，小球则会沿直线运动而不是沿圆形路径运动。,8）同理，绘制其余的3个椭圆并删除下半部分。9）利用工具箱上的（选择工具），将4个圆相接。然后回到“图层1”，在第1帧时放置小球如图2-94所示；在第30帧放置小球如图2-95所示。提示：每两个椭圆间只能有一个点相连接，如果相接的不是一个点而是线，小球则会沿直线运动而不是沿圆形路径运动。,图2-94在第1帧时放置小球位置图2-95在第30帧放置小球位置,10）执行菜单中“控制|测试影片”(快捷键Ctrl+Enter)命令，即可看到小球小球依次沿4个椭圆运动的效果。,5.2.9时间轴特效,FlashCS3的时间轴特效将Flash动画中一些经常用到效果制作成简单的命令，使人们只要选中动画的对象再执行相关命令即可。从而省去了大量重复、机械的操作，提高了动画开发效率。时间轴特效的应用对象有文本、图形（包括矢量图、组合对象和元件）、位图以及按钮元件等。,FlashCS3的时间轴特效有“变形”、“转换”、“复制到网格”、“分散式直接复制”、“分离”、“展开”、“投影”和“模糊”8种。下面分别说明这几种特效的参数及其设置方法。,例10文字展开特效,1、新建一个文件2、在第一帧中使用文字工具创建文字“生日快乐”3、右击文字，执行“时间轴特效|效果|展开”命令，在“展开”对话框中设置展开效果参数。如图所示：,例11变形特效,使用“变形”特效可以调整对象的位置、缩放比例、旋转角度、透明度和色彩值，从而制作出淡入/淡出、飞进/飞出、膨胀/收缩和左旋/右旋的效果。设置“变形”时间轴特效的具体操作步骤如下：1）按快捷键Ctrl+N，新建Flash文档。2）利用工具箱中的（矩形工具）在舞台中绘制矩形。3）执行菜单中的“插入|时间轴特效|变形/转换|变形”命令，弹出变形对话框。,5.2.10场景,在制作比较复杂的动画时，可以将动画分为若干个场景，然后再进行组合，Flash会根据场景的先后顺序进行播放，此外，我们还可以利用动作脚本实现不同