How I Created This Slide-Out Progress Tracker in Storyline 2
One user interface (UI) trend I’ve grown to appreciate is the use of slide-out panels. Slide-out panels are really handy for giving people easy access to navigation controls or a quick glimpse of their progress toward a goal—without taking up a lot of valuable screen real estate.
I’ve used slide-out panels as a custom menu before, but until recently I hadn’t played around with the idea of using them for progress tracking—that is, until I found myself inspired to create this slide-out panel project.
With a little bit of planning, I found this project to be fairly easy to construct using Articulate Storyline’s variables, states, layers, triggers, and one very special guest … slide masters!
Following are a few videos I created to walk you through how I built this project. To follow along, be sure to grab the download before you start watching.
Video #1: Introduction (1m 41s)
Video #2: Creating the Character Selection Screen (5m 39s)
Video #3: Creating the Progress Panel (7m 21s)
More Resources
For more pointers on building custom navigation, working with slide masters, and animating objects, be sure to check out these related articles and downloads on E-Learning Heroes.
- Tips for Building Quick and Easy Custom Navigation in Storyline
- Using Slide Masters
- How I Created This Interactive Pie Chart in Storyline 2 (Note: This tutorial from Nicole Legault walks an animation technique very similar to the Progress Meter I used in this project).
- Storyline 1+ Progress Tracker Download
- Web-Inspired Material Design Template Download
Have you created your own cool or inspiring UI designs in Storyline? Share your designs with the community by posting them in our Building Better Courses hub. Have a question or a comment? Drop us a line, below.
And don’t forget to follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.
4 Comments
Thanks for sharing this, Trina. A while ago (was Storyline 1 really that long ago?!) as an exercise I wrote a blog post about creating a progress meter, making it smart enough to deal with learners revisiting screens and jumping around non-linear courses. In case anyone's interested it's still available at: https://cooeeproductions.wordpress.com/2013/03/24/showing-the-learner-a-course-progress-meter-in-storyline/ It runs along the same lines as your example, and might give some additional insights/considerations/perspectives about screen revisits etc. A lot of the complexity of progress meters is keeping track of how many screens have been visited. It'd be great if there was a Storyline system variable that kept track of that for us, Imagine the luxury of a sl_Percentage_Visite... Expand
Looks really good and I like the idea. I downloaded the example, when you open the tracker multiple times it doesn't quite work after the first time, it's easy to fix though if you change the Menu Open and Menu Close layer properties Revisits option to reset to the initial state. Edit to add: You probably also don't need a 2nd Close layer, I made the closing work by stopping the timeline on a cue point and using the close button to resume the timeline with the closing animations after the cuepoint. I also put the Menu layer on the slide master rather than the sub-layout masters so it's available for all the layout masters but you only need to have 1 set of triggers etc, I just covered up the button to show the menu on the layout for selecting the avatar. Less duplicates (objec... Expand