Games

Simple (and Free!) Animated Timer in Storyline 360

May 10, 2018 By Jackie Van Nice 2 Comments

Select Image to Launch the Animated Timer Demo

I recently made a game for the Escape the Room ELH Challenge and made a simple animated timer to regulate it. I’m sharing it in the Animated Timer ELH Challenge, too, which is a good place to check out if you’re looking for timer ideas.

It would have saved me a ton of time if I could have started with a ready-made timer like this, so I thought I’d share in case it might help you, too.

Tips to Help You Customize It

Download it: Grab it on its download page.
Unlock the shapes on the timeline: I’ve locked them so they stay aligned, but you can expand the grouped images and unlock them.
Adjust the timing as needed: My need was for a 2-minute timer, so I used a yellow animated circle to represent minute 1 and a red one to represent minute 2. You could use the circles to represent other time periods (e.g. – maybe for a 3-minute timer you would add an orange circle between the yellow and the red to show progress) or whatever fits your needs.

See it in Action!

If you’d like to see how I used this timer in my game interaction, you can see that post and demo here or select the image below.

The Game I Made Using This Timer

Escape Room Game: When Birthday Parties Go Wrong

May 2, 2018 By Jackie Van Nice 17 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to create an escape-room-style game. (Scary!)

Party Equipment

The Idea

My first escape idea was going to have you desperately trying to catch your international flight before it took off, but the mega-talented Jodi Sansone beat me to it (great minds) and did a lovely job, so it was back to the drawing board. In the end I came up with the idea of frantically trying to make a last-minute birthday cake for a little girl’s birthday party: Let the terror begin.

The Design

Images

My first step was was to build a vector kitchen. As the days went by I couldn’t help but wonder if I could have saved time and energy by building a real kitchen.

The Kitchen Stage

These are mostly flat design vector images. I pulled a few from the 360 Content Library as icons or illustrations and manipulated their size, shape, and/or color (juicer, grinder, a few objects on the results screen, maybe the measuring cup… it’s all kind of a blur at this point), but I purchased most and manipulated them in Adobe Illustrator. The focus is on the table and mixing bowl in the foreground.

The Game

The Birthday Girl

I wanted three outcomes:

Success: You got the right ingredients in the bowl in the allotted time and achieved the desired result.
Failure: Your time ran out and things didn’t end well.
Keep going and try again: You put an incorrect ingredient in the bowl and have to dump out the bowl and start over, but the timer is still running.

The Timer

Update: I’ve made the timer available as a free download right here! The issue was the timer and finding a way to give it a two-minute duration that I could reliably start, stop, and restart. Very long story short – after trying lots of options I needed to design and build something quickly, so I winged it with an incredibly simple animated timer.

Timer recipe:

1 two-minute-long ticking sound effect
1 timer ding sound effect
1 image of a kitchen timer with a white face
1 inserted yellow circle shape
1 inserted red circle shape

Superimpose the yellow and red circles on the timer face, in that order, and give each one a 59-second wheel entrance animation. Place the red circle so it starts at the 59-second mark on the timeline. The clock and yellow circle start at the beginning of the timeline, along with the ticking sound effect. The ticking will end when you trigger the timer ding to go off at the end of the 2 minutes, at which point you could jump to a layer or another slide or whatever you’d like to do.

Once in action you’ll see the yellow circle animating in for the first minute, turning the face from white to yellow. In the second minute you’ll see it go from yellow to red, letting you know you’d better get that cake in the oven.

In this game the timer helps increase the sense of urgency, looks flat and cute, and serves its purpose.

The Drag-and-Drop

In the end, this was pretty straightforward. There are three items that require a two-step drop process before they can be used successfully, but you’ll find written hints to give you a clue about what to do and every item is labeled if you tap on it. Searching for clues and things you can use is all part of the game!

The Result

Ready to make a cake for the birthday girl? Grab an apron and make it happen!

Select Image to Launch Demo

Star Wars: The Droid Quiz Awakens

January 7, 2016 By Jackie Van Nice 2 Comments

Select Image to Launch Demo

This week’s challenge is to do something related to Star Wars. Since it was completely open to interpretation and whim, I grabbed a whim and ran.

The Idea

After having seen Star Wars: The Force Awakens I decided I’d like to get to know the features of the droid BB-8 a little better. Once I had a handle on them, I made up this mini-quiz.

The Design

Beyond the images of BB-8 and the desert of Jakku, my primary responsibilities were to find a silly Star Wars font (thanks to Star Jedi at Dafont), make it match his outfit (thanks to the eyedropper tool in Storyline 2), and make everything move around a bit.

The Droid Quiz Result

Want to see how well you know BB-8 and Star Wars: The Force Awakens? I don’t know how much this could possibly help, but here’s my quickie quiz.

It’s Pantone Color-of-the-Year Bingo!

January 7, 2016 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This week I took on two Articulate challenges: One featuring bingo, and one featuring Pantone’s new color(s) of the year.

The Idea

Pantone has been choosing a color of the year since 2000. I wanted to look back at all of them and make a game where you try to match each one with its name. Add the seductive allure of bingo and it’s “go” time.

The Inspiration Layout (Click to See Original Game)

The Design

Layout

David Anderson had supplied a few inspiration pieces in the bingo challenge, and I liked the way the LA Times laid out their Academy Awards bingo game. There was room on the side to add more info – or in my case quiz questions – in a nice, clean way.

Color Quiz Question

Colors

Since Pantone’s current-year colors are Rose Quartz and Serenity – and since featuring them was part of the challenge – I only used shades and tints of those colors to build the game. The only other colors are the subjects of the quiz questions.

Quiz Question

To keep it as sleek as possible, I only posed one question at the beginning. That sentence, along with the easily recognizable bingo layout, explains the entire interaction and doubles as the question for each quiz choice.

Quiz Bluffs

Unfortunately, I found Pantone’s idea of cool color names to be a big snooze. Too bad, because that meant my bluffs needed to be pretty middle-of-the-road too. (Though I worked in a few to keep myself entertained.)

Sometimes It Takes a Spreadsheet

Building It

It’s built in Storyline 2 on one slide with roughly a gabillion layers. I used a spreadsheet to keep the details of each color (name, year, Pantone number, RGB and hex values, where I used them in the grid, etc.) easy to find. It also helped enormously when tracking each one and creating triggers.

Ready to Color Your World?

Give it a try! I predict a colorful Pantone “Bingo!” in your near future.

Select Image to Launch Demo

An Interactive Conversational Game

July 19, 2015 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

This week I took the current two-truths-and-a-lie ELH challenge and combined it with last week’s interactive conversation challenge to make a single conversational icebreaker.

The Idea

Keeping it Conversational

Keeping it Interactive

I wanted to use the interactive conversation to introduce the icebreaker guessing game. It helped give it a bit more context and natural flow.

I also wanted to narrow the icebreaker topic so it wasn’t completely random. It made more sense to focus on just one part of my career, and language teaching narrowly won out over a couple of other options.

The Design

Chalkboard Textures & Colors

Using a chalkboard background and simple images seemed appropriate. I’d have looooooved to add audio and more elaborate animations and images, but kept it simple in the interest of time.

Play the Game!

Ready to see how well I can (or can’t) lie? It’s your call now – and you can play the game right here!

Select Image to Launch Demo