Free Template Tuesday #3 – Tumult Hype “Groundhog”

Groundhog — Hype Template (Thumbnail Image)Today’s “Groundhog Day”. It’s a strange tradition, where a rodent basically becomes a weatherman. If a groundhog comes out of its hole, and it’s cloudy, then it will be an early spring. If it’s sunny, and the groundhog sees it shadow, then it will get scared and go back inside. That’s supposed to mean six more weeks of winter. While I think its cute that people make such a fuss over fuzzy critters like Staten Island Chuck or Punxsutawney Phil, a groundhog is not much different at predicting the weather than tossing a coin. That’s this week’s Free Hype Template.

By using JavaScript, it’s fairly easy to create a 50/50 outcome. The “Math.random” method can generate a random number between 0 and 1. That’s almost like a coin toss, as a coin toss has two possible outcomes. But since Math.random generates a number like 0.7035838516894728, a condition is used to split the result into a “Heads” or “Tails”. That’s at the core of the Groundhog coin flip.

Expand View

By pressing the “Flip” button, or pressing the coin, the following code is run…

     if (Math.random() >= 0.5) {
          hypeDocument.goToTimeInTimelineNamed(0, "Heads");
     } else {
          hypeDocument.goToTimeInTimelineNamed(0, "Tails");

If the random value is greater than or equal to 0.5, then the condition is “true”. The “Heads” timeline is triggered. If the random value is less than 0.5, then the condition is “false”. The “Tails” timeline is triggered. Depending on the value of the random number, the corresponding timeline is manipulated. In the example, the “Heads” timeline switches the coin image to the “Cloudy” side. In the “Tails” timeline, the coin image is switched to the “Sunny” side.

If you’re new to JavaScript, this is a great first lesson. Because if you can master this technique, it is the building block to adding lots of random activity to your projects. To take a closer look at this project, Download the “Groundhog” Hype Template.