Creating Timeline Animations

From Documentation
Jump to: navigation, search

Creating Timeline Animations

Using the Timeline Editor, you may create animations of the objects that are already placed on the page layout, as well as other interesting effects using timeline actions. One can view these animations as simple, predefined actions. The Timeline Editor will not only help you create animations; it will also help you to organize them into frames and control them over time. No programming is required. You build animations by simply designing the animations with your mouse, and you may set a trigger event by choosing a series of options from menus.

When you are in Timeline mode, note that:

  • The MasterBorder is locked because you cannot add the objects placed on it to the Timeline animations.
  • You can create animations using only the objects and the components that are already placed on the page layout.
  • You can change the objects properties using only the CSS Style Sheet panel.
  • You can only modify the properties of the selected objects. A text box is seen as an object; you cannot change the properties for parts of text.

About the Timeline Editor

With the Timeline editor, you can organize objects and precisely control the timing of objects in layers and frames.

Timeline Editor offers you the possibility to create animations using any object that is already placed on the layout. The objects that are added to an animation may:

  • Change position for different time frames.
  • Change dimension, creating a zooming in or out effect.
  • Change the background color, or the font color in the case of the text objects.
  • Change text properties: font size, font family, font weight, font style, etc.
  • Change their visibility.
  • Change the background image (text, layout region, tables).

The Timeline Toolbar

In Page View, the Timeline toolbar offers you the possibility to enter the Timeline mode or to create a new animation before entering the Timeline mode. If you have any object on the page layout, you can also make the selected object a trigger of the timeline animation. If no object is selected, the layout becomes a trigger for a timeline action.

Note: The Timeline toolbar is available only in Page View.

Entering the Timeline Mode

To enter the Timeline Mode:

  1. Click the Timeline Mode button from the Timeline toolbar.
  2. Create a new Timeline animation using the Create New Animation button from the Timeline toolbar.
  3. Set a new Timeline Action using the Set Actions dialog.

Note: If you type a new animation name in the Animation field, then NetObjects Fusion opens in Timeline Mode.

When in Timeline Mode, the Timeline Editor panel is displayed on top of the Layout. When you first enter the Timeline Mode, the Timeline Editor displays an animation by default. No objects are added to the default animation, Animation 1.

When in Timeline Mode, the MasterBorder area becomes locked. The scroll area, except the horizontal page scroll, also becomes disabled.

When in Timeline Mode, you can access only four panels:

  • Timeline Editor panel, which allows you to precisely control the timing of objects in layers and frames.
  • Animation Triggers panel, docked with the Timeline editor panel, displays all the animations and the actions added to the objects that trigger the animation.
  • CSS Property Sheet panel, which allows you to select from the CSS 2.1 property options available and assign values for the selected object from the layout. See Working Directly with CSS Properties.
  • Object Tree panel, which helps you select objects, especially if you are working with layered or hidden objects.

Note: The Property Inspector is not enabled in Timeline Mode.

In Timeline Mode, you may take advantage of the Undo/Redo options for the following options:

  • Adding objects to timeline
  • Adding/modifying properties
  • Deleting objects from timeline control
  • Deleting properties from timeline control
  • Deleting an animation from the "Animation Triggers" pane
  • Adding/deleting/modifying an "Enter Frame" action

If you select a new animation, you cannot undo or redo the changes you have done to the previously selected animation.

Selecting Objects in Timeline Mode

In Timeline Mode, when you select an object into the layout that has already been added to the displayed animation, the object appears in the Animations pane and its node will be expanded, displaying the object's properties.

If the Global layer is selected into the Timeline Editor panel, all objects from the layout will be deselected, while the layout will become selected.

Exiting the Timeline Mode

You may exit the Timeline Mode, by choosing one of the following options:

  • Click the Timeline Mode button.
  • Click the X button from the top-right corner of the Timeline Editor panel.
  • Change the NetObjects Fusion view, i.e. go to Publish View.

Timeline Editor Panel

By default, the Timeline Editor panel appears docked to the top of the NetObjects Fusion window, above the Layout. The Timeline Editor panel also displays the Animation Triggers tab, from where you can easily access the Animation Triggers panel. You can change its position anytime you want. You may dock the Timeline Editor panel to the bottom or either side of the window above, or you can display the Timeline Editor as a floating window.

The Timeline Editor panel can be moved, docked, or resized like any other NetObjects Fusion panel, except it cannot be hidden. For more information, see Working with panels.

When you enter the Timeline Mode, the first thing you see is the Timeline Editor displaying one Global Animation layer. The red rectangle in the timeline is the playhead. The playhead determines what is seen at a given time. Using the Timeline Editor, you may control the length of the animation, the length of time an object appears on the layout, as well as the order of the objects.

When you create animations, you work with frames and keyframes displayed in layers.

Layers display a series of frames. All you have to do is to add the objects to the animation and change the objects properties for the selected frame using the CSS Property Sheet panel or the drag and drop method for the most common properties (left, top), or resize the objects using the mouse (width, height).

Property layers are stacked on top of one another and each of them embeds a different property of the selected object. When you modify another property of an object, a new layer is displayed in the Timeline Editor showing the property change in a keyframe. By default, the first frame of a default property layer is a keyframe. A keyframe is a frame in which you define a different property to the object that is added to the animation.

An animation must have at least two keyframes. When you add an object to the Timeline Editor, by default the timeline displays three Property layers, and each of these layers contains a keyframe in which are defined the initial properties of the objects. The frames between two keyframes produce animations without drawing each frame of an object's layer.

The main components of the Timeline Editor are:

  • Animations pane is located on the left side of the Timeline Editor panel and displays the animations created with the objects of the displayed page. In this pane, the objects that are added to the timeline animation are listed under the animation's name.
  • Timeline header at the top of the Timeline indicates frame numbers.
  • Layersdivide lengths of time into frames. The layers of an animation are listed in a column on the left side of the timeline within the Animations pane. There are three types of layers:
    • Global Layer is the layer of the entire animation. It is used to insert labels.
    • Object Layer is automatically added when you add an object to a timeline. Object Layers are expandable to reveal Object properties, which are actually tweened. By default, they should be expanded. On this layer, you can add labels and actions to the object.
    • Property layers are sub-layers of the object's layer. By default, when you add an object to a timeline, three property layers appear monitoring the object's position (top, left, position the latter is mandatory for top and left properties to work).
  • Frames contained in each layer appear in a row to the right of the property layer name.
  • Keyframes display a solid dot. In the Timeline Editor, a keyframe is a frame where a change begins or ends. A simple animation requires two keyframes: one at the start and one at the end. Between two keyframes, there can be any number of regular frames. Frame 1 of a default property layer in the timeline is a keyframe. For example, the first frame of the left property layer stores the objects initial left position.
  • Playhead is mobile and indicates the current frame displayed on the layout.
  • Timeline status indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.

The objects that are added to timeline animation are listed in a column on the left side of the Timeline. By default each object displays three property layers. If another object's property changes, a new property layer is added to the timeline editor. For example, if you change the color of the text, a new property layer color appears under the text object layer. Frames contained in each layer appear in a row to the right of the property layer name.

Working with Frames and Keyframes

The animation time is divided into discrete units termed as frames. Each frame is displayed for a certain fraction of time. The first frame of each default property layer is marked with a black dot because it plays the role of a keyframe. A keyframe is used to define a change in an animation. NetObjects Fusion can tween, or fill in, the normal frames between two keyframes, producing smooth animations. In the Timeline Editor panel, you may select one or multiple frames.

  • To select a single frame, you only need to click it.
  • To select multiple frames, hold down the mouse button and move the mouse cursor over the frames you want to select, and then release the mouse button.

To add a new keyframe:

  1. Select the object you want to animate. The object's property layers are displayed in the Animations pane.
  2. Right-click the frame where you want to insert the keyframe.
  3. From the Context menu, select the Insert Keyframe option. The inserted keyframe is a copy of the adjacent left keyframe.

To change the property this keyframe embeds, you need to select this keyframe and change the object's property as you wish.

To add multiple consecutive keyframes:

  1. Select the regular frames where you want to insert multiple keyframes.
  2. Right-click the selection.
  3. From the Context menu, select the Insert Keyframe option.

To change the position of a keyframe:

  1. Click the keyframe to select it.
  2. Holding down the mouse button, drag the keyframe to the frame number where you want to move it.

Note: If you click the first keyframe and try to move it to another location, you will only copy the selected keyframe to that location.

To remove a keyframe:

  1. Right-click the keyframe you want to remove.
  2. From the Context menu, select the Remove Frame option.
  3. The selected keyframe is removed.

To increase the number of frames between two keyframes:

  1. Right-click a frame between the two keyframes.
  2. From the Context menu, select the Insert Frame option. A new regular frame is inserted between the two keyframes.

To decrease the number of frames between two keyframes:

  1. Right-click a frame between the two keyframes.
  2. From the Context menu, select the Remove Frame option. The selected regular frame is removed.

You can also select multiple frames, and then remove them all at once.

By default, NetObjects Fusion creates motion tween between two keyframes. Motion tween is nothing but tweening an object's movement from one position to another. You only need to define the starting and ending frames (keyframes) and NetObjects Fusion generates the content for the frames in between. By default, the Motion tween is set to be linear, but you can also set any other easing function that is displayed in the Create Motion Tween menu list. Each property may have its own easing. For numerical or color values, you may set any type of easing, but for string type values, it is recommended to use the Linear, or the Step options for motion tween.

NetObjects Fusion varies the object's size, rotation, color, or other attributes between the starting and ending frames to create the appearance of movement.

To remove the motion tween:

  1. Right-click the second frame after the first keyframe, or any other frame between the two keyframes.
  2. From the Context menu, select the Clear Motion Tween option.
  3. From the Create Motion Tween menu list, select an easing function for the Motion Tween. By default, the Motion Tween is set to be linear.

To add a motion tween between two keyframes:

  1. Right-click the second frame after the first keyframe, or any other frame between the two keyframes.
  2. From the Context menu, select the Create Motion Tween option.

Adding Labels to Timeline Layers

By using the context menu from the Timeline Editor panel, you can add labels to any layer.

To not interfere with the motions displayed on the property layers, it is advisable to add labels:

  • To the Global layer, if you want to add a label about the animation, or
  • To the Object's layer, if you want to add a label concerning that object precisely.

To add a label to the animation:

  1. From the Global Layer of the animation, select a frame by clicking on it.
  2. Right-click the selected frame.
  3. From the context menu, select the Label option. The Frame Label dialog appears.
  4. In the Frame label field, insert a label for the selected frame.
  5. Click OK.

If you want to add a label to a frame of an object layer, select a frame from an object layer and repeat steps 2-5 above.

You may add as many labels as you want.

Deleting Layers

Global Animation layers cannot be deleted.

By deleting an object layer from the Timeline Editor, you remove the object from the animation.

To delete an object layer from the Timeline Editor:

  1. Select the object. Its corresponding layers will be displayed in the animation pane.
  2. Click on the Trash icon from the Animations pane. The selected object will be removed from the animation.

To delete a property layer:

  1. Select the object to which you want to delete the property layer. Its corresponding layer will be displayed in the animation pane.
  2. Click the "+" button to expand its property layers, if it is not already expanded.
  3. Select the property layer you want to delete.
  4. Click the Trash icon from the Animations pane.

The selected property layer will be removed. By deleting a property layer, you will also remove the property's values that you have changed.

Locking Objects from the Timeline Editor Control

The controls from the Animations pane of the Timeline Editor let you hide, show, lock, or unlock layers.

To lock an object on a certain position on the layout:

  1. From the layout, select the object you want to lock.

The object's layer appears expanded in the Timeline editor.

  1. In the Animations pane, click the black bullet situated on the Lock column.

The object is now locked. When an object is locked, a red X will be displayed on the Lock column of the object's layer.

If an object is locked, it means that its properties can no longer be changed, unless it is unlocked. If you have already set an object's properties and you don't want to change anything else to that object, you may lock it. Once an object is locked, you cannot move it or change its properties by mistake.

Hiding Objects from the Timeline Editor Control

Timeline Editor controls allow you to display only the objects that you work with at a given moment of time.

You may hide only the objects that are added to the timeline animation.

To hide an object:

  1. From the layout, select the object you want to hide.

The object's layer appears expanded in the Timeline Editor.

  1. In the Animations pane, click the black bullet situated on the Hide column.

The object is now hidden. When an object is hidden, a red X will be displayed on the Hide column of the object's layer.

Setting the Speed of the Animation

Before you start creating your animation, you must decide on a Frame Rate that gives the speed of the animation. The number of frames played per second is known as the Frame Rate of the movie. By default, for a timeline animation the frame rate is set to 15 frames per second. The status display at the bottom of the Timeline Editor indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.

To modify the frame rate:

  1. Click the current frame rate.

The Animation Properties dialog appears.

  1. In the Frame rate field, enter a new value.
  2. Click the OK button.

How Animations Work

NetObjects Fusion makes the process of creating animations very simple. Creating an animation requires to:

  1. Add multiple objects to the layout.
  2. Create a new animation and enter the Timeline Mode.
  3. Add the objects to the Timeline Editor.
  4. Change the objects properties for different time frames.
  5. Set a trigger event.

You can create either frame-based animations or tween-based animations.

Within a Frame-by-Frame animation, every frame is a keyframe. You physically adjust and control the contents of each individual frame.

In the case of tweened animation, things are much simpler: you only need to set up a starting and ending keyframe, because NetObjects creates the frames in between.

Adding Multiple Objects to the Layout

Before you create an animation, it is necessary to add all the objects that you want to use in the animation on your page layout.

To add objects to a Layout Region:

  1. Select the appropriate tool and create an object within the Layout area.
  2. Drag objects into the Layout from the MasterBorder.

Warning: If you want to add a table to a timeline animation, you need to set the weight and height dimensions in percentage. Otherwise, you cannot animate the table's dimension.

Create a New Animation

  1. From the Timeline toolbar, select the Create New Animation button. The New Animation dialog appears.
  2. Enter a name for the new animation.
  3. Click the OK button.

Once you type a new animation name in the Animation field, then NetObjects Fusion opens in Timeline Mode, displaying the new animation name in the Timeline Editor.

  1. Add the objects to the Timeline animation.

Adding Objects to the Timeline Animation

To add an object to the Timeline animation:

  1. In Timeline mode, position the Timeline play head to specify the interval of a keyframe where you want to add the object.
  2. Right-click the object.
  3. From the Context menu, select Add Object to Timeline option.

The selected object will be displayed in the Animations pane.

  1. Repeat the steps above for all the objects you want to add to the Timeline animation.

You can also add the selected object via drag-and-drop or using the Add Object to Animation button from the Timeline toolbar. This method allows you to select multiple objects and drag them in the Timeline Editor panel.

Setting Objects Properties

By changing the value of any property of an object, you will create a visual animation. When creating an animation, you must first determine which properties you want to animate.

When creating an animation, you need to change the object's property from one value to another value and specify the duration in frames. The duration of the animation reflects how long it takes to go from the starting to the ending value. For example, you can change the value of an object's Height or Width to make it grow or shrink.

Each property has its own layer, meaning that the Timeline Editor displays a layer for each changed property of an object. The positioning properties (top, left, and position) are automatically added when adding an object. The first frame of each of the default property layers is a keyframe, embedding the object's default values from Page design.

With the exception of the position and size properties (top, left, width, height), if you change an object's properties in a frame different than frame 1, the Timeline Editor will add two keyframes, but the first keyframe will be considered an empty keyframe, and consequently NetObjects Fusion will not create a motion tween between the two keyframes.

Warning: You can no longer change the top and left properties if you delete the "position" property from the Timeline Editor.

Absolute Position vs. Relative Position

Position property can be set as "absolute" or "relative", and determines the interaction of the object with the other objects from the page.

When the Position value is set on "absolute", the object is taken out from the page context, meaning that the rest of the content behaves as if that absolute element doesn't exist, even though that element is visible on the page. However, if the object resizes or moves, it will do this without interacting with the other objects. The object may fly above other objects, zooming in-out or covering other objects. This is useful if you want to create an effect of a banner that flies in, zooms in and out and positions in a corner, and you don't want that the whole layout to be altered by those effects.

When the Position value is set on "relative", it is not taken out from the page context. Also, when resized, it pushes the other objects from the page in order to "make room", changing the layout. If you don't want that object to cover other objects when resizing, use this property value.

By default, position is set to "absolute" because most animations are layout independent.

In order to set an animation's start and end values:

  1. Move the playhead to the first frame.
  2. Set the property with the needed start value.
  3. Move the playhead to the desired frame and set the end value.

The keyframes that store the two values are automatically added. If you are changing an object's property when you are, for example, in frame 20, then NetObjects Fusion adds two keyframes, 1 and 20, but the first keyframe will be empty.

The properties can be modified using the CSS Style Sheet panel. The positioning and size properties (top, left, width, height) can also be changed by moving or resizing the object on the layout.

Moving an Object

To move an object from one part of the layout to another, you need to provide the initial position and the end position. NetObjects Fusion creates a motion tween between the two positions.

In Page design, add the object you want to use in the motion tween animation.

  1. Enter the Timeline Mode.
  2. Place the playhead to Frame 1.
  3. Right-click the object and select Add Object to Timeline option from the Context menu.

The object layer appears in the Animations pane. The object's initial position will be considered the start position.

  1. Click on the "+" button to expand the property layers of the object.
  2. Click on frame 70 to select it.
  3. Drag the object to a new position that will be considered the end position of the animation.

By default, NetObjects Fusion creates motion tween between the two keyframes.

  1. Set a trigger event for the created animation.
  2. Click the Preview button.

NetObjects Fusion can also tween the size and the color between two keyframes of an object.

Zooming in an Object

If you are changing the width or height property when you are in, for example, frame 20, two keyframes will be added (1 and 20); the first frame will have the size values of the original object as it is in Page Design.

  1. In Page design, add the object you want to use in the motion tween animation.
  2. Enter the Timeline Mode.
  3. Place the playhead to Frame 1.
  4. Right-click the object and select the Add Object to Timeline option from the Context menu.

The object layer appears in the Animations pane.

  1. Click on the "+" button to expand the property layers of the object.
  2. Click on frame 20 to select it.
  3. Change the object's height and width values by using the CSS Property Sheet panel or by using the mouse.
  4. Set a trigger event for the created animation.
  5. Click the Preview button.

Changing Text Properties

After you add the text object to the Timeline Animation, it displays its layers in the Animations pane.

  1. Click the text to select it. Its property layers appear expanded in the Timeline Editor.
  2. Place the Timeline playhead on the frame to which you want to change the object's property. In our example, the Timeline playhead remains on frame number 1.
  3. In the CSS Property Sheet, expand the Position category of the CSS attributes.
  4. Changing the Left property to a negative value causes the object to move beyond the visual boundaries of the page. The changing of the property value is recorded within a keyframe.

Note: Keyframes record changes to properties, allowing you to animate the transitions between different values.

The text object is now placed outside the page area.

  1. Place the Timeline Playhead where you want the object to become visible.
  2. Change the Left property to a positive value until the object reaches the visual boundaries of the page. By default, NetObjects creates the frames in between the two keyframes.

To change another property of the selected text object:

  1. Place the playhead to Frame 1.
  2. In the CSS Property Sheet, expand the Font category of the CSS attributes.
  3. Set the initial values to Color and Font-style attributes.
  4. Place the playhead to the keyframe to which you want to set a new value.
  5. In the CSS Property Sheet, expand the Font category of the CSS attributes.
  6. Set new values to Color and Font-style attributes.

Two new property layers displaying the property changes of the object are added to the Timeline Editor. By default, NetObjects creates the frames in between the two keyframes.

Warning: If you do not set initial values for the Color and Font-style properties in frame 1, then the Color and Font-style layers will have two keyframes each, but the first frame of the layer will be an empty keyframe.

After you set a trigger event for the created animation, click the Preview button.

Specifying Timeline Animation's Trigger Event

Your next step is to specify the user action that begins the animation. Using NetObjects Fusion, you can easily set a trigger event that causes the animation to begin.

You can set a trigger event to any object, Layout, or MasterBorder.

  1. In Page view, select the item you want to trigger the animation, and click the Actions button on the Properties panel.
  2. Click the (+) button on the Properties panel to set a trigger event for the Timeline animation. The Set Action Dialog appears.
  3. Specify the action's trigger event in the When field.
  4. Click the When menu button next to the field, point to a trigger category, and click the trigger event you want. The trigger events available depend on the object you re adding the action to.

These can include:

  • Mouse. Mouse options do not apply in some cases, including text objects, Layouts, and frames. Mouse options are for triggering an action when the site visitor clicks the object, mouse down or up (for example, you might display a pushed-in picture of a button on mouse down), or moves the pointer over or off the object.
  • Object. Triggers the action when the object is either hidden or shown as the result of another action that targets this object.
  • Page. Triggers the action when the page finishes loading, or when the site visitor opens another page.
  • Transition, Motion, Drag. In a sequence of actions, triggers the action at the start or end of another action that targets this object. For example, ending a drag might trigger another action to restore the object you dragged to its original position.
  • Custom. These are messages you create to trigger one action with another for specialized action sequences. See Tailoring Actions with Custom Messages.
  • To add an animation-type action, select Timeline actions from the dropdown list. For information about standard or scripted actions, see Building Dynamic Pages.
  1. On the Animation field, you start creating a new animation by typing a name in the Animation field. Here, if you already have created several animations, you may select the existing animation that this object triggers.
  2. In the Message combo-box, you may select one of the following values:
  • Play Starts playing the animation with keyframe 1.
  • Pause Performs temporary cessation of the animation on the current frame, interrupting the animation.
  • Cancel Animation Stops animation and moves to keyframe 1.
  • Go To<animation frame / label> Plays the animation beginning with the set frame number, not with the first frame. When this option is selected, the Parameter(s) field becomes enabled. You can type an integer, the frame number, or you can choose a label by pressing the button next to the edit box. In order to choose a label, you have to choose the timeline animation first; otherwise, the label list will be empty. All labels set into the selected animation are visible in the list.
  • Stop Stops animation in the current frame.
  1. If you choose the Play option for the selected timeline animation, you may enable the following options:
  • Loop. Enable this option to repeat your animation.
  • Delay. Enabling this option, you may set a number of seconds to delay the animation.
  • Backward. This option becomes enabled if Play or Go To are selected in the Message field. Enabling this option, the animation will play backward, starting with the last frame if Play message is selected, or with the specified frame if the Go To message is set.
  1. Click the OK button.

In Timeline Mode, you may also access the Set Action dialog from the Timeline Mode toolbar.

Adding Actions in Timeline Mode on Enter Frame Event

Within the selected animation, you can also add "Enter Frame" actions for an object.

To add an Enter Frame action to an object:

  1. Add the object to the Timeline Animation.
  2. Select the object's layer.
  3. On the Object's layer, right-click the frame to which you want to set up an Enter Frame action.
  4. From the context-menu, select the Add Action option.

The Set Action dialog appears, with the following fields disabled:

  • When - Is set to "Enter Frame" and cannot be changed;
  • ActionMode - Is set to "Standard Action" and cannot be changed; scripted actions and timeline actions cannot be added to a frame.
  • Target - Is set to the currently selected object, which is the one selected in TLE also.
  • Parameter(s) - Enabled only when a function (Message) has parameters.
  • Cascade message.

You can also add Enter Frame actions to Flash components that have the loop effect option enabled.

The Flash Functions menu entries are Play, Pause, and Stop Flash. They are visible only for Flash objects. The play, pause, and stop functions are referring to the looping effect, not to the intro or outro effect.

Within a keyframe, you may have more than one action. To see all the actions set for an object's frame:

  1. Right-click the frame.
  2. From the context-menu, select the Manage Actions option. The Actions dialog displays all the actions set on the selected frame for the selected object.

By using the "+" and "-" buttons, you may delete or add new actions or set their appliance order using the arrow buttons.

The Animation Triggers Panel

The Animation Triggers panel displays all the Timeline animations that you have created on the current page and their corresponding actions that are triggering them. The Animation Triggers panel allows you to organize and set trigger events for your timeline animations, rename them, or delete them.

By default, the panel is hidden in Page Design, but you can access it at any time from the View Menu > More Panels > Animation Triggers.

The animations you create in the Timeline Mode will automatically update the Animation Triggers panel.

In Timeline Mode, the Animation Triggers panel is docked with the Timeline Editor control. The Animation Triggers and the Timeline Editor appear as a two tabbed panel.

The Animation Triggers panel displays three command buttons:

  • Delete. Becomes enabled if one or more items from the panel are selected. Click the Delete button to delete the selected groups or items.
  • Add Trigger. Brings the Add Action dialog as it is displayed when the Set Timeline action button is clicked. This option is related to layout selection, not panel selection.
  • Add Timeline. NetObjects Fusion switches to Timeline Mode. This option is related to layout selection, not panel selection.

The Animation Triggers panel displays the Timeline animations and the actions that trigger them in two ways:

  • Grouped by Triggers: The Animation Triggers panel displays a list of all the objects of the current page that trigger a timeline animation. Below the object name, you may see the event and which animation it triggers: Trigger > Animation.
  • Grouped by Animations. The Animation Triggers panel displays a list of all the Timeline animations available for the current page. Below each Timeline Animation name, you may view the object and the event that triggers the animation. Animation > Triggers.
  • You may also filter the displayed data by showing all data for a page or showing data only for the selected object.

To show all the animation triggers that are available on the current page:

  1. From the View menu, select More Panels > Animation Triggers.
  2. On the Animation Triggers panel, click on Show All link.

All the Animation triggers that are created on the current page will be displayed in the Animation Triggers panel grouped either by animations or by triggers.

To show only the animation triggers set on the selected object:

  1. From the View menu, select More Panels > Animation Triggers.
  2. On the Animation Triggers panel, click on Show Selected link.

All the Animations triggered by the selected object will be displayed in the Animation Triggers panel grouped either by animations or by triggers.

Renaming Timeline Animations

By using the Animation Triggers panel, you may rename the name of the Timeline Animations.

To change the name of a Timeline Animation:

  1. Group the Animation Triggers by Animations.
  2. Click the Animation name to select it.
  3. Click the Animation name again to enter the inline mode.
  4. Edit the Timeline Animation's name.

The pane is kept in sync with the Actions tab. It repopulates when an action is modified. If "Show Selected" is selected, the pane is repopulated when page selection is changed.

Deleting Timeline Animations and Trigger Events

Deleting Timeline Animations

By using the Animation Triggers panel, you may delete any Timeline animation. When you delete the animation, NetObjects Fusion also deletes the corresponding trigger events automatically.

To delete a Timeline animation:

  1. Group the Animation Triggers by Animations.
  2. Click the Animation name to select it.
  3. Click the Delete button.

When deleting an animation with triggers, the triggers will be removed as well.

Deleting Trigger Events

By using the Animation Triggers panel, you may delete any event that triggers a Timeline animation, without deleting the animation:

  1. Group the Animation Triggers by Triggers.
  2. Click the Animation name to select it.
  3. Click the Delete button.

The pane is kept in sync with the Actions tab. It repopulates when an action is deleted.

Keep in Sync One or Several Keyframes with the Static Layout

You may also define sync keyframes, using the Timeline Editor's context menu.

When a keyframe is marked as in sync with the layout, the affected objects are locked in that frame, meaning that their properties and position cannot be changed.

The objects will receive their properties and their position from the static layout as it is in Page View.

To synchronize a keyframe with the static layout:

  1. Right-click the keyframe you want to sync with the layout available in Design Mode.
  2. From the context-menu, select Keep in Sync with Design Mode option.
  3. The affected objects are the objects that have keyframes at that particular position. When a keyframe is in sync with the Design Mode, its color becomes red. More than one frame can be in sync per animation.

If you want to no longer sync a keyframe with the Design Mode:

  1. Right-click the synchronized keyframe.
  2. From the context-menu, select Remove Design Mode sync option.

In the example, the frame 40 is synchronized with Design mode. The affected object is Picture 5, having the Width and Height properties locked in the keyframe 40. The top and left properties are not affected because they do not display any keyframe in frame 40.

Examples of Timeline Animations

Placing the Pieces Back Together

We have seven pictures that are part of an image. In this example, we will create an animation that will start when the page loads and will make the pictures fly into the page layout and form the image.

  1. First let's add the pictures to the layout.
  2. Before entering the Timeline Mode, use the keyboard arrows to put the picture pieces together to form the image.
  3. Preview the page to make sure the pictures are placed without spaces between them or that they aren't overlapped.

If there are empty spaces among the pictures, go back in Page Design and make all the necessary adjustments.

  1. Go back in Page Design and click the Create New Animation button from the Timeline toolbar.

The New Animation dialog appears.

  1. Enter a name for the new animation: MyExample1.
  2. Click OK. The new animation appears in the Timeline Editor.
  3. Select all pictures by multiple selection, and drag them in the Timeline. All the objects will be displayed in the Timeline Editor.

Warning: Make sure that the Playhead is positioned on the first frame.

  1. Move the playhead to the frame 70.
  2. Select that frame for each property, by holding down the Control key.
  3. From the Context menu, select the Insert Keyframe option. The inserted keyframes will have the same values as the first key frames.
  4. Click the picture placed in the left top corner to select it. Its property layers appear in the Timeline editor.
  5. Make sure the Playhead is placed on the first keyframe.
  6. In the CSS Property Sheet, expand the position category of the CSS attributes.
  7. Change its position so that the object is placed outside the page area.
  8. Decrease the position values. Use negative values. In our example, our object had its initial value for the left position, 107, and for the top position, 90. We have changed these values with 207 for the left position, and with 190 for the top position.
  9. Click the second picture. Its property layers appear in the Timeline editor.
  10. Make sure the Playhead is placed on the first keyframe.
  11. In the CSS Property Sheet, expand the position category of the CSS attributes.
  12. Change its position so that the object is placed outside the page area. Decrease the top position value so that the picture flies out from the top of the page.
  13. Continue modifying all the objects positions for the first keyframe.

Note: The top position values must be increased for the images that you want to fly in from the bottom of the page.

  1. If you have an image placed in the middle and you want to become visible in the moment when all the pieces are put together, follow these steps:
  2. Place the Playhead in the first Keyframe.
  3. Select the image.
  4. In CSS Property Sheet panel, expand the Display category.
  5. Change the Visibility property to Hidden.
  6. Move the Playhead to frame 70, or to the frame where you want the entire image to be displayed.
  7. Right-click frame 70 of the Animation Layer and select Keep in Sync with the Layout. This means that the animation in that moment will display the objects exactly as they were placed on the layout in Page design.
  8. Exit the Timeline Mode.
  9. Now you need to add an action that will trigger this animation.
  10. Click the Set Timeline Action button. The Set Action dialog appears.
  11. On the When field, select Page > Page Loaded.
  12. Select Timeline Actions.
  13. In the Animation field, select the previously created animation.
  14. Make sure the Play message is selected, then click OK.

Managing Space on a Dynamic Page

  1. Add a rectangle, a text box, and an image to the page layout:
  2. In the Layout Properties panel, select HTML5 in the HTML dropdown list.
  3. Place the picture over the text box.
  4. Enter the Timeline Mode.
  5. Right-click the picture, and select Add Object to Timeline option.
  6. Right-click the rectangle, and select Add Object to Timeline option.
  7. Select the Picture Layer from the Animations pane, and click its corresponding bullet from the Show column to hide it.
  8. Select the text and add it to the Timeline Editor.
  9. In the CSS Property Sheet, change the attribute for Display > Visibility to hidden.
  10. Right-click the first frame of the Text Object Layer.
  11. Select the Label option.
  12. Specify that the text object is hidden at the beginning of the animation.
  13. In the Text object layer, right-click frame 50, and select Insert Keyframe option.
  14. Right-click the second keyframe.
  15. From the context-menu, select Label.
  16. Enter a new label: "Now Visible."
  17. Expand the Object's Layer.
  18. Display the Picture object.
  19. Make sure the Playhead is positioned to frame 50 and drag the picture beneath the text box.
  20. Exit the Timeline Mode.
  21. In Page Design, select the rectangle, and click the Set Timeline action button.
  22. Set the timeline action for Clicked, Animation 1 to Play.

The result can be seen when you publish or preview your page.