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

Lesson 8. Creating Animations > Animating multiple floating boxes

Animating multiple floating boxes

Now that you've animated a single floating box, you're ready to work with an animation that uses multiple floating boxes. In this part of the lesson, you'll modify an animation on the Haiku.html page, the third link from the Poetry Sampler page.

Double-click the file Haiku.html in the Pages folder in the site window to open the Web page.

This page already contains the following objects:

  • A large floating box named Poem, with an image of a poem, pond, and reeds in it.

  • An animated floating box named Jumper with an image of a jumping frog in it. This animated floating box becomes invisible at the end (before it loops) and contains a transition effect called a Wipe. You'll learn how to create these effects later in the lesson.

  • A floating box named Dragonfly with an image of a dragonfly in it.

For this exercise you'll animate the Dragonfly floating box so that it passes in front of, and then behind the reeds.

Click the Timeline Editor button ( ) at the top right of the document window to display the Timeline Editor.

Notice that the Timeline Editor displays a separate track for each floating box on the page. This enables you to animate each floating box separately. The number in the bottom right corner of each floating box corresponds to the track numbers in the Timeline Editor.

Click on the first keyframe in track 1 to select it. The Dragonfly floating box is also selected on the Web page.

Since you need to work only with the Dragonfly floating box, you can use the Floating Boxes palette to temporarily lock the other two floating boxes in place so you don't accidentally select or move them.

If necessary, choose Window > Floating Boxes to display the palette.

In the Floating Boxes palette, click the Pencil icons next to Poem and Jumper so that they are dimmed. The Poem and Jumper floating boxes are now locked in place for the current keyframe.

Click on the document window to make it active, and then drag the Dragonfly floating box to a position near the top center of the Poem floating box.

Ctrl-click (Windows) or Command-click (Mac OS) to create a second keyframe for the floating box at frame 20 in the Timeline Editor.

In the document window, drag the Dragonfly floating box down and to the right of the reeds.

Notice that when you select the keyframe at frame 20, the other floating boxes are shown in their positions at frame 20 as well.

Ctrl-click/Command-click to create a third keyframe for the floating box at frame 40.

Select the keyframe, and drag the floating box back to its starting position at the middle of the page.



Not a subscriber?

Start A Free Trial

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