The Hero with a 1000 FacesLabs 31 May 2012
How many of us know what Multiple Sclerosis (MS) is? When World MS Day (WMSD) asked us to create a new awareness campaign for MS, we knew that one of the best ways to get people’s interest and response would be through an interactive storytelling experience.
Our campaign revealed three key messages during the month of May and I will let you into the secrets of creating it…
Storytelling and Technology
Each of the WMSD weekly stories is based on a simple idea. We decided to reveal each message organically, so that as a user scrolls down the page, more is revealed.
What is our approach
At first our script automatically detects how many stories are live at one time (remembering we have 3 stories), preloading all assets and preparing stage for animation.
Every story container has its own ‘settings’ array, containing all important variables, (start and stop of animation position, offsets, direction of movement etc), as well as variables for animated sprites (number of frames, frames in a row etc).
The hardest part was mind-bending offset calculations responsible for showing assets on page at the right time, by position and state. All assets positions were based on percentages of the actual scrollbar position and start/end positions of individual assets. We needed one to three separate riddles on the page at anytime, so we couldn’t make our counting based on one long stage. This is why we calculated actual asset position to its stage and then script converted it to the global position of the browser scrollbar.
After some maths, we just had to do a lot and lot of testing. But it was well worth it…
5 Languages and localisation
One of the challenges affecting the project development (from banners, videos to website) was that the campaign would be running simultaneously in five different languages (English, Spanish, Portuguese, French, and Arabic). Because of this we’ had to first experiment with the use of the regular HTML text for assets, without any effects, so we can control all copy directly in the HTML. This way was good in modern browsers, but we’re experiencing performance issues with older internet explorer versions.
We made decision to use images with the same dimensions across the whole website. The results were better performance and consistency, and a cleaner approach to manage assets.
Check the results for yourself and unfold the story...