|
///pc/homepage/dreamweaver/img/000.gif" width="100" height="20">
|
///pc/img/title_00.gif" width="13" height="20"> |
|
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">轻松掌握网页制作
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">深入学习和使用
///pc/homepage/dreamweaver/img/003.gif" width="18" height="16" align="absmiddle">高级使用和理解
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">站点管理
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">发布网页
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">样式表编辑
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Timelines
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Behaviors
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Template
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Library
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">HTML源代码编辑器
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">强大的查找替换功能
///pc/homepage/dreamweaver/img/001.gif" width="30" height="16" align="absmiddle">历史面板的应用
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">附录
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">常见问题汇总
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">快捷键分级介绍
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">一句话技巧集萃
///pc/homepage/dreamweaver/img/010.gif" width="30" height="16" align="absmiddle">功能快速索引
//www.shanghaigongsi.com.cn/pc/bin/softdown/softgsch.pl?key=dreamweaver">///pc/img/download.gif" width="90" height="45" border="0">
/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法
|
///pc/img/blank.gif" width="1" height="1">
| |
| ///pc/homepage/dreamweaver/img/logo1.gif" width="194" height="64"> |
|
|
|
|
Timelines
前面我们已经讲过，timeline是通过改变层的位置、大小、可见性以及叠放顺序来创建动画，也就是说timeline只能移动层。所以，如果要移动图像或文本，就要先创建个层，然后将图像、文本或其他类型的内容插入到层中，然后通过移动层来移动这些元素。
原来我们讲过简单的timeline设计和使用，现在我们讲一个稍微复杂的例子。
（1）设计一个复杂的timeline
在这个例子中，点一下“飞行”按钮，飞机就向前飞，而且飞行路线也不是直线；再点一下“停止”按钮，飞机就在现在飞到的位置就停下来了。
下面我们来设计这个例子。
在页面创建一个层，在层中插入要移动的元素——一个飞机图片（图1）。
///pc/homepage/dreamweaver/img/dwu065.gif" width="392" height="274">
图1 添加层
选择“Window->Timelines”命令，打开Timelines面板。选中这个层，把它拖动到Timelines面板的第一帧位置（图2）。一个动画栏出现在timeline的第一个通道内，相应的层名（Layer1）显示在该动画栏中。单击动画栏最后关键帧标记，也就是第15帧，此时注意播放头也跟着移动到该处。向后拖动鼠标到第30帧，这样做出来的动画就有30帧了。把页面上layer1层移到屏幕右侧，此时从动画起始位置到结束位置有一线条显示，这就是层的运动轨迹（图3）。
///pc/homepage/dreamweaver/img/dwu066.gif" width="486" height="338">
图2 打开Timelines面板
///pc/homepage/dreamweaver/img/dwu068.gif" width="465" height="330">
图3 拖动图层，产生一个移动轨迹
接下来我们让飞机按曲线移动。在Timelines面板中，再单击第10帧处，单鼠标右键，选“Add Keyframe”（图4），在此处添加了一个关键帧，将页面中的层向上移一下，运动轨迹就变为曲线形状了（图5）。
///pc/homepage/dreamweaver/img/dwu069.gif" width="449" height="343">
图4 添加关键帧
///pc/homepage/dreamweaver/img/dwu070.gif" width="412" height="154">
图5 拖动关键帧，改变运动轨迹为一个曲线
接下来继续增中关键帧，改变层的位置，就可以创建比较复杂的曲线。创建关键帧的快捷方法是：将鼠标移动到要某两帧之间，Ctrl键单击。
按下播放按钮（图6），预览页面上的动画，飞机沿我们刚设计的曲线移动了。
///pc/homepage/dreamweaver/img/dwu074.gif" width="424" height="206">
图6 选中Autoplay和Loop项后预览
如果要创建具有复杂路径的动画，按上面的方法创建一个个关键帧比较麻烦，用拖动层时记录路径的方法就方便多了。我们一起看一下吧！
选中Timelines1，点鼠标右键，选“Remove Timeline”，刚创建的时间轴被删除了。选中层，将光标定位在Timelines面板第一帧处，选择“Modify->Timeline->Record
Path of Layer”命令记录层的路径。注意：如果没有选中层，这条命令是不可用的。
在页面上拖动层，创建想要的运动路径，可以看到一条虚线在鼠标后面，这就是拖动层产生的路径。
释放鼠标，Timeline创建完毕完了，可以看到我们“走过的曲线”，同时也添加了适当数量的关键帧。预览一下动画效果，如果有个别地方动画不流畅，可以进行调整。
下一节
/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法
|
| |
| |