How do i create a custom progress bar in Storyline 2 ?
I have attached a screenshot of the progress bar.The bar will fill up automatically as the user progresses through the slide.The progress bar will fill up gradually with the timeline of the slide.
Attached is an example of how to add a progress bar to your project. The animation is on a slide layer in the main master slide. It is controlled by adding to a variable. The slide layer is set to pause at every second on the progress bars slide layer.
This examples progress bar is set to progress for 10 slides/interactions. To make it work for more or less you would need to:
1) Go into the main master slide and adjust the animation on the slide layer to the amount of times you want it to progress (in the timeline view).
2) Adjust it also for the length of time (in the animation view) for the animations number of seconds.
3) You will need to add triggers on the same slide layer to pause it at every second for the amount of times you want it to pause in the progress (you should already see 10 triggers there).
4) Lastly you now just have to add 1 to the variable "Total_Progress" every time you want the progress bar to grow a little.
May sound complicated but it's pretty simple. Let me know if this works for you!
Hi, Abhishek -- In addition to the solution Daniel has offered, you may want to check out some of the suggestions or ideas offered in this thread, as well as this one, which have posed similar questions. Please let us know if that helps or if you need further assistance. :)
my course is non-linear . how could i create a progree bar to show user how much they have progressed ? the bar is a blue strip at top and it will fill up with white as the course progresses.
Hi, Abhishek -- Thanks for the update, and you may want to take a look at this option as well as this one for some additional ideas you could try for your non-linear course progress bar. Please let us know if either of those options will do the trick!
The example I gave you will work for non-linear as well. Once it's setup you only need to add to the variable for it to show progress. And, what I love about it most, is that it's on a slide layer (as opposed to states) so you can add animations in between each progress with as much detail as you want once you fully understand the concept.
thanks for your effort Daniel.I'll try to implement it.
will it work for my course ? it's non-linear with 53 slides in total.
i want to create a single progress bar in Slide Master and apply it to all of the slides.How can i do that ?
i followed the link below and noticed that i have to set each slide to Resume to Saved State to make the progress bar work.this one works with just 3 variables.
but i want to set my slides to Reset to Initial State because i have to implement a custom replay button for each slide.i have removed storyline's default player bar completely.
Is there any workaround so that i can make this progress bar work without having set each slide to Resume to Saved State ?
It should work fine for your course regardless of the slide count or order. The progress bar will only add some length to the progress bar when you tell it to, by adding to the variable "Total Progress".
In my example, I set the "Advance Progress" button to add to the variable "Total Progress". All you need to do is put that trigger at any point you wish on each slide to make the progress bar gain a little progress. First you would need to set up to bar in the way I described initially to accommodate your 53 slides (as you'll want it to progress 1/53rd each time a slide is completed.
If you only want the slide to report progress once the slide is completed (in case the user replays a completed slide) you could set an individual trigger with a new variable for each slide to be changed once the slide is completed. This variable (lets call it "Slide_Complete_1" for the first slide) would have a value change (from a trigger) indicating that it has been completed. Then the trigger that adds to progress would look to see if the slide variable is equal to a completed value. If it is, it will NOT add to the progress bar. The progress bar will be added to, a trigger right before the "Slide_Complete_1" variable is changed to it's value indicating that the slide is complete.
That may sound confusing, but it's basically saying that you're using a variable on each slide to avoid having the percentage added to more than once for a slide if a user revisits and has completed the slide.
I can put together a small example for you later tonight if you still need help.
so, do i need to create a progress bar with 53 states adding some length to it when a user visits a slide? i have to divide the progress bar into 53 parts.is that what you're telling about ?
if i take 100% as the total and divided that by total no. of slides i.e. 53.it would be around 2% for every slide.for slide 1 it would be 2%, slide 2 ---> 4%, ..... slide 5 ----> 10% . now if a user jumps to slide 5 from slide 1 instead of slide 2, how would the progress bar calculate the percentage completed ?
it' easy for a linear course. but mine is non-linear. is that what i'm concerned about.it should not miscalculate the progress bar percentage completed when a user jumps aorund.
Hey,I have to apologize.... this example I made doesn't work correctly. I was testing and building this under the assumption that the main master slide would not reset itself when a slide advanced to another slide. It turns out it does. So I am adjusting my example and will let you know when I have a working solution. Sorry.
So it looks like the best way to do this is to make 53 states of your progress bar and set the state based on the value of the variable. I'll work on this and get back to you tomorrow.
Hey, I have a working solution attached! And I explain how it works inside of it.
One thing you may want to do is remake all of the states for your progress bar. I used images that i quickly exported from Flash CC. And they work fine, but the fact that they are 53 individual images seems to make it take a while to load between pages.
What you can do is go into each state and make a blue bar (by drawing it in SL2) and match up the length to the images (so you don't have to guess at the lengths for the percentages. Then move the bar over the image and delete the image. Unfortunately you'll have to do that 53 times, but that should fix the loading time between slides issue.
This example is simple overall, but there are a number of things you need to put in place for it to work correctly. If you need any more help understanding this feel free to ask.
16 Replies
Hey Abhishek,
Attached is an example of how to add a progress bar to your project. The animation is on a slide layer in the main master slide. It is controlled by adding to a variable. The slide layer is set to pause at every second on the progress bars slide layer.
This examples progress bar is set to progress for 10 slides/interactions. To make it work for more or less you would need to:
1) Go into the main master slide and adjust the animation on the slide layer to the amount of times you want it to progress (in the timeline view).
2) Adjust it also for the length of time (in the animation view) for the animations number of seconds.
3) You will need to add triggers on the same slide layer to pause it at every second for the amount of times you want it to pause in the progress (you should already see 10 triggers there).
4) Lastly you now just have to add 1 to the variable "Total_Progress" every time you want the progress bar to grow a little.
May sound complicated but it's pretty simple. Let me know if this works for you!
Hi, Abhishek -- In addition to the solution Daniel has offered, you may want to check out some of the suggestions or ideas offered in this thread, as well as this one, which have posed similar questions. Please let us know if that helps or if you need further assistance. :)
Thanks to both of you for the suggestions.I'll definitely try them.
my course is non-linear . how could i create a progree bar to show user how much they have progressed ? the bar is a blue strip at top and it will fill up with white as the course progresses.
Hi, Abhishek -- Thanks for the update, and you may want to take a look at this option as well as this one for some additional ideas you could try for your non-linear course progress bar. Please let us know if either of those options will do the trick!
The example I gave you will work for non-linear as well. Once it's setup you only need to add to the variable for it to show progress. And, what I love about it most, is that it's on a slide layer (as opposed to states) so you can add animations in between each progress with as much detail as you want once you fully understand the concept.
thanks for your effort Daniel.I'll try to implement it.
will it work for my course ? it's non-linear with 53 slides in total.
i want to create a single progress bar in Slide Master and apply it to all of the slides.How can i do that ?
i followed the link below and noticed that i have to set each slide to Resume to Saved State to make the progress bar work.this one works with just 3 variables.
https://cooeeproductions.wordpress.com/2013/03/24/showing-the-learner-a-course-progress-meter-in-storyline/
but i want to set my slides to Reset to Initial State because i have to implement a custom replay button for each slide.i have removed storyline's default player bar completely.
Is there any workaround so that i can make this progress bar work without having set each slide to Resume to Saved State ?
It should work fine for your course regardless of the slide count or order. The progress bar will only add some length to the progress bar when you tell it to, by adding to the variable "Total Progress".
In my example, I set the "Advance Progress" button to add to the variable "Total Progress". All you need to do is put that trigger at any point you wish on each slide to make the progress bar gain a little progress. First you would need to set up to bar in the way I described initially to accommodate your 53 slides (as you'll want it to progress 1/53rd each time a slide is completed.
If you only want the slide to report progress once the slide is completed (in case the user replays a completed slide) you could set an individual trigger with a new variable for each slide to be changed once the slide is completed. This variable (lets call it "Slide_Complete_1" for the first slide) would have a value change (from a trigger) indicating that it has been completed. Then the trigger that adds to progress would look to see if the slide variable is equal to a completed value. If it is, it will NOT add to the progress bar. The progress bar will be added to, a trigger right before the "Slide_Complete_1" variable is changed to it's value indicating that the slide is complete.
That may sound confusing, but it's basically saying that you're using a variable on each slide to avoid having the percentage added to more than once for a slide if a user revisits and has completed the slide.
I can put together a small example for you later tonight if you still need help.
thanks for the wonderful tip.much appreciated.
it would be very kind of you, if you could provide a sample story file.
so, do i need to create a progress bar with 53 states adding some length to it when a user visits a slide? i have to divide the progress bar into 53 parts.is that what you're telling about ?
if i take 100% as the total and divided that by total no. of slides i.e. 53.it would be around 2% for every slide.for slide 1 it would be 2%, slide 2 ---> 4%, ..... slide 5 ----> 10% . now if a user jumps to slide 5 from slide 1 instead of slide 2, how would the progress bar calculate the percentage completed ?
it' easy for a linear course. but mine is non-linear. is that what i'm concerned about.it should not miscalculate the progress bar percentage completed when a user jumps aorund.
Hey,I have to apologize.... this example I made doesn't work correctly. I was testing and building this under the assumption that the main master slide would not reset itself when a slide advanced to another slide. It turns out it does. So I am adjusting my example and will let you know when I have a working solution. Sorry.
So it looks like the best way to do this is to make 53 states of your progress bar and set the state based on the value of the variable. I'll work on this and get back to you tomorrow.
thanks a lot for your patience and guidance.
Hey, I have a working solution attached! And I explain how it works inside of it.
One thing you may want to do is remake all of the states for your progress bar. I used images that i quickly exported from Flash CC. And they work fine, but the fact that they are 53 individual images seems to make it take a while to load between pages.
What you can do is go into each state and make a blue bar (by drawing it in SL2) and match up the length to the images (so you don't have to guess at the lengths for the percentages. Then move the bar over the image and delete the image. Unfortunately you'll have to do that 53 times, but that should fix the loading time between slides issue.
This example is simple overall, but there are a number of things you need to put in place for it to work correctly. If you need any more help understanding this feel free to ask.
Hi Abhishek,
You might also want to check out the following tutorial. It works great and I use my progress bar-template for every course I make now :)
https://cooeeproductions.wordpress.com/
thanks a lot.appreciate it.it will certainly help in my course.
i'll get back if i need some help.
cheers
This discussion is closed. You can start a new discussion or contact Articulate Support.