第八章网页动态效果实例层实例.pptVIP

第八章网页动态效果实例 本章要点 龟兔赛跑制作 开始按钮的设置 钟摆制作 文字从大到小变化 会变化清晰度的图片 会变化大小的图片 屏幕抖动 紧随鼠标游动的星星 改变文本的显示效果 模拟两球相撞 10．1龟兔赛跑 准备工作：制作或在网上下载龟和兔的图像。 原理：利用时间轴和层相结合制作动画效果。主要的动态内容是两个运动的层，层中分别放置龟和兔的图形。时间轴的设置：龟的时间轴是一段匀速的运动，而兔的时间轴将分为三段，第一段兔运动的快，第二段兔休息，第三段兔加快速度，但迟于龟到达终点。 具体的操作步骤 （1）新建一个页面，可以设置背景图像来增加效果。 （2）在页面上插入两个层，分别为Layer1 和Layer2。 （3）分别将龟和兔的图片插入Layer1 和Layer2层中，并将两个层拖到页面的右侧作为起点位置。 （4）打开“窗口”菜单，选择“时间线”命令，出现“时间线”面板。 （5）选中Layer1，在“时间线”面板中单击按钮，在弹出的命令中选择“添加对象”命令，这时时间线上添加了15帧的动画。 （6）选中第15帧（该处的小圆圈代表关键帧），向右拖动到第50帧，这时为了延长动画的播放时间。 （7）选中第50帧，在页面上拖动层到到最左侧，这就是赛跑的终点位置。这样有关龟的动画就设置好了。 具体的操作步骤 （8）选中Layer2，在“时间线”面板中单击按钮，在弹出的命令中选择“添加对象”命令，这时在第二根时间线上添加15帧动画。 （9）选中第15帧动画，在页面上将Layer2拖动到页面中间，其位置要领先于龟。 （10）将时间线上的红色指针移到第16帧位置，在“时间线”面板中单击按钮，在弹出的命令中选择“添加对象”命令，这时在第二根时间线上添加第二段15帧动画。 （11）选中第30帧，将Layer2略微拖动一点，使龟落后于兔。 （12）将时间线上的红色指针移到第31帧位置，在“时间线”面板中单击按钮，在弹出的命令中选择“添加对象”命令，这时在第二根时间线上添加第三段15帧动画。 （13）选中第45帧向右拖动增加到60帧，这样Layer2的帧比Layer1多十帧。如果以每秒5帧的速度播放动画，兔比龟将晚2秒钟到达终点。 （14）选中时间轴面板上的“自动播放”复选框，浏览者进入页面时赛跑自动开始。 具体的设置情况如图10-1所示，为了清晰起见页面中未设施其它对象，在实际制作时可以考虑插入背景图片和声音以渲染气氛。 开始按钮的设置 为龟兔赛跑设置一个开始按钮 准备工作：在页面上恰当位置，插入一个按钮图片，该按钮可以插入层中，使其在页面上的安放位置比较灵活。 原理：利用时间轴和层相结合制作动画效果。利用10.1节的结果，给按钮图片设置一个行为，触发事件是“onClick”，动作为“播放时间轴”。 具体操作步骤 （1）在10.1节的页面上增加一个层，在层中插入按钮图片。 （2）选中层中的图片，在行为面板中单击添加按钮，在弹出的命令菜单中选择“时间轴”命令，在选择“播放时间轴”子命令。这样在行为面板中就添加了一个行为。 （3）该行为的触发事件如果不是“onClick”，单击按钮，将行为的触发事件改为“onClick”。设置效果图所示。 具体操作步骤 钟摆 准备工作：制作或下载一个座钟的图像。在Fireworks中编辑该图像，为该图像增加一个摆，其中一幅图像的摆在左侧，另一幅图像的摆在右侧，分别保存着两幅图像备用。 原理：利用时间轴和层相结合制作动画效果。主要的设计是两个运动的层，层中分别放置两个钟摆的图形，当显示第一个钟时，第二个就隐藏起来，反之亦然。 具体的操作步骤： （1）新建一个页面，可以设置背景增加效果。 （2）在页面上插入两个层，分别为Layer1 和Layer2 （3）分别将钟摆图像插入Layer1 和Layer2层中，将两个图片和两个层的大小设置为同样大小，并将两个层准确的重叠起来。 （4）打开“窗口”菜单，选择“时间线”命令，出现“时间线”面板。 （5）选中Layer1，在“时间线”面板中单击按钮，在弹出的命令中选择“添加对象”命令，这时时间线上添加了15帧的动画。 （6）选中第15帧（该处的小圆圈代表关键帧），向左拖动缩减到第2帧，这时为了缩短动画的播放时间。 （7）选中Layer2，在“时间线”面板中单击按钮，在弹出的命令中选择“添加对象”命令，这时在第二根时间线上添加15帧动画。 （8）选中第15帧，向左拖动缩减到第2帧，这时为了缩短动画的播放时间。 具体的操作步骤： （9）选中第一帧上方的行为线，单击鼠标右键，在弹出得快捷菜单中选择“添加行为”命令，出现的“添加行为”面板。 （10）在出现的“添加行为”面板中单击添加按钮，出现动作命令菜单，在菜单中选择“显示-隐藏层”命令，出现“显示-