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

Animating Objects

To create animations on your Web pages, you need to use layers and the Timelines panel. This exercise demonstrates how to add objects in layers to a timeline and how to work with those elements once they are a part of the timeline.

Create a new page and save it as ship.html in the Lesson_16_Timelines folder. Title the document Lights of the Coast: Racing Ships. Choose Modify > Page Properties, select waterBKG.jpg as the background image, set the text to black, and click OK.

In the following steps, you will animate an image on this page.

Click the Draw Layer icon on the Insert bar and draw a small layer on the bottom left side of the page. Use the Layers panel to name the layer yellow.


If the Layers panel is not visible, you can open it by choosing Window > Others > Layers or using the keyboard shortcut F12.

Layers must be used to create an animation using timelines. Keep in mind that using layers will limit your audience to those using 4.0 or later browsers.

Select the yellow layer. On the Property inspector, type 78px in the W text field and 58px in the H text field. Insert the ship_Y.gif image from the Lesson_16_Timelines/Images folder into the layer.

You have set the width and the height of the layer. To move an object (such as text or a graphic), the object must be contained in a layer.


Objects such as images can be added to the timeline without placing them in a layer, but you will not be able to animate their positions.

Choose Window > Others > Timelines to open the Timelines panel.

The Timelines panel represents the properties of layers and images over time.

Each row on the Timelines panel is called an animation channel and represents elements on the page. Because you can only animate layers, each row on the timeline can only contain layers. You can use the Timelines panel to control a layer's position, dimension, visibility, or stacking order.

Each column on the Timelines panel is called a frame and represents a unit of time. Frame numbers indicate the number of frames each animation occupies.

Select the yellow layer. Choose Modify > Timeline > Add Object To Timeline to put the layer on the timeline.


You can also use the layer selection handle to grab the layer and drag it from the document window into the Timelines panel.

When you use Modify > Timeline > Add Object To Timeline, the layer is added to the Timelines panel in the first Animation channel (the first row). When you drag a layer into the Timelines panel, the layer will appear in whichever animation channel (row) that you drop it into.

A message box appears to tell you what layer attributes the Timelines panel can animate. You can close the message box.

A horizontal blue animation bar appears in the new channel on the timeline and displays the name of the layer in the bar. You should see the word “yellow” displayed in the bar. If you see the name “Image1” in the animation bar, you added the image, not the layer, to the timeline. Delete the bar from the timeline and try again.

If you were to continue to add layers to the timeline using the Modify menu, the next layer would be placed in the next Animation channel, in the row below the first bar.


You can also add more timelines to a page by choosing Modify > Timeline > Add Timeline. The timeline drop-down menu allows you to select a timeline if you have created more than one.

You can move animation bars on the Timelines panel by dragging the solid area of the bars. For this exercise, make sure the animation bar is positioned in the first row, starting in frame 1 with the red playback head in the first frame.

Since you used the Modify menu to add the layer to the timeline, the animation bar will be in the first row and begin at frame 1. If you drag a layer into the Timelines panel, you can drop it anywhere; you may need to adjust the placement of the animation bar.

Animation bars show the duration of each object. A single row can include multiple bars representing different objects. Different bars cannot control the same object in the same frame. The animation bar can be relocated to any frame and any channel. The initial placement of the animation bar in the channel is based on the position of the playback head. The playback head shows which frame of the timeline is currently displayed on the page. If the playback head is in frame 1, the animation bar begins in frame 1; if the playback head is in frame 8, the animation bar begins in frame 8. As you move the animation bar, the playback head will also move.

Save the file.

Leave this file open for the next exercise.



Not a subscriber?

Start A Free Trial

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