(Last Updated: November 29, 2018)

In Saola Animate, you can arrange elements in various ways. Today’s tutorial 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

Elements can be aligned with each other 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 other selected elements have white handles. You can define a different reference element by clicking any of the currently selected elements without holding down 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 click the Edit menu > 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 you to resize them quickly. To resize elements to a reference element, first select at least two elements of the same parent. Then, click any of the size toolbar buttons or click the Edit menu > 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. To order elements, select one or more elements, then click any of the display order toolbar buttons or click the Edit menu > 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, select one or more elements of the same parent. Next, press CTRL+G or click Group in 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. Remember that 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.

Group in the Elements pane.

Ungrouping Elements

Sometimes, you no longer need a group and want to break it apart. To do so, select a group and press CTRL+SHIFT+G or click Ungroup in the toolbar. You can also right-click the group > Ungroup to break it apart into separate child elements. Besides, if you want to add more elements to an existing group, just ungroup that group and group all the desired elements again.

Ungroup elements if you no longer want a group.

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