• 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 inspector. 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 moveit.htm in the Lesson_14_Timelines folder. Title the document Move It.

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

Click the Draw Layer button on the objects panel and draw a layer on the bottom-left side of the page. Use the Layers panel to name the layer carL.

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.

Insert the coupe.gif image from the Lesson_14_Timelines/Images folder or from the Assets panel Favorites Lesson 14 folder.

To animate an object (text or graphic), the object must be contained in a layer.

Choose Window > 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 carL 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.

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 “carL” displayed in the bar.

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 preceding 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 the animation bar on the timeline by dragging the solid area of the bar. For this exercise, make sure the animation bar is positioned in the first row, starting in frame 1 with the 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