第9章 时间轴动画及行为
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onMouseMove(IE3，IE4，IE5)：当鼠标在指定元素上移动时，在该页 面元素上就会触发该事件。 onMouseOut(NS3，NS4，IE4，IE5)：当将鼠标在指定元素上移开时， 在该页面元素上就会触发该事件。 onMouseOver(NS3，NS4，IE3，IE4，IE5)：当鼠标第一次移动到 指定元素时触发该事件。该事件通常用于链接。 onMouseUp(NS4，IE4，IE5)：当按下的鼠标按键被释放时触发该事件。 onMove(NS4，IE5)：当窗体或框架移动时触发该事件。 onReadStateChange(IE4，IE5)：当指定元素的状态改变时触发该事 件。 onReset(NS3，NS4，IE3，IE4，IE5)：当表单内容被重新设置为默 认值时触发该事件。 onResize(NS4，IE4，IE5)：当访问者调整浏览器或框架大小时触发该 事件。 onRowEnter(NS4，IE4，IE5)：在当前捆绑数据源的当前记录指针改 变时触发该事件。 onRowExit(NS4，IE4，IE5)： 在当前捆绑数据源的当前记录指针改变 后触发该事件。
1. 时间轴下拉列表框：显示当前的时间轴名称。 2. 播放头：表示时间指针的当前位置，即在当前文档界面上显示的是 时间轴的哪一帧。 3. 当前帧数：播放栏所在位置的具体帧的编号，可以旁边的箭头键切 换到开始帧、前一帧和后一帧。 4. 每秒帧数：每秒播放动画的帧数，帧数值越大，则动画播放的速度 越快，默认值每秒帧数是15帧。 5. 动画条：表示每个对象动画的持续时间。 6. 关键帧：是动画条中已经为对象指定属性的帧。 7. 帧编号：指示帧的序号 8. 行为通道：在时间轴指定帧中选择要运行的行为的通道。 9. 动画通道：用于制作层和图像动画的空间。
图9.4管理多个时间轴动画
9.3 行为的基本概念和操作
有很多优秀的网页，它们不只包含文本和图像，还有许多其他交互式 的效果，例如当鼠标移动到某个图像或按钮上，特定位置便会出现相 关信息，又或者一个网页打开的同时，响起了优美的背景音乐等。这 使用的就是本章中将要介绍的内容，Dreamweaver 8的另一大功 能——行为，使用它，网页中将会实现许多精彩的交互效果。 行为是为响应某一具体事件而采取的一个或多个动作。当指定的事件 被触发时，将运行相应的JavaScript程序，执行相应的动作。所以 在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。 行为是针对网页中的所有对象，要结合一个对象添加行为。例如，当 某个浏览者将鼠标移动到某一图像或文字上,浏览器就可能生成一个 onMouseOver(鼠标滑过)事件，如果用户事先设定了某个动作,此 事件将调用相关的JavaScript功能，JavaScript功能则激发相应 的动作发生,如弹出一个提示框或在状态栏中显示相关信息。 Dreamweaver 8提供了20多个行为动作,如果读者需要更多的行 为，可以到MacromediaExchange官方网页 (http://www.macromedia.com/cn/exchange)以及第三 方开发人员站点上进行搜索并且下载。
onAbort(NS3，NS4，IE4，IE5)：当终止正在打开的网页时触发该事 件。 onBeforeUpdate(IE4，IE5)：当页面上一个绑定数据的元素完成对数 据源的更新时会触发该事件。 onAfterUpdate(IE4，IE5)：当页面上一个绑定数据的元素被修改并已 经失去焦点时触发该事件。 onBlur(NS3，NS4，IE3，IE4，IE5)：当指定元素不再被访问者交互 时触发该事件。 例如，当用户在单击文本编辑框后，在该编辑框区域以外单击，则系统将产 生该事件。 Bounce(IE4，IE5)：当选取框中的内容移动到该选取框边界时会触发该 事件。
Байду номын сангаас
9.3 行为的基本概念和操作
9.3.3 行为的添加和编辑
为对象添加行为动作时，可以一次为每个事件关联多个动作，动作的 执行按照在“行为”面板列表中的顺序执行。 【例9.4】为页面example9_4.html中的对象添加“播放声音”行为 并 进行编辑。 选择要添加行为的对象，如果是整个页面，则在文档窗口的左下角单 击<body>标签；如果选择一个段落，则单击<p>，如图9.8所示。 所选择对象相应的HTML标签出现在“行为”面板的标题栏中，单击 按钮，在弹出的菜单中选择动作“播放声音”命令，此时将打开该动 作的对话框，如图9.9所示，在对话框中通过“浏览”按钮选择音频 文件。 单击“确定”按钮后，在事件列表中出现触发该动作的默认事件，可 以选择其它事件来改变当前默认的事件。 这时选定的行为就被添加到网页中了， 按F12键可以对当前添加的效果进行 图9.9 播放声音 预览。
9.2 创建并修改时间轴动画
使用时间轴创建动画主要是通过改变对象在文档 中的位置、大小、可见度及层的重叠顺序等方法 来实现的。时间轴只能移动层对象，如果要使图 像、文本等对象产生动画效果，必须将其放在层 中。
9.2 创建并修改时间轴动画
【例9.1】创建沿直线移动层的时间轴动画 在文档example9_1.html中插入一个层 Layer1,并在层上插入图像“book.jpg”。 将层移动到动画开始的位置。 选择菜单命令“窗口”|“时间轴”，打开时间轴 面板。 选择层layer1，层的周围将出现调整柄。 将选定层拖至“时间轴”面板中的第一个动画通 道中，层的名称“layer1”和动画条出现在此通 道中，如图9.1所示。 单击位于动画条末端的关键帧标记。 在页面上将层layer1移到动画结束的位置，在 “文档”窗口将出现一条线，表示动画的轨迹， 如图9.2所示。 在时间轴面板中选择“自动播放”复选框，保存 文档，按F12可以预览页面上的动画效果。
9.3 行为的基本概念和操作
9.3.1 行为面板
在Dreamweaver8中，进行附加行为和编辑行 为的操作都将使用到“行为”面板，选择菜单栏 中的“窗口”|“行为”命令打开该面板，如图9.5 所示。 在“行为”面板上由6个按钮，分别是： ：显示已经设置的事件。 ：显示所有可以设置的事件。 ：显示可以发生的动作菜单,从中选择一个动作将 打开该动作相应的参数设置对话框，如图9.6所示。 ：从行为列表中删除选中的动作及其相关的事件。 和 ：可以改变行为列表中动作发生的顺序。
图9.5“行为”面板
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
如图9.7所示，菜单中列出了所选行为所有可以使用的的触发事件， 用户可以根据实际需要进行设置。下面将介绍Dreamweaver中的 一些主要事件，其中IE代表Internet Explorer浏览器， NS代表 Netscape浏览器，后面的数值为版本号。
图9.3 移动层轨迹到动画结束位置
9.2 创建并修改时间轴动画
在定义了时间轴的基本参数后，仍然可以使用时间轴添加帧、删除帧、 增加关键帧，增加、删除、改变对象，改变动画开始时间等。具体如下： 添加或删除关键帧 移动某一关键帧的层的位置 移动某一关键帧的播放时间 更改动画开始时间 延长动画的播放时间 动画的自动播放和循环播放 重命名时间轴 移动整个动画轨迹的位置
Company Logo
9.1 时间轴面板
9.1.1 时间轴面板的打开
在Dreamweaver 8.0主界面的默认显示中是不显示时间轴面板的， 如果想使用它，选择一个图片或者一个层之后，选择“窗口”|“时间轴” 命令，即可打开时间轴面板，如图9.1所示。
图9.1 时间轴面板
9.1 时间轴面板
9.1.2时间轴面板功能 时间轴上所集成的功能非常多，下面介绍时间轴各部分的名 称及作用。
第九章 时间轴动画及行为
1
2 3 4 5
9.1 时间轴面板的打开
9.2 创建并修改时间轴动画
9.3 行为的基本概念和操作
9.4 使用Dreamweaver内置行为 制作特效 9.5 课堂实例
Company Logo
9.1 时间轴面板
时间轴是根据时间的流逝移动图层位置的方式 显示动画效果的一种动画编辑界面，可以通过 在时间轴面板中更改层的位置、大小、可见性 和层叠顺序来控制网页内容在一定时间内播放 的帧数、图层及其属性从而实现各种网页动画 特效。
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onScroll(IE4，IE5)：当访问者使用滚动条向上或向下滚动文档内容时触 发该事件。 onSelect(NS3，NS4，IE3，IE4，IE5)：当访问者选择文本框中的文 本时触发该事件。 onStart(IE4，IE5)：当编辑框中的内容开始循环时触发该事件。 onSubmit(NS3，NS4，IE3，IE4，IE5)：当访问者提交表格时触发该 事件。 onUnload(NS3，NS4，IE3，IE4，IE5)：当访问者离开页面或者从当 前页面退出时触发该事件。
图9.2 移动层到动画结束位置
9.2 创建并修改时间轴动画
【例9.2】创建沿拖动轨迹移动层的时间轴动画 在文档example9_2.html中插入一个层 Layer1,并在层上插入图像“book.jpg”。 将层移动到动画开始的位置。 选择菜单命令“窗口”|“时间轴”，打开时间轴面 板。 选择层layer1，层的周围将出现调整柄。 选择菜单命令“修改”|“时间轴”|“录制层路 径” 。 在页面上拖动层以创建轨迹，到达动画应停止的点 时释放该层，系统会自动记录下拖动层时的运动轨 迹。如图9.3所示。 层的名称和动画条自动出现在动画通道中。 选择“自动播放”复选框，保存文档，按F12可以 预览页面上的动画。 可以修改“Fps”值调整动画播放的速度，数值越 大，动画播放速度越快，但目前大多数浏览器都不 能支持15Fps以上的动画速度。
onChange(NS3，NS4，IE3，IE4，IE5)：当网页上的元素内 容发生改变时触发该事件。例如，当用户在菜单中选择了一个项目， 或者修改了文本区中的数值，然后在页面任意位置单击均可触发该事 件。
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onClick(NS3，NS4，IE3，IE4，IE5)：当访问者单击指定的元素(如 超链接、图片、图片影像、按钮)时触发该事件。 onDbClick(NS4，IE4，IE5)：当访问者双击指定元素时触发该事件。 onError(NS3，NS4，IE3，IE4，IE5)：当浏览器在网页或图像载入产 生错误时触发该事件。 onFinish(IE4，IE5)：当选取框中的内容完成一次循环时触发该事件。 onFocus(NS3，NS4，IE3，IE4，IE5)：当指定元素被访问者交互时 触发该事件。 onHelp(IE4，IE5)：单击浏览器上的Help按钮或者选择菜单中的Help 命令时触发该事件。 onKeyDown(NS4，IE4，IE5)：当按下任意键的同时触发该事件。 onKeyPress(IE4，IE4，IE5)：当按下和松开任意键时触发该事件。相 当于onKeyDown与onKeyUp事件的联合。 onKeyUp(NS4，IE4，IE5)：当按下的键松开时触发该事件。 onLoad(NS3，NS4，IE3，IE4，IE5)：当一幅图像或网页载入完成时 触发该事件。 onMouseDown(NS4，IE4，IE5)：在尚未释放之前按下鼠标左键时触 发该事件。
9.2 创建并修改时间轴动画
【例9.3】通过添加关键帧更改时间轴动画轨迹。 打开【例9.1】中创建的文档“example9_1.html”，将其另存为 “example9_3.html”。 在动画条中选择要添加关键帧的位置，按右键，在快捷菜单中选择 “添加关键帧”，动画条上多了一个关键帧。 选中此关键帧，文档窗口中出现层layer1在此关键帧时的位置，拖 动层可以改变动画轨迹。 重复步骤(3)，直至动画轨迹达到预期效果为止。 在时间轴面板上选择“自动播放”复选框，保存文档，按F12可以预 览页面上的动画效果。 当一个网页中包含多个动画时，可以创建多个动画通道来管理这些动 画，时间轴面板如图9.4所示，多时间轴动画的管理方法同上。