第9章 时间轴动画及行为

/webnew/
第9章
9.1 9.2 9.3 9.4 9.5

创建网页动画
网页动画利器——时间轴 将时间轴与行为结合起来 用插件实现层动画效果 精彩的网页过渡效果 上 机 实 战
/webnew/

修改时间轴动画





1. 改变动画时间 要改变整个动画时间，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 拖动动画条最右端的关键帧标记，将它左右拖动，如图9.9所示，这时动画条长度 会发生变化，同时上面所有的关键帧标记也按照比例移动相应的位置。如果希望保持所有 中间位置的关键帧不动，可以按住Ctrl键，再拖动结束帧标记。 要改变动画局部的播放时间，即改变关键帧之间的动画播放速度，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 在动画条上左右拖动相应的关键帧标记。 要改变动画起始时间，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 将动画条在动画通道上左右拖动。 2. 改变动画对象 要改变动画条对应的对象，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。右击，在快捷菜单中选择【改变对象】 命令，这时会打开如图9.10所示的对话框，提示用户选择新对象。 (2) 选择新对象，单击【确定】按钮确定操作，即可改变动画条对应的对象。
/webnew/
9.1.1

【时间轴】面板




时间轴主要是通过【时间轴】面板构建的。用户可以选择【窗口】|【时间轴】 命令，如图9.1所示，或按Alt+F9组合键，即可以显示如图9.2所示的【时间轴】 面板。 从图9.2可以看出，【时间轴】面板主要由时间轴下拉列表框、行为通道、动画 通道、动画条、控制按钮和控制选项等部分组成。 下面介绍【时间轴】面板上的主要元素。 【时间轴下拉列表框】主要用于控制哪条时间轴显示在【时间轴】面板上。在 下拉列表中，可以选择不同的时间轴，可以在【时间轴】面板上显示不同的时 间轴设置。 在【行为通道】上，将显示为时间轴上相应时间中所附加的行为，浅蓝色的方 块表示存在行为。 在【帧数】这一行中，显示时间轴上不同时间对应的动画帧。 【回放头】是位于帧数行上的红色方块，它表明当前的动画放映的位置，通过 在【时间轴】面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映 的状态。同时，当前回放头所在的帧位置会显示在【时间轴】面板上方的前进 箭头按钮和后退箭头按钮之间的文本框中。

对时间轴的编辑， 对时间轴的编辑，Dream weaver中提供了 中提供了3 weaver中提供了3种方 法： (1)通过 时间轴编辑菜单” 通过“ (1)通过“时间轴编辑菜单” 进行编辑，可以通过9. 进行编辑，可以通过9. 2节中介绍的时间轴面 板右上角的按钮打开， 板右上角的按钮打开， 如图所示。 如图所示。
第9章 时间轴 章 时间轴
9.2 认识时间轴面板
• 在Dreamweaver 8中，通过选择“窗口”菜单中的 “时间 8中 通过选择“窗口” 命令或使用组合键ALT+F9 ALT+F9， 轴”命令或使用组合键ALT+F9，就可以打开如图所示的时 间轴面板。 间轴面板。
第9章 时间轴 章 时间轴
9.2 认识时间轴面板
第9章 时间轴ቤተ መጻሕፍቲ ባይዱ章 时间轴
9.4编辑时间轴 9.4编辑时间轴
(2)通过在时间轴面板中任意位置右键单击， (2)通过在时间轴面板中任意位置右键单击，弹出快捷菜单如 通过在时间轴面板中任意位置右键单击 9.7所示 所示。 图9.7所示。
第9章 时间轴 章 时间轴
9.4编辑时间轴 9.4编辑时间轴
(3)通过使用“修改” 时间轴” (3)通过使用“修改”菜单中 “时间轴”命令如图所示进行编 通过使用 辑。
第9章 时间轴 章 时间轴
9.3创建时间轴动画 9.3创建时间轴动画
（5）将时间轴面板中自动播放和循环勾选上，通过浏览器即 将时间轴面板中自动播放和循环勾选上， 可看到动画效果。这样一个简单的时间轴动画就做好了。 可看到动画效果。这样一个简单的时间轴动画就做好了。
第9章 时间轴 章 时间轴
9.4编辑时间轴 9.4编辑时间轴
第9章 时间轴 章 时间轴

9.3 对时间轴动画的编辑
（2）改变关键帧位置 ） 如果想使层能够更快些或更慢些到达关键帧 位置，可在动画条中向左或向右移动该关键帧。 位置，可在动画条中向左或向右移动该关键帧。
9.3 对时间轴动画的编辑
（3）改变动画的起始时间 ） 如果想改变动画的开始时间， 如果想改变动画的开始时间 ， 可选择和该动 画相关联的一个或所有动画条（ 画相关联的一个或所有动画条 （ 选择的同时按住 shift键即可选中多个动画条 ） ， 然后将选择的动 键即可选中多个动画条） 键即可选中多个动画条 画向左或向右拖动。 画向左或向右拖动。
例2 制作曲线运动的动画
（1）先插入层，打开“时间轴”面板 ）先插入层，打开“时间轴” 插入 布局对象 层；窗口 时间轴 时间轴” （ 2） 选中层 ， 单击 “ 修改 ” “ 时间轴 ” “ 录制 ） 选中层， 单击“ 修改” 层路径” 层路径” （ 3）拖动该层绘制运动路径 ， 完成后会自动出现动 ） 拖动该层绘制运动路径， 画条。 画条。 （4）保存预览 ）
9.3 对时间轴动画的编辑
（1）改变动画条长度 ） 如果想使动画延长， 可拖动最后的帧标识。 如果想使动画延长 ， 可拖动最后的帧标识 。 此时该动画的所有关键帧也会相应地调整， 此时该动画的所有关键帧也会相应地调整 ， 以保 持各关键帧之间的相对位置不变。改变动画条长 持各关键帧之间的相对位置不变 。 度只是改变动画的播放时间长度， 度只是改变动画的播放时间长度 ， 不会改变动画 运动轨迹的长度。 运动轨迹的长度。
9.2 利用Dreamweaver制作时间轴动画 利用 制作时间轴动画
例1 制作直线运动的文字
（1）先插入层 ） 插入 布局对象 层 2）打开“时间轴” （2）打开“时间轴”面板 窗口 时间轴 （3）确定层的起始位置后，把层拖入到时间轴中 ）确定层的起始位置后， （4）拉长该层所占时间长度 ） （ 5） 点击时间轴上的最后一帧 ， 在编辑窗口中把层 ） 点击时间轴上的最后一帧， 拖动到停止位置。 这时候会出现一根斜线的路径） 拖动到停止位置。（这时候会出现一根斜线的路径） （6）保存预览 ）

同时在时间轴面板中自动生成动画条 ：
（4）此时拖动时间轴面板上的回放头，就可以欣赏 动画效果。如果动画不符合要求，可以继续修改 动画相关的属性，直到满意为止。
5.2 行为
行为可以让用户不用手工编写代码，就能够制作出具有 强大的交互功能和丰富的动态效果的网页。
一.行为控制器 二.事件菜单 三.动作菜单 四.常见行为举例
（1）时间轴下拉菜单：在该下拉菜单中选择要控制的时间 轴。
（2）回放头：即时间轴面板中的红色方块。拖动回放头， 可以在页面显示动画效果。
（3）帧编号：显示时间轴上帧的编号。 （4）行为通道：在该通道中显示时间轴在各时间段的行为。 （5）动画条：显示对象的动画轨迹。 （6）关键帧：通过关键帧确定时间轴上某时刻的属性。动
2 OnAfterUpdat 图像，页面等 e
3 OnBeforeUpda 图像，页面等 te
4 OnFocus
按钮，链接和文本框等
5 OnBlur
按钮，链接和文本框等
6 OnClick
所有对象
7 On DblClick 所有对象
8 OnError
图像，页
一.行为控制器
1.调出行为控制器
▪ 单击快捷工具栏内的“行
为”图标，或单击“窗 口”→“行为”菜单命令， 即可调出“行为”对话框， 即行为控制器 。
行为控制器
2.选择目标浏览器
▪ 设计的各种精彩的动态交 互动作最终需要用户在浏览 器中观赏，而不同的浏览器 中可以使用的行为也不尽相 同。所以在使用行为前需要 选定目标浏览器。
链接图像和文字等
当焦点在对象上，按键处于按下状 态时
18 OnKeyPress
链接图像和文字等
当焦点在对象上，按键按下时