4.2 制作浮动广告网页（课件）-高二《网页设计与制作》同步教学（北京出版社）

4.2 制作浮动广告网页 任务导入 学习目标 任务实施 任务导入 公司研发了一种新产品，希望除了在首页上能够显示出来外，还能够飘动在网页上，以吸引客户的注意。本任务将学习浮动广告的制作方法。 学习目标 了解时间轴的作用。 了解时间轴面板各部分的功能。 掌握时间轴动画的制作方法，能够对AP Div创建时间轴动画。 任务实施 4.2.1 时间轴面板概述 4.2.2 制作时间轴动画 4.2.3 通过拖动路径创建时间轴动画 4.2.4 修改时间轴 4.2.5 修改时间轴中对象的属性 4.2.6 时间轴动画小技巧 4.2.1 时间轴面板概述 “时间轴”面板 4.2.2 制作时间轴动画 时间轴通过改变AP Div的位置、大小、可见性以及叠放顺序来创建动画。如果要移动图像或文本，就要先创建AP Div，再将图像、文本或其他类型的内容插入到AP Div中，然后通过移动AP Div来移动这些元素。 选择AP Div 移动AP Div使运动轨迹呈曲线状 4.2.3 通过拖动路径创建时间轴动画 使用“修改”菜单→“时间轴”→“记录AP元素的路径”命令，在页面上任意拖动AP Div，创建想要的运动路径，如图所示。 创建记录运动路径的动画 4.2.4 修改时间轴 定义完时间轴的基本组件后，可以进行一些更改，如添加和移除帧、更改动画开始时间等。 改变动画的播放时间 4.2.5 修改时间轴中对象的属性 时间轴可以包含AP Div和图像对象。在时间轴中除了可以移动AP Div外，还可以改变图像的源文件，改变层的可见性、大小和堆叠顺序。 修改时间轴中对象的属性 4.2.6 时间轴动画小技巧 以下小技巧可以提高时间轴动画的性能： （1）延长动画播放时间以创建更顺畅的动作。 如果动画断断续续并且图像在不同位置之间跳动，拖动AP Div动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点与结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。 尝试增加每秒帧数（fps）以提高速度，但应注意，在普通系统上运行的大多数浏览器都不能支持超过15fps的动画速度。在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。 4.2.6 时间轴动画小技巧 （2）不要制作大型位图的动画。 制作大型图像的动画会导致动画速度减慢。相反，应创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。 （3）创建简单的动画。 不要创建对当前浏览器要求过高的动画。即使在系统或Internet性能降低时，浏览器始终会播放时间轴动画中的每一帧。 $