《dreamweaver第7章时间线》由会员分享，可在线阅读，更多相关《dreamweaver第7章时间线（12页珍藏版）》请在金锄头文库上搜索。
1、第7章 时间线,时间线（Timeline）是Dreamweaver中最激动人心的特性。利用层和时间线，不需专门的动画软件，就可以制作出丰富多彩的层动画和动感网页，实现网页独具魅力的效果。 时间线也叫时间轴，顾名思义，它是一条贯穿时间的轴，是时间的具体化，用于表示网页显示期间发生的各种状态。通过往时间线上不同时间部位放置不同的内容，就可以实现网页元素的动态效果，本章介绍时间线的应用。 本章主要解决的问题 什么是时间线。 什么是帧和关键帧。 什么是通道。 本章学习的基本要求 利用时间线制作动态效果的网页。,7.2 归纳于总结,7.2.1 时间轴基本概念,画一条直线，用它表示时间，直线上不同的点表示
2、不同的时刻，这就是时间轴。如果设置一些不同的点对应不同的网页内容，当从时间轴的零点开始显示网页时，随着时间的推移，会看到不同的内容，这就形成了动画。 利用时间轴构建动态网页，是通过向文档中添加JavaScript代码来实现网页的动态效果，不需要任何ActiveX控件、不需要任何插件、也不需要任何JavaApplet小程序，具有极好的兼容性。 利用时间轴，可以创建各种类型的动态效果。例如，可以改变层的位置、大小、可见性、重叠顺序等。利用时间轴，还可以实现在网页载入后进行其他类型的动作，例如可以改变图像源文件，在特定时间执行相应的行为等。 Dreamweaver动画通常是建立在图层上的，在某种意义
3、上讲时间轴与图层的结合实现了动态效果。,7.2 归纳于总结,7.2.1 时间轴基本概念,先熟悉一下“时间轴”面板，按“Alt+F9”组合键或单击“窗口时间轴”，打开“时间轴”面板（如图）。时间轴面板主要由时间轴下拉菜单、行为通道、动画通道、动画条、控制按钮和控制选项等部分组成。另外，同大多数面板一样，单击时间轴面板右上角的三角形按钮，或在时间轴面板中单击鼠标右键，可以打开时间轴面板菜单，提供相应的操作。 时间轴下拉菜单：主要用于控制哪条时间轴显示在时间轴面板上，通过打开该菜单，选择不同的时间轴。 行为通道：有一个“B”字符，它是Behavior行为的缩写。用于显示时间轴上相应时间中所附加的行为
4、，浅蓝色的方块表示存在行为。,7.2 归纳于总结,7.2.1 时间轴基本概念,动画播放参数：“Fps”是动画播放速度，即每秒钟显示多少幅画面。默认值为15，意思为每秒播放15帧；“自动播放”复选项，控制是否打开网页时自动播放动画；“循环”复选项，设置是否循环播放。 关键帧（Key Frame）：人为指定的在某一确定时刻（帧）上对象的状态。Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作，产生普通帧。例如，要使对象沿直线移动，只需要定义开始位置和结束位置，这两个位置就是关键帧，Dreamweaver 会根据直线的开始和结束位置自动计算中间状态。在动画条上，关键帧以一个圆圈的形
5、式表示。 回放头：位于帧数行上的红色方块，它表明当前动画放映的位置，通过在时间轴面板上拖动回放头，可以在文档窗口中看到相应时间上动画的状态。同时，当前回放头所在帧的位置会显示在面板上方播放按钮和后退按钮之间的文本框中。,7.2 归纳于总结,7.2.1 时间轴基本概念,动画通道：Dreamweaver的时间轴在同一时间可以进行32路动画设置，每一路动画称为一个动画通道。同一通道上的画面顺序放映，不同通道上的画面在同一时刻可以同时放映。一旦某个动画通道上存在动画，就会显示动画条。 动画条：表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中的空白圆圈表示关键帧。在一个动画通道行上可以包
6、含多个动画条，用于表示多个不同的对象。不同的动画条在同一帧内不能控制相同的对象。 帧控制按钮 ： 返回：该按钮使回放头返回到动画的开始位置。 后退：该按钮可以将动画后退一帧，连续单击后退按钮，可以向后播放动画。 播放：该按钮可以将动画播放一帧，连续单击播放按钮，可以播放动画。,7.2 归纳于总结,7.2.2 时间轴的基本操作,1创建基本动画 （1）首先将层移动到动画的起始位置，指定起始关键帧。 （2）选中要制作动画的层； （3）单击时间轴面板右上角的三角按钮，打开时间轴面板菜单，选择“添加对象”命令，即可在动画通道中添加一个对应该层的动画条，也可直接将层拖动到时间轴面板上的相应位置来构建动画条
7、，从动画条上可以看到层名称。 （4）拖动动画条上最右端的关键帧标记，改变动画条的长度，也即改变动画的播放时间（见图）；,7.2 归纳于总结,7.2.2 时间轴的基本操作,（5）若希望在动画条的中间位置添加关键帧，可按住Ctrl 键，然后单击动画条上的相应帧位置，这时会出现新的关键帧标记，或先在动画条上欲添加关键帧的位置单击鼠标右键，在弹出的快捷菜单中选择“增加关键帧”。 （6）选中关键帧标记，在文档窗口中将层拖动到该时刻对象应处的位置（见图），重复该操作，可创建多个关键帧。 （7）根据需要，选中或清除“自动播放”和“循环”复选框。 （8）保存文件，按“F12”键预览网页。,7.2 归纳于总结,
8、7.2.2 时间轴的基本操作,2录制时间轴 如果动画路径较为复杂，例如曲线、圆形、螺旋形等，上面的方法就无能为力了。Dreamweaver提供了可绘制路径的方法，直接在文档窗口中拖动层，然后把拖动的路径应用到时间轴上。利用这种方法，可以很容易地构建具有复杂路径的动画。操作方法如下： （1）在网页中插入一图层。 （2）单击“插入图像”命令，在图层中插入一张图片。 （3）选中该图层，并将它移动到动画的起始位置， 在这里把图层移到文档窗口的左下角，见图。 （4）单击“修改时间轴记录图层路径”，然后拖动图层，创建运动路径。在拖动图层时，在图层的左上角会出现一条拖动时留下的轨迹，松开鼠标后生成的运动路径
9、见图。,7.2 归纳于总结,7.2.2 时间轴的基本操作,（5）最后单击按钮 ，使播放头回到第一帧，再单击 按钮即可预览动画。 3修改时间轴 如果对已做的时间轴动画不满意，则可进行修改。常用的时间轴修改操作有添加和删除帧、修改动画的起始时间、改变动画路径的位置等等。 （1）添加帧：单击“修改时间轴增加关键帧”，可以在当前时间轴的位置插入一个关键帧。也可按住Ctrl 键，然后单击动画条上的相应帧位置，这时会出现新的关键帧标记 （2）删除帧：“修改时间轴移除关键帧”，可以将当前帧删除。 （3）改变播放速度：将最后一帧左右拖动。 （4）改变开始时间：选中第一帧，左右拖动即可。 （5）改变整个动画路径
10、的位置：单击时间轴面板中要改变路径位置的对象，使整个对象的动画被选中，然后在文档窗口中拖动该对象。,7.2 归纳于总结,7.2.2 时间轴的基本操作,4为时间轴添加行为 在时间轴上添加行为，通过动画的播放控制行为的发生，如动画运行到某处时控制层的显示或隐藏、背景变化，给用户提示、警示，以达到更好的动态和动画效果。 （1）选择要添加行为的时间轴。 （2）右键单击行为通道上要添加行为的帧，在弹出的快捷菜单中选“添加行为”命令，这时会打开行为面板，行为通道上相应位置显示黑框。 （3）单击行为面板上的 按钮，打开行为菜单。 （4）按照正常的添加行为方法添加行为。 （5）添加行为后，会在行为通道上的相应
11、位置出现行为标记。,7.2 归纳于总结,7.2.2 时间轴的基本操作,5控制时间轴 设计好动画之后，可以在时间轴面板中对时间轴进行各种控制，从而实现对动画的编辑和修改。 （1）选中动画条 一个动画条表示一个对象在某段时间内的动画序列。单击相应的动画条，即可以选中一个动画条。可以按住Shift键，再单击相应的动画条，可以选中多个动画条。按Ctrl+A组合键，可以选中全部动画条。 （2）删除动画条 选中动画条，按Del键，删除动画条。 （3）改变动画时间 如果希望使动画时间变长或变短，可以左右拖动动画条最右端的关键帧（也即结束帧）标记，同时其他关键帧标记按照比例移动。,7.2 归纳于总结,7.2.
12、2 时间轴的基本操作,（4）改变动画局部的播放速度 要改变某两个关键帧之间动画的播放时间，可以在动画条上左右拖动相应的关键帧标记。但相邻的关键帧区间会做相反的变化。 （5）改变动画起始时间 选中一个或多个动画条并左右拖动可以改变动画的起始时间。 （6）移动动画路径 要将整个动画路径移动位置，可以选中整个动画条，然后拖动页面上的层。 （7）使用多条时间轴 一条时间轴可以控制32路动画通道，这好比控制32个分镜头。当动画比较复杂时，时间轴面板上会排满了动画条，显得繁琐复杂，很不直观。这时可利用多条时间轴控制页面上不同区域的动画。 添加时间轴：单击“修改时间轴添加时间轴”命令。 删除时间轴：单击“修改时间轴删除时间轴”命令。 为时间轴改名：单击“修改时间轴重命名时间轴”。,
