一、图层层叠效果制作
(实例操作演示)
二、鼠标移到图片时显示隐含图层。
(实例操作演示)
三、拖动层的应用。
(实例操作演示)
同学们上网的时候,经常会在网上看见小图
标在以一定的轨迹移动飞行,效果动感十
足,非常引人入胜,在页面上魅力四射。
对于很多的设计者来说,如何能用最简单、
快速的方法来实现它,可以说是个梦寐以
求的事情。
一般在网页上实现动画的效果要使用程序
JavaScript编程,或者使用专业的动画制
作软件来实现,这对很多设计者来说比较
头痛。 ------是 DreamweaverMX带来的
福音,利用它的时间轴技术就可以轻松、
时间轴(线)
简单、快速制作网页上满天飞的动画效果,
而且不需要编写复杂的程序。
这也是 DreamweaverMX强于其它网页编辑
工具的地方。
一、时间轴基础
1、动画的原理
动画的原理:动画是由一系列连续(静止)
的图片组成的。动画的实现就是将画面连起
来播放,由于人的视觉的滞后,产生运动的
和错觉,从而形成了运动的效果。
2、什么是帧?
动画的基本单位就是一个画面,也叫做帧。
3、什么是关键帧?
有些画面是关键的,会影响整个动画,这个
画面称为关键帧。
而很多的画面按照时间先后顺序连起来就是
动画。
4、什么是时间轴?
DreamweaverMX中的时间轴就是来安排画
面的顺序的,是一种用来控制网页中的层
在每一秒的位置的工具。
5、什么时候使用时间轴?
想要网页中的层移动的时候使用时间轴。
(时间线一定是和层一起使用的! ------牢
记 !)
6、如何打开时间轴?
操作方法:选择主菜单中的 【 窗口 】 / 【 其
它 】 /【 时间线(轴) 】 命令,或者直接按
Alt+F9打开时间轴。
二、使用时间轴面板
选择打开时间轴(线)命令,则弹出一个系
统的时间轴面板如下图所示:
时间轴(线)面板
时间线下拉列表框
播放栏 动画条 关键帧:在动画中的画面是
关键的,会影响整个动画。
行为通道
帧编号 (帧数 )
B
循环
动画的播
放速度
显示每个对象的动画长度
时间线面板中各部分的功能:
【 时间线下拉列表框 】, 指定显示文档中
的哪一个时间线。(一个文档中可以包
含多个时间线)
【 播放栏 】, 在时间线中当前指定显示哪
一帧。
【 帧编号 (帧数 )】, 以连续编号的形式表
示动画中的帧。
【 行为通道 】, 用于存放控制时间线的指
定帧的行为。
【 帧 】,时间轴上每一个小格。
【 Fps】, 动画的播放速度,用每秒播放
多少帧来表示。系统默认设置是 15帧 /秒
Fps值越大,相同 帧数的动画显示就越快。
【 动画条 】, 显示每个对象的动画长度。
【 关键帧 】, 在动画条中特殊的帧。
【 动画通道 】, 用于显示层对应的动画条。
(即是把要设置成动画的层添加到此通
道中)
使用时间轴面板注意的问题:
时间轴面板是用来创建页面上动画效果,
而 时间轴只对层起作用,如果要希望移动
文本、图像之类的对象,可将它们先放置
在层中,然后再设置为时间动画。
在时间轴面板上单击鼠标右键,可以打开
有关时间轴所有命令的快捷菜单。
三、使用时间线来制作动画效果
例 1、滚动字幕 (或者滚动的图片 )
重点介绍不同的轨迹的设置方法。
例 2、滚动广告牌(嵌套图层的应用)
例 3、幻灯片效果
实现网页上的幻灯片效果的常用方法有:
方法一、用时间轴控制图片替换。
方法二、用时间轴改变层的叠放顺序。
方法三、用时间轴添加行为
例 4、用时间轴改变层的大小。
例 5、行为和时间轴的综合应用实例。
本节小结
本节主要介绍了图层的创建方法、图
层的属性、图层的应用,最后又通过
制作一些图层应用的实例讲解,使大
家对图层的功能加深了理解。
重点熟练掌握网页中 图层 的创建,灵
活、合理使用 图层 以满足网页设计实
际中的需要。
上机操作作业
每个同学独立上机操作完成
老师讲过的例子。要求熟练
掌握。