第11章时间轴精选文档.ppt

《第11章时间轴精选文档.ppt》由会员分享，可在线阅读，更多相关《第11章时间轴精选文档.ppt（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第11章时间轴本讲稿第一页，共十二页本 章 主 要 内 容n了解Dreamweaver 8中时间轴的概念及作用n熟悉时间轴面板上各项属性n掌握时间轴的创建和修改n掌握使用时间轴来创建动画本讲稿第二页，共十二页创 建 时 间 轴1.设置时间轴的面板属性设置时间轴的面板属性(1).打开时间轴面板打开时间轴面板执行菜单命令“窗口/时间轴”（Alt+F9）(2).面板属性面板属性n时间轴名称：在时间轴面板上可以同时存在多个时间轴（默认的名称为Timeline1、Timeline2、Timeline3），在时间轴名称下拉名称选择文本框中显示的就是当前的时间轴n首选按钮：单击 按钮时，不管时间轴目前在哪个

2、位置，都会移动到第一帧所在的位置n前一帧按钮：单击 按钮，将播放头向左移动一帧。单击此按钮并按住鼠标左键不放，可以连续反向播放时间轴n当前帧：显示目前正处于哪一帧位置本讲稿第三页，共十二页创 建 时 间 轴后一帧：单击 按钮时，将播放头向右移动一帧。单击此按钮并按住鼠标左键不放，可以连续正向播放时间轴播放速度：显示当前的播放速度，单位为FPS（帧/每秒）。默认值为15，增加帧数值，则动画播放的速度将加快，反之减慢自动播放选项：选 中 项，则时间轴当所在页在浏览器中打开时自动播放。单击选择“自动播放”时，实际上会向页附加一个行为，该行为将在页加载时执行“播放时间轴”操作循环播放选项：选中 项，使

3、页面在浏览器中打开时当前时间轴可以无限循环播放。单击选择“循环”时，实际上将“转到时间轴帧”操作插入到动画最后一帧后的“行为”通道，用户也可编辑此行为的参数以定义循环的次数本讲稿第四页，共十二页创 建 时 间 轴图层条：指示插入的对象，如“层”等。图层通道：它是用于编辑图层的空间关键帧；帧是时间帧最基本的组成单位，而有小圆圈标记的关键帧，关键帧实质上为可以变化的帧，一个动往往只有几个关键帧，而普通帧则由计算机自动生成行为通道：显示在指定帧中（一般为关键帧）选择要运行的行为本讲稿第五页，共十二页创建一个时间轴创建一个时间轴(1).概述概述 时间轴是通过改变层的位置、大小、可见性以及叠放顺序来创建

4、动画的，时间轴只能移动层。因此，如果要移动图像或文本而产生动画效果，就要先使用对象（Object）面板中的层（Layer）按钮创建层，再将图像、文本或其他类型的内容插入到层中，然后通过移动层来移动这些元素。最简单的时间轴动画就是沿着一条轨迹来移动包含图片或文字的层。(2).制作一个简单的动画制作一个简单的动画 让一个层从窗口的左上角沿对角线按一定的速度移动到窗口的右下角。具体操作步骤如下：n插入动画元素到层中：执行菜单命令“插入/布局对旬/层”，在页面上插入空白层，然后在该层中插入图片或文本并调整好层的大小，最后把层移到动画的起始位置本讲稿第六页，共十二页创建一个时间轴创建一个时间轴打开时间轴

5、面板：执行菜单命令“窗口/时间轴”（Alt+F9）即可显示时间轴面板创建对象的时间轴：选择要制作动画的层，确保已选择了所需的元素。单击标记或层选择柄，或者使用“层”面板选择一个层，当选定一个层后，它的周围将出现调整柄。通过执行菜单命令“修改/时间轴/在时间轴上添加对象”，或者直接将选定层拖至“时间轴”面板中，即可创建选中层的时间轴。此时一个条将出现在时间轴的第一个通道中，同时层的名称将在该条中出现设定动画的运动路线：为了敲定该层的运动路线，首先单击位于图层条末端的关键帧标记，然后在页面上将层移到它在动结束时应处于的位置设置动画的相关属性：根据实际情况，在“时间轴”面板中，还可以设置动画的运动速

6、度、是否自动播放和是否循环播放。本讲稿第七页，共十二页设置和操作时间轴1.添加关键帧添加关键帧关键帧：指可以发生或添加变化的帧要想在指定的时间轴上添加一个关键帧，方法如下：n按住Ctrl键并单击时间轴上某帧n单击选中时间轴，然后从右键菜单中选择“增加关键帧”命令n执行菜单命令“修改/时间轴/增加关键帧”n单击选中时间轴，然后从“时间轴”面板右上角的下拉菜单区 选择“增加关键帧”2.删除关键帧删除关键帧删除关键帧的方法：n从右键菜单中选择“移除关键帧”n执行菜单命令“修改/时间轴移除关键帧”n从“时间轴”面板右上角的下拉菜单菜单区 选择“移除关键帧”本讲稿第八页，共十二页设置和操作时间轴3.修改

7、对象修改对象 利用Dreamweaver 8所提供的“改变对象”功能，它能够实现只创建一次动画动画的运动轨迹，然后将其应用于其他多个层，最终使得多外层具有完全相同的运动轨迹的效果。具体操作步骤如下：n在“时间轴”面板中选中“Layer1”并从右键菜单中选择“拷贝”命令将其复制n单击“时间轴”面板的任一帧，然后在该帧处粘帖动画轨迹，这时会发现在“时间轴”面板中存在着两个完全一样的运动轨迹（注意都为“Layer1”，说明都是Layer层的）n选中后一个拷贝运动轨迹并单击右键，从弹出菜单中选择“改变对象”，则会弹出“更改对象”对话框n在“更改对象”对话框的下拉选择框中选择要动态变化的对象本讲稿第九页

8、，共十二页设置和操作时间轴4.增加行为增加行为通过以下步骤可以实现当鼠标移动到运动的图层上则立刻停止运动：n在“时间轴”面板中选中运动轨迹中的某一帧（最好是关键帧），然后单击右键，在弹出的菜单中选择“添加行为”，则会立即显示“行为面板”n在“行为面板”中单击添加行为按钮 ，再在其下拉列表中选择“时间轴/停止时间轴”n在弹出的“停止时间轴”对话框中选择欲停止的时间轴n最后再回到“行为面板”，在左边的事件列表中选择“OnMouseOver”本讲稿第十页，共十二页设置和操作时间轴通过以下步骤让动画运动到某一帧时自动弹出一个信息框：n打开行为面板n在“行为面板”中单击添加行为按钮 ，在其下拉菜单中选择

9、“弹出信息”n在“弹出的信息”对话框中输入欲显示的消息并按“确定”按钮关闭此对话框5.在时间轴上改变图像和图层的属性在时间轴上改变图像和图层的属性 现在有很多网页的页面中有按幻灯片方式播放图像的功能，即在同一个位置按一定的时间间隔显示若干幅图片。这一效果的实现方法如下：n在页面中插入第一幅图片，选中该图片，执行菜单命令“修改/时间轴/添加对象到时间轴”（Ctrl+Alt+Shift+T），会发现在“时间轴”面板中自动添加了一个时间轴Timeline1，且标识为“Image1”，再把时间轴Timeline1的长度设置为45帧本讲稿第十一页，共十二页设置和操作时间轴在时间轴Timeline1第15帧的位置上添加一个关键帧，选择图片，再单击“属性”面板“源文件”文本框旁的文件夹图标，然后浏览到第2帧图片并将选 定在时间轴上Timeline1第30帧的位置处添加一个关键帧，选择图片，再单击“属性”面板“源文件”文本框旁的文件夹图标，然后浏览到第3幅图片将其选定在“时间轴”面板中把“自动播放”选项选中，再按F12键就可以浏览效果了本讲稿第十二页，共十二页