Progress bar
Jan 09, 2015
By
Mike Ganci
Hey everyone,
I am trying to create a progress bar that grows from the left to the right throughout my SL project. The only way I could figure how to do this is with a motion path animation but then it has to come from off the screen. Has anyone tried to do this before or have any ideas?
I have an empty rectangle in the middle of my slide and was planning on filling it up with another rectangle on top of it.
Thanks,
Mike
13 Replies
There are lots of options to build progress bars; from using states and variables, to motion path animations, to entrance animations like Wipe. Here is one of many threads hat discusses options: https://community.articulate.com/discussions/articulate-storyline/simple-progress-bar
Using a slider with a custom thumb graphic could be another neat way to do this. This way you could use an absolute variable to set it and have the slider object on your master slide. This way, if you wanted to change style or location it's pretty easy to move.
Hi Mike,
There was a challenge recently that revolved around progress bars. You may want to have a look and see if any of those options can work for your case.
Awesome, thanks guys.
Hey Mike -
Here's an ugly as hell example of what I was talking about with the thumb. To make this one work from your master slide, you'd add a trigger to each slide (or whenever you want to advance) to set the slider variable to the value you want to represent (halfway through in this example would be 15).
That's actually pretty cool and I will use this in the future. Since we have full screen view and try modes in the SL I don't want to over lay a progress bar. So I think I am going to add a menu item to lightbox a slide with the progress bar where it will change states based on which slide they have reached, changing the variable.
Hi Mike, this is probably a bit late, but I created a sample that has a progress bar that grows as the user answers questions.
It's not quite as what you describe, but this is based on a project I did (which I cannot share) where I had a bar at the top filled with small squares the same colour as the background (one square per question/slide) and each square would change to blue when the question was answered using states and variables, and it looked like the bar was filling in (the squares were overlapping slightly to make sure there were no gaps)
I'll attach my sample here in case you or anyone finds it useful.
And here is a live demo.
Cheers, Veronica
PS: The fonts I used were Teen Light (http://www.fonts2u.com/teen-light.font) and KG True Colors (http://www.fontspace.com/kimberly-geswein/kg-true-colors)
Hi Veronica! Thanks for sharing that example! I had a look at the live demo and it looks pretty good, though I seem to be experiencing a lag of some sort. The questions don't seem to unlock immediately, and the progress bar takes a while to update. Is that happening on your end as well?
Hey Allison,
Thanks for checking it out and for the heads up. You're right, I think it's because it was in my Dropbox.
I have uploaded it to my site now and updated the live demo link in the above post. Would you mind checking it again to see if it's better? It is definitely better on my end.
Thanks again, Veronica
Much better! :)
Did you post your example to this challenge? If not, I would encourage you to do so.
Hi Allison,
Thanks for the suggestion. Yes, I plan on doing so, but I want to write a blog post first. I'll do it in the next few days.
Thanks!
Ok, cool! :)
Thanks Veronica! I love www.fontspace.com. What a great resource!
This discussion is closed. You can start a new discussion or contact Articulate Support.