(Last Updated: July 5, 2018)

In Saola Animate, you can arrange elements in various ways. Today’s article shows you how to align, order, and group elements.

This tutorial covers:

  1. Aligning Elements
  2. Ordering Elements
  3. Grouping Elements

Aligning Elements

When working with a range of elements, you often want to align them evenly. This is useful when you want to create, for example, a user interface or a structured page. Saola Animate offers a variety of functions to align elements precisely.

Aligning Elements Using Canvas Snapping

Canvas Snapping helps align elements. This tool snaps elements to the center or edges of the Canvas or other elements. One or two red lines will appear when an element comes in the vicinity of the Canvas or another element.

Use Canvas Snapping to quickly align elements.

Canvas Snapping is turned on by default. To turn it off, click View > Canvas Snapping. To temporarily disable it, hold down CTRL when moving or resizing elements.

Aligning Elements with Reference Element

You can align elements with a specific one using the Alignment options. A reference element (also anchor element) is the one with which other elements align. It is the last selected element with green handles while others have white ones. You can define a reference element as you like. Just click any of the currently selected elements without holding CTRL.

Use reference elements to align elements

When you align elements with a reference element, the reference element stays fixed at the same position while all others move to align with it. Do the following:

Step 1: Select at least two elements of the same parent.

Step 2: Click any of the Alignment toolbar buttons or Edit > Alignment. You can also use keyboard shortcuts to get the same result.

Alignment buttons on the toolbar.

  • Align Left (SHIFT+L): Align the left side of all elements with the left of the reference element.
  • Align Right (SHIFT+R): Align the right side of all elements with the right of the reference element.
  • Align Top (SHIFT+T): Align the top of all elements with the top of the reference element.
  • Align Bottom (SHIFT+B): Align the bottom of all elements with the bottom of the reference element.
  • Align Center (SHIFT+E): Align the center of all elements with the vertical center of the reference element.
  • Align Middle (SHIFT+M): Align the center of all elements with the horizontal center of the reference element.

Resizing Elements to Reference Element

Saola Animate not only lets you align elements easily but also allows resizing them quickly. To resize elements to a reference element, do the following:

Step 1: Select at least two elements of the same parent.

Step 2: Click any of the Size toolbar buttons or Edit > Size.

Resize elements to the reference element.

  • Make Same Width: Match the width of all other elements with the width of the reference element.
  • Make Same Height: Match the height of all other elements with the height of the reference element.
  • Make Same Size: Match the height and width of all other elements with the height and width of the reference element, respectively.

Ordering Elements

Besides aligning elements, you can arrange elements in a specific order called z-order. This ordering is important when two or more elements overlap as it decides which element is in the front.

Do the following:

Step 1: Select one or more elements.

Step 2: Click any of the Display Order toolbar buttons or Edit > Display Order.

Display Order buttons on the toolbar.

  • Bring to Front: Bring an element to the front of the stack.
  • Bring Forward: Bring an element one step closer to the front.
  • Send to Back: Send an element to the back of the stack.
  • Send Backward: Send an element one step toward the back.

Note: These options let you set the z-order of elements even when they do not overlap each other. So, you can bring an element to the front or back to easily identify and work on it.

Grouping Elements

Grouping multiple elements as a single one lets you work faster and easier. For example, you can group several elements together so that they stay together when you move the group. Otherwise, you have to select all of the elements each time you want to change their position.

Additionally, groups have properties like normal elements. You can group elements to animate them in the same way, instead of animating each with the same keyframes and properties.

Grouping Elements

To group elements, do the following:

Step 1: Select one or more elements of the same parent.

Step 2: Press CTRL+G or click Group on the toolbar. You can also right-click the elements > Group.

Click the Group button to group elements.

The selected elements are grouped. All moving animations of selected elements will be converted to a new coordinate system of the new parent.

Group multiple elements to a single group.

In the Elements pane, all child elements are listed under and at the next indent level compared to their group. You can click the triangle buttons to collapse or expand groups.

Group in the Elements pane.

Child elements can be edited separately without breaking and affecting the group. To select a child element, on the Canvas, select the group first, then click the child element. Alternatively, click the child element name in the Timeline and Elements panes.

Ungrouping Elements

Sometimes, you no longer need a group and want to break it apart. Just select a group and press CTRL+SHIFT+G or click Ungroup on the toolbar. You can also right-click the group > Ungroup. The group will be broken apart into separate child elements.

Ungroup elements if you no longer want a group.

Note: If you want to add more elements to an existing group, ungroup that group and group all desired elements again.

That’s how to align, order, and group elements in Saola Animate. Feel free to contact us if you need any support.

Pin It on Pinterest