职称计算机辅导：Dreamweaver应用3
三、关于Timeline的技巧1．通过拖曳来创建复杂的路径
如果你要创建一个具有复杂路径的动画，通过记录下你拖曳层时的路径将比创建一个个单独的关键帧更有效率。
我将以下面的例子来说明如何通过拖曳一个路径来创建一个Timeline。
1）选择一个层。在这个例子中，层中含有一个工作室的LOGO图像。
2）将层移动到动画的起始处。
3）选择Modify > Timeline > Record Path of Layer（记录层的路径）。
4）拖曳层的选择柄在页面上绘制你希望的动画运动路径，到达动画希望的停止位置时释放鼠标按钮。动画的运动路径在页面上被绘制记录下来。如(图)
与此同时，Dreamweaver会将一个动画条添加到Timeline中，并自动的设置所有必要的关键帧。
5）选择Autoplay复选框，按F12在浏览器中欣赏一下吧。
2．编辑Timeline
在定义了一个Timeline的基本组件后，根据需要就可以对其进行一些有用的编辑。例如增加或删除帧、改变动画的开始时间等等。
要编辑一个Timeline，你可以做下列事情：
● 要使动画持续的时间更长，或想让动画的改变更柔和一些，产生慢动作的效果。你可以拖曳动画条结束帧的标记到更远的帧位，在拖动的过程中，你将发现在动画条中的所有的关键帧的位置都在动态的改变（维持它们之间的相对位置不变）。
例如：要改变下面这个动画条的持续时间。
动画条的结束帧被拖动之前（共有25帧）。
动画条的结束帧被拖动之后（共有40帧）。
可以看到，动画的运动轨迹并没有因动画持续时间的延长而改变，因此你可以使用这种方法产生慢动作的效果。
如果只想拖曳结束帧，可以通过在拖曳结束帧时按住Ctrl键，来阻止其他关键帧的位置改变。
● 要让层更早或更迟些到达指定的关键帧的位置，可以将这个关键帧的标记向左或向右拖动。 ● 要改变一个动画的开始时间，你可以拖曳与这个动画有关的一个或多个动画条向左（开始的时间会更早）或向右（开始的时间会更晚）移动。
注意：要想拖曳整个动画条，你需要点击动画条中的非关键帧，然后拖曳这个非关键帧即可。另外，按住Shift键可一次选择多个动画条并可将它们一起拖曳。
职称计算机辅导：Dreamweaver应用3
</p>例如：要改变下面这个动画条的开始时间。动画的开始时间被改变之前。此时，动画从页面被装载时就开始播放。
动画的开始时间被改变之后。此时，动画的起始帧位为16帧，因为FPS中设置的数值为15帧，即让浏览器每秒播放15帧，因此，在动画条的开始时间被改变之后，动画大约将在页面已经被装载1秒钟之后才开始播放。
● 要想将整个动画的位置进行页面上的转移。你可以在Timeline面板中选择整个动画条，然后在页面上将对象（层）拖曳到你希望动画出现的地方，然后释放鼠标按钮。Dreamweaver会自动的调整所有关键帧的位置。要在Timeline中选择整个动画条只需在Timeline面板中点击动画条中的非关键帧即可。
● 要想在Timeline中增加或删除帧，选择Modify > Timeline > Add Frame（添加帧）或Modify > Timeline > Remove Frame（删除帧）。
● 要想在当前页被浏览器装载时，Timelines自动开始播放，选择Autoplay复选框。
● 要想当页面在一个浏览器中打开时，Timelines可以无限循环，选择Loop复选框。
3．用Timeline改变图像和层的特性
除可以用Timeline移动层外，你还可以使用Timeline来改变一幅图像的源文件及层的可见性、大小和堆叠顺序等特性。
要使用Timeline来改变图像和层的特性：
1) 在Timelines面板中，做下列之一：
● 从动画条中选择一个现存的、控制着要改变的对象的关键帧。 ● 要创建一个新的关键帧，在动画条中随意点击一帧，然后选择Modify > Timeline > Add Keyframe（添加关键帧）或按住Ctrl键点击一个帧。
2) 通过选择下列选项为对象定义新特性：
● 要改变一幅图像的源文件，在特性检查员中点击Src域右边的文件夹图标浏览并选择一个新图像。
从可以看出，从帧1到帧14显示的同一个图像（中文版图像），在帧15我改变了图像的源文件，图像在这时将改变，从帧15直到帧30都显示的是改变后的图像（English图像），同时我选择了Autoplay和Loop。因此，当页面装载后，你将发现每隔1秒两个图像就替换一次。
注意：在改变图像的源文件时应当使新图像的高度和宽度与原图像的一致，这样才不会发生原来图像的高度和宽度被改变的情况，当然如果这种改变正是你所希望的，就另当别论了。
● 要改变一个层的可见性，从特性检查员的Vis下拉菜单中选择inherit、visible或hidden。
● 要改变一个层的大小，在拖曳层的缩放柄或在特性检查员的W和H域中输入新值。
● 要改变一个层的堆叠顺序，在Z-Index域中输入新值，或使用层面板改变当前层的堆叠顺序。
职称计算机辅导：Dreamweaver应用3
</p>3) 按住Play按钮预览一下动画吧。4．拷贝和粘贴动画
一旦有了一个喜欢的动画片断，你就可以通过拷贝并将其粘贴到当前Timeline的其他区域，或同一文档中另外的Timeline，或不同文档中的Timeline中。你也可以一次拷贝并粘贴多个动画片断。
要拷贝或剪切并粘贴动画片断：
1) 单击一个动画条中的非关键帧以选择一个动画片断。要选择多个动画片断，点击时按住Shift键，或是在Timeline面板中任何地方单击一下，然后按Ctrl+A选择所有的动画片断。
2) 拷贝或剪切选择的片断。
3) 做下列之一：
● 将回放磁头移动到当前Timeline中的另一个帧位（希望动画片断被粘贴的地方）。 ● 从Timeline下拉菜单中选择另一个Timeline，然后在希望动画片断被粘贴的地方单击。
● 打开另一个文档或创建一个新文档，然后在Timeline面板中希望粘贴的地方单击。
4) 执行粘贴命令将拷贝或剪切的动画片断粘贴到Timeline中。
注意：用来控制同一个对象的动画条不能相互重叠，因为一个层不能在同一时刻出现在两个地方（一幅图像也不能在同一时刻有两个不同的源文件）。如果你正在粘贴的动画条将与另一个控制同一个对象的动画条重叠，Dreamweaver会自动地将粘贴的动画条转移到恰好可以不重叠的那帧。
但在这里有一个例外：当你将动画条粘贴到另一个Timeline时，即使控制同一个对象的动画条出现重叠，Dreamweaver也不会自动的转移这些重叠的动画条，因此这可能导致无法预料的结果。在这种情况下，你只能手工来修正。
当要粘贴动画片断到另外的文档中时，要记住以下两个原则：
● 如果你拷贝了一个层的动画片断，而新文档中含有一个与拷贝的层同名的层，在这种情况下当你进行动画片段粘贴时，Dreamweaver会在新文档中将动画特性应用于同名的那个层。
● 如果你拷贝了一个层的动画片断，而新文档中并不含有一个与拷贝的层同名的层，在这种情况下当你进行动画片段粘贴时，Dreamweaver会将原始层连同它的内容与动画片断一起粘贴到新文档中。要想将粘贴应用到新文档中另外的层，你可以从上下文菜单中选择Change Object（改变对象）或选择Modify > Timeline > Change Object，然后从弹出的对话框中选择需要的层。
职称计算机辅导：Dreamweaver应用3
</p>5．重命名Timeline要重命名在Timeline面板中显示的Timeline，做下列之一：
● 选择Modify > Timeline > Rename Timeline（重命名Timeline），然后在弹出的对话框中输入一个新名字。
● 直接在Timeline面板的Timeline下拉菜单中输入一个新名字。
注意：如果页面的源代码中含有你自己编写的对某个Timeline的引用，在你重命名这个Timeline后，会弹出一个警告框。
这个警告框告诉你要手动修改那些对原Timeline名字的引用，因为它们无法被自动更新。这是因为Dreamweaver无法动态跟踪页面上由你自己编写的代码中对Timeline名字的引用。当然，那些由Dreamweaver自动生成的代码中对Timeline名字的引用会被自动更新。
例如：下面的这行代码就是我自己编写的，这是对Timeline2的引用，当我将Timeline2的名字改为Timeline1时，这里的Timeline2不会自动的更新为Timeline1，我必须自己手动修改才行。
播放 这应该是Dreamweaver 3中就存在的一个问题。在Dreamweaver 3中，如果你对某个Timeline进行了重命名操作，那么对Dreamweaver来说，这个重命名的Timeline是一个全新的Timeline，Dreamweaver已经完全不记得几秒钟前它与这个Timeline还是个老相识。因此，一旦一个Timeline被重命名，你对这个Timeline所做的所有设置（比如所有捆绑在其上的行为）都将被丢弃，这经常会是灾难性的。
现在，虽然Dreamweaver 4已经比Dreamweaver 3在对Timeline的动态跟踪上前进了一大步，不会再乱丢东西了，但仍留有问题，希望在Dreamweaver 5中不会再出现这种情况。
6．Timelines的动画技巧
下列建议可以改善你的动画的性能，并使你创建动画的工作变得更加轻松：
● 要想产生在图像间切换的效果，应当使用显示及隐蔽层的技术，而不是频繁的改变图像的源文件。改变一幅图像的源文件常常会产生恼人的视觉延迟，因为新图像必须被下载。而一旦层中的图像都被下载后，通过显示和隐藏某些层，就可以达到很好的在图像间进行切换的效果，每个图像都会被立刻显示，不会产生视觉上的延迟，也不会因速度太慢而错过某些图像。
● 拉伸动画条来创建更为平滑的运动。如果动画的运动看起来太过凶猛，在两个位置间产生视觉上的弹跳，你就应当拉伸动画条的最后一帧，以便为完成大幅度的动作扩展出更多的帧。拉伸动画条将在运动的开始和结束点之间创建更多的数据点，但同时也会导致对象的运动变得缓慢，你可以试着增加每秒播放的帧数（FPS）来抵消这种慢动作效果。但应当清楚，大多数普通的系统中的浏览器播放动画的速度不会比每秒15帧更快。在不同系统中的不同的浏览器上测试动画以确定最好的设置。
● 不要试图让大的位图运动起来。的确，一个蠕动着的大位图可能确实蔚为壮观，但你的这个想法或许会让你的浏览者发疯。
总而言之，尽可能创建简单的动画，不要让你创建的动画的需求比用户的浏览器能提供的更多。因为浏览器总是会尽心尽力地播放动画中的每一帧，即使当系统性能下降到不能胜任这一工作时。
页:
[1]