当前位置月光软件 -> 电脑乐园 -> Dreamweaver

 

轻松掌握网页制作
深入学习和使用
高级使用和理解
站点管理
发布网页
样式表编辑
Timelines
Behaviors
Template
Library
HTML源代码编辑器
强大的查找替换功能
历史面板的应用
附录
常见问题汇总
快捷键分级介绍
一句话技巧集萃
功能快速索引



请您留言
谈谈您的看法

 

 

 
  三、高级使用和理解

 Timelines

  前面我们已经讲过,timeline是通过改变层的位置、大小、可见性以及叠放顺序来创建动画,也就是说timeline只能移动层。所以,如果要移动图像或文本,就要先创建个层,然后将图像、文本或其他类型的内容插入到层中,然后通过移动层来移动这些元素。

  原来我们讲过简单的timeline设计和使用,现在我们讲一个稍微复杂的例子。

  (1)设计一个复杂的timeline

  在这个例子中,点一下“飞行”按钮,飞机就向前飞,而且飞行路线也不是直线;再点一下“停止”按钮,飞机就在现在飞到的位置就停下来了。

  下面我们来设计这个例子。

  在页面创建一个层,在层中插入要移动的元素——一个飞机图片(图1)



图1 添加层

  选择“Window->Timelines”命令,打开Timelines面板。选中这个层,把它拖动到Timelines面板的第一帧位置(图2)。一个动画栏出现在timeline的第一个通道内,相应的层名(Layer1)显示在该动画栏中。单击动画栏最后关键帧标记,也就是第15帧,此时注意播放头也跟着移动到该处。向后拖动鼠标到第30帧,这样做出来的动画就有30帧了。把页面上layer1层移到屏幕右侧,此时从动画起始位置到结束位置有一线条显示,这就是层的运动轨迹(图3)



图2 打开Timelines面板



图3 拖动图层,产生一个移动轨迹

  接下来我们让飞机按曲线移动。在Timelines面板中,再单击第10帧处,单鼠标右键,选“Add Keyframe”(图4),在此处添加了一个关键帧,将页面中的层向上移一下,运动轨迹就变为曲线形状了(图5)



图4 添加关键帧



图5 拖动关键帧,改变运动轨迹为一个曲线

  接下来继续增中关键帧,改变层的位置,就可以创建比较复杂的曲线。创建关键帧的快捷方法是:将鼠标移动到要某两帧之间,Ctrl键单击。

  按下播放按钮(图6),预览页面上的动画,飞机沿我们刚设计的曲线移动了。



图6 选中Autoplay和Loop项后预览

  如果要创建具有复杂路径的动画,按上面的方法创建一个个关键帧比较麻烦,用拖动层时记录路径的方法就方便多了。我们一起看一下吧!

  选中Timelines1,点鼠标右键,选“Remove Timeline”,刚创建的时间轴被删除了。选中层,将光标定位在Timelines面板第一帧处,选择“Modify->Timeline->Record Path of Layer”命令记录层的路径。注意:如果没有选中层,这条命令是不可用的。

  在页面上拖动层,创建想要的运动路径,可以看到一条虚线在鼠标后面,这就是拖动层产生的路径。

  释放鼠标,Timeline创建完毕完了,可以看到我们“走过的曲线”,同时也添加了适当数量的关键帧。预览一下动画效果,如果有个别地方动画不流畅,可以进行调整。

    下一节    

 

请您留言
谈谈您的看法