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

Phil Eagles Taking your eLearning to another level with parallax scrolling

Stratosphere eLearning

I am an active member and participant of the E-Learning Heroes community. I find it a great source of knowledge and idea sharing among fellow developers, allowing for continuous personal development. It’s very much a give and take community and I like nothing more than to share my work. Giving and receiving feedback is an essential part of the community and it can really drive you to get the best out of yourself.

In my latest project for the group I used Parallax scrolling to achieve my desired outcome. It’s a common question about whether this can be done in Articulate Storyline, so I thought I’d share my experience. The finished project available for anyone to view.

Is Parallax scrolling possible in Articulate Storyline?

I don’t know about you but I love parallax scrolling in the web. Some people think it’s gimmicky or even nauseating! But I think it’s pretty cool if done right.

Off the shelf Storyline 2 does not feature any purpose built tool to do this but with some clever use of motion paths and gradients it’s possible to give the illusion of parallax scrolling.

How I made it

I chose to base my design on a rocket flying through the different layers of the atmosphere. This is a great way to show the vertical movement of the sky. Read on to see how I made it.

Creating the 5 layers of the atmosphere

There are 5 layers of the atmosphere and each layer has a unique hue, ranging from the sky blue of the Troposphere to the inky black of the Exosphere. In order to show the movement of the layers I first created a vertical rectangle with the height 5 times that of the stage. The rectangle was then given a gradient fill with 5 stops.

Parallax Scrolling in Articulate Storyline

Each stop has the colour of the corresponding layer, so Stop 1 (Troposphere layer) Sky blue to Stop 5 (Exosphere layer) Ink black.

This should result in a shape that resembles this:

Parallax Scrolling in Articulate Storyline

Animating the sky

The total height of the sky is 3840px which is exactly 5 times the height of the stage. In order to give the illusion of the rocket moving through each layer, the sky needs to move precisely 768px at a time. The movement was made using a motion path and under each layer the start position of the sky would shift 768px. Each layer of the atmosphere is contained on its own slide so the stage now looks like this:

Parallax Scrolling in Articulate Storyline

(Note the clouds were added to further highlight the each layer)

Controlling the animation

I wanted to give the user the ability to control animation. I didn’t want an animation which played automatically as this gives the user no sense of control. So I added a button to move from the bottom layer to the top. When the user clicks the button the sky motion path animation will play (showing the sky moving upwards) and when the animation is complete it will automatically jump to the next slide (next atmosphere layer). The button will also act as launch button for the rocket.

Parallax Scrolling in Articulate Storyline

The Rocket

Where would this animation be without the rocket?! The purpose of the rocket is to further aid the PS illusion by moving up the screen as the sky moves downwards. Like the sky the rocket is given a vertical motion path which moves the rocket just off the screen when the user clicks the button.

Parallax Scrolling in Articulate Storyline

Additional elements

Now the essential animations were in place it was time to add some additional elements into each atmosphere layer. I researched into the typical objects or natural phenomena found within each layer and added suitable graphics, from the air traffic in the Stratosphere to the solar storms in the Thermosphere. Each element was then animated accordingly to the scene. 

Parallax Scrolling in Articulate Storyline

Sound effects

I was happy with what I produced but being a perfectionist I wasn’t 100% satisfied! I have used sound effects in the past with previous projects to great success and this project would be massively enhanced by utilising them. I first sourced the sound of a rocket launching which would be played when the user clicks the button. Additional sounds were then sourced and added for the lightning, planes and other elements

Final thoughts

Is Parallax scrolling possible in Articulate Storyline? Yes!

Is it easy to do? Relatively, I still find motion paths slightly awkward to control on Storyline but with a bit of patience and planning it’s possible to achieve your desired effect.

Am I happy with the result? Overall yes, as previously mentioned it’s not possible to match the best on web due to the technical shortfalls of Storyline but it still looks pretty good!

Where can this technique be used in eLearning? This can be used in a variety of examples, an interactive human anatomy explorer, driving hazards simulator, map explorer etc to name a few.

Worried your eLearning is a bit tired and outdated? 

Download our Guide to Reviving your eLearning and bring your eLearning back to life: 

Download Now

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

Tagged in:

Other posts you may be interested in

/Kerry Pascall Why video is vital for L&D

Thursday September 07, 2017

Video has already become incredibly popular as a way of learning both inside and out of the workplace and L&D need to capitalise on this behaviour change in their learning strategies.

Read More