13使用时间轴.ppt

本章/节学习重点 教学目的 了解时间轴 掌握时间轴的使用、时间轴编辑 学会应用时间轴编辑动画 重点 时间轴的使用、时间轴编辑 使用时间轴创建动画 难点 使用时间轴创建动画 教学回顾 时间轴概述 时间轴就像一个广阔的舞台，不同的时间，别样的演员，共同演出一场精彩的节目。通过时间轴，不仅可以轻松地制作简单的层动画，还可以实现一些复杂的应用。在行为的辅助下，能够设计更加复杂的时间轴动画。使用时间轴制作的动态效果，不需要ActiveX控件、插件或者Java Applet等其它工具的支持。通过时间轴方式实现的特效，全部由代码来完成，执行速度较快。可以这么说，时间轴的加入是Dreamweaver软件的一大创举。 时间轴概述 时间轴也叫时间线，顾名思义，它是一条贯穿时间的线，用来表示网页显示时间内发生的各种状态，在时间轴上不同时间部位放置不同的内容，就可以实现网页的动态效果。在不使用时间轴的情况下，要实现网页中元素的移动，需要写出非常复杂的代码，使用时间轴去实现它们，则非常简单。主要原因就在于它是通过向文档中添加JavaScript代码实现动态效果的，不需要其他控件，插件或Java小程序的支持，具有很好的兼容性。 时间轴概述 动画是由一系列静止图像连续播放，利用人类眼睛的“视觉暂留”特性形成的。时间轴动画是通过让层的位置、可见性和叠加顺序等属性随时间变化所生成的动画。它的基本原理是：使层中的内容在一定时间内，按照设计好的路线显示在页面中。时间轴里的层叫做动画栏，时间轴的基本单位是帧，整个时间轴由许多帧构成，这些帧在页面中连续播放就构成了时间轴动画。在动画中有些帧可以影响到整个动画，这样的帧叫做关键帧。 使用时间轴 10.2.1 时间轴面板 打开时间轴面板的方法如下： 选择主菜单【窗口】|【时间轴】，打开如下图10.1所示的时间轴面板。 时间轴面板主要由时间轴下拉列表、行为通道、动画通道，回首帧、播放和后退按钮以及自动播放、循环复选框等部分组成。 使用时间轴 时间轴面板的各个部分作用如下： ◆ 时间轴下拉列表：显示当前文档窗口中的所有时间轴列表，可单击下拉按钮选择一个时间轴进行操作。用于一个页面内存在多个时间轴的情况。 ◆ 回首帧：单击该按钮则退回到动画的第一帧。 ◆ 后退：单击该按钮则退回到当前帧的前一帧。 ◆ 当前播放帧：该文本框中显示当前帧的序号，例如播放头位于第15帧，则文本框中显示数字“15”。 播放：单击该按钮前进1帧，如果按住该按钮不放，会连续播放动画。 ◆ FPS(每秒播放帧数)：设置动画的速度，可以在该文本框中输入具体的数值。该数值越大，动画播放速度越快，反之越慢。 使用时间轴 ◆ 自动播放：如果选中该项，网页被载入之后自动播放动画。当选择自动播放时，系统会弹出如图10.2所示的对话框，警告用户播放时间轴动作是附加到onload事件上的。有关行为和事件会在第十一章详细介绍。 使用时间轴 循环：选中该项，页面中的动画在浏览器中循环播放，直到关闭页面。反之动画只播放一次。选中该项后，系统会出现一个对话框，如图10.3所示，提示用户即将在动画结束的下一帧(该例是在第16帧)的行为通道上添加一个转到时间轴的行为。 使用时间轴 时间轴编辑按钮：该按钮在时间轴面板右上方。单击它可以打开时间轴编辑菜单，方便用户对时间轴的编辑操作。 行为通道：在该通道显示时间轴上相应帧中所附加的行为。如有浅蓝色矩形框则表示当前帧中存在行为事件。该通道用于为时间轴添加行为。 时间轴：用于标识动画帧数和每一帧的位置。中间每一个小格都代表一个帧，在时间轴上标注的1，5，10…等数字是具体的帧的序号。 ◆ 播放头：在时间轴上红色的矩形块就是播放头，它表明当前动画播放的位置，通过在时间轴上拖动播放头，可以在文档窗口看到相应时间动画播放的状态。同时，当前播放头所在的帧会显示在上方“当前播放帧”文本框中。 ◆ 动画通道：在时间轴面板上有32个动画通道，表示可以同时进行32个动画设置。动画通道是用来放入对象设计动画的。 使用时间轴 动画栏：将一个层拖动到动画通道时，会显示该动画栏，动画栏中间显示层的名字，动画栏的长度表示了该层的动画范围。 关键帧：动画栏两端的小圆圈就代表关键帧，动画就是利用这些关键帧之间的不同属性创建的，可以在一个动画栏中添加多个关键帧。注意：在时间轴中，只有当前播放头位于一个关键帧上的时候，在文档窗口对该帧对应的层的大小和位置进行改变，才会反映到动画中；而在非关键帧位置上修改当前选择的层属性，是不会产生动画的。 使用时间轴创建动画的步骤 创建时间轴动画，需要向动画通道上添加对象、设计动画栏上的关键帧，从而实现动画效果。具体的创建方法如下： ① 选择主菜单【窗口】|【时间轴】(或使用“Alt+F9”快捷键)，打开时间