(Last Updated: August 23, 2021)

When working with a range of elements in Saola Animate, have you ever encountered any difficulty? For example, make elements the same size or align them evenly. If yes, this tutorial is for you. Now, let’s see how to resize and align elements in Saola Animate 3.

This tutorial has two main parts:

  1. Resize Elements
  2. Align Elements

Resize Elements

Saola Animate 3 provides users with three sizing options to resize elements. It allows making them the same width, height, or both. To get it done, you can resize elements on the Canvas to the reference element. The reference element is the last selected one and is defined by the green handles, while others have blue boundaries.

Resize and align elements, reference element.

To resize elements, follow the below steps: 

Step 1: Select all elements you want to resize and define the reference element. 

Note: You can click any selected element without holding down CTRL to define it as the reference. 

Step 2: Do one of the following:

  • Choose one of the three sizing options on the toolbar: Make Same Width (1), Make Same Height (2), or Make Same Size (3).
Resize element comands.
  • Right-click on the Canvas > Arrange > Size > choose one option.
  • Click the Edit menu > Size > choose one option. 
Resize and align elements, Edit menu > Size.

For example, select the Make Same Size (3) button to make all selected elements have the same width and height as the reference. After that, you will get this result:

Resize to the reference element.

Besides, you can select:

  • Make Same Width (1) to make all selected elements the same width as the reference. 
  • Make Same Height (2) to make all selected elements the same height as the reference.

Align Elements

Saola Animate 3 also offers several ways to align elements automatically and precisely.

Align Elements Using Canvas Snapping

Canvas snapping helps to snap an element to the center or edges of others or the Canvas. When you drag it to the vicinity of another or the Canvas, you will see one or two red lines appear.

Resize and align elements, Align elements using cancas snapping.

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

Align Elements Using Alignment Tools 

Apart from using Canvas snapping, you can use various tools to align and distribute elements with an anchor. The anchor can be a selected element, their parent, or the bounding rectangle of all of them.

Align elements using alignment tools.

To align or distribute elements, do as follows:

Step 1: Select all elements you want to align or distribute and define the anchor. 

Step 2: Do one of the following:

  • Choose one desired command on the toolbar. 
  • Right-click on the Canvas > Arrange > Alignment > choose one option.
  • Click the Edit menu > Alignment > choose one option. 

Align to Parent 

This option is selected by default. With this option on, alignment tools will align all selected elements to their parent. In case selected elements are top-level ones, the parent is the scene. It means that all selected elements will align to the center or edges of the scene.

Align Top.

Align Top

When you turn this option off, alignment tools will align elements with the reference element. Meanwhile, distribution and spacing tools will distribute and space elements evenly across the bounding rectangle of all selected elements.

Align Top.

Align Top 

Flexible Layout

The Flexible Layout option allows you to create a percentage-based alignment. When the parent size changes, this will keep the layout unchanged. It is useful when creating a responsive document. 

Note: This option is only enabled when the Align to Parent option is selected. 

See Use Flexible Layout for more information.

That’s how to resize and align elements in Saola Animate 3. Try it and let us know if you need help.

Related articles