网页设计第15章ppt课件

《网页设计第15章ppt课件》由会员分享，可在线阅读，更多相关《网页设计第15章ppt课件（40页珍藏版）》请在金锄头文库上搜索。

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

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

3、和旋转”命令，在弹出的对话框中设置旋转角度为45。,.,制作过程(续),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”、颜色改为“绿色”（

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

7、创建好两个帧的状态，然后在两个关键帧之间建立动作补间关系。 先创建好起点关键帧，然后给此帧赋予动作补间模式，再去创建终点关键帧，两帧之间就建立了动作补间关系。,.,动作补间动画的属性面板,1“缓动”选项 在-1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。 在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。 默认情况下，补间帧之间的变化速率是不变的。,.,动作补间动画的属性面板（续）,2. “旋转”选项 选择“无”（默认设置）可禁止元件旋转； 选择“自动”可使元件在需要最小动作的方向上旋转对象一次； 选择“顺时针”(CW) 或“逆时针”(CCW

8、) ，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。 3 “调整到路径”复选框 将补间元素的基线调整到运动路径，此项功能主要用于引导线运动 。 4“同步”复选框 使图形元件实例的动画和主时间轴同步。 5“对齐”复选框 可以根据其注册点将补间元素附加到运动路径，此项功能主要也用于引导线运动。,.,动作补间动画制作过程,例3：制作跳动的红心，而且落地时还有弹性的效果。 步骤如下： 1新建一个文档。在“属性”面板中设置影片的宽为300像素，高为300像素，背景色为黑色。 2绘制图形。 选择菜单命令“插入”|“新建元件”，新建一图形元件，并取名为“红心”。 在“工具箱”中选择“钢笔工

9、具”，将笔触色和填充色都设为红色（#FF0000），在舞台上绘制半边红心。,.,动作补间动画制作过程（续）,3选择整个图形，按Ctrl+C键进行复制，然后按Ctrl+V键进行粘贴，如图15-17所示。选择菜单命令“修改”|“变形”|“水平翻转”，将图形水平翻转。移动后一半图形，和前一半接合，形成一个整体。 4选中整个图形，然后选择菜单命令“修改”|“组合”，使其合并为一个整体，这时图形周围出现蓝色的矩形框。将组合后的图形移到舞台的中央。 5回到场景编辑界面，打开“库”面板，将图形元件“红心”从库中拖到舞台上。,.,动作补间动画制作过程（续）,6创建动画。 （1）在第20帧按F6键插入关键帧，按

10、向下的方向键将图形放到场偏下的位置，模拟心形着地的样子。在第25帧处按F6键插入关键帧，将图形进行压缩，即上下端点距离缩短，左右距离拉长，但图形的着地点不应该变化，所以压缩前必须记住最下端的位置。压缩完后，将图形下移到刚才记下的位置上。 （2）单击第20帧，选择菜单命令“编辑”|“时间轴”|“复制帧”，复制这一帧，再单击第30帧，选择菜单命令“编辑”|“时间轴”|“粘贴帧”，把第20帧的内容粘贴过来。在这一帧上，心将恢复原形，准备跳起。 （3）按照第（2）步的方法，将第1帧的内容复制到第50帧。这一心形将完成一个循环。,.,动作补间动画制作过程（续）,（4）现在为每一帧的运动加上渐变。由于重力

11、作用，图形下落的时候加速，上升的时候减速，所以在第1帧的属性中将“补间”设置为“动画”，将“缓动”值改为-60。在第20帧至第25帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第25帧至第30帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第30帧的属性中将“补间”设置为“动画”，将“缓动”值改为60。 7测试动画。按Ctrl+Enter快捷键测试动画。,.,遮罩动画,1遮罩 在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 2. 作用 在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见 用来

12、遮罩住某一元件的一部分，从而实现一些特殊的效果。,.,遮罩动画(续）,2创建遮罩的方法 （1）创建遮罩 在某个图层上单击右键，在弹出菜单中选择“遮罩层”，该图层就会变成遮罩层，系统会自动把遮罩层下面的一层关联为“被遮罩层”，如果想关联更多层被遮罩，把这些层拖到被遮罩层下面 （2）构成遮罩和被遮罩层的元素 按钮、影片剪辑、图形、位图、文字等，但不能使用线条 （3）遮罩中可以使用的动画形式 形状补间动画、动作补间动画、引导线动画,.,应用遮罩时的技巧,要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_A

13、lpha属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在gif动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮 使之变成 ，使遮罩层只显示边框形状，在这种情况下，还可以拖动边框调整遮罩图形的外形和位置。 在被遮罩层中不能放置动态文本。,.,遮罩动画制作过程,例4：扫描文字。 步骤如下： 1新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为黑色。 2按Ctrl+F8快捷键插入一个“图形”元件，并命名为“文字”。选中“工具栏”中的“文本工具”在舞台上单击，输入文字“I LOVE YOU”，然后在下面

14、的“属性”面板中设置字体为“黑体”、字号为“55”、颜色为“红色（#FF0000）”（颜色可以任意）。,.,遮罩动画制作过程（续）,3按Ctrl+F8快捷键插入一个“图形”元件，并命名为“矩形”。选择菜单命令“窗口”|“混色器”，打开“混色器”面板，选择填充类型为“线性”，并设置为黑白相间的颜色。单击“工具箱”中的“矩形工具”，在舞台上画一个比刚才所输的文字的区域的宽度大些、高度差不多的一个矩形。,.,遮罩动画制作过程（续）,4单击文档窗口右上方的“编辑场景”按钮，回到主场景中。从“库”面板中拖动图形元件“矩形”到舞台上适当的位置。 5右击当前图层，在弹出的快捷菜单中选择“插入图层”命令，在当

15、前图层的上方插入一个新的图层“图层2”。从“库”面板中拖动图形元件“文字”到舞台上。 6右击“图层2”图层，在弹出的快捷菜单中选择“遮罩层”命令，将“图层2”图层设置成遮罩层，这时“图层1”图层自动成了被遮罩层。 7在“图层2”图层的第30帧处按F5键，插入普通帧。在“图层1”图层的第30帧处按F6键，插入关键帧。 8将第30帧处的“矩形”实例向右平移，使第一个字母与矩形的左边线对齐。 9在“图层1”图层的第1帧至第30帧之间右击鼠标，在弹出的菜单中选择“创建补间动画”命令。 10本例制作完成，按Ctrl+Enter快捷键预览动画。,.,引导路径动画,创建引导路径动画的方法 应用引导路径动画的

16、技巧 制作过程,.,创建引导路径动画的方法,1创建引导层和被引导层 在普通图层上单击时间轴面板中的“添加运动引导层”按钮 ，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层” 。 引导层和被引导层中的对象 引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。 而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能使用形状。 3向被引导层中添加元件 被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头,.,应用引导路径动画的技巧,1“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，在“属性”面板上，选中“调整到路径”复选框，对象的基线就会调整到运动路径。而如果选中“对齐”复选框，元件的注册点就会与运动路径对齐。 2引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等,.,应用引导路径动画的技巧（续）,3在做引导路径动画时，按下工具箱中的“对齐对象”