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