Call us on: +44 (0)1271 337 110

Phil Eagles eLearning design - How to align objects in Articulate Storyline

Following on my blog about the top ten eLearning design tips, I will be explaining the process of aligning objects in Articulate Storyline. Completing this can seem complicated, and the result can be frustrating if not achieved, but my step-by-step guideline below should make the process simple.

For the purpose of the demonstration I have eight equally sized squares on the stage, which I will use to align into squares on the grid. 

Align Objects Articulate1

Firstly select any 4 squares (I have selected the 4 from the top).

Align Objects Articulate2

From the home tab select: Arrange >Align > Align Top (make sure Align to Slide is selected)

Align Objects Articulate3

You can see now that the four squares have now aligned to the top of the slide but they are still not aligned in the grid.

Align Objects Articulate4

With all four squares selected go to: Arrange >Align > Distribute Horizontally. This will now distribute the four top squares equally apart from one another on the slide.

Align Objects Articulate5

Now the top row is aligned, it’s time to do the bottom row.

Select the four remaining squares and this time select: Arrange >Align > Align Bottom.

Align Objects Articulate6

Align Objects Articulate7

And finally with squares still selected go to: Arrange >Align > Distribute Horizontally.

The squares should now be aligned on the grid.

Align Objects Articulate8

If required, you can refine this further and arrange the squares in the centre of the grid squares. To achieve this you will need to do some manual calculations.

Firstly you need to find out the dimensions of the slide by clicking on the Design tab and selecting Story Size. 

Align Objects Articulate9

My dimensions are 720x360 and each square is 150x150. This means that the horizontal grid line in the middle of the stage is at 180px.

To calculate how to get the square aligned in the centre of the box, first subtract the dimension of the horizontal grid line (180px) from the height of the square (150px). This leaves 30px which means that the squares will need to move up or down (up for bottom row, down for top row) 15px.

The quickest way to move the squares is to first select them all, then right click one of the selected squares and select Size and Position.

Align Objects Articulate 10

This will open up the following dialog box:

Align Objects Articulate 11

The value you need to change is the vertical value. Subtract 15px from this value to make it 195px. Follow the same steps for the top row of squares but instead of subtracting 15px, add 15px (as we are moving the squares down). This should result in the perfectly aligned squares.

Align Objects Articulate 12

Keep checking back for more how to guides and top eLearning design tips.

Contact us now to find out more about how we can take your eLearning to the next level, helping you achieve outstanding results every time.

Phil Eagles

Phil Eagles, Senior eLearning Developer, Bray Leino Learning

In my series of blogs I’ll talk about the components of eLearning design and development.

Copyright © 2017 Bray Leino Learning

Other posts you may be interested in