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.
Firstly select any 4 squares (I have selected the 4 from the top).
From the home tab select: Arrange >Align > Align Top (make sure Align to Slide is selected)
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.
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.
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.
And finally with squares still selected go to: Arrange >Align > Distribute Horizontally.
The squares should now be aligned on the grid.
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.
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.
This will open up the following dialog box:
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.
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, 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