利用时间轴制作动画.doc

实训七　利用时间轴制作动画 设计目标： 创建时间轴动画，使飞行器图像在页面上自由飞行，效果如下图所示。 相关知识点： 创建时间轴动画 在时间轴面板中添加关键帧 控制动画速度 改变图像和图层属性 实训内容： 一、准备工作 （一）复制文件 把“实训七 利用时间轴制作动画\实训”中的“materials” 文件夹复制到D：盘根目录。 （二）新建站点 站点名称：利用时间轴制作动画 站点根文件夹：D:\ materials 二、创建时间轴动画 （一）一个简单的直线运动的时间轴动画实例 1．建立一个做直线运动的时间轴动画 操作步骤如下： （1）打开ex9_1.html文档。 （2）在页面中添加一个新图层，在层中插入图像img9_1.gif，然后将图层移动到文档的右上方（动画的起始位置）。 （3）在菜单栏中选择“窗口”→“时间轴”命令打开时面板选层用鼠标拖动图层到时的第一帧处5）当第一次在时间轴中添加对象时，会弹出，告诉你可以改变该层的大小，位置，层顺序，以及可见性。 （6）拖动动画条尾部的关键帧位置到100帧处（注意播放头也跟着移动到该处），将动画图层移动到文档的左上方（动画结束的位置），这时从动画起始位置到结束位置有一条线显示，这就是图层的的运动轨迹，如下图所示。 （7）单击播放按钮，可直接在网页中预览时间轴动画。 （8）选中“自动播放”复选框。保证浏览器中的动画能自动播放。 （9）选中“循环”复选框。保证动画在浏览器中能循环播放。 （10）预览网页。 2．将做直线运动的时间轴动画，改为做曲线运动 操作步骤如下： （1）打开ex9_1.html，将文件另存为ex9_2.html。 （2）在时间轴面板中，选中动画条的第35帧，单击鼠标右键从弹出的快捷菜单中选择“增加关键帧”。 （3）在第35帧处，向下移动图层使运动轨迹呈现曲线状。 （4）按Ctrl键，单击动画条的第70帧，再添加一个关键帧。 （5）在第70帧处，向上移动图层使运动轨迹呈现曲线状，如下图所示。 （6）预览动画效果。 （7）通过预览动画，发现运动速度太快了，可将Fps中的每秒帧数从15改为5，这样可以降低运动速度。 （8）保存网页文件。 （二）创建复杂路径的时间轴动画实例 创建复杂路径的时间轴动画，使动画的运行路线完全由用户设定 操作步骤如下： （1）打开ex9_1.html，将文件另存为ex9_3.html。 （2）在时间轴面板中选中动画条，单击鼠标右键从弹出的快捷菜单中选择“移除时间轴”。 （3）移动图层到动画的起始位置，在菜单栏中选择“修改”→“时间轴”→“录制层路径”命令。 （4）在页面中按自己的意愿拖动图层以创建路径，如下图所示。 （5）在动画的结束位置处释放鼠标，Dreamweaver会自动在时间轴中添加一个动画条，并添加适当数量的关键帧。如下图所示。 （5）选中“自动播放”及“循环”复选框。 （6）保存网页文件，预览动画效果。 三、使用时间轴改变图像和层属性 （一）实现幻灯片效果 实现幻灯片的循环播放效果，使一组图像不停地循环显示 操作步骤如下： （1）新建文档，在文档中插入图象文件img4_3_3.jpg。 （2）确保时间轴面板已打开，选择刚插入的图像，将其拖动到时间轴面板中。 （3）当出现提示框时，单击“确定”按钮，这时在时间轴通道中将出现一个紫色动画条，动画条中显示了图像的名称Image1，如下图所示。 （4）用鼠标将第帧拖到第帧Ctrl键，单击动画条的第10帧，添加一个关键帧。 （6）在属性面板的“源文件”栏旁，单击“浏览文件”按钮，在弹出的“选择图像源文件”对话框中选择源文件img4_3_4.jpg，如下图所示。这样将在第10帧处显示第2张图像。 （7）重复步骤（5）、（6），在动画条的第20帧处添加关键帧，并选择第3个图像文件img4_3_5.jpg。 （8）选中“自动播放”及“循环”复选框。 （10）将网页保存为ex9_4.html，预览动画。 （二）实现图像的渐推式显示效果 使一幅图像从左向右逐渐推出显示，象卷轴一样展开 操作步骤如下： （1）新建文档，在文档中添加一个新图层，并选中该图层。 （2）在属性面板中，将图层的“宽”属性设置为1px，单击“背景图像”旁边的“浏览文件”按钮，从弹出的“选择图像源文件”对话框中，选择图像文件img4_3_3.jpg作为图层的背景图像，如下图所示。 （3）用鼠标拖层到时间轴的第一帧处ex9_5.html。 （7）预览网页，可发现随着层由窄变宽，背景图像也象卷轴一样展开。 四、作业 利用“作业\materials”中提供的素材，完成以下操作： （1）打开素材文件ex1.htm，在页面中制作一个层动画，使图像ex1_girl.gif沿用户任意设定的运行路线运动，效果如“作业\result”文件夹中ex1.ht