How to stack Order to simulate Relative Motion

To stack Order to simulate Relative Motion

The stacking order, also known as the z-index, is a unique property of floating boxes. In animations with multiple objects, you can use this property to determine which object should appear on top when the paths of two or more floating boxes cross.

The following example is based on a simple animation that simulates relative motion. It is a palindrome that consists of two objects, a stationary floating box with a GIF image and an animated floating box with text content. Four key-frames, each on two time tracks, control the animation, subdividing it in four phases. The test box remains on top until the final phase, when it moves behind and is hidden by the image box.

To create an animation with one stationary object and an animated object revolving around it:

Step 1.

• Insert two floating boxes and add content.

Step 2.

• Select the image box and place four key-frames on its time track in the TimeLine Editor.

Step 3.

• To make the image box stationary, select the first key-frame of the image box; and then drag the image box to a convenient location

Step 4.

• The position should be the same for all four key-frames, and prevent the image box from jumping during playback. If in doubt, click all four key-frames to check the positions in the Top and Left text boxes of the Floating Box Inspector. If necessary, correct any pixel offset by hand editing the top and left coordinates or each key-frame.

Step 5.

• Click the Loop and Palindrome buttons in the TimeLine Editor to play the animation in an endless loop.

Step 6.

• Click the Play button to preview the stationary object. The image box shouldn’t be moved. If any motion occurs, return to step 4 and correct the Top and Left coordinates. Now, you’ll insert four key-frames and assign text box positions to them.

Step 7.

• Select the text box and insert four key-frames on its time track in the TimeLine Editor. Place each key-frame directly below the image box key-frames to synchronize them, as the following illustration.

• Two-time tracks will appear in the TimeLine Editor. Each holds four key-frames.

Step 8.

• Position the text box relative to the image box:

  1. Select the first key-frame of the text box; then drag the text box to a position to the left of the image box, aligning it vertically with the center of the image box.
     

  2. Select the second key-frame of the text box; then drag the text box horizontally on top of the image box.
     

  3. Select the third key-frame of the text box; then drag the text box horizontally to the right of the image box.
     

  4. Select the last key-frame of the text box, and then drag the text box horizontally on top of the image box.

Step 9.

• Define the stacking order for all four key-frames, both for the text box and image box.

  1. Select the first key-frame of the text box. In the Floating Box Inspector, enter 2 in the Depth text box.
     

  2. Select the first key-frame of the image box. In the Floating Box Inspector enter 1 in the Depth text box.

1. Current coordinates
   

2. Selects the shape of the animation path
   

3. Selects a key-frame color
   

4. Sets the stacking order
   

5. Sets visibility

Step 10.

• Repeat step 9 for the second and third key-frames to stack the text box on top of the image box.

Step 11.

• Reverse the stacking order for the time span after the last key-frame:

  1. Select the last key-frame of the text box in the Floating Box Inspector and enter 1 in the Depth text box.
     

  2. Select the last key-frame of the image box. Enter 2 in the Depth text box of the Floating Box Inspector.

Step 12.

• Click the Play button to preview your animation. On returning from the farthest right point of the animation path, the text box should disappear behind the image box.

How to work with Action in Animating a Web Page

To work with Action in Animating a Web Page

Actions allow you to add sound, trigger the playback of scenes, dynamically change the content of images, and control other processes in the browser window. You can select them in the Action Inspector, or attached to an image or text, in the Actions tab of the Button and Text Inspectors.

How to work with Time Tracks in Animating a Web Page

To work with Time Tracks in Animating a Web Page

Allow you to insert key-frames in a dedicated time track for each floating box, and adjust its timing and location. Each single track accepts multiple key-frames, which you can place where you want.

How to work with Key-Frames in Animating a Web Page

To work with Key-Frames in Animating a Web Page

Mark points on the time track of an animation sequence which some of the specific change in property occurs. These points include changes in direction within the animation path as well as modifications of general properties, such as visibility and stacking order. For each key-frame, you can control the position of the associated floating box by dragging it to the desired location in the document window. Moreover, the distance between two key-frames determines the playback speed: The shorter the distance, the faster the animation will play back and vice versa.