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

Lesson 16. Animating with Timelines > Positioning an Object

Positioning an Object

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

1.
In the ship.html document, select the first keyframe on the animation bar for the yellow layer in the Timelines panel. Click the selection handle of the yellow layer in the document window and use the arrow keys to move the layer to the left and off the screen.

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.

TIP

You can also type a negative number in the L (Left) text field at the top of the Property inspector to move the ship layer off the screen.

You have selected the first keyframe and moved the ship 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 15), where Dreamweaver's horizontal and vertical rulers intersect when they are visible. Anything to the right or down from that point is a positive value; anything to the left or up from that point is a negative value. In order to make the yellow layer begin outside of 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 (Left) text field because the horizontal location of a layer on a Web page is defined by its 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 field. The frame text field is a good indication of the exact frame that is selected.

2.
Select the last keyframe on the animation bar for the yellow layer in the Timelines panel. Type 700px in the L text field of the Property inspector and press Return (Macintosh) or Enter (Windows) to move the layer to the right, off the screen.

Selecting the last keyframe and moving the yellow 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 yellow layer moves out of the browser window or simply stops on the far right side of the page will depend on how large the visitor's browser window is open. If 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 ship should come in from the left and move off the screen to the right.

NOTE

You may have to adjust the size of your browser window to less than 700 pixels wide in order to see the ship move off the page, or you can increase the left value of the ship layer to make it move farther to the right.

4.
Drag the last keyframe of the yellow animation bar on the Timelines panel toward the right to frame 45. Hold down the Play button to preview the animation.

The animation now lasts longer and has slowed down. By default, animation bars are initially 15 frames long when you add layers to the Timelines panel. 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 field. 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