256-行为的认识与应用、动态菜单的制作、行 为和时间轴的结合实例介绍.pptVIP

教学内容：行为的认识与应用、动态菜单的制作、行 为和时间轴的结合实例介绍。 教学重点和难点：网页动态效果的创建 7.1行为 7.1.1 认识行为 行为是事件和由该事件触发的动作的组合。行为的基本元素是事件和动作。 7.1.2 触发行为的事件 在“行为”面板中添加一个动作，就有了一个事件。当用户在浏览器中触发这一事件时，事件就会调用与其相关的动作。 常见事件参看教材P151-152页表7.1。 7.1.3 常见行为的使用 1．调用JavaScript “调用JavaScript”动作允许用户使用“行为”面板去指定一个自定义功能，或者当一个事件发生时执行一段JavaScript代码。可以自己编写或使用各种免费获取的JavaScript代码。 2．打开浏览器窗口 可以将HTML文件在新窗口中打开，并且可以设置新窗口的大小、样式状态栏等多种特性。 3．设置文本 “设置文本”动作包括4项内容：“设置层文本”、“设置框架文本”、“设置文本域文本”、“设置状态栏文本”。这4个动作可以分别为层、框架、文本域和状态栏等对象添加文本信息。 4． 预先载入图像 浏览网页时，经常会遇到网页上插入大图片的情况，容量越大的图片显示的速度就越慢。预先载入图像的行为是在浏览当前页面时，就可以预先在访问者的计算机中加载要打开的大图片，这样在访问相应网页文档时就可以迅速地显示大图片。 5．设定弹出信息 某些动作会在某种事件发生时，弹出一个对话框，给用户一些信息，此对话框只有一个“确定”按钮。 6．交换图像 “交换图像”行为是通过更改img标签的src属性将一幅图像与另一幅图像进行交换。使用此行为创建按钮鼠标经过图像和其他图像效果（可以一次交换多个图像）。插入鼠标经过图像会自动将一个“交换图像”添加到页中。 7．播放声音 使用“播放声音”动作可以为网页或特定的网页对象添加背景音乐，可以利用这个动作制作出具有声音效果的动态网页。例如：可以在每次鼠标指针滑过或单击某个链接时播放一段声音效果，或在载入网页的时候播放音乐剪辑。 8．改变属性 利用“改变属性”行为，可以动态改变对象的某个属性值，如层的可见性、背景色、图像的大小、路径等。这些改变实际上是改变对象对应标记的相应属性值。 9．恢复交换图像 利用“恢复交换图像”行为，可以将所有被替换显示的图像恢复为原始图像。一般来说，在设置“交换图像”行为时会自动添加交换图像恢复动作，这样当鼠标离开对象是就会自动恢复原始图像。 7.2 时间轴基本操作 动画的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中。在页面上显示的每一个层称为一帧，整个时间轴就是由许多的帧构成，这些帧在页面中的连续播放构成时间轴动画。 7.2.1 认识时间轴面板 时间轴面板记录了层和图像随着时间变化的属性。选择“窗口 | 时间轴”命令（快捷键Alt+F9），打开时间轴面板，如下图所示。 该面板各个部分的功能如下： “时间轴弹出菜单”：当前文档窗口中所有时间轴列表，可从下拉列表中选择一个时间轴进行操作。 “返回首帧”：动画返回到第1帧。 “后退”：退回到当前帧的前1帧。 “当前播放帧”：该文本框显示的是当前帧的序号。 “播放”：单击该按钮一次，动画前进一帧，如果按住不放，则连续播放动画。 “每秒播放帧数”：设置动画的速度，可以在该文本框中输入具体的数值。 “自动播放”：如果选中该项，则在网页加载后自动开始播放当前时间轴的动画。 “循环播放”：如果选中该项，则当前页面在浏览器中打开时，当前时间轴可以循环播放。 “行为通道”：用于指定某个特定帧执行的行为或动作。 “时间轴”：在该时间轴上面标注的1，5，10…等数字是具体帧的序列号，中间每一小格都代表一帧。上面有一红色的矩形是动画播放头，该播放头随着动画的播放而进行移动。 “动画通道”：显示层和图像的动画栏。 “动画栏”：将一个层拖拉到动画通道时，会显示此动画栏，表示该层的动画范围，动画栏中间显示层的名字。两头的小圆圈代表关键帧，一个层的动画是由这些关键帧决定的。可以在一个层中插入多个关键帧。 7.2.2 利用时间轴创建动画 时间轴是通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画。 【实例】利用层与时间轴结合，制作一个运动轨迹近似“V”字的动画。具体操作如下： 新建一文档，选择“窗口 | 时间轴”命令，打开时间轴面板。 单击布局工具栏中的 （绘制层）按钮，在文档窗口中拖出一个层，命名为layer1。