Articulate Storyline Tips & Tricks

How To Create A Custom Countdown Timer In Storyline 3 Or 360

Do you want to know how to create a countdown timer in Storyline 3 or 360? In this video I’ll show you step by step how to set up a countdown timer in Storyline with triggers only and no javascript.

FasterCourse Banner
I have an new Storyline project So let’s build the countdown timer.

The first step is to create two variables in Storyline.

To do this I click on the right hand side on my screen on the variables icon.

Now the variables window opens. Now I click on the green plus sign to create the first variable.

My first variable is called minutes and is a numberd type variable

When I’m done I click on OK. And click the green plus sign again.

The second variable that I’m gonna create you’ve guessed it probably is called seconds. This is also a number type variable.

Now I have my variables for my countdown timer. The next step is to create the timer itself. I’ll do this on the master slide. So I’ll open the View tab and click ‘Slide Master’

I select the Master slide view and I will create a new layer. I’m going to use this layer as a timer.

I click the button ‘new layer’. Storyline adds a new layer. I call this new layer timer. Amd I’ll change the duration of this layer to 1 second by dragging the grey end bar to 1 second.

This layer will be my timer object in Articulate Storyline. I create an trigger that each time the layer end Storyline substracts one of my variable seconds. I also create a trigger that when the layer end Storyline will hide this layer and shows the same layer again. This is my seconds timer. I need one last action on the base layer of my master slide view that shows my timer layer the first time.

I click the new trigger icon and select show layer when timeline starts

Now let’s see if this works. I set the default value of the variable second to s60 and i add an textbox with a reference to the variable seconds to the slide layer and preview this module. To do this I go yo the insert tab select textbox I draw a textbox on my screen I click the insert tab again and I choose reference and select my seconds variable and click on ‘OK’.

Now let’s close the slide master view, I’ll add an extra slide to my project and preview my Articulate project.

You see my seconds counter works. It counts down from 60 till zero and it also works if I jump from one page to another.

Now let’s add triggers for our minutes timer. I add these trigger also on my master slide.

I’ll add an trigger that substracts one from the variable minutes on the condition that my seconds variable less then zero. Then I must reset the seconds variable to 59 again to start a new minute.

To see if this works I’ll select the master slide baser layer. Select my second textbox and type : and before this I’ll add the reference to the minute variable. I don’t want to wait a whole minute to see if this works so I’ll change the initial value of the second variable to 10. I close the slide mater view and preview my project.

To get my timer completely right the right time notation under ten 09 09 and so on.

Would you like to know more about Upward Online Learning and Articulate Storyline? 

🔔 Subscribe here for more free E-learning and Storyline tips

📕 Download the Ultimate process how to create e-learning with Articulate Storyline here

🎓 Want to learn more about Articulate Storyline? You now get a 10% discount on
Fill in the coupon code ‘upwardonline’ on the sign-up and you’ll receive your discount directly!

🎓 Do you want to start your Storyline project with modern design elearning templates that are easy to use?

You now get a 10% discount on
Fill in the coupon code ‘upwardonline’ on the checkout page and you’ll receive your discount directly!

► Master Articulate Storyline Variables [Like a pro!] see video


Buy books on Articulate Storyline on Amazon:

📕 Articulate Storyline 3 & 360: The Essentials

📕Articulate Storyline 3 & 360: Beyond the Essentials (Second Edition)

📕 E-Learning Uncovered: Articulate Storyline 360: 2nd Edition


Leave a Comment