There was a question in the Articulate eLearning Heroes community the other day  that caught my eye. A user was asking for ideas to create an interactive stopwatch/timer interaction.

I had done timers and clocks before, but this one was slightly different because a user should be able set a time between 0 and 59 sec. and then start a countdown.

The solution was quite simple and didn’t require any new techniques…been there done that.

The red sec. indicator is an object with 59 custom states. The countdown clock is driven by a looping animation that subtracts a value. Based on that value the sec indicator is updated. The drag functionality to set the sec. is done by a transparent drag object. The community post didn’t provide specifics on how this timer was to be used, but this simple Storyline project can be extended as needed. For example, a lightboxed slide could be displayed when time is up.

This type of interaction would also make for a good exercise for intermediate Storyline users, who want to apply custom states, variables, triggers, sounds and more all in one project.

That’s it! There are still a couple of bugs I could have fixed, but as a quick example/prototype it was good enough.  Here is the finished example.

Edit 10/2016: Here is the .story file for download.