Dreamweaver网页设计案例教程 沈大林 等 第6章 时间轴和行为

《Dreamweaver网页设计案例教程 沈大林 等 第6章 时间轴和行为》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章时间轴和行为6.1【案例33】“体育世界”网页6.2【案例34】添加游动广告的“体育世界”网页6.3【案例35】“跟我学计算机”网页—调出式菜单6.4【案例36】“北京名胜1”网页—交替变化图像6.5【案例37】“北京名胜2”网页—弹出窗口6.6【案例38】“图像链接翻转”网页6.7【案例39】“跟我学制作表单”网页（二）6.8【案例40】“控制播放Flash动画和MIDI音乐”网页6.9【案例41】“活动菜单”网页6.10【案例42】“拼图”网页6.1【案例33】“体育世界”网页1．“时间轴”面板单击“窗口”→“时间轴”菜单命令或按【Alt+F9】组合键，即可调出“时间轴

2、”面板，如图6-1-4所示。该面板中的各个工具及其他选项的作用如下。（1）“时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名字，选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。右击“时间轴”面板内部，调出“时间轴”快捷菜单，单击该菜单中的“添加时间轴”菜单命令，即可在“时间轴”下拉列表框内添加一个新的时间轴动画（默认名称为“Timeline”+序号）。（2）回放头：播放动画时，它在时间标尺上移动，好像放像机的磁头一样。用鼠标拖曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面就会出现在网页窗口内。（3）【播放】按钮：单击它，可以使动画前进一个帧

3、。按住该按钮不放，可以向正常方向播放动画。（4）【回放】按钮：单击它，可以使动画回退一帧。单击按下该按钮不放，可以向相反方向播放动画。（5）【归位】按钮：将动画图像移到起始位置，同时回放头也移动到该位置处。（6）“回放头位置”（也是当前帧号码）文本框：用来输入显示和设置“回放头”所处的时间轴位置号，即当前帧号码。（7）“速率”文本框：用来输入每秒钟播放的帧数。（8）“自动播放”复选框：选中它后，则在网上下载后会自动播放。不选中它时，需要在使用行为事件时才可以播放。（9）“循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。（10）动画通道：它由许多图层组成，表示可以在一个

4、页面内加入多个时间轴动画，但最多可以加32个。它的左边标有图层的编号，图层编号大的动画在图层编号小的动画之上。（11）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。（12）行为通道左边标有字母“B”，可以在该通道的特定帧使用行为。（13）行为帧：加入了行为的帧，它在“行为通道”内。（14）时间标尺：给出了与时间对应的帧数码。2．直线移动动画的制作下面来使用“时间轴”面板制作一个简单的、沿直线移动的动画。该动画的制作方法如下所述。（1）在页面内插入一个层，给该层起一个名字，例如

5、“Layer1”。然后在层内插入一个图像、动画或输入一些文字等。此处层中插入的是GIF动画，如图6-1-6所示。（2）将插有图像或文字的层移到动画的起始位置。（3）单击“窗口”→“时间轴”菜单命令，调出“时间轴”面板。（4）用鼠标将层拖曳到“时间轴”面板的动画通道内，或单击“修改”→“时间轴”→“增加对象到时间轴”菜单命令。这时，“时间轴”面板的动画通道内会出现一个动画条。如果选中了“循环”复选框，则在动画通道中，会同时出现一个“动作帧”。（5）单击选中动画条的终止帧。默认的动画帧数是15帧，如果要调整动画的帧数，可用鼠标拖曳动画条终止帧的小圆。在改变了终止帧的位置之后，如果此时

6、选中了“循环”复选框，还应用鼠标拖曳行为通道的行为帧到终止帧的下一个位置处。用鼠标向右拖曳第15帧小圆到第30帧处，如图所示。（6）用鼠标拖曳动画层到目标处。当松开鼠标左键时，会看到一条直线，表示图像移动的路径。在选中“循环”复选框的情况下，如果先用鼠标拖曳动画层到目标处，再调整“时间轴”面板中终止帧的位置，则还需要用鼠标拖曳调整“动作帧”到终止帧的下一帧位置处。（7）按住【播放】按钮不放，即可在网页设计窗口内看到动画。6.2【案例34】添加游动广告的“体育世界”网页“时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。如果动画的移动路径不是直线的，中间有转折点，则

7、转折点处的画面就是关键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或折线路径移动的动画，添加关键帧的方法如下。（1）单击选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置，同时回放头回移到此处，用来指示选中的位置。例如，选择第15帧（将终止帧移到第30帧处）。（2）在动画条内，单击鼠标右键，调出时间轴快捷菜单。再单击该菜单内的“增加关键帧”菜单命令，即可在选中的位置处插入一个关键帧，如图所示。按住【Ctrl】键，单击要加入关键帧的位置，也可以添加关键帧。如果对关键