I'm looking to create a custom Storyline progress bar. Can anyone share examples of eLearning courses they've seen that have custom progress bars and different styles, such as a filled-in pie chart for showing page or lesson completion.
Thanks Nicole. However, how do I incorporate that build into SL? Do I just recreate it and based on the visuals. I have never built one in SL and curious to know what those variable would look like.
Here is an example of a Fake Progress Bar created in Storyline by Phil Mayor. And another example by Bruce Graham: Course Progress Bar with %. There is really no one way to do it, the options are endless based on what you want it to look like and what functionality you need. You'd need to play around with states and variables in order to achieve a custom bar that tracks your users from slide to slide. If you give me more details about something in particular you'd like to achieve, I'd be happy to help you create a solution =)
I just used excel's graphing capabilities to create a series of progress icons. My course was linear so I just dropped the appropriate image on each slide. However, I can see where you could use variables and states to display the correct image at the right time on the right slide.
Producing the images was a snap using excel. I just had to input my slide total and then change which slide number I was on. I used a simple calculation to turn this into a percent completed and a percent remaining and then graphed those percentages. I've used a single bar graph but I also kind of like the doughnut.
The graph updates as you change the slide number and you can then right click and copy the image. I pasted mine into Photoshop so I could remove the background, but that is optional.
Really great idea, Owen. On a whim, I decided to try this in PowerPoint. Turn off the legend and title and you're ready to rock. By selecting the frame you can export the graphic (Save as Picture) from PPT with a transparent background.
I didn't see an easy option...but there probably is one somewhere in the formatting. For me, it was quicker just to paste it into an open pre-sized photoshop, remove background, and save as .png.
Hi there, I thought I'd add a progress bar created from one of the links (Beautiful Progress Bar Designs ) Have fun and enjoy. Simple to use. Just add the trigger adjust variable to 15, 30 etc to your slides... as demonstrated in the slides.
I went through second slide of the storyfile. I could not understand the triggers. I mean how do you make the timeline jump to the second layer (ABC) without adding a variable (incrementer).
I would guess it's taking longer as it would have to open you layer and close it again and open.. which would add time to your animation. It's the only thing I can think of, maybe decrease the timeline on the base layer ? I'll look into it when I have time :)
42 Replies
Hey Dan,
Here's a handy link to a website with a lot of different ideas for progress bars: 35 Beautiful Progress Bar Designs
Hope this helps inspire you!
I love these, thanks for sharing Nicole!
Here's an example POC that I built a while back.
Bruce
A great resource for ideas - thank you Nicole!
Thanks Nicole. However, how do I incorporate that build into SL? Do I just recreate it and based on the visuals. I have never built one in SL and curious to know what those variable would look like.
Karen,
Here is an example of a Fake Progress Bar created in Storyline by Phil Mayor. And another example by Bruce Graham: Course Progress Bar with %. There is really no one way to do it, the options are endless based on what you want it to look like and what functionality you need. You'd need to play around with states and variables in order to achieve a custom bar that tracks your users from slide to slide. If you give me more details about something in particular you'd like to achieve, I'd be happy to help you create a solution =)
Ha! Who else could come up with three dozen "Beautiful" progress bars!?
Thanks Nicole...
Michael
I just used excel's graphing capabilities to create a series of progress icons. My course was linear so I just dropped the appropriate image on each slide. However, I can see where you could use variables and states to display the correct image at the right time on the right slide.
Producing the images was a snap using excel. I just had to input my slide total and then change which slide number I was on. I used a simple calculation to turn this into a percent completed and a percent remaining and then graphed those percentages. I've used a single bar graph but I also kind of like the doughnut.
The graph updates as you change the slide number and you can then right click and copy the image. I pasted mine into Photoshop so I could remove the background, but that is optional.
Really great idea, Owen. On a whim, I decided to try this in PowerPoint. Turn off the legend and title and you're ready to rock. By selecting the frame you can export the graphic (Save as Picture) from PPT with a transparent background.
I work with accountants that are stuck in excel... does it show?
Haha! I love Excel. Whatever gets the job done. I wonder if you can remove the background in Excel as well. Had to make it transparent in PPT.
I didn't see an easy option...but there probably is one somewhere in the formatting. For me, it was quicker just to paste it into an open pre-sized photoshop, remove background, and save as .png.
I like the PowerPoint option. seems simpler.
No, not at all ;))
This post was removed by the author
I want to create custom seekbar and voice controler please help me for create a custom seek bar ... !!!
Hi Bruce,
it seems you have removed the sample POC. Can you please reload it?
Regards
Chetana
Hi Rekha,
I'm also interested in building a custom seekbar. Have you made any progress on this?
Hi there, I thought I'd add a progress bar created from one of the links (Beautiful Progress Bar Designs ) Have fun and enjoy. Simple to use. Just add the trigger adjust variable to 15, 30 etc to your slides... as demonstrated in the slides.
Hi Chris
Can you please tell me how do you make this slider move automatically? Please help!
Hi Nitin,
As in where you want the slide to change to the percentage , ie trigger or master slide states on progress bar ?
Regards
This post was removed by the author
Hi Chris
I have made another slide in your sample story which is exactly the same slide that you have made. Everything is okay.
But my slider is moving very slow. The timeline is of 30 seconds and the slider is taking much more time to complete.
Can you please tell me how to increase its speed.
Hi Bruce,
I am not able to access it. Can you please send me the link again?
Regards
Chetana
Hi Nitin,
I went through second slide of the storyfile. I could not understand the triggers. I mean how do you make the timeline jump to the second layer (ABC) without adding a variable (incrementer).
Regards
Chetana
Hi Nitin,
I would guess it's taking longer as it would have to open you layer and close it again and open.. which would add time to your animation. It's the only thing I can think of, maybe decrease the timeline on the base layer ? I'll look into it when I have time :)
Regards,
This discussion is closed. You can start a new discussion or contact Articulate Support.