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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.