(Last Updated: October 30, 2017)

In Saola Animate, you can arrange objects in various ways. For example, you align objects with the center of the Canvas. Or, you group objects together so that they stay organized when you move them. Today’s article shows you how to align, order, and group objects in Saola Animate.

Aligning

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

Align Objects with Reference Object

Sometimes, you have an object’s position set perfectly and you want to align other objects with that specific object. To do that, use the Alignment options and a reference object (also known as an anchor object).

A reference object is the one with which all other objects align. To define a reference object, select all objects you want to align. The last selected one becomes a reference object with green handles rather than white handles like others. To define a different reference object, click any of the currently selected objects without holding CTRL.

saola animate reference object

When you align objects with a reference object, the reference object stays fixed at the same position while all others move to align with it.

To align objects, do as follows:

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

Step 2: Click any of six Alignment buttons on the toolbar.

alignment options

Or, click Edit > Alignment on the menu bar. Saola Animate provides six Alignment options to align objects with a reference object. There are both vertical and horizontal alignment.

align objects

  • Align Left: Align the left side of all objects with the left of the reference object.
  • Align Right: Align the right side of all objects with the right of the reference object.
  • Align Top: Align the top of all objects with the top of the reference object.
  • Align Bottom: Align the bottom of all objects with the bottom of the reference object.
  • Align Center: Align the center of all objects with the vertical center of the reference object.
  • Align Middle: Align the center of all objects with the horizontal center of the reference object.

Align Objects Using Canvas Snapping

You can also use the Canvas Snapping tool to align objects. This tool snaps objects to the center of the Canvas or to the edge/center of other objects.

When Canvas Snapping is enabled, dragging or reshaping an object will trigger one or two red lines on the Canvas. These lines appear to align with the center of the Canvas or with other objects.

canvas snapping tool

Canvas Snapping is turned on by default. To turn it off, click View > Canvas Snap. In addition, temporarily disable Canvas Snapping by holding down CTRL when resizing or moving objects.

Resize Objects to Reference Object

Saola Animate not only lets you align objects easily but also allows resizing objects quickly.

To resize objects to a reference object, follow these steps:

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

Step 2: Click any of three Size options on the toolbar.

size options

Or, click Edit > Size on the menu bar. Saola Animate gives you three Size options to resize objects with respect to a reference one.

resize objects

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

Ordering

Besides aligning objects, Saola Animate allows you to arrange objects in a specific order called z-order. This ordering is important when two or more objects overlap as it decides which object is in the front.

When you insert objects into a scene, new objects are always in front of others. The ordering is also reflected by the object’s position in the Timeline and the Elements panes. Upper objects lie on top of others. For example, in the figure below, the rectangle is placed over the ellipse.

order objects 1

To change the z-order level of an object, do as follows:

Step 1: Select an object.

Step 2: Click any of the Display Order buttons on the toolbar.

order objects 2

Or, click Edit > Display Order on the menu bar. Saola Animate provides four Order options.

order objects 3

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

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

Grouping

To operate multiple objects as a single object, group them. Groups have properties like normal objects, meaning that you can animate their properties or add events and actions to them.

Grouping allows you to work faster and easier. For example, group several objects into one object and they will stay together when being moved. Otherwise, you have to select all of the objects each time you want to change their position. Also, you can group objects to animate them in the same way, instead of animating each with the same keyframes and properties.

Group Objects

It’s easy to group objects. Do the following steps:

Step 1: Select two or more objects of the same parent.

Step 2: Click the Group button group objects 1 on the toolbar. In addition, you can right-click the selected elements and select Group from the context menu.

group objects 2

The selected objects are grouped. A single box with sizing handles appears around the entire group.

group objects 3

The newly created group appears in the Timeline and the Elements pane with a default name. Double-click its name to rename it.

In the Elements pane, all child objects are listed under and at the next indent level compared to their group. Click the arrow button to collapse or expand these child objects.

group objects 4

Note: The parent-child relationship between a group and its child objects is similar to that between a scene and its objects. Specifically, by default the position and size unit is pixel, i.e. a fixed-size unit. So, the position and size of a child object don’t respond to the change of its parent group. If you want child objects to be responsive, change their position and size unit into percentages.

Additionally, it’s possible to edit child objects separately without breaking and affecting the group. To do that, select a child object and edit it as normal. Select a child object of a group in the following ways:

  • In the Timeline and Elements pane, click an object name or its segments.
  • On the Canvas, select the group first, then select its child objects.

Ungroup a Group

Sometimes, you no longer need a group and want to break it apart. To do that, follow these steps:

Step 1: Select a group.

Step 2: Click the Ungroup button group objects 5 on the toolbar. Or right-click the selected elements and select Ungroup from the context menu. The group will be broken apart into separate child objects.

group objects 6

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

So that’s all about the ways to align, order, and group objects in Saola Animate. Try Saola Animate today to build engaging HTML5 animation and interactive web content. Feel free to contact us if you need any support.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest