• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 14. Animating with Timelines > Positioning an Object

Positioning an Object

In this exercise, you will change the car animation so it comes into the browser window from the left and moves out of the browser window to the right.

1.
In the moveit.htm document, select the first keyframe on the timeline for the carL layer. Click the title bar of the document window to make it active, and use the arrow keys or type a negative number in the L (Left) text box at the top of the property inspector to move the layer to the left, off the screen.

TIP

The arrow keys will move the layer one pixel at a time. Holding down the Shift key and pressing an arrow key will move the layer by the current grid increment.

You have selected the first keyframe and moved the carL layer to the left where it is not visible. This will cause the animation to come into the browser window from the left. The top-left corner of the browser is the zero point (covered in Lesson 10), where Dreamweaver's horizontal and vertical rulers intersect when they are visible. Anything to the right of or below that point is a positive value; anything to the left of or above that point is a negative value. In order to make the carL layer begin outside the visible window of the browser, you have set the starting point of the layer to a negative horizontal value. You've placed this value in the L text box because the horizontal location of layers on a Web page is defined by their distance from the left side of the browser window.

NOTE

You can select any frame or keyframe by clicking it in the animation bar, or by typing the desired frame number into the frame number text box. The frame text box is a good indication of the exact frame that is selected.

2.
Select the last keyframe on the timeline for the carL layer. Use the arrow keys or type a larger number in the L text box of the property inspector to move the layer to the right, off the screen.

Selecting the last keyframe and moving the carL layer to the right where it is not visible will cause the animation to move out of the browser window to the right. Selecting a keyframe in the Timelines panel will automatically select the corresponding layer in the document window. Keep in mind that whether the carL layer moves out of the browser window or simply stops on the far right side of the page will depend on how large the browser window is when it is open. When it is important for an animation to completely leave the right side of the screen, make sure that the value is large enough to make this happen for those with large monitors.

3.
Save your file and test it in the browser.

The car should come in from the left and move off the screen to the right.

4.
Drag the last keyframe on the timeline to the right to make the carL animation bar longer. Hold down the Play button to preview the animation.

The car animation now lasts longer and has slowed down. By default, when you add a layer to the Timelines panel, the animation bar is 15 frames long. The frame numbers show the duration of the animation. You can control the speed and length of the animation by setting the total number of frames and the number of frames per second (fps). Set the total number of frames by dragging the last keyframe to the right as you did in this exercise. Set the number of frames per second in the Fps text box. The default setting of 15 frames per second is a good average rate to use—faster rates might not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate on the user's system.

TIP

If you want to shorten and speed up the animation, drag the last keyframe to the left to shorten the animation bar.

5.
Save the file.

Leave this file open for the next exercise.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint