Timing is Everything: Behind the Smiley Face, Developing a Countdown Timer in Articulate Storyline

natestoker 10 September 2023 Quick Tips

While I was convinced that the “Timing is Everything” series had reached its conclusion with the second installment, the exploration into creating a versatile timer beckoned me to extend the journey.

Despite the functionalities illustrated in part 2, where the countdown timer was initiated with a button push, I felt compelled to innovate further. Here’s a recap and a glimpse of what’s ahead:

  • Part 1: A comprehensive guide on calculating the duration a course has taken.
  • Part 2: Delving deep into the construction of a countdown timer, primarily leveraging JavaScript.
  • This Installment: Unveiling a streamlined approach that employs a smiley face animation as the ‘engine’ and a dash of JavaScript to change the time format to mm:ss.

In this chapter, we venture into the creative utilization of a smiley face animation, tirelessly traversing along a line. Like a trusty old clock, the animation keeps going in a loop, restarting each time it hits the end, ready to kick things off all over again. To orchestrate a countdown, I integrated triggers to decrement the counter with each animation loop, each encompassing a span of one second. Embodying the essence of a cog in a grand machinery, the smiley face operates at the core, driving the countdown with unyielding precision and rhythm. Join me as we dive into the workings of this animated engine that breathes life into our countdown mechanism.

Setup Phase

Step 1: Layer and Animation Setup

Let’s get started with Articulate Storyline, where we will set up a layer that hosts a perpetual smiley face animation, serving as the heartbeat of our countdown timer. This mechanism isn’t just a visual delight but a critical component that drives the logic behind the functioning of our timer.

For a deeper dive into the versatile applications of looped animations, you might find this tutorial from Articulate 360 beneficial.

Let’s start.

  1. Set up a timer layer, which can be triggered at the start or end of a timeline or via a button.
  2. Incorporate a smiley face (Insert > Shape), and select an animation path (Animation tab > Add Motion Path) with a one-second duration. The Smiley Face does not need to be on the stage. I placed the Smiley on stage for us to view and trouble shoot. But once its complete and working you can move it off the screen.
  3. Create a trigger that says Move Smiley Face 1 along Line Motion Path 1 When the animation Line Motion Path 1 on Smiley Face 1 completes. This will ensure continuous movement of the smiley face.

Development Phase

Step 2: Integrating Variables

Next, initiate the creation of three essential variables:

  • totalSeconds (Number type): Stores the countdown timer’s numerical value.
  • formattedTime (Text type): Displays time in a “mm:ss” format.
  • warning (Text type): Hosts warning messages for different phases of the countdown.

Step 3: Configuring Triggers

At this stage, we orchestrate triggers linked to the smiley face, ensuring a decrement by one with each animation cycle and employing JavaScript for accurate time formatting.

  • Define a slide trigger to set the initial value of totalSeconds. The trigger should say Set totalSeconds to value 45 When the timeline starts on this layer, where 45 is the amount of seconds you want the countdown timer to have. 300 seconds would be for a 5-minute timer.
  • Create a decrementing trigger attached to the smiley face animation.

Here, we utilize JavaScript code to mold the time format as per the following mechanism:

var totalSeconds = GetPlayer().GetVar("totalSeconds");

var minutes = Math.floor(totalSeconds / 60);
var seconds = totalSeconds % 60;

var formattedTime = minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');

GetPlayer().SetVar("formattedTime", formattedTime);

This code snippet functions as follows:

  • Initially, it retrieves the value stored in totalSeconds from Storyline.
  • Subsequently, it calculates the minutes and seconds separately, with minutes being the quotient of totalSeconds divided by 60 and seconds being the remainder.
  • The values are then formatted to ensure a minimum of two digits for both minutes and seconds.
  • Finally, the formatted time is reassigned to the formattedTime variable in Storyline, ready for display.

Copy this script and attach a new trigger to the smiley face animation, guaranteeing the correct format of totalSeconds with each tick.

Note: This step is optional if a mm:ss format is not necessary, and basic functionality is already achieved here.

Conclusion

Step 4: Implementing Warning Messages and Final Adjustments

To round up, we establish a system to unveil warning messages as the timer approaches specific markers, enhancing user interaction. We also add some extra triggers to prevent the totalSeconds variable from descending below zero, promising a smooth and logical end to the countdown. At 30 seconds the warning variable can say something like almost there! And at times up it can say “Times up!” If you don’t want a warning you can skip this step, and remove the warning variable.

To circumvent the potential issue of the counter descending into negative values, we can device additional triggers that prohibited the totalSeconds variable from diminishing below zero.

Throughout this setup, the smiley face serves as the central gear in our mechanism, ticking away each second and governing the warning messages, thereby standing as a fundamental element in this intuitive and effective countdown timer.

Create 3 triggers.

  1. Set warning to value Time is almost up! When total totalSeconds changes If totalSeconds ≤ value 30. – this is to give you the warning at 30 seconds.
  2. Set warning to value Time’s Up! When total totalSeconds changes If totalSeconds ≤ value 0. – this is to give you the warning time is up at 0.
  3. Set totalSeconds to value 0 When totalSeconds ≤ value 0. – this prevents negative counting.

Your Turn!

You’re up next! Armed with the knowledge to build a vibrant and interactive countdown timer, it’s your turn to dive in and get creative. Experiment with different facets, adding a personal touch or integrating complex features to your project. Remember, this smiley face timer is more than a tool—it’s a springboard for innovation. Dive deep, start building, and share your journeys with the community. Your approach could spark someone else’s breakthrough in visual communications. Together, we learn and grow!

Catch the demo below and forge ahead. Please note there is no sound.

Related Posts