How Did You Build the Holiday Card?

Every year at Yukon Learning, we send our amazing customers and partners an end-of year holiday card. It’s a fun and creative exercise for our team, as well as a way to say “thank you” to our friends.

Here are two past examples:

• Holiday Story Fill-In-the-Blank Card
• Yukon Village (360° image) Holiday Card

In 2023, we picked a fight … a snowball fight that is! In case you missed it, you can check it out here.

Not only did many of you pelt us with digital snowballs, we were also hit with a barrage of questions, asking: “How did you build that?”

So this month, we decided to give a little glimpse into how “the great snowball fight of ‘23” was created. Grab a cup of cocoa, sit back, and let’s check it out.

Built with Articulate Storyline 360

As with all of our holiday cards, the snowball fight was built using Articulate Storyline 360. And, as we teach during our Articulate certified training, the building blocks (slides, states, layers, and triggers) are key to the process. Other important elements we used included sliders, motion paths, and variables. So, let’s explore how we used each of these elements.

---

NOTE: Due to the complexity of this build, we’re sharing this information at a high level rather than going into too much detail. (This article would be quite long if we did that.) So, we’re making some assumptions about what you may already know about using Storyline 360. Having said that, we’ll provide plenty of links to articles about some of the elements we used, so you can explore these concepts further on your own.

---

Are you “snow” excited? When you’re ready, scroll on to begin!

Slides

Our holiday card consists of only six slides. The slides mainly hold the background and the sliders for the activity. Fortunately, the default white canvas makes an ideal snowy background, so few additional background graphics were needed.

Sliders

Next, we used 2 different sliders in our snowball fight.

• One slider was used for the selection of which team member you challenge to the snowball fight.
• The other slider was used to move your character (the “Y”) back and forth across the slide.

The “snowflake” represents the custom slider thumb in one slide, and the “Y” graphic represents the custom slider thumb for the other.

---

Note: According to Ming, our project’s designer and developer, the custom-made graphics and these states took about ¼ of the total build time.

---

 States

A key part of the visuals in the snowball fight are represented by the states of the different objects.

You’ll notice that the characters in our holiday card have a variety of different states, which helps to create more realistic movement and throwing action. There are also different states for the custom thumb of the slider that make it look like it’s throwing. (How “cool” is that?!?)

Layers

The use of layers in this build, may be where we deviate from the norm a little. Okay … a lot!

In this build, once you select an opponent, you land on one of 3 different slides. And each of those slides contain 52 separate layers. But, these are not your typical layers. 

• 42 layers are dedicated to the different snowball paths.
• Some layers appear when a successful hit is made.
• Other layers represent defeat or victory.

And, some layers contain no objects at all. These layers may appear confusing, but they control the opponent’s movement, the randomness of the direction and length of the movement, and when a snowball is thrown at you.

Most of the layers have also been adjusted to not hide other slide layers. This allows for multiple layers and trigger sets to be working simultaneously.

You’ll also notice that we used cue points on the different layers to trigger conditional state changes and layer reveals.

You may have heard the phrase “Make it great, then duplicate” in our Articulate 360 training classes. Even though each initial layer required a little more attention, building our layers in this way allowed us to develop subsequent layers and slides much faster.

Motion Paths

In this game, motion is pretty important. If your target doesn’t move, then it’s pretty easy to hit. 

• The key motions are the snowballs and the opponent you’re trying to hit.
• Each snowball only has one path, found on the different layers we mentioned earlier.
• The trickier motions are the back and forth movements of your opponent.

In reality, there are only two motion paths on the opponents: one step to the left and one step to the right. So, the combination of the triggers and random number variables on the layers determines how many steps are taken in any direction.

Triggers

One thing that might surprise you in this game build is the lack of object intersection triggers. There are none! That’s right – zero. Since we chose to have the snowballs move on their own layers and the targets reside on the base slide, object intersection was not an option. 

Instead, a correct hit is determined by the variables that compare the snowball being thrown to the opponent’s current position.

For example, on layer “Throw 5,” we subtract the value of 1 from the “HealthO” variable when the timeline reaches cue point 2, only if the “PositionO” variable is between 5 and 7. In other words, when the snowball is thrown from Position 5 and reaches the end of its path, it’s considered a “hit” if the opponent is also in or near that position.

The trigger panels on each layer are quite robust, which was one of the reasons we decided to move each snowball to its own layer. Having this many triggers appearing repeatedly on the slide would have been overwhelming, and more difficult to troubleshoot or edit.

Variables

You may be surprised at the lack of variables for a project like this.

Eight variables may appear to be a small number, but many of them are used repeatedly. These variables allow the triggers to perform as expected by referencing them in the condition sections of the triggers.

The variables in this project are primarily used to:

• Calculate the health score of you and the opponent
• Generate random movement of the opponent
• Determine the positions of you and your opponent
• Determine which snowball you’ll throw

Calling a Truce

There you have it. That’s the overview of how we started this fight. If you want to take a look under the “hoodie” yourself, you can download the exercise file now.

Once you review the exercise file, you may notice a few nuances that we didn’t take the time to explain. You may also have your own ideas. How would you have done this? Go ahead and share your thoughts with us, we’d love to hear them! As we often say, there’s always more than one way to do something in Storyline 360!

---

 Special thanks to Ming Yang, our Design Lead, for his creativity in designing and developing this project. Be sure to hit him with a snowball or two.

---

Want More on This Topic?

For more on the Storyline 360 elements we explored here, check out the following posts from Articulate and The Articulate Trainer blog:

4 Pro Tips for Working with Sliders

How Can I Make a Slider More Engaging?

How Can I Trigger an Object to Move?

What Are the Different Motion Path Options?

What If I Need the Stops in My Slider to Be Uneven?

 Stay cool!

 ~ Ron