(Last Updated: May 6, 2021)

When creating projects in Saola Animate, you need to add multiple elements such as images, shapes, or video. However, the newly-added elements are placed in front of others and may cover them partly or even fully. It’s called z-order. Don’t worry. You can rearrange elements such as moving them to the front or the back of other elements with ease. Thanks to that, you can create precise and professional-looking scenes. Now, let’s learn how to order elements in Saola Animate 3 through this tutorial. 

This tutorial covers: 

  1. Order Elements Using Display Order Tools 
  2. Order Elements by Drag-n-Drop

Let’s start right now!

Order Elements Using Display Order Tools

Suppose that you have a scene with elements inserted in z-order like this:

As you can see in this example, the sun is an upper element because it lies on top of others. To look more natural, the sun should be placed behind the tree, so I will send it backward. To get it done, take the following steps:

Step 1: Select the sun element.

Step 2: Click Send Backward button on the dockable toolbar, or right-click on the Canvas > Arrange > Display Order > Send Backward, or click the Edit menu > Display Order > Send Backward.  

Sending the sun element backward means that you move it one step to the bottom.

If you want to change the z-order of other selected elements, do the same for other display order toolbar buttons:

  • Bring to Front: Place the selected element at the very top of the others.
  • Bring Forward: Move the selected element one step to the front.
  • Send to Back: Place the selected element at the very bottom of the others.
  • Send Backward: Move the selected element one step to the bottom.

Order Elements by Drag-n-Drop

Another way to change the z-order is dragging and dropping elements in the Timeline or Elements pane. Just select the desired element, drag it to a new position that you want until a blue line appears, and drop it.

Order Elements by Drag-n-Drop

This method also can be used to change the parents of elements. For example, move elements from their groups to another group. 

See Group Elements for more information.

So, now you know how to change the z-order of elements in Saola Animate 3. If you need any support, feel free to contact us.

See also: