Programmable progress bar

Is it possible to programmatically change the size of a rectangle shape in Storyline? I want to build a custom progress bar which tracks from the beginning to the end of a layer's timeline so that the user knows how long the content is on that layer and knows where they are.

We can't use Storyline's built-in seekbar: it doesn't fit our requirements because the built-in seekbar appears automatically on every layer in a slide and we only want it to appear on one of 2 layers we have on our slide (one has a timeline, the other has just static text - we don't use the timeline, so a seekbar isn't appropriate on that). We can't use states because we might have content which is say, 2 minutes, long and we couldn't have that amount of states, that would be a nonsense. All help very much appreciated.

29 Replies
Matthew Bibby

Ewan, did you know that can show and hide the seekbar on a per slide basis via the Slide Properties?

Unfortunately, you can't do it on a per layer basis, but perhaps you could break the layers into different slides and use this method to specify which slides should show a seekbar?

If not, this article might give you some ideas, but it would involve making a lot of different states. Which, while painful, doesn't take as long as you might think. Especially if you use the Size and Position window to accurately and quickly change the size of an object by a pixel or two or create the states in a separate graphics program (yep, speaking from experience here).

Hope that helps.

Ewan McGhee

Hello Matthew,

thanks for your reply. Unfortunately, it doesn't solve my problem. We had
thought about putting the different layers on different slides but we have
about 100 slides which all have the same requirement, so it's a lot of
work, and there's already quite a bit of branching going on so we can't
afford to complicate it further. We'll just have to live with the seekbar
on the static layer.



Ewan McGhee

Hi David,

I think you may have misunderstood/misread my post - I'm talking about a
progress bar which we'd like to synch to the timeline of individual slides,
so each slide has its own progress bar, which is independent of other
slides. I can, however, also see the value of being able to use an in-built
progress bar to show progress in the context of a whole course/resource.



Michael Crouch

Ok, cool. No problem.

Working on a project at the moment, so will send later this evening.

Just to clarify, for when i send over.

I will build you, a demo containing 2 slides, on slide 2 i will insert 2 layers on this.

On the 1st layer i will insert a timeline of 10 seconds.

And the 2nd layer i will insert a timeline of 15 seconds.

So each time you select a certain layer it will play out the timer for the specific layer?


Walt Hamilton

Is this what you are looking for?  The user cannot use it to change position in the timeline, but it does show progress and is really quick and simple to change.

It has a limit of 59 seconds, but put two of them end-to-end, and you would have a 2 minute line, etc.

Ewan McGhee

Walt and Michael, thanks for posting these solutions, and can see that these would both work.

What I don't understand is how they are working.

Walt, in your source storyline file,, I see no javascript or triggers or state stuff to make this happen.  If you could clarify that, I'd be grateful.

Michael, since your solution is in the form of a published storyline, I have no idea at all how it's working. If you could also clarify how your solution is working, I'd be thankful.

Michael Crouch

My solution is exactly the same as Walts.

All it is, basically a shape with an animation fade in effect, and the entrance timer is set to 10seconds, so it will take 10 seconds for the shape to appear. With the fade effect makes it look like a progress bar.

You can set the timer to what ever you wish (maximum of 59 seconds).

Walt Hamilton


Sorry, I've been away getting a new daughter-in-law.

I previewed a slide, and when the timeline finished, I copied the portion of the slide with the timeline. that way, it looks exactly like the other timelines. Then I pasted it to a slide and covered it with a shape and set the shape animation to fade out with a duration of 59 sec. The shape is the exact size of the moving part of the timeline, and the color of the unviewed part.

Ewan McGhee

Hello Walt/Michael,

Thanks both for sharing this with me. Nice, innovate workaround - although the 59 second limit could be a dealbreaker - if we had a slide which was longer than that, we couldn't effectively use the solution on any of the slides, for consistency's sake. But good imaginative thinking.