• Window > Timeline

The Timeline panel displays the list of child actors that belong to the container (Container component) being edited on the stage. If the container is an Animation component, then the panel allows you to animate the child actors.

All child actors of the container being edited on the stage appear in the child actors list. When an asset is placed on the stage, an actor is created with the appropriate asset component type already attached. For example, if images are placed on the stage, this creates an actor with a Bitmap component. This actor is automatically parented to the container being edited. Each actor that is added to the stage will add a new entry in the timeline panel's child actors list.

Hide or lock layers on the timeline using the eye and freeze icons in the actor list item. These properties are editor specific and have no effect when running the project in the Scaleform Studio runtime.

Convert a layer to a guide layer using the guide icon. This allows you to keep elements in your project without it being used or displayed when you run the project. This is useful if you want to use an image mockup to lay out your UI but don’t want it included in the final run project.

When the container is an Animation component, each actor is able to define their own timeline. A timeline consists of empty frames and keyframes. Empty frames indicate frame positions where the actor does not exist on the timeline. A keyframe defines a change in the display transform or color transform of the actor, and keyframes can span many frames. They are shown as gray blocks in the timeline track view. However, the state of an actor that is being tweened is defined by its tweened values.

Tweens are smooth transitions between two keyframes, and are defined by a transition function and easing value. They are shown as purple blocks in the timeline track view. Tween properties such as the tween transition type and the easing type are set using the Timeline tween controls, at the top of the timeline view. Tweens allow you to create smooth transitions between key frames. Changes to these properties are applied to the selected frames.

The red box at the top of the timeline view is the scrubber. You can move the scrubber across the timeline to update the timeline playhead, and the stage will update all child actors to their state at the playhead position. You can also associate labels, triggers and actions with a playhead location from the frame controls in the Frame panel. Changes to these properties are applied to the current playhead position.

The playhead can be moved in code using frame numbers. However, frames can be marked with a label to help better organize the content, and the label can then be used to move the playhead. Labels appear as a green marker on the top most track.

Triggers are invoked when the playhead reaches the frames containing them. These triggers can be handled in code for generating complex behavior and composite animations. Actions such as Stop, Play allow you to control the playhead behavior without writing any code. Triggers and Actions appear as a yellow marker on the top most track.

The icons in the timeline header lets you to

Icon	Name	Description
	Group	Create a new group.
	Delete	Delete the selected layers.
	Convert to mask	Convert the layer as mask layer.
	Remove mask	Removes the mask from the layer.
	Edit mask	Make the mask visible and edit it.
	Step previous	Step backward one frame.
	Step forward	Step forward one frame.
	Add key frames	Adds a new keyframe at the current frame, and expands the closest keyframe on the left.
	Remove key frames	Removes any keyframes in the frame selection, and combines the frames with the keyframe on the left.
	Add frames	Expands the current keyframe, or expands the closest keyframe on the left.
	Remove frames	Removes frames from the current keyframe, and moves all frames on the right to the left.
	Delete key frames	Deletes the keyframes that span the frame selection.
	Delete frames	Deletes frames in the frame selection. If necessary, then a new keyframe will be created to the right of the frame selection.
	Add tween	Adds a tween to the selected keyframes.
	Remove tween	Removes the tween on the selected keyframes.
	Tween type	Select the tweening function.
	Ease in	Apply the tween type to the start of the animation.
	Ease out	Apply the tween type to the end of the animation.
	Ease in-out	Apply the tween type to the start and end of the animation.
	Expand	Expand/collapse the layers.
	Guide	Set/unset to guides in the editor viewport.
	Visible	Show/hide the layers in the editor viewport.
	Freeze	Lock/unlock the layers in the editor viewport.

Create, remove or delete the frames and key frames to animate the actor by either using the frame and key frame icons above or by right clicking on a timeline track and selecting the respective option. The following behaviors exist for the different context menu options:

• Copy Frames - Copies the display transform and the color transform state of the selected frames.
• Cut Frames - Copies and deletes the selected frames.
• Paste Frames - Inserts the copied or cut frames to the current frame. If frames are copied from a single layer, then the frames can be pasted to any destination layer(s). If frames are copied from multiple layers, then the paste operation will only succeed if the destination layers match the source (copied) layers.
• Insert Frames - Expands the current keyframe, or expands the closest keyframe on the left.
• Insert Key Frames - Adds a new keyframe at the current frame, and expands the closest keyframe on the left.
• Remove Frames - Removes frames from the current keyframe, and moves all frames on the right to the left.
• Remove Key Frames - Removes any keyframes in the frame selection, and combines the frames with the keyframe on the left.
• Delete Frames - Deletes frames in the frame selection. If necessary, then a new keyframe will be created to the right of the frame selection.
• Delete Key Frames - Deletes the keyframes that span the frame selection.

What's the difference between Remove and Delete? The Remove operation will fill the removed area with frames on the right, while the Delete operation will leave the space empty.

Consider a timeline track with a single keyframe at frame 1.

The single keyframe will expand if you insert a frame at frame 20.

On inserting a key frame at frame 20, a new keyframe is created at that frame. A white diamond appears on the frame to indicate that this is a key frame.

Now, translate or transform the actor at frame 20, by changing its properties in the Properties panel or by using the select or transform tool. This will affect the object only at the current keyframe; in this case frame 20. Move the red timeline scrubber from one key frame to another to view the transformations applied. To set a smooth transition of the actor between two key frames, select a frame between the two key frames and then set the Tween transition and easing types to a value other than Unknown. Click Add Tween to add a tween, select a transition from the tween drop-down and click one of the easing type.The first keyframe block color changes from gray to purple indicating that there is a tween from the first keyframe to the next keyframe.

Some of the most commonly used tween transitions are

1. Linear - this produces a smooth line transition (note that easing has no effect for Linear tweens)
2. Sine (EaseIn) - the animation starts slow and then speeds towards the end.
3. Sine (Ease Out) - the animation starts quickly and then slows towards the end.
4. Sine (Ease In & Out) - this produces a smooth gradual start and end to the animation.

To delete an actor on the stage, select it and press Delete. You could also delete it from the Timeline panel by clicking the Delete Layers icon or by selecting the actor in the child actors list and right clicking and choosing the Delete Layers option.