网页设计之行为与时间轴
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7. 移动层，使运动轨迹呈曲线状
2020/8/14
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2020/8/14
20
（三）控制时间轴
1. 选中层，在行为面板中单击加号按钮，选择 时间轴
• 转到时间轴帧 ： 允许对指定的时间轴控制播放其指定的时间帧 以及循环的次数。
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2020/8/14
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
1. 在网页中插入一个层，在层中插入一幅广告图片
2. 选中图像，为其设置超级链接
3. 选中层 修改时间轴录制层路径
2020/8/14
22
4. 按住层不放，拖动层画出层的运动轨迹，在动画 结束的地方松开鼠标
2020/8/14
8
8章 时间轴
2020/8/14
9
一、时间轴的概述
时间轴的基本原理： 使层中的内容在一定的时间内，按照设计好的路 线显示在页面中，在时间轴上显示的每一个层称 为一帧，整个时间轴就是由许多帧构成的，这些 帧在页面中的连续播放构成了时间轴动画。
2020/8/14
10
时间轴通过改变层在不同时间的 位置 大小 可见性和叠放顺序 来创建动画。
复习：
1. 模板文件的扩展名？ 库文件的扩展名？
2020/8/14
1
7章 行为
2020/8/14
2
1 1、行为动作和事件
行为就是以某种方式完成的动作。 行为的主要功能： 就是在网页中插入JavaScript程序而无需动手编写代码，这正是设 计者所需要的。用它可以轻松地做出许多网页特效。
行为是一种事件和动作的组合： 动作是指在浏览网页时可完成的一些特殊功能，如拖曳层、
一个单行可以包含多个代表不同对象的动画栏， 但是在同一帧中，不同的动画条不能控制相同 的对象。
5. 关键帧：
即动画栏中的小圆点。是动画栏中给某个对象 指定了属性（如位置）的帧
2020/8/14
14
6.总帧数（即长度）： 表示每个动画栏占有的帧数 。
后退和播放按钮之间的数字是当前播放帧
通过设置总帧数和每秒帧数（fps），可以控 制动画的持续时间及速度
2020/8/14
4
2、Dreamweaver 中可以添加的行为 动作 3、Dreamweaver中主要事件
4、内置行为的具体应用
2020/8/14
ຫໍສະໝຸດ Baidu
5
2020/8/14
6
交换图像:与鼠标经过的图像基本相同 拖动层 转到URL 播放声音 打开浏览器窗口 设置文本
2020/8/14
7
复习:
1.行为的重要组成部分是什么？
2020/8/14
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
公式：总帧数＝持续秒数×帧频率
2020/8/14
15
7. 回首帧：将播放头移动到时间轴的首帧
8. 后退：将播放头向左移动一帧。
9. 播放：将播放头向右移动一帧。
10. 自动播放： 选择“自动播放”复选框，使当前页面在载入 浏览器时自动开始播放时间轴
2020/8/14
16
11. 循环播放：
选择“循环”复选框，使页面在浏览器中打开 时，
隐藏和显示层、播放音乐、交换图像等； 事件是完成某一动作的具体方式，如onMouseOver(鼠标指
向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。
例：插入【交互式图像】就是一个典型的行为应用。
2020/8/14
3
事件
Onclick:单击图像链接按扭 onDblclick：双击对象 onError：载入错误 onFinish：所选内容完成一个循环 onHelp：单击help onKeyDown：按键 Onkeypress：按键并释放 onKeyUp：释放 onLoad：页面载入 onMouseDown：按下鼠标 onMouseMove：移动鼠标 onMouseOut：鼠标移出 onMouseOver：鼠标移入
2. 选择 窗口时间轴 ，打开时间轴面板
3. 选择要制作动画的层
4. 选择 修改时间轴添加对象到时间轴
或者直接把选定的对象拖入时间轴面板中
2020/8/14
18
5. 单击该动画栏最后关键帧标记（即第15帧），将 页面上的层移动到动画末尾时它所应该在的位置
6. 如果要让层按曲线移动，选择它的动画栏，按住 Ctrl键单击，再插入点位置添加一个关键帧 或在动画栏中间单击一帧，并从右键快捷菜单中 选择“增加关键帧”
当前时间轴可以无限循环播放
这实际上是在动画最后一帧后的行为通道中插入 了“转到时间轴帧”行为。双击此帧中的标记， 可以编辑行为的参数与改变循环次数
2020/8/14
17
三 、 创建时间轴动画的操作
(一)简单的时间轴应用： 1. 在页面添加层，在层中插入要移动的元素，然 2. 后将层移动到动画的起始位置
2020/8/14
12
•窗口时间轴 （打开时间轴面板 ） 1. 播放头： 2. 值是页面上当前显示的是时间轴的哪一帧
2. 时间轴弹出菜单： 指定当前文档的哪个时间轴显示在时间轴面板中。
3. 动画频道： 显示动画层和图像的栏
2020/8/14
13
4. 动画栏（条）：
即动画频道中的蓝色小条，显示每个对象的持 续时间。
2020/8/14
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2020/8/14
20
（三）控制时间轴
1. 选中层，在行为面板中单击加号按钮，选择 时间轴
• 转到时间轴帧 ： 允许对指定的时间轴控制播放其指定的时间帧 以及循环的次数。
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2020/8/14
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
1. 在网页中插入一个层，在层中插入一幅广告图片
2. 选中图像，为其设置超级链接
3. 选中层 修改时间轴录制层路径
2020/8/14
22
4. 按住层不放，拖动层画出层的运动轨迹，在动画 结束的地方松开鼠标
2020/8/14
8
8章 时间轴
2020/8/14
9
一、时间轴的概述
时间轴的基本原理： 使层中的内容在一定的时间内，按照设计好的路 线显示在页面中，在时间轴上显示的每一个层称 为一帧，整个时间轴就是由许多帧构成的，这些 帧在页面中的连续播放构成了时间轴动画。
2020/8/14
10
时间轴通过改变层在不同时间的 位置 大小 可见性和叠放顺序 来创建动画。
复习：
1. 模板文件的扩展名？ 库文件的扩展名？
2020/8/14
1
7章 行为
2020/8/14
2
1 1、行为动作和事件
行为就是以某种方式完成的动作。 行为的主要功能： 就是在网页中插入JavaScript程序而无需动手编写代码，这正是设 计者所需要的。用它可以轻松地做出许多网页特效。
行为是一种事件和动作的组合： 动作是指在浏览网页时可完成的一些特殊功能，如拖曳层、
一个单行可以包含多个代表不同对象的动画栏， 但是在同一帧中，不同的动画条不能控制相同 的对象。
5. 关键帧：
即动画栏中的小圆点。是动画栏中给某个对象 指定了属性（如位置）的帧
2020/8/14
14
6.总帧数（即长度）： 表示每个动画栏占有的帧数 。
后退和播放按钮之间的数字是当前播放帧
通过设置总帧数和每秒帧数（fps），可以控 制动画的持续时间及速度
2020/8/14
4
2、Dreamweaver 中可以添加的行为 动作 3、Dreamweaver中主要事件
4、内置行为的具体应用
2020/8/14
ຫໍສະໝຸດ Baidu
5
2020/8/14
6
交换图像:与鼠标经过的图像基本相同 拖动层 转到URL 播放声音 打开浏览器窗口 设置文本
2020/8/14
7
复习:
1.行为的重要组成部分是什么？
2020/8/14
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
公式：总帧数＝持续秒数×帧频率
2020/8/14
15
7. 回首帧：将播放头移动到时间轴的首帧
8. 后退：将播放头向左移动一帧。
9. 播放：将播放头向右移动一帧。
10. 自动播放： 选择“自动播放”复选框，使当前页面在载入 浏览器时自动开始播放时间轴
2020/8/14
16
11. 循环播放：
选择“循环”复选框，使页面在浏览器中打开 时，
隐藏和显示层、播放音乐、交换图像等； 事件是完成某一动作的具体方式，如onMouseOver(鼠标指
向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。
例：插入【交互式图像】就是一个典型的行为应用。
2020/8/14
3
事件
Onclick:单击图像链接按扭 onDblclick：双击对象 onError：载入错误 onFinish：所选内容完成一个循环 onHelp：单击help onKeyDown：按键 Onkeypress：按键并释放 onKeyUp：释放 onLoad：页面载入 onMouseDown：按下鼠标 onMouseMove：移动鼠标 onMouseOut：鼠标移出 onMouseOver：鼠标移入
2. 选择 窗口时间轴 ，打开时间轴面板
3. 选择要制作动画的层
4. 选择 修改时间轴添加对象到时间轴
或者直接把选定的对象拖入时间轴面板中
2020/8/14
18
5. 单击该动画栏最后关键帧标记（即第15帧），将 页面上的层移动到动画末尾时它所应该在的位置
6. 如果要让层按曲线移动，选择它的动画栏，按住 Ctrl键单击，再插入点位置添加一个关键帧 或在动画栏中间单击一帧，并从右键快捷菜单中 选择“增加关键帧”
当前时间轴可以无限循环播放
这实际上是在动画最后一帧后的行为通道中插入 了“转到时间轴帧”行为。双击此帧中的标记， 可以编辑行为的参数与改变循环次数
2020/8/14
17
三 、 创建时间轴动画的操作
(一)简单的时间轴应用： 1. 在页面添加层，在层中插入要移动的元素，然 2. 后将层移动到动画的起始位置
2020/8/14
12
•窗口时间轴 （打开时间轴面板 ） 1. 播放头： 2. 值是页面上当前显示的是时间轴的哪一帧
2. 时间轴弹出菜单： 指定当前文档的哪个时间轴显示在时间轴面板中。
3. 动画频道： 显示动画层和图像的栏
2020/8/14
13
4. 动画栏（条）：
即动画频道中的蓝色小条，显示每个对象的持 续时间。