Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a manual countdown clock in your interactive prototypes

Learn how to create and simulate a countdown clock with a manual input timer in your interactive prototypes with the help of this tutorial.

In this tutorial, we showed you how to create a countdown clock with a set timer, using variables and conditions. In this example, we create a download countdown that allows you to input the time desired. Follow the steps below to replicate our example.

You can download the below example here.

1-interactive-prototypes-countdown-with-variables-timer

Creating a manual countdown clock

1. Open a new iPhone mobile app prototype and add a background image and a status bar.

2. Duplicate this screen and name it Screen 2.

3. Go back to Screen 1 and drag a text box widget to the top of the screen and give your screen a header. Drag an ellipse and an input text field to the center of the screen – make sure that the input text field stays on top of all elements in the Outline tab. This will be where users input the time they want to count down from.

4. Next, drag a text box and button to the bottom of the screen. Add instructions in the text box so that the user knows how to interact with the timer. Our example reads: “Enter the desired time and click ‘Start timer'”. Rename the value of the button ‘S T A R T   T I M E R’ and make it black. Group these elements together in a dynamic panel (select both elements, right click in the selected area and choose the ‘Group in dynamic panels’ option. Next, add a second panel to the dynamic panel from the Outline tab and leave blank.

4. Now, go to Screen 2 and drag image, ellipse and text box widgets to the canvas to replicate the main display in our example. Rename the lower text box ‘Back’, to indicate to the user that they can return to the first screen from this link.

1-interactive-prototype-count-down-timer

5. Finally, create a variable in the Variables tab. Name it ‘Countdown’ and write the countdown amount ‘0′ as the Default value.

2-interactive-prototype-count-down-timer

Adding events to make your prototype interactive

First of all, well add events to Screen 1 to make the countdown start when the user inputs a time value.

  • Select Screen 1 in the Outline tab and then go to the Events tab. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select your “Countdown” variable. In the last drop down, select “Pause”. Change the number of milliseconds you want between each number your prototype count down. In ours we’ve left it as 1000ms, the default amount. Click OK.
  • On the left of this event, add the following condition:

Drag the input text field from the Outline tab to the first position of the expression builder. Drag the GREATER OR EQUALS function to the second position, and then write the number ‘0’ in the final position. Click OK.

  • Right click on the event you’ve just created and select ‘Add action after selected’. Add an “On Variable Change” + “Set Value” event – leaving the countdown variable as is in the middle. Choose the Variables tab below and select your variable. Below, set the value as Calculated and add the following expression:

Drag the input text field from the Outline tab to the first position of the expression builder. Drag the MINUS function to the second position, and then write the number ‘1’ in the final position. Click OK twice.

  • Right click on this event, select ‘Add action after selected’ and add another “On Variable Change” + “Set Value” event – leaving the countdown variable as is in the middle. This time, leave the Components tab selected and select the input text field from the Outline tab. Below, set the value as Calculated and add the following expression:

Drag the countdown variable to the first position of the expression builder. Click OK twice.

  • Now add another event by clicking on the “Add event” option on the right of these events. Select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select your “Countdown” variable. In the last drop down, select “Link to”. Choose Screen 2 from the Screen tab below. Add a Slide Left transition effect at the bottom of the window and choose not to open the screen in a new tab. Click OK.
  • On the left of this event, add the following condition:

Drag the input text field from the Outline tab to the first position of the expression builder. Drag the EQUALS function to the second position, and then write the number ‘0’ in the final position. Click OK.

3-interactive-prototype-count-down-timer

Next, we’ll add an event to the ‘S T A R T   T I M E R’ text box so that the user can start the countdown.

  • Select the ‘S T A R T   T I M E R’ text box from Panel 1 of the Dynamic Panel and add an “On Tap” + “Set Value” event, selecting the variable. Below, set the value as calculated, and add the following condition:

Drag the input text field from the Outline tab to the expression builder. Click OK twice.

4-interactive-prototype-count-down-timer

Finally, we’ll add event to the ‘Back’ text box so that the user can reload the countdown.

  • In Screen 2, select the ‘Back’ text box and drag it to Screen 1 in the Screens tab. In the events tab, double click on the event to edit it, add a Slide Right transition effect, and choose not to open the screen in a new tab. Click OK.

And that’s it! Click ‘Simulate’ to see and interact with your prototype. When you load the simulation, input a number into the input field and click the button to start the countdown. Note that you need to delete the default number (00) before entering the desired number. When the countdown is complete, you will be able to reset the countdown in Screen 2.

 

Next tutorial > Design an automatic slideshow using variables