Animating in Dreamweaver MX with Timelines
This chapter is from the book
This chapter is from the book
This chapter is from the book
Dreamweaver's capability to create time-based animation makes it unique as a Web-based authoring tool. Those familiar with Macromedia's animation programs, Director and Flash, will quickly feel comfortable with Dream-weaver's Timelines panel. Those not familiar with animation programs will soon be creating animations after learning a few key concepts.
In this hour, you will learn
-
How to record an animation
-
How to create an animation in the Timelines panel
-
How to change layer properties over time
-
How to add behaviors to timelines
Creating an Animation
Timelines change properties over time to create an animation. To make a layer move, you change the positioning properties—left and top—over time. To make objects appear or disappear, you change the visibility properties over time. To change the stacking order of objects, you change the z-index over time. You'll learn more about time-based animations in this hour.
NOTE
You can also place images into timelines and change the image source over time. You cannot make images move around the screen unless they are contained in a layer.
The animations that Dreamweaver creates play natively in the browser. You don't need any plug-ins to play Dreamweaver timelines. Your viewer needs to have a browser capable of viewing Dynamic HTML (either Internet Explorer or Netscape Navigator 4.0 or better) to see your timelines.
When you create a timeline, Dreamweaver inserts JavaScript into your Web page. The JavaScript defines all the timeline functionality. If you edit the HTML source, be careful not to delete or move the JavaScript that creates the timeline.
Using the Timelines Panel
Open the Timelines panel, shown in Figure 18.1, found in the Others submenu of the Window menu; it appears beneath the Property inspector in Windows or as a floating panel on the Mac. The numbered channels run vertically up and down the timeline. Channels enable multiple objects to be animated in the same timeline. The numbered frames run horizontally from left to right along the top of the timeline. The number of frames affects the pace of the animation.
){kind=link}
There is a special channel across the top of the timeline that is labeled with a B. You can set behaviors in this channel so behaviors execute in a certain frame. You'll add behaviors to a timeline later in the hour.
The red square with a line extending down is the playback head. It rests on the current frame and controls which frame is currently selected. Drag the playback head to any frame in the timeline to view a specific frame.
Figure 18.1 Use the Timeline panel to configure animations in your Web page. A timeline is made up of channels (vertical axis) and frames (horizontal axis).
The playback controls at the top of the Timelines panel, shown in Figure 18.2, manage the playback head. The rewind button moves the playback head to frame 1. The Back button moves the playback head back one frame. The Play button moves the playback head forward one frame. If you hold down the Back or Play buttons, you can move through all the frames. The current frame number is displayed between the Back and Play buttons.
){kind=link}
Figure 18.2 The playback controls, at the top of the Timeline panel, enable you to move through all the frames in the animation both backward and forward.
You set the frames per second (fps) in the Fps box beside the Play button. This sets the number of frames that occur per second in your timeline. The higher the fps, the faster the animation because more frames are crammed into one second. If you are moving an object around the screen, more frames will make the animation smoother. There is a certain point, however, where the browser just can't animate any faster even if you increase the fps.
NOTE
The default fps setting of 15 is a good place to start. This setting means that 15 frames will take one second to play.
Recording a Simple Animation
Try creating an animation. The quickest way to make something move in a timeline is to record it. First, you will need a layer with something in it (an image, some text, or a background color). Usually animated layers contain images. All the objects that you place in your timelines need to be in layers.
TIP
Before you begin recording the movement of a layer, you'll want to make the Timelines panel small and place it out of the way of the animation path. Dreamweaver opens the Timelines panel when you begin to record an animation if the panel isn't open already. It's also a good idea to close panels that might be in the way. Be careful not to drop the layer in the Timelines panel while animating. This has a different effect than recording an animation.
To record an animation path
First, make sure that Prevent Layer Overlaps is turned off in the Layers panel. Otherwise, you will not be able to move your animated layer over other layers on the screen.
Select the layer that you want to animate. The layer is selected when you see its drag handles. A layer must be selected for the Record Path of Layer command to become active.
Select the Record Path of Layer command under the Timeline submenu in the Modify menu.
Make sure that the playback head in the Timelines panel is on frame 1. If it is not, move it there.
-
Pick up the layer's move handle and drag the layer on the path that you want. A dotted line will mark your path, as shown in Figure 18.3. It's best to start out making your animation short.
-
When you release the mouse button, the path becomes a solid line, as shown in Figure 18.4.
){kind=link}
Figure 18.3 A dotted line shows the path of your animation while you are recording it using the Record Path of Layer command.
){kind=link}
Figure 18.4 The path of the animation becomes a solid line after you stop dragging the layer. This is what all animation paths look like.
Congratulations! You've created a timeline animation in Dreamweaver. The default name for your timeline is Timeline1. To change the timeline name, click in the Timelines drop-down menu shown in Figure 18.5, change the name, and press Enter. You'll learn about creating multiple timelines in a Web page later this hour. You can select different timelines to display in the Timelines panel with this drop-down menu.
){kind=link}
Figure 18.5 The Timelines drop-down menu lists all the timelines in the Web page. You can change a timeline name by selecting it here and renaming it.
You see the name of your layer in the first channel of the Timelines panel. The line through the channel marks the duration of the animation. You can drag the playback head along the frames to see the animation in the Document window.
The solid circles in the animation bar are called keyframes, shown in Figure 18.6. Keyframes are an important part of timeline animations because changes can be defined only in keyframes. Dreamweaver calculates all the intermediate steps between keyframes. You need a keyframe every time the animation changes direction or anything else new happens. You'll explore adding and editing keyframes in a few minutes. Notice that your recorded animation probably has many keyframes. Dreamweaver added one every time the direction changed when you recorded the movement of the layer.
){kind=link}
Figure 18.6 Keyframes appear in an animation bar as circles.
Preview the animation in the browser. Did anything happen? Probably not. You haven't yet set anything to trigger the animation to play. You'll do that next.
Turning on Autoplay and Looping Your Animation
There are two check boxes in the Timelines panel, shown in Figure 18.7, that you haven't learned about yet: Autoplay and Loop. Check the Autoplay check box to make the timeline play when the Web page loads. This setting automatically adds the Play Timeline behavior to the <body> tag, triggered by the onLoad event. After you check this setting in the Timelines panel, preview the animation in the browser. It works!
){kind=link}
Figure 18.7 The Autoplay setting inserts a behavior into the <body> tag that makes the animation play when the Web page is loaded. The Loop setting inserts a behavior in the B channel that sends the animation back to the first frame.
To make the animation play continually, select the Loop check box. Dreamweaver inserts the Go To Timeline Frame behavior in the B channel of the Timelines panel. Dreamweaver inserts the behavior in the last frame of the animation. What timeline frame do you think the Go To Timeline Frames behavior is set to go to? You're right if you said frame 1.
Editing a Behavior in the B Channel
Edit the behavior that Dreamweaver inserted when you checked the Loop option. Double-click the symbol in the B channel to open the Behaviors panel (single-click if the Behaviors panel is already visible in the Document window). The action and event, shown in Figure 18.8, behave just like any other behavior. Notice the onFrame event, in which a frame number is added to the event name. This event is triggered when the animation reaches the specified frame.
){kind=link}
Open the Go To Timeline Frame action. The Go To Timeline Frame dialog box appears, as shown in Figure 18.9. You select the timeline from the Timeline drop-down menu and set the frame to go to in the Go to Frame box. You can also set the number of times you want the animation to loop. Enter a number here (you might want to enter a small number so you don't use up the rest of this hour!) and click OK. Preview your animation in the browser. It should loop the number of times you specified.
){kind=link}
Figure 18.8 Edit the Go To Timeline Frames behavior in the Behaviors panel by double-clicking the symbol in the B channel.
Figure 18.9 You configure the number of times the animation loops in the Go To Timeline Frame dialog box.
CAUTION
If you change the name of a timeline after you have referenced it in the actions of Dreamweaver behaviors, you may need to edit the behavior and select the new timeline name.
Adding a Layer to the Timeline
The Record Path of Layer command is nice for capturing animations that have complex movement. But most of the time you will want to set the length of a timeline and its keyframes manually. Plus, you can also add multiple layers to your animation.
Create another layer to add to the timeline that you just created. Make sure the Timelines panel is open. To add the layer to the timeline
-
Pick up a layer, drag it into the Timelines panel, and drop it in the second channel beneath the previously animated layer, as shown in Figure 18.10.
You might receive a message box warning you about which layer attributes Netscape does not support. You won't be using any attributes that Netscape doesn't support, so you can close this box.
Note that the animation bar begins and ends with a keyframe. Pick up the animation bar and move it in the same channel or to a different channel if you want.
To increase or decrease the length of the animation, drag the end keyframe.
Click on the beginning keyframe. This is the position that the layer will be in at the beginning of the animation. You can adjust the beginning position only while you have the first keyframe selected.
-
Click on the ending keyframe. This is the position that the layer will be in at the end of the animation. Only while the ending keyframe is selected, pick up the layer and move it to its end position. When you release the mouse button you will see a line in the Document window showing the animation path, as in Figure 18.11.
Preview the animation in your browser. Note that the second layer moves in a line from one point, the beginning keyframe, to another point, the end keyframe.
){kind=link}
Figure 18.10 Another layer is dragged into the Timelines panel. The layer is placed in channel 2 beneath the other layer.
CAUTION
If you see the name of an image in the timeline instead of the name of the layer that contains an image you have accidentally dragged the image into the timeline. You need to delete the image from the timeline and drag the layer onto the Timelines panel instead.
){kind=link}
Figure 18.11 A line represents the animation path when you have a timeline selected in the Timelines panel.
If you decide to use a different object after you have created a timeline, you don't have to start from scratch. You can swap the object that you used to create a timeline with another object on the Web page. Select the Change Object command from the context menu that appears when you right-click on an animation bar in the Timelines panel. The Change Object dialog box appears, as shown in Figure 18.12. Simply select a different object from the drop-down list.
){kind=link}
Figure 18.12 You can swap an object in a timeline for a different object using the Change Object command.
Adding a Keyframe
To create a more complex animation or make something happen at a specific frame, you need to turn that frame into a keyframe. When you hold down the Control key (ð on the Macintosh) and position your cursor over an animation bar, the cursor looks like a keyframe. Yes, you guessed it; click and you insert a keyframe at that location. You can also access the context menu, shown in Figure 18.13, by right-clicking on a specific frame in the animation bar. It contains the Add Keyframe command that accomplishes the same thing.
){kind=link}
Figure 18.13 The context menu contains many useful commands for manipulating timelines, including the Add Keyframe command.
With the newly created keyframe selected, move the layer. When you release the mouse button, the animation path has changed, as shown in Figure 18.14.
){kind=link}
Figure 18.14 After you add a keyframe and move the layer, the animation path changes.
You can add as many keyframes as you want. If you need to adjust the position of a layer at a certain keyframe, select the keyframe and move the layer. If you need to add or remove frames, right-click on the frame in the animation bar to select either the Add Frame or the Remove Frame command. When you add or delete frames, they will be added or deleted from the entire timeline, not just a single channel.