加入收藏 - 网站地图 - 网站搜索 -
阅读新闻

Dreamweaver 3动画篇:时间轴(Timeline)

[日期:01-20] [字体: ]
眼见着教程就要走到尾声,我们渐渐进入到Dreaweaver 3的精华部分那就是时间轴(Timeline)和行为(Behavior)。时间轴可以用于在网页的页面上制作动画。行为可以用来制作网页上的交互效果。举例来说就是,鼠标移到图片上去之后出现了另一个画面之类的东西。

 首先我们来理解时间轴。动画的实现原理就是将画面连起来播放,产生运动的错觉。所以动画的基本单位就是一个画面,也叫做帧。而在动画中有些画面是关键的,可以影响整个动画的,这样的帧叫做关键帧。很多的画面按照时间先后顺序链起来就是动画。时间轴就是用来排列画面的顺序的。时间轴由通道组成。每一个通道里面放一个要运动的物体。关键帧用圆点表示。还有一个播放头,播放头所指的位置就是动画当前所在的帧。

 以下图为例,动画是一只机器猫按照弧线从左往右边运动。动画在通道1中。共15帧画面长度。其中开始的位置,结束的位置还有当中弧线的最低点三个位置是关键位置。因此都是关键帧。图中播放头播放的正好是当中的关键帧。也就是图中机器猫的位置。

通过上面的讲解,时间轴的作用我们大致上已经很清楚了。下面我们就来实战制作这个动画的效果。在制作之前要强调一件事情。就是要制作动画就必须用到层。用层才能制作动画,单一的图片是无法制作动画的。文字图片都必须存放在层中。实际上运动的是层,带动的图片文字进行运动。制作过程如下:

1、 插入一个层。在层中插入一张图片

2、 将层拖拽入时间轴。(时间轴可以通过菜单windowàtimelines打开)系统会弹出一个对话框。提示层的一些属性是可以做成动画的。单击ok即可。注意是将层拖拽在时间轴中,不是图片。应该看到时间轴中显示的是Layer字样。时间轴生成了一段长15帧的画面。当然觉得太短可以自己拖的长一点。

3、 现在第一帧和最后一帧都是关键帧。我们要设置最后一帧确定动画的结束位置。单击最后一帧将层拖拽到指定位置。

4、 大家可以看到路径还是直的。我们要做成弯曲的怎样做呢。增加一个关键帧。单击当中的位置。按鼠标右键。选择其中的Add keyframe增加关键帧。时间轴种增加一个关键帧。

5、 单击该关键帧将层拖拽到指定位置。动画制作完毕了。

6、 还要在时间轴上单击Autoplay自动播放选项。这样页面一装入浏览器动画就播放。Loop选项表示动画播放完毕一次以后还要继续播放。选中这两个选项的时候都会弹出对话框,单击OK即可。

注意:一旦选中了这两个参数。时间轴上动画最后一帧会出现一帧。该帧出现在B通道中。B通道不同于别的通道,是用来控制和添加行为的。这里我们添加的是一个重复和循环的行为。





 
评论 】 【 推荐 】 【 打印
上一篇:我要看代码 破解加密网页文字有高招
下一篇:Dreamweaver中幂格式文本巧实现