Dreamweaver中的动画
Macromedia’s Flash and Adobe’s Live Motion have stolen much of the spotlight for animation. "Hey," the programs tell you, "it’s easy!" Both these options require that the user has the Macromedia Flash player installed on their computer. But there is another way…
Macromedia的Flash和Adobe的Live Motion夺走了动画的大部分注意力。 这些程序告诉您：“嘿，这很容易！” 这两个选项都要求用户在计算机上安装Macromedia Flash播放器。 但是还有另一种方式
Macromedia’s Dreamweaver does support animation in a little known inspector call the "TimeLine Inspector", which is shown below.
Macromedia的Dreamweaver确实在一个鲜为人知的检查器(称为“ TimeLine检查器”)中支持动画，如下所示。
The Dreamweaver Timeline is the critical inspector for creating animation in a Web page.
Dreamweaver时间轴是在网页中创建动画的关键检查器。
Dreamweaver is able to create animation through clever use of JavaScript. Unlike Flash, which creates animation along Vector paths and timelines, JavaScript creates animation by plotting the location of an object in conjunction with time between each plot. At the bare minimum, any animation created in a Web page must have a start and an end point.
Dreamweaver能够通过巧妙地使用JavaScript来创建动画。 与Flash不同，Flash沿Vector路径和时间线创建动画，而JavaScript通过绘制对象位置以及每个图之间的时间来创建动画。 至少，在网页中创建的任何动画都必须具有起点和终点。
从A点到B点进行动画处理 (Animating From Point A to Point B)
Let’s get started — we’ll create a simple animation. The most basic animation moves from one point on the screen to another. We’ll use this to help explain how the various animation tools in Dreamweaver work.
让我们开始吧-我们将创建一个简单的动画。 最基本的动画从屏幕上的一个点移动到另一点。 我们将使用它来帮助解释Dreamweaver中的各种动画工具如何工作。
Begin by opening a new page in Dreamweaver and type your company name onto the page. We want the company name to animate onto the top of the page from the left hand border. For any animation to work, the content that’s being animated must be inside a Dreamweaver layer.
首先在Dreamweaver中打开一个新页面，然后在页面上键入公司名称。 我们希望公司名称从左边界动画到页面顶部。 为了使任何动画正常工作，要动画的内容必须在Dreamweaver图层内。
Select Insert — Layer, which will immediately add a rectangular layer to the page. The Properties Inspector changes to reflect the new layer’s properties. By default, the layer is called "Layer1". You will find that if a second layer is added, the new layer will be called "Layer 2" and a third will be called "Layer3". Each name is alphanumeric and contains no spaces. The name for a layer is very important, as it’s used as the reference point from which all animations will be created. It’s worthwhile to give your own name to a layer, so next, change the name of the layer in the Layers’ Property Inspector to "CompanyLogo".
选择“插入—图层”，这将立即在页面上添加一个矩形图层。 “属性”检查器进行更改以反映新图层的属性。 默认情况下，该层称为“ Layer1”。 您会发现，如果添加了第二层，新层将被称为“ Layer 2”，而第三层将被称为“ Layer3”。 每个名称都是字母数字，并且不包含空格。 图层的名称非常重要，因为它用作创建所有动画的参考点。 给图层起一个自己的名字是值得的，因此下一步，在“图层”的“属性”检查器中将图层的名称更改为“ CompanyLogo”。
With the layer now named correctly, drag the text of your company name into the layer. This provides the basic setup for any animation. Anything you add to a layer can be animated, whether it’s text, images, plugins, forms or tables. If you want to include HTML in a layer, it can be animated too. Now let’s work with the Timeline Inspector, the core manager for animation.
现在正确命名了图层，将公司名称的文本拖到图层中。 这提供了任何动画的基本设置。 您添加到图层中的任何内容都可以进行动画处理，无论是文本，图像，插件，表单还是表格。 如果要在图层中包含HTML，也可以对其进行动画处理。 现在，让我们与时间轴检查器(动画的核心管理器)一起工作。
Open the Timeline Inspector by selecting Window — Timelines. Alternatively, you can select SHFT+F9 (Windows) or CMD+F9 (Macintosh). If you’ve worked in Flash or Director you’ll recognize some of the features of the Timeline Inspector. To begin with, the Timeline is made up of two distinct parts: the layers upon which an element can be animated in time, and the Timeline’s commands along the top.
通过选择“窗口—时间线”来打开时间线检查器。 或者，您可以选择SHFT + F9(Windows)或CMD + F9(Macintosh)。 如果您使用Flash或Director，您将认识到时间线检查器的某些功能。 首先，时间轴由两个截然不同的部分组成：可以在其上动态显示元素的图层，以及时间轴顶部的命令。
The commands control the speed of the animation, and some basic functions. Moving from left to right, the first set of commands indicates where you are in the animation. If you select either the right or left arrow, you’ll move the animation along one frame at a time. The frame number is highlighted in the box in between the navigation arrows. If you enter a specific frame number into that box, you’ll immediately be moved to that frame. Before you add an animation, the FPS (Frames Per Second), AutoPlay and Loop features are grayed out. Flash developers will be used to the FPS being 15, as this is the default speed for Flash movies, but this number can be increased to speed up the animation or decreased to slow it down. The AutoPlay checkbox will force an animation to begin playing when a Web browser loads a page. The Loop check box forces any animation to begin playing from frame 1 when it reaches the final frame.
这些命令控制动画的速度以及一些基本功能。 从左向右移动，第一组命令指示您在动画中的位置。 如果选择向右箭头或向左箭头，则一次将动画移动一帧。 框架编号在导航箭头之间的框中突出显示。 如果您在该框中输入特定的帧号，则将立即移至该帧。 在添加动画之前，FPS(每秒帧数)，自动播放和循环功能将变灰。 Flash开发人员将习惯于FPS为15，因为这是Flash电影的默认速度，但是可以增加此数字以加快动画的速度，也可以减小此数字以使其减慢速度。 当Web浏览器加载页面时，“自动播放”复选框将强制动画开始播放。 “循环”复选框会强制所有动画在到达最后一帧时从第1帧开始播放。
A bold red line is, by default, rested on the first frame. The red line is a place-holder to show where in the animation you are currently positioned. Along the right hand side you’ll see a scroll bar that you can use to move between frames. Up to 32 separate animations can be managed simultaneously per timeline.
默认情况下，红色粗线位于第一帧上。 红线是占位符，用于显示您当前在动画中的位置。 在右侧，您会看到一个滚动条，可用于在各帧之间移动。 每个时间轴最多可以同时管理32个单独的动画。
But enough talk. Let’s create an animation.
但是足够多的谈话。 让我们创建一个动画。
To animate the CompanyLogo layer you created earlier, we’ll have to add it to the Timeline. To do this, select the layer and drag it onto the Timeline. As you do this, a 15 frame long line appears in the Timeline Inspector with the name "CompanyLogo". This is the length of time for the animation, which is currently 15 frames long. As the animation FPS is set to 15, this means the animation will play for 1 second. Select the AutoPlay and Loop check box as shown here:
要为您先前创建的CompanyLogo层设置动画，我们必须将其添加到时间轴中。 为此，选择图层并将其拖动到时间轴上。 执行此操作时，时间轴检查器中将出现一条15帧长的行，名称为“ CompanyLogo”。 这是动画的时间长度，目前为15帧长。 当动画FPS设置为15时，这意味着动画将播放1秒钟。 选中自动播放和循环复选框，如下所示：
The Timeline Inspector displays the CompanyLogo layer, the length of time it will play, and that the Autoplay and Loop checkboxes have been selected.
时间线检查器将显示CompanyLogo层，将播放的时间长度以及已选中“自动播放”和“循环”复选框。
The only thing left to do is the fun bit: the path of animation. Any animation must move from one point to another. This is done with a tool called KeyFrames, and again, Flash and Director developers will be familiar with this terminology. Two keyframes are automatically added to all layers on the timeline: the first and last frame of the animation.
剩下要做的唯一一件事情就是有趣的事情：动画的路径。 任何动画都必须从一个点移动到另一点。 这是通过称为KeyFrames的工具完成的，Flash和Director开发人员将再次熟悉此术语。 两个关键帧会自动添加到时间线上的所有图层：动画的第一帧和最后一帧。
A KeyFrame is identified as a circle placed on the timeline. In Figure B the final KeyFrame is on frame 15. Select the KeyFrame, and you’ll notice that the red vertical line moves to frame 15. On the page, select the layer "CompanyLogo" and drag it from the left hand side of the stage to the right. A gray line is added to the page — this line is called the Path of Animation, and it’s a visual place holder that shows you the animation (as shown below).
关键帧被标识为放置在时间线上的圆圈。 在图B中，最后一个KeyFrame位于第15帧上。选择KeyFrame，您会注意到红色的垂直线移至第15帧。在页面上，选择“ CompanyLogo”层并将其从菜单栏的左侧拖动。舞台向右。 在页面上添加了一条灰线-这条线称为“动画路径”，它是一个可视的占位符，用于向您显示动画(如下所示)。
The gray line is the Path of Animation.
灰线是动画路径。
Now press F12 to view the animation in a Web browser (this animation will work in any Web browser — Microsoft or Netscape – version 4 and above).
现在按F12键，以在Web浏览器中查看动画(该动画将在任何Web浏览器(Microsoft或Netscape，版本4及更高版本)中运行)。
To have written this simple animation by hand would have been an arduous task — it takes over 130 lines of HTML and JavaScript! But it took almost no time to complete in Dreamweaver.
手工编写这个简单的动画将是一项艰巨的任务-它需要超过130行HTML和JavaScript！ 但是在Dreamweaver中几乎不需要花时间就可以完成。
添加额外的关键帧 (Adding Extra Keyframes)
Not all animations move in a straight line. What if the animation of the Company-Logo needs to shoot from one side of the page to the other and then bounce back to the middle? This kind of animation can be done id we add keyframes and increase the length of the animation.
并非所有动画都直线移动。 如果Company-Logo的动画需要从页面的一侧拍摄到另一侧然后弹回中间，该怎么办？ 可以通过添加关键帧并增加动画的长度来完成这种动画。
The playing time for the animation can be increased by literally dragging the layer. In the Timeline, select the second KeyFrame on the frame 15 Company-Logo layer. With the mouse held down, drag the layer to frame 60 — but note that there’s no limit to how long a layer can play. Our animation will now take longer to play because its length is 60 frames. However, the animation hasn’t changed on the page: all that’s changed is the length of time for which the animation will play.
可以通过逐个拖动图层来增加动画的播放时间。 在时间轴中，选择第15帧公司徽标层上的第二个关键帧。 按住鼠标不放，将图层拖到第60帧-但请注意，图层可以播放多长时间没有限制。 现在，由于动画长度为60帧，因此播放时间会更长。 但是，页面上的动画没有更改：更改的只是动画播放的时间长度。
Right click on frame 15 on the CompanyLogo layer. Choose "Add KeyFrame" from the popup menu that appears, and a circle will display on frame 15. With this frame selected on the Timeline, select from the page the layer Company-Logo, and drag it to the far right hand side of the screen. The Path of Animation has been changed, and now shows the animation moving back and forth across the page. To see this in your default Web browser press F12. The animation now bounces from the left to the right side of the browser, and back to the middle, as shown below.
右键单击CompanyLogo层上的第15帧。 从出现的弹出菜单中选择“添加关键帧”，然后在第15帧上显示一个圆圈。在时间轴上选择此帧后，从页面中选择“公司徽标”层，并将其拖动到页面的最右侧。屏幕。 动画路径已更改，现在显示动画在页面中来回移动。 要在默认的Web浏览器中查看此消息，请按F12。 现在，动画从浏览器的左侧反弹到右侧，然后回到中间，如下所示。
Complex animation can be created with additional KeyFrames.
可以使用其他关键帧创建复杂的动画。
There’s no limit to the number of KeyFrames that can be added to a Web page. Why not go ahead and add a couple more to experiment with Keyframes?
可以添加到网页的关键帧的数量没有限制。 为什么不继续进行操作，并添加更多内容来尝试关键帧？
To remove a KeyFrame, select it on the Timeline, right click to open the popup menu, and choose "Remove Keyframe". When you do this, you’ll see that the gray path of the animation will modify the animation as if the previous KeyFrame hadn’t existed.
要删除关键帧，请在时间轴上将其选中，右键单击以打开弹出菜单，然后选择“删除关键帧”。 当您执行此操作时，您将看到动画的灰色路径将修改该动画，就好像以前的KeyFrame不存在一样。
多层动画 (Multiple Layers of Animation)
Any animation will involve the simultaneous movement of multiple objects, in fact, up to 32 objects can move at any one time in any Timeline. It’s as simple as add-ing a new layer to the page, and dragging it onto the Timeline.
任何动画都将涉及多个对象的同时移动，实际上，在任何时间轴中，一次最多可以移动32个对象。 就像在页面上添加新图层并将其拖动到时间轴上一样简单。
As you drag additional layers onto the timeline, see how they stack on top of each other. All layers that you add to a Timeline are controlled by the speed of the Timeline. This is the same with movies in Flash — an object, such as button, can only be animated by the speed of the Timeline it is in.
当您将其他图层拖到时间轴上时，请查看它们如何堆叠在一起。 您添加到时间线的所有图层均由时间线的速度控制。 这与Flash中的影片相同—对象(例如按钮)只能通过其所在的时间轴的速度进行动画处理。
Flash allows for different animations to move at different speeds through the use of multiple movies, where each movie is given its own timeline. The same can be done in Dreamweaver with the inclusion of additional Timelines.
通过使用多部电影，Flash允许不同的动画以不同的速度移动，其中每部电影都有自己的时间轴。 在Dreamweaver中，可以通过添加其他时间线来完成此操作。
时间就是一切 (Time is Everything)
Let’s now create a couple of Timelines to demonstrate how the two can interact with each other.
现在，让我们创建几个时间轴，以演示两者如何相互交互。
We’ll start by using the Timeline created earlier of the company logo bouncing off the right hand side of the browser. Below the stopping point of the animation you’ll see a second layer with some text. The text is a placeholder with the ex-ception that the final line reads "Click here to exit movie". What you want instead, is to have the user click on the text to re-animate the movie along a new Timeline.
我们将使用在公司徽标前面创建的时间轴从浏览器右侧弹起。 在动画的停止点下方，您将看到带有一些文本的第二层。 文本是一个占位符，说明最后一行显示为“单击此处退出电影”。 相反，您想要的是让用户单击文本以沿新的时间轴为电影重新设置动画。
Before a new Timeline can be added, we must first turn off the "Loop" feature from the original Timeline, to prevent the first animation from continuously ani-mating. Great! Now we can create the exit animation.
在添加新的时间轴之前，我们必须首先关闭原始时间轴的“循环”功能，以防止第一个动画连续进行动画处理。 大！ 现在我们可以创建退出动画。
Choose Modify — Timeline — Add Timeline to add an extra timeline. The new Timeline is automatically called "Timeline2" on the Timeline Inspector. Select the name and change it to "Exit". As with a layer, the names of Timelines can be changed to any name, as long as it follows the alphanumeric rules that exist for the naming of layers.
选择“修改”“时间线”“添加时间线”以添加额外的时间线。 新的时间轴在时间轴检查器中自动称为“ Timeline2”。 选择名称并将其更改为“退出”。 与图层一样，时间轴的名称可以更改为任何名称，只要它遵循图层命名中存在的字母数字规则即可。
To create the effect of the logo exiting off the page, the exit animation must start where the original animation ends. To do this, move the CompanyLogo layer to the position of the final resting point for the first animation. For this example, the final resting point for the original logo is Left 250PX and Top 50PX. These coor-dinates are located in the Layer’s Property Inspector. In the Exit timeline, change the place of the CompanyLogo to Left 250PX and Top 50PX. This will be the starting point for the Exit animation.
要创建徽标退出页面的效果，退出动画必须在原始动画结束的地方开始。 为此，将CompanyLogo层移动到第一个动画的最终静止点的位置。 在此示例中，原始徽标的最终停靠点是“左250PX”和“顶部50PX”。 这些坐标位于图层的属性检查器中。 在退出时间轴中，将CompanyLogo的位置更改为Left 250PX和Top 50PX。 这将是“退出”动画的起点。
Drag the layer "CompanyLogo" onto the "Exit" timeline. Observe how the setup for the Timeline is exactly the same as Timeline1. The layer starts on frame 1 and the speed of the movie is 15 frames per second.
将图层“ CompanyLogo”拖到“退出”时间轴上。 观察时间轴的设置与时间轴1完全相同。 图层从第1帧开始，影片的速度为每秒15帧。
Change the speed to 12 FPS by typing directly into the FPS text field. Now select frame 15 of the Exit timeline. The CompanyLogo layer is highlighted. From the Property Inspector, select the Top coordinate and change it to –100PX. This will place the layer 100 pixels above the top of the browser screen. Select the forward and reverse buttons on the Timeline to move the animation back and forth. A new animation path shows the CompanyLogo layer moving directly up. The Layer is animated and ready to be played.
通过直接在FPS文本字段中键入，将速度更改为12 FPS。 现在选择退出时间轴的第15帧。 CompanyLogo层突出显示。 在属性检查器中，选择“顶坐标”并将其更改为–100PX。 这会将图层放置在浏览器屏幕顶部上方100像素处。 选择时间轴上的前进和后退按钮来回移动动画。 新的动画路径显示CompanyLogo层直接向上移动。 图层已设置动画并可以播放。
时间轴行为 (Timeline Behaviors)
Unlike the first animation, the Autoplay and Loop checkboxes will not be se-lected. Instead, we’ll use a Behavior to trigger the animation.
与第一个动画不同，将不会选择“自动播放”和“循环”复选框。 相反，我们将使用“行为”来触发动画。
Open the Behaviors Inspector, SHFT+F3 (Windows) or CMD+F3 (Macintosh). Choose the "Click here to exit movie" option. For the Behavior to be added, the text must be a hyper link. In the Properties Inspector add a "#" to the Link field. This will make the text act like a link, without linking to any page. With the cursor on the new link, select from the Behaviors Timeline — Play Timeline. A popup window will ask which Timeline to play. Choose "Exit", as shown below.
打开“行为”检查器，SHFT + F3(Windows)或CMD + F3(Macintosh)。 选择“单击此处退出电影”选项。 要添加“行为”，文本必须是超级链接。 在“属性”检查器中，将“＃”添加到“链接”字段。 这将使文本像一个链接一样起作用，而无需链接到任何页面。 将光标放在新链接上，从“行为时间轴” —“播放时间轴”中选择。 弹出窗口将询问播放哪个时间轴。 选择“退出”，如下所示。
The Play Timeline Behavior will start an animation in a different Timeline.
播放时间轴行为将在其他时间轴中开始动画。
Press F12 to preview the page. The original animation plays and stops with the CompanyLogo layer in the center of the page. When the link on the page is selected the second timeline plays. Any number of Timelines can be added to a single page. The Timeline Behaviors can control the starting and ending time fore each timeline.
按F12预览页面。 原始动画将在页面中心的CompanyLogo层播放和停止。 选择页面上的链接后，将播放第二个时间轴。 可以将任意数量的时间轴添加到单个页面。 时间轴行为可以控制每个时间轴的开始和结束时间。
行为层 (The Behavior Layer)
Timelines are, at their most basic, just JavaScript. Because of this additional JavaScript, Behaviors can interact at any time with a Timeline. For this purpose a special Behaviors layer is available on the Timeline, beginning with the letter B above the regular layers.
时间线最基本的就是JavaScript。 由于有了这些附加JavaScript，“行为”可以随时与时间轴交互。 为此，在时间轴上有一个特殊的“行为”层，以常规层上方的字母B开头。
Objects in layers can’t be dragged from the page onto the Behaviors timeline: only Behaviors can be added.
图层中的对象不能从页面拖到“行为”时间轴上：只能添加行为。
As an example, select the "Exit" timeline and choose frame 15. Double click in the "B" layer of the Timeline to open the Behaviors Inspector. Select "Pop-up message" from the Behaviors. Add the text "Thank you for viewing our Website" and select OK.
例如，选择“退出”时间轴并选择第15帧。在时间轴的“ B”层中双击以打开“行为”检查器。 从“行为”中选择“弹出消息”。 添加文本“谢谢您浏览我们的网站”，然后选择确定。
Frame 15 of the "B" layer now displays a purple marker to represent that a Behavior will be activated when this frame is reached. Press F12. The first animation plays. Then click on the link to play the second animation. On the final frame of the second animation, a popup message will appear on screen, as shown here:
现在，“ B”层的第15帧显示一个紫色标记，表示到达该帧时将**“行为”。 按F12。 播放第一个动画。 然后单击链接播放第二个动画。 在第二个动画的最后一帧，屏幕上将显示一条弹出消息，如下所示：
Behaviors can be easily added to the "B" layer of a timeline. The Behavior will be triggered when the Timeline reaches it.
行为可以轻松地添加到时间线的“ B”层。 时间轴到达时将触发行为。
A Behavior can be added at any point along a Timeline, allowing you to develop rich interactivity into any page. The Timeline is a good substitute for Flash in simple animations. The rich engagement between Behaviors and Time can result in exciting and engaging sites that present more to the user than just a static Web page. Have fun!
可以在时间轴上的任何时间添加行为，使您可以将丰富的交互性开发到任何页面中。 在简单的动画中，时间轴可以很好地替代Flash。 “行为”和“时间”之间的丰富互动可以带来令人兴奋和引人入胜的网站，这些网站不仅向静态网页显示，而且向用户展示的内容更多。 玩得开心！