行为及其时间轴应用.docVIP

项目十行为及应用 目的?? 学会运用行为实现网页中的动态效果 内容、制作漂浮公告拦 、弹出菜单的设计；、使用行为控制时间轴；步骤?? 1． 制作漂浮公告拦?? 第一步：在准备好的页面上绘制一个层，并给层加上背景，如下图：?? ?? 第二步：在层中插入一行一列的表格，宽和高同时设置成 100% ，并加入“公告栏”，再给它加一个链接。如下图：?? ?? 第三步：打开时间轴面板，右键点击层边缘，弹出属性菜单，点击“添加到时间轴”如下图所示：?? ?? 第四步：点中 15 帧进行拖动到 400 帧。?? ?? ?? 第五步：然后把层从起点拖到终点，这就是这 400 帧层的运动轨迹。?? ?? 第六步：为了让层运动轨迹更加自然，我们在先 200 帧处分别添加关键帧，如下图所示?? ?? 第七步：然后拖动层到理想的位置，如下图，那么它的运动轨迹成了一个抛物线，看起来就比较自然了。?? ?? 第八步：为了使层的运动轨迹更加自然，我们可以依照上一步的方法添加多个关键帧来设置层的运动轨迹。?? 第九步：把时间轴面板上的“自动播放”和“循环”都选上，它们分别表示当页面一打开就运行运动和层运动到了终点后，再到起点循环播放。?? 2．弹出菜单的设计 第一步：新建网页，插入一行四列表格，背景颜色为 #5A85B2 ，在表格中插入图片。第步：选定第二列中图片，打开行为面板，单击右键，在弹出的窗口中选择显示弹出菜单。设定菜单内容和格式，保存预览。　　 使用行为控制时间轴第一步：新建网页，插入层 layer1, 宽 px ，高 px, 在层中插入图片 beijing.gif第步：在层 layer1 中插入个子层layer2在 layer2 中插入图片 1.gif，分别在播放、暂停和停止三个按钮上绘制热点； 第步：保存，预览一下。　　第步：按 ALT+F9 打开时间轴，选定, 拖到时间轴中。拖动最后一个关键帧到第 25 帧。　　在第 5 帧、第 10 帧、第 15 帧、第 20 帧、插入关键帧。并将第 5 帧上图片设为 .jpg, 第 10 帧上图片设为 .jpg, 第 15 帧上图片设为 .jpg, 第 20 帧上图片设为 .jpg. 第步：通过行为控制时间轴。选定, 打开行为面板，时间轴 --- 播放时间轴；　　选定, 时间轴 --- 停止时间轴；　　选定, 时间轴 ---转到时间轴帧：　　保存预览。【实验小结】本次实验中，通过行为的使用，设计了网页中的三种动态效果。