第6章 时间轴和行为课件.ppt
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《第6章 时间轴和行为课件.ppt》由会员分享,可在线阅读,更多相关《第6章 时间轴和行为课件.ppt(53页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第6 6章章 时间轴和行为时间轴和行为 6.1 【案例【案例3333】“体育世界体育世界”网页网页 6.2 【案例【案例3434】添加游动广告的】添加游动广告的“体育世界体育世界”网页网页 6.3 【案例【案例3535】“跟我学计算机跟我学计算机”网页网页调出式菜单调出式菜单 6.4 【案例【案例3636】“北京名胜北京名胜1”网页网页交替变化图像交替变化图像 6.5 【案例【案例3737】“北京名胜北京名胜2”网页网页弹出窗口弹出窗口 6.6 【案例【案例3838】“图像链接翻转图像链接翻转”网页网页 6.7 【案例【案例3939】“跟我学制作表单跟我学制作表单”网页(二)网页(二) 6.
2、8 【案例【案例4040】“控制播放控制播放Flash动画和动画和MIDI音乐音乐”网网页页 6.9 【案例【案例4141】“活动菜单活动菜单”网页网页 6.10 【案例【案例4242】“拼图拼图”网页网页 6.1 【案例【案例3333】“体育世界体育世界”网页网页1“时间轴时间轴”面板面板单击单击“窗口窗口”“时间轴时间轴”菜单命令或按【菜单命令或按【Alt+F9】组合键,即可调出】组合键,即可调出“时时间轴间轴”面板,如图面板,如图6-1-4所示。该面板中的各个工具及其他选项的作用如下。所示。该面板中的各个工具及其他选项的作用如下。(1)“时间轴时间轴”下拉列表框:其内列出了当前页面内所有
3、时间轴动画的名字,下拉列表框:其内列出了当前页面内所有时间轴动画的名字,选中其中一个选项后,相应的动画就会在选中其中一个选项后,相应的动画就会在“时间轴时间轴”面板中显示出来。右击面板中显示出来。右击“时间轴时间轴”面板内部,调出面板内部,调出“时间轴时间轴”快捷菜单,单击该菜单中的快捷菜单,单击该菜单中的“添加时添加时间轴间轴”菜单命令,即可在菜单命令,即可在“时间轴时间轴”下拉列表框内添加一个新的时间轴动画下拉列表框内添加一个新的时间轴动画(默认名称为(默认名称为“Timeline”+序号)。序号)。(2)回放头:播放动画时,它在时间标尺上移动,好像放像机的磁头一样。)回放头:播放动画时,
4、它在时间标尺上移动,好像放像机的磁头一样。用鼠标拖曳它在时间标尺上移动,当它移到某一时间单位处时,相应的动画用鼠标拖曳它在时间标尺上移动,当它移到某一时间单位处时,相应的动画画面就会出现在网页窗口内。画面就会出现在网页窗口内。(3)【播放】按钮:单击它,可以使动画前进一个帧。按住该按钮不放,可)【播放】按钮:单击它,可以使动画前进一个帧。按住该按钮不放,可以向正常方向播放动画。以向正常方向播放动画。(4)【回放】按钮:单击它,可以使动画回退一帧。单击按下该按钮不放,)【回放】按钮:单击它,可以使动画回退一帧。单击按下该按钮不放,可以向相反方向播放动画。可以向相反方向播放动画。(5)【归位】按钮
5、:将动画图像移到起始位置,同时回放头也移动到该位置)【归位】按钮:将动画图像移到起始位置,同时回放头也移动到该位置处。处。(6)“回放头位置回放头位置”(也是当前帧号码)文本框:用来输入显示和设置(也是当前帧号码)文本框:用来输入显示和设置“回回放头放头”所处的时间轴位置号,即当前帧号码。所处的时间轴位置号,即当前帧号码。(7)“速率速率”文本框:用来输入每秒钟播放的帧数。文本框:用来输入每秒钟播放的帧数。(8)“自动播放自动播放”复选框:选中它后,则在网上下载后会自动播放。不选中复选框:选中它后,则在网上下载后会自动播放。不选中它时,需要在使用行为事件时才可以播放。它时,需要在使用行为事件时
6、才可以播放。(9)“循环循环”复选框:选中它后,则循环播放动画,否则只播放一次动画。复选框:选中它后,则循环播放动画,否则只播放一次动画。(10)动画通道:它由许多图层组成,表示可以在一个页面内加入多个时间)动画通道:它由许多图层组成,表示可以在一个页面内加入多个时间轴动画,但最多可以加轴动画,但最多可以加32个。它的左边标有图层的编号,图层编号大的动画个。它的左边标有图层的编号,图层编号大的动画在图层编号小的动画之上。在图层编号小的动画之上。(11)动画条:表示一个动画所占的帧数,上面标有该动画所在层的名字。)动画条:表示一个动画所占的帧数,上面标有该动画所在层的名字。它的起始处和终止处各有
7、一个小圆,表示首帧和终止帧。如果设置了关键帧,它的起始处和终止处各有一个小圆,表示首帧和终止帧。如果设置了关键帧,则关键帧也会有一个小圆。则关键帧也会有一个小圆。(12)行为通道左边标有字母)行为通道左边标有字母“B”,可以在该通道的特定帧使用行为。,可以在该通道的特定帧使用行为。(13)行为帧:加入了行为的帧,它在)行为帧:加入了行为的帧,它在“行为通道行为通道”内。内。(14)时间标尺:给出了与时间对应的帧数码。)时间标尺:给出了与时间对应的帧数码。2直线移动动画的制作直线移动动画的制作下面来使用下面来使用“时间轴时间轴”面板制作一个简单的、沿直线移动的动画。该动画的面板制作一个简单的、沿
8、直线移动的动画。该动画的制作方法如下所述。制作方法如下所述。(1)在页面内插入一个层,给该层起一个名字,例如)在页面内插入一个层,给该层起一个名字,例如“Layer1”。然后在层。然后在层内插入一个图像、动画或输入一些文字等。此处层中插入的是内插入一个图像、动画或输入一些文字等。此处层中插入的是GIF动画,如动画,如图图6-1-6所示。所示。(2)将插有图像或文字的层移到动画的起始位置。)将插有图像或文字的层移到动画的起始位置。(3)单击)单击“窗口窗口”“时间轴时间轴”菜单命令,调出菜单命令,调出“时间轴时间轴”面板。面板。(4)用鼠标将层拖曳到)用鼠标将层拖曳到“时间轴时间轴”面板的动画通
9、道内,或单击面板的动画通道内,或单击“修修改改”“时间轴时间轴”“增加对象到时间轴增加对象到时间轴”菜单命令。这时,菜单命令。这时,“时间轴时间轴”面面板的动画通道内会出现一个动画条。如果选中了板的动画通道内会出现一个动画条。如果选中了“循环循环”复选框,则在动画复选框,则在动画通道中,会同时出现一个通道中,会同时出现一个“动作帧动作帧” ” 。(5)单击选中动画条的终止帧。默认的动画帧数是)单击选中动画条的终止帧。默认的动画帧数是15帧,如果要调整动画的帧,如果要调整动画的帧数,可用鼠标拖曳动画条终止帧的小圆。在改变了终止帧的位置之后,帧数,可用鼠标拖曳动画条终止帧的小圆。在改变了终止帧的位
10、置之后,如果此时选中了如果此时选中了“循环循环”复选框,还应用鼠标拖曳行为通道的行为帧到终止复选框,还应用鼠标拖曳行为通道的行为帧到终止帧的下一个位置处。用鼠标向右拖曳第帧的下一个位置处。用鼠标向右拖曳第1515帧小圆到第帧小圆到第3030帧处,如图所示。帧处,如图所示。(6)用鼠标拖曳动画层到目标处。当松开鼠标左键时,会看到一条直线,表)用鼠标拖曳动画层到目标处。当松开鼠标左键时,会看到一条直线,表示图像移动的路径。示图像移动的路径。在选中在选中“循环循环”复选框的情况下,如果先用鼠标拖曳动画层到目标处,再调复选框的情况下,如果先用鼠标拖曳动画层到目标处,再调整整“时间轴时间轴”面板中终止帧
11、的位置,则还需要用鼠标拖曳调整面板中终止帧的位置,则还需要用鼠标拖曳调整“动作帧动作帧”到到终止帧的下一帧位置处。终止帧的下一帧位置处。(7)按住【播放】按钮不放,即可在网页设计窗口内看到动画。)按住【播放】按钮不放,即可在网页设计窗口内看到动画。 6.2 6.2 【案例【案例3434】添加游动广告的】添加游动广告的“体育世界体育世界”网页网页“时间轴时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。如果动画的移动路径不是直线的,中间有转折点,则转折点处的画面就是关如果动画的移动路径不是直线的,中间有转折点,则转折点处的
12、画面就是关键帧。加入关键帧,可以使沿直线路径移动的动画变为沿曲线或折线路径移键帧。加入关键帧,可以使沿直线路径移动的动画变为沿曲线或折线路径移动的动画,添加关键帧的方法如下。动的动画,添加关键帧的方法如下。(1)单击选中动画条内要加入关键帧的位置,回放头会随之移到此时间位置,)单击选中动画条内要加入关键帧的位置,回放头会随之移到此时间位置,同时回放头回移到此处,用来指示选中的位置。例如,选择第同时回放头回移到此处,用来指示选中的位置。例如,选择第15帧(将终止帧(将终止帧移到第帧移到第30帧处)。帧处)。(2)在动画条内,单击鼠标右键,调出时间轴快捷菜单。再单击该菜单内的)在动画条内,单击鼠标
13、右键,调出时间轴快捷菜单。再单击该菜单内的“增加关键帧增加关键帧”菜单命令,即可在选中的位置处插入一个关键帧,如图所示。菜单命令,即可在选中的位置处插入一个关键帧,如图所示。按住【按住【Ctrl】键,单击要加入关键帧的位置,也可以添加关键帧。】键,单击要加入关键帧的位置,也可以添加关键帧。如果对关键帧的位置不满意,可以用鼠标拖曳关键帧上的小圆到满意的位置。如果对关键帧的位置不满意,可以用鼠标拖曳关键帧上的小圆到满意的位置。如果要删除关键帧,可以单击选中要删除的关键帧,单击鼠标右键,调出时如果要删除关键帧,可以单击选中要删除的关键帧,单击鼠标右键,调出时间轴快捷菜单,再单击该菜单中的间轴快捷菜单
14、,再单击该菜单中的“移除关键帧移除关键帧”菜单命令即可。菜单命令即可。2制作沿曲线路径移动的动画制作沿曲线路径移动的动画方法方法1:单击选中关键帧,用鼠标拖曳动画层到新的位置,即可确定关键帧图:单击选中关键帧,用鼠标拖曳动画层到新的位置,即可确定关键帧图像的位置。此时,动画移动的路径线会变为一条曲线。可以看出,路径线的像的位置。此时,动画移动的路径线会变为一条曲线。可以看出,路径线的起始位置与终止位置不变。如果要改变关键帧图像的位置,可以再用鼠标拖起始位置与终止位置不变。如果要改变关键帧图像的位置,可以再用鼠标拖曳动画层到新的位置。曳动画层到新的位置。按住【播放】按钮不放,即可在网页设计窗口内
15、看到沿曲线路径移动的动画按住【播放】按钮不放,即可在网页设计窗口内看到沿曲线路径移动的动画了。了。方法方法2:可以用鼠标拖曳的方法来制作沿曲线路径移动的动画,设计过程如下。:可以用鼠标拖曳的方法来制作沿曲线路径移动的动画,设计过程如下。在页面内插入一个层,并给该层起一个名字。然后,在层内插入一个图像或在页面内插入一个层,并给该层起一个名字。然后,在层内插入一个图像或输入一些文字等,再将插有图像或文字的层移到动画的起始位置。此处,层输入一些文字等,再将插有图像或文字的层移到动画的起始位置。此处,层中插入的是图像。中插入的是图像。单击选中该层,再单击单击选中该层,再单击“修改修改”“时间轴时间轴”
16、“录制层路径录制层路径”菜单命令,菜单命令,或者单击时间轴快捷菜单中的或者单击时间轴快捷菜单中的“录制层路径录制层路径”菜单命令。菜单命令。在网页设计窗口内,在网页设计窗口内,按照希望的曲线路径,用鼠标拖曳层。随着鼠标拖曳的按照希望的曲线路径,用鼠标拖曳层。随着鼠标拖曳的进行,会产生一条曲线路径线。进行,会产生一条曲线路径线。松开鼠标左键,即可生成复杂曲线路径。此时,松开鼠标左键,即可生成复杂曲线路径。此时,“时间轴时间轴”面板会自动产生面板会自动产生动画条,如图所示。由产生的动画条可以看出,用鼠标拖曳所用的时间越长,动画条,如图所示。由产生的动画条可以看出,用鼠标拖曳所用的时间越长,组成动画
17、的帧数也越多。鼠标拖曳时的转折点越多,自动产生的关键帧也越组成动画的帧数也越多。鼠标拖曳时的转折点越多,自动产生的关键帧也越多。多。按住【播放】按钮不放,即可在网页设计窗口内看到沿曲线路径移动的动画按住【播放】按钮不放,即可在网页设计窗口内看到沿曲线路径移动的动画3动画的更名、删除、复制和移动动画的更名、删除、复制和移动(1)动画的更名:动画的更名:可以直接在可以直接在“时间轴时间轴”面板的列表框内更改动画的名字。面板的列表框内更改动画的名字。另外,可以单击时间轴菜单中的另外,可以单击时间轴菜单中的“重命名时间轴重命名时间轴”菜单命令,调出菜单命令,调出“重命名重命名时间时间轴轴”对话框。在该
18、对话框的对话框。在该对话框的“时间轴名称时间轴名称”文本框内输入新的名字,再单击文本框内输入新的名字,再单击【确定】按钮即可。【确定】按钮即可。(2)动画的删除:动画的删除方法如下。)动画的删除:动画的删除方法如下。删除动画条:单击选中要删除的动画条,按【删除动画条:单击选中要删除的动画条,按【Delete】键或单击】键或单击“编编辑辑”“剪切剪切”菜单命令。菜单命令。删除所有动画条:单击时间轴菜单中的删除所有动画条:单击时间轴菜单中的“移除时间轴移除时间轴”菜单命令。菜单命令。(3)动画的复制:动画的复制方法如下。)动画的复制:动画的复制方法如下。单击选中要复制的动画条,再单击时间轴菜单中的
19、单击选中要复制的动画条,再单击时间轴菜单中的“拷贝拷贝”菜单命令。菜单命令。调整回放头的位置,再单击时间轴菜单中的调整回放头的位置,再单击时间轴菜单中的“粘贴粘贴”菜单命令,即可在选中菜单命令,即可在选中的动画条的右边复制一个动画条。而且可以粘贴到其他页面的的动画条的右边复制一个动画条。而且可以粘贴到其他页面的“时间轴时间轴”面面板中。板中。(4)动画的移动:动画的移动方法如下。)动画的移动:动画的移动方法如下。方法一:单击选中要移动的动画条,再单击时间轴菜单中的方法一:单击选中要移动的动画条,再单击时间轴菜单中的“剪切剪切”菜单命菜单命令。调整回放头的位置,再单击时间轴菜单中的令。调整回放头
20、的位置,再单击时间轴菜单中的“粘贴粘贴”菜单命令,即可将菜单命令,即可将动画条移到回放头所处的位置处,而且可以移动到其他页面的动画条移到回放头所处的位置处,而且可以移动到其他页面的“时间轴时间轴”面面板中。板中。方法二:方法二:可以用鼠标拖曳一个动画条在整个动画通道内移动。按住【可以用鼠标拖曳一个动画条在整个动画通道内移动。按住【ShiftShift】键,单击要移动的动画条,选中多个动画条,鼠标拖曳选中的动画条,即可键,单击要移动的动画条,选中多个动画条,鼠标拖曳选中的动画条,即可同时移动多个动画条。同时移动多个动画条。 6.3 6.3 【案例【案例3535】“跟我学计算机跟我学计算机”网页网
21、页调出式菜调出式菜单单1动作名称及其作用动作名称及其作用行为是动作(行为是动作(Actions)和事件()和事件(Events)的组合。动作就是计算机系统执行)的组合。动作就是计算机系统执行的一个动作,例如,调出一个提示框、执行一段程序或一个函数、播放声音的一个动作,例如,调出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止或影片、启动或停止“时间轴时间轴”面板中的动画等。动作通常是由预先编写好面板中的动画等。动作通常是由预先编写好的的JavaScript程序脚本实现的,程序脚本实现的,Dreamweaver 8自带了一些动作的自带了一些动作的JavaScript程序脚本,可供用
22、户直接调用。用户也可以自己用程序脚本,可供用户直接调用。用户也可以自己用JavaScript语言编写语言编写JavaScript程序脚本,创建新的行为。程序脚本,创建新的行为。事件是指引发动作产生的事情,例如,鼠标移到某对象之上、鼠标单击某对事件是指引发动作产生的事情,例如,鼠标移到某对象之上、鼠标单击某对象、象、“时间轴时间轴”面板中的回放头播放到某一帧等。要创建一个行为,就是要面板中的回放头播放到某一帧等。要创建一个行为,就是要指定一个动作,再确定触发该动作的事件。有时,某几个动作可以被相同的指定一个动作,再确定触发该动作的事件。有时,某几个动作可以被相同的事件触发,则须要指定动作发生的顺
23、序。事件触发,则须要指定动作发生的顺序。Dreamweaver 8采用了采用了“行为行为”面板(也叫面板(也叫“行为控制器行为控制器”)来完成行为中的)来完成行为中的动作和事件的设置,从而实现动态交互效果。动作和事件的设置,从而实现动态交互效果。单击单击“窗口窗口”“行为行为”菜单命令或按【菜单命令或按【Shift+F3】组合键,即可调出】组合键,即可调出“行为行为”面板。面板。单击单击“行为行为”面板中的面板中的“添加行为添加行为 ” ”按钮,调出按钮,调出“动作名称动作名称”菜单,其菜单,其作用如作用如表所示表所示 。再单击某。再单击某 一个动作名称,即可进行相应的动作设置。一个动作名称,
24、即可进行相应的动作设置。动作名称及动作的作用动作名称及动作的作用 序号 动作的英文名称 动作的中文名称 动作的作用 1Swap Image 交换图像 交换图像 2Popup Message 调出信息 调出消息栏 3Swap Image Restore 恢复交换图像 恢复交换图像 4Open Browser Window 打开浏览器窗口 打开新的浏览器窗口 5Drag Layer 拖动层 拖曳层到目标位置 6Control Shockwave or Flash 控制Shockwave 或Flash 控制Shockwave 或Flash影像 7Play Sound 播放声音 播放声音 8Chang
25、e Property 改变属性 改变对象的属性 9-1Play Timeline 时间轴(播放时间轴) 播放时间轴上的动画 9-2Stop Timeline 时间轴(停止时间轴) 停止时间轴上动画的播放 9-3Go To Timeline Frame 时间轴(转到时间轴帧) 跳转到时间轴上的某一帧 10Show-Hide Layers 显示隐藏层 显示或隐藏层 11Show-Menu 显示调出菜单 为图像添加调出菜单 序号 动作的英文名称 动作的中文名称 动作的作用 12Check Plugin 检查插件 检查浏览器中已安装插件的功能 13Check Browser 检查浏览器 检查浏览器的类
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第6章 时间轴和行为课件 时间 行为 课件
![提示](https://www.taowenge.com/images/bang_tan.gif)
限制150内