Forum Discussion
Progress bar with 100 steps
- 3 months ago
Hello Everybody!
Sorry for the late reply!
I ended up following the article Dynamic Progress Bars in Storyline on the website of Little Man Project.
The only adjustment that I made was, that I changed this line:
const myDiv = document.querySelector('[data-model-id="#"]'); // "data-model-id" OF SL RECTANGLE
to this:const myDiv = document.querySelector('[data-acc-text="Progressbar"]'); // "data-model-id" OF SL RECTANGLE
This way you can use the alternative text (Size and Position -> Accessibility) (in my case Progressbar) as a reference to the containing element. I learned this trick in the article that Math shared.
The advantage of the above solution is that you don't need any third party service. Just a few lines of JavaScript is enough.
So in summary (for everybody who encounters this issue):
- Create a new variable and set this to the value Project.Progress (in the slide master).
- Load the mentioned JavaScript is the slide master.
- Create a rectangular that will contain the progress bar.
- Give this rectangular the same name (Size and Position -> Accessibility) as the name of the variable you created in step 1.
That's it!
Hopefully Articulate will build this functionality into a new version of Storyline somewhere in the future!
Hi, Jeroen,
I don't remember where I saw it, but I vaguely recall a demo that created a progress bar by triggering a long rectangle to move on a short motion path. The rectangle was masked behind a shape that had a rounded rectangle cutout. As the long rectangle moved, it looked like it was filling the cutout, similar to how a classic mercury thermometer looks.
If you can make the width of the cutout area divisible by 100 (e.g., 800 px), that would let you set one motion path (e.g., move right 8 px) for the increments in the progress bar.
Caveat: I haven't done this myself. But it seems like it'd be easier than creating an object with 100 states.
Thanks for thinking along!