stepMate Stack

The HUD in the stepMate stack is used to input general information about the canvas, such as size, borders, drop-shadow, control buttons, etc.

In the Edit mode window is where most of the specific information about the animation will be entered and displayed. The screenshot below shows the stepMate stack with an empty stepMate Layer stack.

At the top of the stepMate stack window, the stack provides basic information about the project:

• Size of the canvas
• Arrow Style

In addition, on the upper right corner, it provides 3 optional image wells where you can add custom icons to control the animation: Next, Previous, and Restart.

The path and timing of the animation is based on the information provided in the Edit mode window. For each layer, we add an stepMate Layer stack and provide the following data:

• Start: here we provide the initial position of the layer and an optional fade in time.
• Top/Left: position measured in pixels from the upper-left corner of the canvas
• Fade in: time (in milliseconds) over which the layer becomes visible. Please note that all layers are hidden in their initial position
• End: here we provide the ending position of the layer again, measured from the upper-left corner of the canvas
• Opacity (%): we can provide an optional final opacity for the layer. Opacity is a value between 0 and 100, where 0 means completely transparent and 100, completely opaque.
• Animation: here we provide the time over which the layer will animate from its Start position to its End position and opacity level.
• In addition, we can provide additional time Delay before and/or after the animation to further control the pace of the animation
• Finally, you can enter a brief title or description of the layer to help you during the creative process. This title is for reference only and will not appear in the actual animation

Of course, we can add almost any kind of content in the "Drop stacks here." area of each layer, from a simple Text or Image Stack to a multi-column, mixed-content composition. Please refer to the tutorial for more details.