This week’s challenge is a fun one! Storyline 2 offers the ability to easily create slider interactions, a feat which was previously completed by using states….and LOTS of ’em! Think hundreds (depending on what you’re trying to accomplish). Now, you can create sliders with a few clicks of some buttons – presto, tada!
I was also excited to jump on the bandwagon this week, because last week I started something and didn’t finish…and it’s always nice to sneak in right before the recap is posted – I like living on the edge!
The Concept
Use interactive sliders to focus on functionality and/or design. For this challenge, I chose to focus on both. I wanted to illustrate how you could use sliders to create an interactive website mockup – fun and practical (for some)! You could take my colour customization approach to another level and use states to incorporate different layout options – that would be cool!
The Method
I thought up how I might want to work with the sliders to make my imagined design come to life, so I first created a little mock up website layout. Then, I pulled some elements from the mock up (background colour, title text colour, and body element colours) to and made some quick colour palettes – some, when combined, are more appealing than others (…basically the default looks the best – don’t hate).
Once I decided how I was going to roll this all out, I created my sliders. I created one slider for each element, created a four colour-way palette for each element, and then created four states (well – three, because one was normal) for each element, one for each colour. Then, I set the sliders to show each state when the user drags the slider to a certain point, using triggers to change the states.
After it was all said and done, I added a little intro slide, customized the player, and the rest is history!
The Result
Click here to view the full, interactive demo!
Click here to download the source file to learn how you too can create a comparable interaction!
Very cool! Your posts make me wanna learn this e-learning stuff! haha
Thanks, Ashley! I’m going to try to make an knowledge-check based on this concept.
Awesome! I’ve also used sliders to do conditional quizzing. Like ‘if drag here, then this option occurs’, which has turned out quite nicely. Hope you’re doing well, Iain!