资源预览内容
第1页 / 共65页
第2页 / 共65页
第3页 / 共65页
第4页 / 共65页
第5页 / 共65页
第6页 / 共65页
第7页 / 共65页
第8页 / 共65页
第9页 / 共65页
第10页 / 共65页
亲,该文档总共65页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
163 第 第 6 6 章 章 时间轴和行为时间轴和行为 6.1 “时间轴”面板和动画制作 【相关知识】 “时间轴”面板和直线移动动画的制作 “时间轴”面板是一种用来控制网页中层的属性随时间变化而改变的工具,利用它可以产生动画效 果。 注意, Dreamweaver MX 2004 的最初版本将原来 Dreamweaver MX 的时间轴功能取消了, 而 Dreamweaver 8 版本又将时间轴功能恢复了。 1 “时间轴”面板 单击“窗口”“时间轴”菜单命令或按 Alt+F9 组合键,即可调出“时间轴”面板,如图 6-1-1 所 示。该面板中的各个工具及其他选项的作用如下。 164 图 6-1-1 “时间轴”面板 (1) “时间轴”下拉列表框:其内列出了当前页面内所有时间轴动画的名称,选中其中一个选项后, 165 相应的动画就会在“时间轴”面板中显示出来。鼠标右键点击“时间轴”面板内部,调出“时间轴”快 捷菜单,单击该菜单中的“添加时间轴”菜单命令,即可在“时间轴”下拉列表框内添加一个新的时间 轴动画(默认名称为“Timeline”+序号) 。 (2)回放头:播放动画时,它在时间标尺上移动,好像放映机的磁头一样。用鼠标拖曳它在时间标 尺上移动,当它移到某一时间单位处时,相应的动画画面就会出现在网页窗口内。 (3) “播放”按钮 :单击它,可以使动画前进一帧。按住该按钮不放,可以向正常方向播放动画。 (4) “回放”按钮 :单击它,可以使动画回退一帧。按住该按钮不放,可以向相反方向播放动画。 (5) “归位”按钮 :将动画图像移到起始位置,同时回放头也移动到该位置处。 (6) “当前帧号码” (也是回放头当前位置)文本框:用来显示和设置“回放头”所处的时间轴位置 号,即当前帧号码。 166 (7) “速率”文本框:用来输入每秒钟播放的帧数。 (8) “自动播放”复选框:选中它后,从网上下载后会自动播放。不选中它时,需要在使用行为事 件时才可以播放。 (9) “循环”复选框:选中它后,则循环播放动画,否则只播放一次动画。 (10)动画通道:它由许多图层组成,表示可以在一个页面内加入多个时间轴动画,但最多可以加 32 个。它的左边标有图层的编号,图层编号大的动画在图层编号小的动画之上。 (11)动画条:表示一个动画所占的帧数,上面标有该动画所在层的名称。它的起始处和终止处各 有一个小圆,表示首帧和终止帧。如果设置了关键帧,则关键帧也会有一个小圆。 (12)行为通道左边标有字母“B” ,可以在该通道的特定帧使用行为。 (13)行为帧:加入了行为的帧,它在“行为通道”内。 167 (14)时间标尺:给出了与时间对应的帧数码。 2直线移动动画的制作 下面使用“时间轴”面板制作一个简单的、沿直线移动的动画。该动画的制作方法如下。 (1)在页面内插入一个层,给该层起一个名字,例如“Layer1” ,然后在层内插入一个图像、动画 或输入一些文字等。此处层中插入的是 GIF 动画,如图 6-1-2 所示。 (2)将插有图像或文字的层移到动画的起始位置。 (3)单击“窗口”“时间轴”菜单命令,调出“时间轴”面板。 (4)用鼠标将层拖曳到“时间轴”面板的动画通道内,或单击“修改”“时间轴”“增加对象 到时间轴”菜单命令。这时, “时间轴”面板的动画通道内会出现一个动画条。如果选中了“循环”复 选框,则在动画通道中会同时出现一个动作帧 。 168 (5)默认的动画帧数是 15 帧,如果要调整动画的帧数,可用鼠标拖曳动画条终止帧的小圆。在改 变了终止帧的位置之后,如果此时选中了“循环”复选框,还应用鼠标拖曳行为通道的行为帧到终止帧 的下一个位置处。选中动画条的终止帧,用鼠标向右拖曳第 15 帧小圆到第 30 帧处,如图 6-1-3 所示。 图 6-1-2 层中插入的 GIF 动画 图 6-1-3 动画通道内出现一个动画条 (6)用鼠标拖曳动画层到目标处,当松开鼠标左键时,会看到一条直线,表示图像移动的路径,如 图 6-1-4 所示。 在选中“循环”复选框的情况下,如果先用鼠标拖曳动画层到目标处,再调整“时间轴”面板中终 169 止帧的位置,则还需要用鼠标拖曳调整动作帧 到终止帧的下一帧位置处。 图 614 表示图像移动路径的一条直线 (7)按住“播放”按钮 不放,即可在网页设计窗口内看到动画。 【相关知识】制作沿曲线路径移动的动画 1添加关键帧 “时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。如果动画的移动路径 不是直线的,中间有转折点,则转折点处的画面就是关键帧。加入关键帧,可以使沿直线路径移动的动 170 画变为沿曲线或折线路径移动的动画。添加关键帧的方法如下。 (1)单击动画条内要加入关键帧的位置,回放头会随之移到此时间位置,同时回放头回移到此处, 用来指示选中的位置。例如,选择第 15 帧(将终止帧移到第 30 帧处) 。 (2)右击“时间轴”面板中的动画条,调出时间轴快捷菜单,再单击该菜单中的“增加关键帧”菜 单命令,即可在选中的位置处插入一个关键帧,如图 6-1-5 所示。按住 Ctrl 键单击要加入关键帧的位 置,也可以添加关键帧。 2移动和删除关键帧 (1)移动关键帧:如果对关键帧的位置不满意,可以用鼠标拖曳关键帧上的小圆。 (2)删除关键帧:如果要删除关键帧,可以选中要删除的关键帧,单击鼠标右键,调出时间轴快捷 菜单,再单击该菜单中的“移除关键帧”菜单命令即可。 171 3制作沿曲线路径移动的动画 (1)方法 1:单击选中关键帧,用鼠标拖曳动画层到新的位置,即可确定关键帧图像的位置。此时, 动画移动的路径线会变为一条曲线,如图 6-1-6 所示。大家可以看出,路径线的起始位置与终止位置不 变。如果要改变关键帧图像的位置,可再用鼠标拖曳动画层到新的位置。 按住“播放”按钮 不放,即可在网页设计窗口内看到沿曲线路径移动的动画了。 图 6-1-5 加入关键帧后的“时间轴”面板 图 6-1-6 曲线路径线 172 (2)方法 2:可以用鼠标拖曳的方法来制作沿曲线路径移动的动画,操作方法如下。 在页面内插入一个层,并给该层起一个名字,然后在层内插入一个图像或输入一些文字等,再 将插有图像或文字的层移到动画的起始位置。此处,层中插入的是图像。 选中该层,再单击“修改”“时间轴”“录制层路径”菜单命令,或者单击时间轴快捷菜 单中的“录制层路径”菜单命令。 在网页设计窗口内,按照希望的曲线路径,用鼠标拖曳层。随着鼠标的拖曳,会产生一条曲线 路径线,如图 6-1-7 所示。 松开鼠标左键, 即可生成复杂的曲线路径。 此时, “时间轴” 面板会自动产生动画条, 如图 6-1-8 所示。由产生的动画条可以看出,用鼠标拖曳所用的时间越长,组成动画的帧数也越多。鼠标拖曳时的 转折点越多,自动产生的关键帧也越多。 173 按住“播放”按钮 不放,即可在网页设计窗口内看到沿曲线路径移动的动画。 图 6-1-7 用鼠标拖曳层产生一条曲线路径线 图 6-1-8 “时间轴”面板内自动产生的动画条 【相关知识】动画的更名、删除、复制和移动 1动画的更名 动画的更名方法如下。 174 (1)直接在“时间轴”面板的列表框内更改动画的名称。 (2)单击时间轴菜单中的“重命名时间轴”菜单命令,调出“重命名时间轴”对话框,如图 6-1-9 所示。在该对话框的“时间轴名称”文本框内输入新名称,再单击“确定”按钮即可。 图 619 “重命名时间轴”对话框 2动画的删除 动画的删除方法如下。 (1)删除动画条:选中要删除的动画条,按 Delete 键或单击“编辑”“剪切”菜单命令。 175 (2)删除所有动画条:单击时间轴菜单中的“移除时间轴”菜单命令。 3动画的复制 动画的复制方法如下。 (1)选中要复制的动画条,再单击时间轴菜单中的“拷贝”菜单命令。 (2)调整回放头的位置,再单击时间轴菜单中的“粘贴”菜单命令,即可在选中的动画条右边复制 一个动画条。用户也可以将复制的内容粘贴到其他页面的“时间轴”面板中。 4动画的移动 动画的移动方法如下。 (1)选中要移动的动画条,再单击时间轴菜单中的“剪切”菜单命令。调整回放头的位置,再单击 时间轴菜单中的“粘贴”菜单命令,即可将动画条移到回放头所处的位置处,而且可以移动到其他页面 176 的“时间轴”面板中。 (2)用鼠标拖曳一个动画条在整个动画通道内移动;按住 Shift 键单击要移动的动画条,选中多个 动画条,用鼠标拖曳选中的动画条,即可同时移动多个动画条。 6.2 动作和事件 行为是动作(Actions)和事件(Events)的组合。动作就是计算机系统执行的一个动作,例如, 调出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中的动画等。 动作通常是由预先编写好的 JavaScript 程序脚本实现的。 Dreamweaver 8 自带了一些动作的 JavaScript 程序脚本,可供用户直接调用,用户也可以自己用 JavaScript 语言编写 JavaScript 程序脚本,创建新 的行为。 177 事件是指引发动作产生的事情,例如,鼠标移到某对象之上、鼠标单击某对象、 “时间轴”面板中 的回放头播放到某一帧等。要创建一个行为,就要指定一个动作,再确定触发该动作的事件。有时,某 几个动作可以被相同的事件触发,则需要指定动作发生的顺序。 Dreamweaver 8 采用了“行为”面板(也叫“行为控制器” )来完成行为中动作和事件的设置,从 而实现动态交互效果。 【相关知识】动作和事件名称及其作用 1动作名称及其作用 单击“窗口”“行为”菜单命令或按 Shift+F3 组合键,即可调出“行为”面板,如图 6-2-1 所示。 单击“行为”面板中的“添加行为”按钮 ,调出“动作名称”菜单,再单击某一个动作名称,即可进 行相应的动作设置。进行完动作的设置后,在“行为”面板的列表框内会显示出动作的名称与默认的事 178 件名称。大家可以看到,在选中动作名称后, “事件”栏中默认的事件名称右边会出现一个 按钮。 图 621 “行为”面板 “动作名称”菜单内各动作的作用如表 6-2-1 所示。注意,对于选择不同的浏览器,可以使用的 动作也不一样,版本低的浏览器可以使用的动作较少。当选定的对象不一样时, “动作名称”菜单中可 179 以使用的动作也不一样。 表 6-2-1 动作名称及其作用 序 号 动作的英文名称 动作的中文名称 动作的作用 1 Swap Image 交换图像 交换图像 2 Popup Message 调出信息 调出消息栏 3 Swap Image Restore 恢复交换图像 恢复交换图像 4 Open Browser Window 打开浏览器窗口 打开新的浏览器窗口 5 Drag Layer 拖曳层 拖曳层到目标位置 6 Control Shockwave or Flash 控制 Shockwave 或 Flash 控制 Shockwave 或 Flash 影像 7 Play Sound 播放声音 播放声音 8 Change Property 改变属性 改变对象的属性 180 续表 序 号 动作的英文名称 动作的中文名称 动作的作用 9-1 Play Timeline 时间轴(播放时间轴) 播放时间轴上的动画 9-2 Stop Timeline 时间轴(停止时间轴) 停止时间轴上动画的播放 9-3 Go To Timeline Frame 时间轴(转到时间轴帧) 跳转到时间轴上的某一帧 10 Show-Hide Layers 显示隐藏层 显示或隐藏层 11 Show-Menu 显示调出菜单 为图像添加调出菜单 12 Check Plugin 检查插件 检查
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号