网页特效的实现.ppt

《网页特效的实现.ppt》由会员分享，可在线阅读，更多相关《网页特效的实现.ppt（12页珍藏版）》请在三一办公上搜索。

1、主要内容：行为的认识与应用、动态菜单的制作、行 为和时间轴的结合实例介绍。重点和难点：网页动态效果的创建,7.1行为,7.1.1 认识行为 行为是事件和由该事件触发的动作的组合。行为的基本元素是事件和动作。7.1.2 触发行为的事件 在“行为”面板中添加一个动作，就有了一个事件。当用户在浏览器中触发这一事件时，事件就会调用与其相关的动作。常见事件参看教材P146-147页表7.1。,7.1.3 常见行为的使用1调用JavaScript“调用JavaScript”动作允许用户使用“行为”面板去指定一个自定义功能，或者当一个事件发生时执行一段JavaScript代码。可以自己编写或使用各种免费获取

2、的JavaScript代码。（关闭窗口）2打开浏览器窗口 可以将HTML文件在新窗口中打开，并且可以设置新窗口的大小、样式状态栏等多种特性。3设置文本“设置状态栏文本”。添加文本信息。,4 预先载入图像 浏览网页时，经常会遇到网页上插入大图片的情况，容量越大的图片显示的速度就越慢。预先载入图像的行为是在浏览当前页面时，就可以预先在访问者的计算机中加载要打开的大图片，这样在访问相应网页文档时就可以迅速地显示大图片。5设定弹出信息 某些动作会在某种事件发生时，弹出一个对话框，给用户一些信息，此对话框只有一个“确定”按钮。6交换图像“交换图像”行为是通过更改标签的src属性将一幅图像与另一幅图像进行

3、交换。使用此行为创建按钮鼠标经过图像和其他图像效果（可以一次交换多个图像）。插入鼠标经过图像会自动将一个“交换图像”添加到页中。,7播放声音 使用“播放声音”动作可以为网页或特定的网页对象添加背景音乐，可以利用这个动作制作出具有声音效果的动态网页。例如：可以在每次鼠标指针滑过或单击某个链接时播放一段声音效果，或在载入网页的时候播放音乐剪辑。8改变属性 利用“改变属性”行为，可以动态改变对象的某个属性值，如层的可见性、背景色、图像的大小、路径等。这些改变实际上是改变对象对应标记的相应属性值。9恢复交换图像 利用“恢复交换图像”行为，可以将所有被替换显示的图像恢复为原始图像。一般来说，在设置“交换

4、图像”行为时会自动添加交换图像恢复动作，这样当鼠标离开对象是就会自动恢复原始图像。10.效果（制作图片浏览特效）,7.2 时间轴基本操作,动画的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中。在页面上显示的每一个层称为一帧，整个时间轴就是由许多的帧构成，这些帧在页面中的连续播放构成时间轴动画。7.2.1 认识时间轴面板 时间轴面板记录了层和图像随着时间变化的属性。选择“窗口|时间轴”命令（快捷键Alt+F9），打开时间轴面板，如下图所示。,该面板各个部分的功能如下：“时间轴弹出菜单”：当前文档窗口中所有时间轴列表，可从下拉列表中选择一个时间轴进行操作。“返回首帧”：动画返回

5、到第1帧。“后退”：退回到当前帧的前1帧。“当前播放帧”：该文本框显示的是当前帧的序号。“播放”：单击该按钮一次，动画前进一帧，如果按住不放，则连续播放动画。“每秒播放帧数”：设置动画的速度，可以在该文本框中输入具体的数值。“自动播放”：如果选中该项，则在网页加载后自动开始播放当前时间轴的动画。“循环播放”：如果选中该项，则当前页面在浏览器中打开时，当前时间轴可以循环播放。“行为通道”：用于指定某个特定帧执行的行为或动作。“时间轴”：在该时间轴上面标注的1，5，10等数字是具体帧的序列号，中间每一小格都代表一帧。上面有一红色的矩形是动画播放头，该播放头随着动画的播放而进行移动。“动画通道”：显

6、示层和图像的动画栏。“动画栏”：将一个层拖拉到动画通道时，会显示此动画栏，表示该层的动画范围，动画栏中间显示层的名字。两头的小圆圈代表关键帧，一个层的动画是由这些关键帧决定的。可以在一个层中插入多个关键帧。,7.2.2 利用时间轴创建动画 时间轴是通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画。【实例】利用层与时间轴结合，制作一个运动轨迹近似“V”字的动画。具体操作如下：新建一文档，选择“窗口|时间轴”命令，打开时间轴面板。单击布局工具栏中的（绘制层）按钮，在文档窗口中拖出一个层，命名为layer1。将站点“壮族印象”根目录下imgs文件夹中的图像cartoon.gif插入到该层中，

7、并根据图片调节层的尺寸。选择层layer1，并将其拖入时间轴动画通道中。可以看到插入的动画长度默认为15帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏两端自动加入了两个关键帧。单击动画栏最右端的关键帧标记，然后在文档窗口中将层移动一定的距离后释放鼠标左键，可以看到动画起始位置到结束位置之间有一条线显示，这就是层的运动轨迹。拖动动画栏上最前端或最后端的关键帧标记，可以改变动画栏的长度，也就是改变动画播放的时间。本例将后端的关键帧拖动到180刻度处。如果希望在动画栏中的某个位置添加关键帧，可以按住Ctrl键，然后在动画栏上的相应帧位置单击。或者单击鼠标右键，在出现的快捷工具栏中选择“

8、增加关键帧”命令。本例分别在刻度为40、55、90、105、135、165处增加了关键帧。单击动画栏中的刻度为40的关键帧，此时播放头也相应地移动到该处，在文档窗口中选择该层，并拖动该层移动到a点后释放鼠标。同理，调整图层在刻度为55的关键帧及其后的几个关键帧的位置分别为b点、c点、d点、e点、f点、g点。勾选属性面板中的“自动播放”与“循环”复选框，保存文件并预览动画。,2快速制作复杂时间轴动画参看教材P157页实例9。,7.2.3 时间轴的编辑与操作1删除关键帧 在时间轴上选择一个关键帧，再单击鼠标右键，然后在弹出的快捷菜单上选择“移除关键帧”项。2改变关键帧的位置 在时间轴上选择一个关键

9、帧，然后按住鼠标左键左右拖动。3改变动画栏长度 在动画栏两端的关键帧上按下鼠标左键并左右拖动，则可以改变动画栏的长度，此时动画栏中所有关键帧都发生移动，以保证它们的相对位置不变。改变动画栏长度只是改变动画播放的时间，不会改变动画运动轨迹的长度。4多条时间轴的运用 在时间轴上单击鼠标右键，从弹出的快捷菜单中选择“添加时间轴”，将会添加一个新的时间轴。时间轴下拉列表中就会在原有“Timeline1”的基础上又多了一个“Timeline2”。5动画的拷贝和粘贴 将已生成的动画复制并粘贴到当前文档的其他时间轴上或其他文档中的时间轴上。只需选择、复制（或剪切）和粘贴。单击动画栏上的普通帧可以选中该动画栏

10、，按CtrlA组合键则可以选中时间轴内的所有动画栏，然后进行复制或剪切、粘贴。,7.3行为、时间轴和层的应用综合实例,请参看教材P164-174页实例。,7.5 习题参考答案,一、填空题1事件，由该事件触发的动作 2.自动播放 3.加载页面时所弹出的窗口4弹出一个对话框，给用户一些信息二、选择题1.B 2.A 3.D 4.B 三、判断题1.2.四、简答题1答：首先选定需要操作的对象，并为其创建一个空链接。将对象选中，单击“行为”面板上“+”按钮，在弹出的菜单中执行“设置文本|设置状态条文本”命令，然后在弹出的“消息”文本框中输入相应的特定文字，再单击“确定”按钮。最后在“行为”面板上把“事件”设置为“onMouseOver”。2答：基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中。在页面上显示的每一个层称为一帧，整个时间轴就是由许多的帧构成，这些帧在页面中的连续播放构成时间轴动画。方法：首先在文档中插入一个绘制层，之后将要制作成动画的图片或其他信息插入层中，再将层拖入时间轴，设置时间轴的长度、插入关键帧、调整各关键帧上层在页面中的具体显示位置。,