Dreamweaver MX

1. Dreamweaver MX Lesson 16: Animating w/ Timelines

2. Timeline Overview (p. 480) • Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers. • Animation objects must be contained in _______, which are placed in a timeline. • A timeline is a series of ________, each of which displays at a specific point in time.

3. Animating Objects (p. 482) • Starting with a page, select the Draw Layer icon on the _______ tab of the Insert bar and draw a layer on the page. Select the layer and name it. • Insert a graphic from the site’s Images folder in the layer (adjust the layer size appropriately). • Select the layer and choose Modify > Timeline > Add Object To Timeline. • The blue animation ____ for that layer appears in the first animation _________ with the playback head in the first _____ of the timeline. • The animation bar may be dragged within the timeline if necessary.

4. Keyframes (p. 485) • Keyframes mark key changes for a layer in an animation. • A path line is automatically generated between the keyframes. • The open circles at the ends of the animation bar mark the beginning and ending keyframes. • With only these keyframes, a layer will move in a straight line.

5. Building the Animation • Click the ending keyframe marker on the animation bar, moving the playback head to the last frame. • Move the layer to the desired ending position on the page. • Click the ________ button (left arrow w/ vertical bar) to move the graphic to its starting position. • Click the _____ button (right arrow) to advance the animation one frame (hold it down for continuous play). • Check ________ to play the animation on load. • Save the page and test in a browser.

6. Positioning an Object (p. 488) • To move the starting point of an animation off the screen, click the first _________. • Select the layer and move it to the left side of the screen. Then use the arrow keys to move it completely off the screen to the left (or use the values of L and ___ in the Properties inspector. • Click the ending keyframe, move the layer as desired (even off the screen to the right). • You can add more frames by dragging the last keyframe to the right • You can adjust animation speed by changing the Fps (frames per ________) value.

7. Adding Keyframes (p. 490) • By adding keyframes, you can cause the path of the animation to _______. • Move the pointer over the animation bar at a specific frame, _________ on the timeline to add a keyframe. • Click the keyframe, then move the layer as desired. You will see the effect on the path. • Add more keyframes, select them, and move the layer as desired for more complex paths.

8. Recording the Path (p. 494) • You can record a path for an animation by simply clicking and dragging the mouse at the desired _______ and direction. • To delete an existing animation bar, click it, right-click it, and select Delete. • Move a layer to the desired starting position. • Make sure the layer is selected and get ready to move quickly. • Select Modify > Timeline > Record Path of Layer, and immediately begin moving the layer at the desired speed and direction. • Release the layer when finished.

9. Changing Images Over Time (p. 497) • You can cause images to change over time. • Insert an image on the page. • Select the image, choose Modify > Timeline > Add Object to Timeline. Name the animation. • Move the first and/or last keyframe on the animation bar as desired. The image will appear at the first keyframe. • Add a keyframe to the bar (Ctrl-click). Select the keyframe, click the folder next to the ____ box and select another image to appear. • Continue this process to make images change with time.