Animating floating boxes

You animate a floating box by inserting keyframes in its time track and repositioning the floating box in the page for each keyframe. You can also set the visibility status or the stacking order of a floating box based on a selected keyframe in its time track. You can use scenes to include multiple animations in the same Web page.

Note: An intermittent bug in Netscape 4.0 browsers may cause the content of an animated floating box to temporarily disappear, especially if the content is an image button. A simple workaround is to insert a nonbreaking space or a single-pixel transparent GIF image before the image button. (See Adding spacers or transparent GIFs.)


The DHTML Timeline Editor contains time tracks for two floating boxes. A.Beginning of the play range B. End of the play range C. Autoplay button D. Scenes options menu E. Action Track F. Time tracks G. Loop and Palindrome controls H. Playback buttons I. Counter for keyframe position in seconds and frames J. Frames per second K. Keyframe

To insert a keyframe in the time track:

1. Open the DHTML Timeline Editor by clicking the DHTML Timeline Editor button  in the upper right corner of the document window. A time track appears in the DHTML Timeline Editor for each floating box on the page. Initially, each time track contains a single keyframe.
2. Click a keyframe  to select the time track of a floating box. The name of the floating box appears in the Floating Box Inspector.
3. Ctrl-click (Windows) or Command-click (Mac OS) at the desired position on the time track to insert a new keyframe. You can also Alt-drag (Windows) or Option-drag (Mac OS) a copy of an existing keyframe to the desired position on the time track to create a new keyframe.

The new keyframe marks the end of the play range. This is indicated by the right play range locator , which follows as you drag the keyframe. If you insert more keyframes, the keyframe farthest to the right always limits the play range. The distance between keyframes determines the playback speed--the shorter the distance, the faster the animation plays back.

To specify the position of the floating box for a keyframe:

1. In the DHTML Timeline Editor, select the keyframe  in the time track for the floating box.
2. In the document window, drag the floating box to the position where you want it to appear for the selected keyframe. You can also enter the desired position in the Left and Top text boxes of the Floating Box Inspector.
3. Click the first keyframe  in the DHTML Timeline Editor to return the floating box to its start position.
4. Click the Play button  at the bottom of the window to preview your animation.

The floating box travels across the document window and stops where you set the last keyframe. The Time Cursor in the DHTML Timeline Editor stops at the right play range locator .

You can click the Stop button  twice to stop playing and to reset the Time Cursor to the beginning of the play range. Use the Backward button  to return the Time Cursor by increments to the beginning of the timeline.

To control the playback behavior:

1. Use the Loop and Palindrome buttons in the lower left corner of the DHTML Timeline Editor to control the playback looping:
• The Loop button  plays your animation in an endless loop. When it reaches the end point of the animation path, the floating box jumps back to the start and resumes traveling, repeating this cycle indefinitely.
• The Palindrome button  causes the floating box to bounce back and forth between the start and end points of the play range. (The Loop button must be active to activate the Palindrome button.)
2. To change the playback speed, select a new frames-per-second option from the FPS menu at the bottom of the DHTML Timeline Editor.

Most browsers can handle the default 15 FPS setting, even if running on systems with average video hardware. If you want to work with higher speeds, be sure to test your animation with a wide selection of system configurations to make sure that playback is smooth.

To set the visibility status of the floating box for a keyframe:

1. Select the keyframe in the time track from which you want the floating box to disappear or reappear.
2. In the Floating Box Inspector, deselect or select the Visibility option.
3. Click the Play button  to preview your animation.

The floating box appears or disappears until such time that the Time Cursor reaches another keyframe with a different visibility status.

To record an animation path:

1. Open the DHTML Timeline Editor, and select the starting keyframe.
2. Click the Record button  in the Floating Box Inspector.
3. In the document window, drag the floating box along the desired path. A keyframe appears at each major turn in the path.
4. Click each keyframe and correct the position if necessary.

To specify the shape of an animation path:

1. Select one or more keyframes in the time track.
2. Choose an option from the Animation pop-up menu in the Floating Box Inspector:
• None makes the floating box jump between the keyframes.
• Linear is the default path shape and makes the floating box move in a straight line.
• Curve creates a smooth curve between keyframes.
• Random creates a zigzag path of random lengths between keyframes.

To create multiple scenes in an animation:

1. Create an animation. GoLive names the first animation you create "Scene 1" by default.
2. In the upper left corner of the DHTML Timeline Editor, choose Rename Scene from the pop-up menu.
3. Enter a name for the scene, and click OK.
4. Choose New Scene from the pop-up menu.
5. Add keyframes and animate the floating boxes for the new scene, and then preview the animation for the new scene by clicking the Play button in the DHTML Timeline Editor.

To control the playback of scenes:

1. Go to the second scene, and click the Autoplay button  to deselect it and disable automatic playback.
2. Return to the first scene, and Ctrl-click (Windows) or Command-click (Mac OS) in the Action Track anywhere before the last keyframe position to insert an action marker (indicated by a question mark icon . (The Action Track is the horizontal gray bar between the timeline and the time tracks.)
3. In the Action Inspector, choose Action > Multimedia > Play Scene and choose the name of the second scene from the pop-up menu.

The Play Scene action instructs the browser to switch to the specified scene after finishing playback of the current scene. On the Action Track, the Play Scene action icon  replaces the marker.

4. If the first scene is a looped animation or a palindrome, you need to insert a Stop Scene action: Ctrl-click (Windows) or Command-click (Mac OS) in the Action Track at the very last keyframe to insert an action marker. In the Action Inspector, choose Action > Multimedia > Stop Scene and choose the first scene from the pop-up menu. The Stop Scene action icon  appears in the Action Track.

The Stop Scene action stops the playback of a scene, even if it is an endless loop. Be sure to insert this action after the Play Scene action in the Action Track; otherwise, the animation stops before scenes can be switched.

5. Move the Time Cursor to the beginning of the first scene and preview the animation in the browser.

Note: To give viewers more control over your animation, you can also attach the Play Scene action to a rollover button or hypertext link in your page. For instructions on using actions with rollover buttons and text, see Using Actions.