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

Lesson 9. 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.

1.
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.

If you want to verify this information, select each floating box and check the name in the Inspector. For this exercise you'll animate the Dragonfly floating box so that it passes in front of, and then behind the reeds.

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

Notice that the DHTML 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.

3.
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.

4.
Choose Window > Floating Boxes to display the palette.

5.
In the Floating Boxes palette, click in the Padlock column next to Poem and Jumper. The Poem and Jumper floating boxes are now locked in place for the current keyframe.

6.
Click in 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.

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

8.
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.

9.
Ctrl-click (Windows) or Command-click (Mac OS) to create a third keyframe for the floating box at frame 40.

In the next step, you will reposition the floating box at its start position.

10.
To get the floating box to the same starting position, you can select the first keyframe (at frame 0) and note the left and top coordinates in the Floating Box Inspector. Then select the keyframe at frame 40 and enter the coordinates from the keyframe at frame 0.

11.
Play the animation.

The dragonfly goes back and forth in front of the reeds and the frog jumps into the pond. Now you'll make the dragonfly go behind the reeds as it passes them from right to left.

12.
Stop the animation.

13.
Click to select the first keyframe for track 2, which is the track of the floating box containing the reeds.

14.
In the Floating Box Inspector, enter 2 for z-index, and press Enter or Return. This sets the position of the Poem floating box (which contains the reeds) in the stacking order of floating boxes on the page. By giving it a z-index of 2, you have room to give the Dragonfly floating box a higher and lower position in the stacking order.

15.
Click to select the first keyframe in the track of the Dragonfly floating box (it's in track 1). Then enter 3 for z-index in the Floating Box Inspector, and press Enter or Return.

16.
Select the second keyframe in that track, enter 1 for z-index. The lower position in the stacking order will put the Dragonfly floating box behind the reeds beginning at this keyframe.

17.
Select the last keyframe for the track of the Dragonfly floating box, enter 3 for z-index. This places the Dragonfly floating box in front of the reeds in the stacking order.

18.
Play the animation.

Notice that the dragonfly now seems to circle the reeds, first passing in front of and then passing behind them. (If the animation is moving too fast, change the FPS value in the pop-up menu.)

19.
Stop the animation, and choose File > Save.

20.
Close the DHTML Timeline Editor and close the haiku.html file.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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