| Dreamweaver offers several ways to add layers to the timeline. You can use either a series of keyboard shortcuts: Command+Option+Shift+T (Mac) or Ctrl+Alt+Shift+T (Windows), or you can use the command listed under the menu: Modify, Timeline, Add Object to Timeline, or finally, you can just drag the layer into the Timeline panel. If you insert an object into the timeline by choosing Modify, Timelines, Add Object to Timeline, it will automatically set the object's time to 15 frames, and it will always start the object's time at frame 1. However, if you drag the layer into the timeline, you have a bit more flexibility as to where and what frame it starts on the timeline. The first time you insert a layer into a timeline, Dreamweaver will pop up an alert message explaining the limitations of the timeline, as shown in Figure 12.4. If you don't want to see this dialog box, choose Don't Show Again. Figure 12.4. The alert message explains the limitations of animating a layer in the timeline.
Creating an Animation with the Timeline In this exercise, you'll create animation by adding a layer to the timeline and modifying the way the animation appears. -
Draw a layer anywhere in the document. -
Place a blinking cursor in the document, and insert an image by choosing Insert, Image. Search your hard drive for an image and select it. Notice that the image now appears in the layer. -
Next, select the layer. It's very important to have the layer selected and not the image. You can animate only layers. Refer to Figure 12.5 to see an example of a selected image; it has only three handles. However, when you select a layer, eight resize handles appear as shown in Figure 12.6. Figure 12.5. When an image is selected, only three resize handles are available.
Figure 12.6. When the layer is selected, eight resize handles are available.
-
With the layer selected, choose Modify, Timeline, Add Object to Timeline. The timeline is now populated with two keyframes on frames 1 and 15. This animation lasts for 15 frames and is playing at 15fps, so it will last one second. The span of 15 frames is often referred to as the animation bar. -
You now want to create some animation. Highlight frame 15 by clicking it. Then drag the layer to the other side of the document. You'll notice a line drawn from the starting point to the ending in the document when you release the mouse from dragging the layer, as displayed in Figure 12.7. Figure 12.7. After you drag the layer to a new location, a line will appear that illustrates the direction and course of animation the layer will take.
-
In the timeline, check the AutoPlay option as well as the Loop option. This way, the animation plays automatically, and when the animation is complete, it will start playing again from the beginning. -
Preview the document in a browser by choosing File, Preview in Browser, Internet Explorer, or by pressing F12 on your keyboard. Notice that the animation is playing in the browser. |
Modifying an Animation After you create your initial animation, you can easily modify its appearance. You can accomplish this in several ways. Increase the Duration of the Animation You may decide you want your animation to play more slowly. Perhaps you think it zips across the screen rather quickly. If this is the case, people usually would want to lower the frame rate. Remember, though, the lower the frame rate, the less natural the animation will look. What you need to do to slow the animation down is give the timeline more frames to play. So instead of leaving the default animation length to 15 frames, increase it to 30 frames. You can do this by highlighting the last keyframe and dragging to frame 30, as shown in Figure 12.8. Figure 12.8. You can easily extend the animation by dragging the last keyframe to any frame further than the default of 15.
CAUTION Unlike Flash, DHTML will never drop frames. Often, with slower computers, if it can't keep up with the frame rate of the animation, Flash will just dismiss or drop some frames to keep up. DHTML plays every frame. If the frame rate is too high, the animation will just play slowly in comparison to the desired effect.
Changing the Starting Point You can easily change the starting point of the animation in a way similar to extending it. Highlight the first keyframe and drag it to the desired start location. By doing this when you preview the animation in a browser, the layer will stay paused in the same location for a moment before it starts animating. You can also preview the animation within the Dreamweaver authoring environment by clicking and holding down the right arrow or play button on the timeline. CAUTION If you test the animation and the entire image doesn't animate, it could mean one of two things. Your graphic is too large for a computer to process an animation, or the computer viewing the animation is not powerful enough. When using layers for animation, it is important to keep in mind the audience that will be viewing this.
Adding Keyframes Keyframes play a crucial role in animation; in fact, they represent most of the changes happening in the animation. That's why it can become very handy to know how you can insert your own keyframes. If you want to suddenly change the direction of the animated layer, that is easily done by simply adding a keyframe. There are a couple of ways you can add keyframes. To add keyframes to the timeline, follow these steps: -
In the Timeline panel, highlight the animation bar you want to add keyframes to. -
With the animation bar selected, move the playhead to the frame location in which you want to add the keyframe. -
You can add the keyframe in one of two ways: Choose Modify, Timeline, Add Keyframe, or Ctrl+Click (Mac) or right-click (Windows) on the frame in which you want to add the keyframe, and in the contextual menu choose Add Keyframe. Notice in Figure 12.9 that a keyframe has been added to the timeline. Figure 12.9. The timeline now has an additional keyframe.
You can then select the layer in the document and reposition it, changing the direction of the animation as shown in Figure 12.10. Figure 12.10. After placing a keyframe, you can alter the animation further by changing the layers position on that keyframe.
Removing Timeline Components Having flexibility is important when creating animations, and sometimes you might like to have the flexibility to remove certain elements from the timeline. You can do this just as easy as adding elements. You can remove the entire timeline by choosing Modify, Timeline, Remove Timeline. This effectively deletes your entire animation. You can remove objects from the timeline in a similar way. The most convenient way is to contextual click the timeline to gain access to all the remove options, as shown in Figure 12.11. Figure 12.11. Notice that the context menu offers all the options to remove timeline components.
The contextual menu offers the capability to remove keyframes as well as frames, objects, behaviors, and the timeline. You can also copy, cut, and paste timelines between documents. Recording the Path of a Layer From the previous two sections, you might have seen that to make a complex animation requires a lot of practice and a lot of keyframes. Adding keyframes and moving the layer in the desired location on that keyframe offers a more complicated, natural movement. However, a feature in Dreamweaver can cut out a lot of the work for you. It's a command called Record Path of Layer, and the command does pretty much that. When you choose Record Path of Layer, Dreamweaver follows the path in which you drag the layer around in the document. It's very useful, and accurate. The slower you drag, the more keyframe points it sets, offering slower motion in that area. As you drag faster, generally fewer keyframe points are set, offering a quicker style of animation. This is a nice shortcut to get an animation to appear the way that you want without having to mess around with setting keyframes and moving and adjusting the layer on each of those keyframes. To record the path of the layer that you are dragging in the document, follow these steps: -
Create a new document. In the new document, either insert or draw a layer. -
Place a blinking cursor in the layer so you can place an image inside of it. Choose Insert, Image and find an image on your hard drive you'd like to animate. -
Be sure to have the Timeline panel open by choosing Window, Others, Timeline. -
Next, choose Modify, Timeline, Record Path of Layer. -
Now start dragging the layer around the document in a way that you want it to animate. Notice that Dreamweaver draws a path in the document to give you an idea of the route the animation will take, as shown in Figure 12.12. Figure 12.12. As you drag, the path appears in the document, giving you an idea of how the animation will look.
-
When you're happy with the path, stop dragging. Notice in the timeline that all the keyframes have been placed, as displayed in Figure 12.13. Also, take notice of how the keyframes are placed. If you dragged slower in some areas, there will be a tighter cluster of keyframes in the timeline to represent that. Figure 12.13. All the keyframes in the timeline have been placed to create the animation to mimic the movement of your dragging the layer around.
-
Check Autoplay and preview the animation in a browser, or hold down the Play button in the timeline to see how the animation looks in action. |
