网页制作实验教程第十五章 创建时间轴.pptVIP

第十五章 创建时间轴 时间轴是很多软件都使用的工具。它通过改变选取对象的移动位置或改变选取对象不同时间的不同状态，来实现一些动画效果。 实验目的： 要求同学们掌握利用增加关键帧的方法来创建层移动的动画效果，熟悉时间轴的基本属性。 实验原理： 时间轴是以根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，其中包含了制作动画时所必需的各种功能。 实验条件： 电脑操作系统Windows XP/2000/98、Dreamweaver 8网页设计软件。 实验四十 通过增加关键帧创建时间轴动画 实验内容： 步骤1 创建一个新的HTML页面，将其命名为“地球绕太阳公转”保存，将光标移至需要插入层处。 步骤2 选择［插入］工具栏的［布局］栏，单击其中的 （层命令）按钮，鼠标变成“+”形。 步骤3 再选择［插入］工具栏的［布局］栏，单击其中的（层命令）按钮，鼠标变成“+”形。 步骤4 选择［窗口］菜单栏的［时间轴］命令，打开［时间轴］面板。 步骤5 将“earth”层移至动画开始的位置并选中“earth”层，选择［修改］菜单栏的［时间轴］命令，点击其中的［增加对象到时间轴］命令，这时［时间轴］面板就增加了一个关于“earth”层的时间轴。 步骤6 将动画轴拖至第60帧，选中第15帧，然后点击鼠标右键，从快捷菜单中选择［增加关键帧］命令，则在第15帧增加了一个“关键帧”。 步骤7 将“earth”层拖至“sun”层的正下方，这个路径与第1帧到第15帧相对应。 步骤8 按同样的方法在第30帧、第45帧分别创建关键帧，“earth”层的位置相对拖至“sun”层的正右方、正上方。一个完整的地球绕太阳公转的路径就被时间轴记录下来了。 步骤9 选中［时间轴］面板的［自动播放］和［循环］选项。 步骤10 单击F12，在浏览器中预览效果。 实验四十一 通过拖动路径创建时间轴动画 如果想创建具有复杂路径的动画，则可以直接记录下拖动层时的路径，这会比单纯地生成关键帧更为方便有效。 实验内容： 步骤1 创建一个新的HTML页面，将其命名为“地球绕太阳公转”保存，将光标移至需要插入层处。 步骤2 选择［插入］工具栏的［布局］栏，单击其中的 （层命令）按钮，鼠标变成“+”形。 步骤3 再选择［插入］工具栏的［布局］栏，单击其中的 （层命令）按钮，鼠标变成“+”形。 步骤4 选择［窗口］菜单栏的［时间轴］命令，打开［时间轴］面板。 步骤5 将“earth”层移至动画开始的位置并选中“earth”层，选择［修改］菜单栏的［时间轴］命令，点击其中的［录制层路径］命令。 步骤6 在页面上按照地球绕太阳公转的路径拖动图层，创建一条路径。 步骤7 在动画结束的位置释放鼠标，Dreamweaver会自动在时间轴中添加一个动画条，而且带有相应的帧数。 步骤8 单击F12，在浏览器中预览效果。 学习与思考 根据本章所讲的时间轴功能，希望同学们按照以下要求来完善你的个人主页: 1.为你的个人主页设置一个动态可漂浮的小型广告牌。 2.为你的引导页设置一个多层显现的动态图片。 3.为你的个人主页设置几幅动态的小图像。 * * 实验四十 通过增加关键帧创建时间轴动画 实验四十一 通过拖动路径创建时间轴动画 *