网页设计第15章

1、第15章 基本动画制作内容提要逐帧动画 形状补间动画 动作补间动画 遮罩动画引导路径动画 动画实例 15.1 逐帧动画 创建逐帧动画的几种方法 制作过程 15.1 逐帧动画(续)1. 什么是逐帧动画逐帧动画也叫“帧帧动画”，它需要具体定义每一帧的内容，以完成动画的创建。 2. 特点需要对每帧画进行控制，设置它们的颜色、形状和大小等变化。 在时间帧上表现为连续出现的关键帧 复杂的动画，尤其是一个图形在每帧上都有变化，但又不是简单的运动变化的动画，适合于用逐帧动画来制作。 逐帧动画的大小增加得比渐变动画要快。 创建逐帧动画的几种方法 用导入的静态图片建立逐帧动画绘制矢量逐帧动画 文字逐帧动画指令逐

2、帧动画 导入序列图像 制作过程 例1：制作闪烁的星星。步骤如下：1新建一个动画文件，在“时间轴”面板上双击当前图层名并重新命名为“背景”，在“属性”面板中设置背景色为深蓝色，并在第8帧处按F5键插入普通帧（这时蓝色的背景一直沿用到第8帧）。2在“时间轴”面板的当前层上右击，在弹出的快捷菜单中选择“插入图层”命令，并重命名为“星星”。3单击“星星”层的第1帧，选择“矩形工具”，设置“笔触颜色”为无，“填充颜色”为#A5A092(可以根据自己的需要来选择填充颜色)，按住Shift键，在舞台上画出一个正方形。4选中图形，选择“修改”|“变形”|“缩放和旋转”命令，在弹出的对话框中设置旋转角度为45。

3、 制作过程(续)5利用“选择工具”调整这个图形。6利用“选择工具”选中图形，按F8键，在弹出的“转换为元件”对话框中设置元件名称为“星星”，并选择元件类型为“图形”。（这时舞台上的图形变成了一个实例） 7选择“星星”层的第2帧，按F6键，插入关键帧。选中图形，然后选择“任意变形工具”将图形适当地缩小，在“属性”面板的“颜色：”下拉列表中选择“Alpha”（透明），并将透明度值适当调小些。8重复第7步的操作，设置第3、4、5、6、7、8帧实例的属性。要求每一帧比前一帧变小，透明度降低。第8帧上的实例设置为完全透明。预览动画的方法直接在场景窗口敲回车键预览，当前场景上的各帧内容依次播放一遍。选择菜

4、单命令“控制”|“测试场景”，Flash打开一个专门的窗口预览，循环播放当前场景的各帧内容。关闭预览就可以回到场景编辑窗口，继续编辑。选择菜单命令“控制”|“测试影片”，在打开的一个专门的预览窗口中依次循环播放各场景的动画。形状补间动画 1. 什么是形状补间动画在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画。2.创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在“属性”面板

5、上单击“补间”旁边的小三角，在弹出的菜单中选择“形状”，一个形状补间动画就创建完毕。 形状补间动画制作过程例2：变形文字。步骤如下：1新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为白色。2选中“工具栏”中的“文本工具”，在舞台上单击并输入大写字母“A”，选中字母“A”，在文本“属性”面板中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色”（#FF0000）。3在第10、20、30帧处分别按F6键建立关键帧，用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝色”（#0000FF），将第30帧的文

6、字改为“D”、颜色改为“黄色”（#FFFF00）。 形状补间动画制作过程（续）4分别选择各关键帧的文字，选择菜单命令“修改”|“分离”，将各关键帧上的文字打散。5创建形状补间动画。分别选择第1、10、20帧，将其“属性”面板中的“补间”设为“形状”。6按Ctrl+Enter快捷键预览动画。 动作补间动画 1. 什么是动作补间动画给一个对象在两个关键帧分别定义不同的属性，如颜色、大小 、方位和角度等，并在两个关键帧之间建立一种变化关系，即运动渐变关系。2. 创建动作补间动画的方法先创建好两个帧的状态，然后在两个关键帧之间建立动作补间关系。先创建好起点关键帧，然后给此帧赋予动作补间模式，再去创建终

7、点关键帧，两帧之间就建立了动作补间关系。 动作补间动画的属性面板1“缓动”选项 在-1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。 在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。默认情况下，补间帧之间的变化速率是不变的。动作补间动画的属性面板（续）2. “旋转”选项 选择“无”（默认设置）可禁止元件旋转；选择“自动”可使元件在需要最小动作的方向上旋转对象一次；选择“顺时针”(CW) 或“逆时针”(CCW) ，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。 3 “调整到路径”复选框将补间元素的基线调整到运动路径，此项功能主

8、要用于引导线运动 。4“同步”复选框使图形元件实例的动画和主时间轴同步。 5“对齐”复选框可以根据其注册点将补间元素附加到运动路径，此项功能主要也用于引导线运动。 动作补间动画制作过程 例3：制作跳动的红心，而且落地时还有弹性的效果。步骤如下： 1新建一个文档。在“属性”面板中设置影片的宽为300像素，高为300像素，背景色为黑色。2绘制图形。选择菜单命令“插入”|“新建元件”，新建一图形元件，并取名为“红心”。在“工具箱”中选择“钢笔工具”，将笔触色和填充色都设为红色（#FF0000），在舞台上绘制半边红心。 动作补间动画制作过程（续）3选择整个图形，按Ctrl+C键进行复制，然后按Ctrl

9、+V键进行粘贴，如图15-17所示。选择菜单命令“修改”|“变形”|“水平翻转”，将图形水平翻转。移动后一半图形，和前一半接合，形成一个整体。4选中整个图形，然后选择菜单命令“修改”|“组合”，使其合并为一个整体，这时图形周围出现蓝色的矩形框。将组合后的图形移到舞台的中央。5回到场景编辑界面，打开“库”面板，将图形元件“红心”从库中拖到舞台上。 动作补间动画制作过程（续）6创建动画。 （1）在第20帧按F6键插入关键帧，按向下的方向键将图形放到场偏下的位置，模拟心形着地的样子。在第25帧处按F6键插入关键帧，将图形进行压缩，即上下端点距离缩短，左右距离拉长，但图形的着地点不应该变化，所以压缩前

10、必须记住最下端的位置。压缩完后，将图形下移到刚才记下的位置上。（2）单击第20帧，选择菜单命令“编辑”|“时间轴”|“复制帧”，复制这一帧，再单击第30帧，选择菜单命令“编辑”|“时间轴”|“粘贴帧”，把第20帧的内容粘贴过来。在这一帧上，心将恢复原形，准备跳起。（3）按照第（2）步的方法，将第1帧的内容复制到第50帧。这一心形将完成一个循环。动作补间动画制作过程（续）（4）现在为每一帧的运动加上渐变。由于重力作用，图形下落的时候加速，上升的时候减速，所以在第1帧的属性中将“补间”设置为“动画”，将“缓动”值改为-60。在第20帧至第25帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。

11、在第25帧至第30帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第30帧的属性中将“补间”设置为“动画”，将“缓动”值改为60。7测试动画。按Ctrl+Enter快捷键测试动画。 遮罩动画1遮罩在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。2. 作用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见 用来遮罩住某一元件的一部分，从而实现一些特殊的效果。 遮罩动画(续）2创建遮罩的方法 （1）创建遮罩 在某个图层上单击右键，在弹出菜单中选择“遮罩层”，该图层就会变成遮罩层，系统会自动把遮罩层下面的一层关

12、联为“被遮罩层”，如果想关联更多层被遮罩，把这些层拖到被遮罩层下面 （2）构成遮罩和被遮罩层的元素 按钮、影片剪辑、图形、位图、文字等，但不能使用线条 （3）遮罩中可以使用的动画形式 形状补间动画、动作补间动画、引导线动画 应用遮罩时的技巧 要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_Alpha属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在gif动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮 使之变成 ，使遮罩层

13、只显示边框形状，在这种情况下，还可以拖动边框调整遮罩图形的外形和位置。 在被遮罩层中不能放置动态文本。遮罩动画制作过程例4：扫描文字。步骤如下： 1新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为黑色。2按Ctrl+F8快捷键插入一个“图形”元件，并命名为“文字”。选中“工具栏”中的“文本工具”在舞台上单击，输入文字“I LOVE YOU”，然后在下面的“属性”面板中设置字体为“黑体”、字号为“55”、颜色为“红色（#FF0000）”（颜色可以任意）。遮罩动画制作过程（续）3按Ctrl+F8快捷键插入一个“图形”元件，并命名为“矩形”。选择菜单命令“窗口”|“混色器”，

14、打开“混色器”面板，选择填充类型为“线性”，并设置为黑白相间的颜色。单击“工具箱”中的“矩形工具”，在舞台上画一个比刚才所输的文字的区域的宽度大些、高度差不多的一个矩形。遮罩动画制作过程（续）4单击文档窗口右上方的“编辑场景”按钮，回到主场景中。从“库”面板中拖动图形元件“矩形”到舞台上适当的位置。5右击当前图层，在弹出的快捷菜单中选择“插入图层”命令，在当前图层的上方插入一个新的图层“图层2”。从“库”面板中拖动图形元件“文字”到舞台上。6右击“图层2”图层，在弹出的快捷菜单中选择“遮罩层”命令，将“图层2”图层设置成遮罩层，这时“图层1”图层自动成了被遮罩层。7在“图层2”图层的第30帧处

15、按F5键，插入普通帧。在“图层1”图层的第30帧处按F6键，插入关键帧。8将第30帧处的“矩形”实例向右平移，使第一个字母与矩形的左边线对齐。9在“图层1”图层的第1帧至第30帧之间右击鼠标，在弹出的菜单中选择“创建补间动画”命令。10本例制作完成，按Ctrl+Enter快捷键预览动画。 引导路径动画创建引导路径动画的方法应用引导路径动画的技巧 制作过程创建引导路径动画的方法1创建引导层和被引导层在普通图层上单击时间轴面板中的“添加运动引导层”按钮 ，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层” 。引导层和被引导层中的对象 引导层是用来指示元件运行路径的，所以“引导层”中的内

16、容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能使用形状。 3向被引导层中添加元件被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头 应用引导路径动画的技巧 1“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，在“属性”面板上，选中“调整到路径”复选框，对象的基线就会调整到运动路径。而如果选中“对齐”复选框，元件的注册点就会与运动路径对齐。2引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可

17、以放置一些文字说明、元件位置参考等 应用引导路径动画的技巧（续）3在做引导路径动画时，按下工具箱中的“对齐对象”按钮 ,可以使“对象附着于引导线”的操作更容易成功，拖动对象时，对象的中心会自动吸附到路径端点上。4过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。5向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要让元件的注册点对准线段的开始和结束的端点，否则无法引导，如果元件为不规则形，可以点击工具箱中的“任意变形工具”，调整注册点。 应用引导路径动画的技巧（续）6如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择“

18、属性”，在对话框中选择“一般”，作为正常图层类型。7如果想让对象作圆周运动，可以在“引导层”画一根圆形线条，再用“橡皮擦工具”擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。8引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。引导路径动画制作过程 例：小球沿着弯曲道路运动。步骤如下：1新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为黑色。2选择菜单命令“视图”|“网格”|“显示网格”，在舞台上显示网格线。 3绘制曲线。 4. 插入一个新的图层。单击“工具箱”中的“椭圆工具”，设置笔触

19、颜色为无、填充颜色为蓝色（#0000FF），绘制一个大小适中的圆。 引导路径动画制作过程（续）5在“图层2”上添加引导层。6选中“图层1”图层中的曲线，按Ctrl+C快捷键，然后选中“引导层”图层，按Ctrl+V快捷键在引导层上粘贴曲线图形。拖动“引导层”图层上的曲线到“图层1”图层中曲线的正上方，使两条曲线间隔大约刚才绘制的圆的直径的路离。7单击文档窗口右上角的显示比例按钮，将文档的显示比例设置为“400%”。用“工具箱”中的“橡皮擦工具”，将“引导层”图层中的曲线的最高的地方擦去一小块、最低的地方也擦去一小块。此时曲线被分成3部分。8拖动“图层2”图层中的圆，使圆的注册点对准“引导层”图层

20、中第1段曲线的起始位置。移动“图层1”图层中的曲线，使之与圆外切，擦除该曲线的起始点到圆的切点之间的一段曲线 。用“选择工具”对“图层1”图层中的曲线整形，使之与“引导层”图层的曲线平行，擦除“引导层”图层中曲线末尾多余的部分。 引导路径动画制作过程（续）9单击“图层1”图层中的第30帧，按F5键插入普通帧（使第1帧的内容延续到这一帧）。10单击“引导层”图层中的第30帧，按F5键插入普通帧。11单击“图层2”图层中的第10帧，按F6键插入一个关键帧。拖动圆，使圆的注册点对准“引导层”图层的第1 段曲线的结束点。12分别单击“图层2”图层的第11、20、21、30帧，按F6键插入关键帧。拖动圆

21、，使圆的注册点分别对准“引导层”图层的第2段曲线的起始点、结束点，第3段曲线的起始点、结束点。13创建动作补间动画。分别在“图层2”图层的第1帧至第10帧之间、第11帧至第20帧这间、第21帧至第30帧之间右击，在弹出快捷菜单中选择“创建补间动画”命令。14本例制作完成，按Ctrl+Enter快捷键预览动画。 动画实例例5：飞翔的文字。（实现字母一个接一个地飞动的效果 ） 动画实例（续）步骤如下： 1新建一个文档。在“属性”面板中设置影片的大小为500400像素，将当前图层命名为“文字”，在图层的名称上右击，在弹出的快捷菜单中选择“引导层”命令，将该层设置为引导层。2单击“文本工具”，设置字体

22、为“黑体”、字号为“40”、颜色为“黑色”，在舞台上单击5次，每次输入一个字母，分别为“F”、“L”、“A”、“S”、“H”。3选取舞台上所有字母，依次单击“对齐”面板中“垂直中齐”按钮、“水平平均间隔”按钮，使字母横向均匀对齐。 动画实例（续）4分别选中每个字母，按F8键，将每个字母都转换为图形元件实例，并在“库”面板中按字母名称为图形元件命名。5选取所有的字母，按住Ctrl键，同时将选取的字母向下拖动一段距离，这样就将选取的字母复制到了指定的地方。6选取上面一排字母，选择菜单命令“修改”|“变形”|“水平翻转”，将选取的字母水平翻转。7单击该层的第100帧，按F5键，插入普通帧，将第1帧的

23、内容沿用到该帧处。8新建一层，命名为“F”。9选中“文字”图层，选取上排的字母F，按Ctrl+C键，复制字母F，单击“F”图层，选择菜单命令“编辑”|“粘贴到当前位置”，将复制的字母按原位粘贴到该层上。 动画实例（续）10选中“F”图层上的字母F，在“属性”面板中设置“Alpha”值为0%，即完全透明。11单击“F”图层的第10帧 ，按F6键，创建关键帧，并将该帧上沿用的内容删除。复制“文字”图层中下一排的字母F，并按原位粘贴到“F”图层的第10帧上。12在“F”图层两关键帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令，创建动作补间动画。13在“F”图层上面新建一层，命名为“L”。14选中“文字”图层，选取上排的字母L，按Ctrl+C键，复制字母L，单击“L”图层，选取第3帧，按F6键，创建关键帧，并将复制的字母L按原位粘贴到该层上。15选中“L”图层上的字母L，在“属性”面板中设置“Alpha”值为0%，即完全透明。 动画实例（续）16单击“L”图层的第12帧 ，按F6键，创建关键帧，并将该帧上沿用的内容删除。复制“文字”图层中下一排的字母L，并按原位粘贴到“L”图层的第12帧上。17在“L”图层两关键帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令，创建动作补间动画。18以后按照步骤1