(Last Updated: May 9, 2019)

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. Therefore, Saola Animate offers a variety of functions to align elements automatically and precisely.

Suppose that you’ve created a horizontal bar graph like the picture below.

Example of messy bar graph.

This graph includes 5 activity labels and 5 time bars (green bars). However, after quickly drawing things, bars may look messy and have inconsistent appearance. Now, it’s time to resize and align them to achieve a perfect graph with Saola Animate.

Resizing Elements

Saola Animate allows you to resize elements quickly with one of selected elements – the reference element. It is the last selected element with green handles while other selected ones have white handles. For example, in the bar graph above, the height of the green bars is inconsistent. To resize elements for the same height, do the following:

Step 1: Select all desired elements, and define the reference element with green handles that you want to resize with it.

Define reference element to make same height.

Note: You can define a different reference element. Just click any of the currently selected elements without holding down CTRL.

Step 2: Click Make Same Height (2) button on menu toolbar. You can also right-click on the Canvas > Arrange > Size > Make Same Height, or click the Edit menu > Size > Make Same Height.

Click Make Same Height in size toolbar.

Here is the result:

Bars have the same height.

  • Make Same Width (1): Match the width of all other elements with the width of the reference element.
  • Make Same Height (2): Match the height of all other elements with the height of the reference element.
  • Make Same Size (3): Match the width and height of all other elements with those of the reference element, respectively.

Aligning Elements

After getting bars that have consistent look, now you need to align them evenly to achieve a perfect graph. Saola Animate provides various ways to align and distribute selected elements to an anchor. The anchor can be the bounding rectangle of all selected elements, a reference element, or the parent of selected elements.

Aligning Elements Using Canvas Snapping

Canvas snapping helps aligning elements. This tool snaps elements to the center or edges of the Canvas or other elements by one or two red lines that appear. 

One or two red lines will appear when an element comes in the vicinity of the Canvas or another element.

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 to Reference Element

Reference element brings to you a chance for not only resizing but also aligning selected elements with it easily. In case of this tool, you need to disable the Align to Parent Align to Parent option. option because it is enabled by default. So, to turn it off, just go to the alignment toolbar and uncheck it. I will mention this option in the next part of this tutorial. Keep reading to know about it.

Now, in the bar graph mentioned earlier, suppose you want to align 5 activity labels to the right, take the following steps:

Step 1: Select all desired elements and define a reference element.

Define reference element to align activity labels.

Step 2: Click Align Right button on the alignment toolbar. You can also right-click on the Canvas > Arrange > Alignment > Align Right, or click the Edit menu > Alignment > Align Right.

Click Align Right button on the alignment toolbar.

So, the right edges of all selected elements have been aligned to the right edge of the reference element while it is fixed at its position like below:

The result is that the right edges of all selected elements have been aligned to the right edge of the reference element while the reference element is fixed at its position.

Then, you can do the same to align green bars to the left, and use Canvas snapping tool to fit each green bar to its corresponding activity label.

You can do the same to align green bars to the left, or use Canvas snapping tool to fit each green bar to its corresponding activity label.

Click here for more alignment toolbar buttons

Alignment tools.

  • Align Left: Align the left edges of the selected elements with the left edge of the anchor.
  • Align Center: Align the horizontal centers of the selected elements with the horizontal center of the anchor.
  • Align Right: Align the right edges of the selected elements with the right edge of the anchor.
  • Align Top: Align the top edges of the selected elements with the top edge of the anchor.
  • Align Middle: Align the vertical centers of the selected elements with the vertical center of the anchor.
  • Align Bottom: Align the bottom edges of the selected elements with the bottom edge of the anchor.
  • Distribute Left Edge: Distribute the left edges of the selected elements evenly within the anchor rectangle.
  • Distribute Horizontal Center: Distribute the horizontal centers of the selected elements evenly within the anchor rectangle.
  • Distribute Right Edge: Distribute the right edges of the selected elements evenly within the anchor rectangle.
  • Distribute Top Edge: Distribute the top edges of the selected elements evenly within the anchor rectangle.
  • Distribute Vertical Center: Distribute the vertical centers of the selected elements evenly within the anchor rectangle.
  • Distribute Bottom Edge: Distribute the bottom edges of the selected elements evenly within the anchor rectangle.
  • Space Horizontally: Distribute the selected elements so that the horizontal gaps between them are equal.
  • Space Vertically: Distribute the selected elements so that the vertical gaps between them are equal.

Aligning Elements to Parent

In Saola Animate, you can also align and distribute selected elements using Align to Parent Align to Parent option. option. As mentioned earlier, Align to Parent option is turned on by default. If this option is checked, 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.

All selected elements will be aligned to the center or edges of the scene.

Aligning Elements with Flexible Layout

The Flexible Layout  Flexible Layout option. 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.

For more information about flexible layout, please refer to our tutorial: Using Flexible Layout.

When the parent size changes, the Flexible Layout option will keep the layout unchanged.

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