Free Download

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

A Yummy, Fresh and FREE Tabs Interaction!

May 1, 2018 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to create a fresh new tabs interaction, so I went outside and picked some inspiration.

The Idea

I wanted to make this a Storyline 360 tabs interaction I could share, so with that in mind I focused on simplicity, functionality, and reusability.

The Design

The Fruity Theme Colors

Colors

I honestly just started with colors I liked and made a color palette from there. To make the template easy to reuse, I saved them as a set of Theme Colors at Design > Colors in Storyline. You can save them down with a different name and/or you can change out one or all of the colors by editing them on that screen.

Images

My theme needed some delicious-looking fruit and veg, so I inserted all of the photos into Storyline from the Content Library. If you swap them out by right clicking and choosing Change Picture, you can replace them with your own images and not lose the animations.

Mangoes in Their Visited State

Tab States

Selected: There’s no actual selected state, because the color of the selected tab matches the background of the revealed content screen, which I think is a good visual indicator of which tab you’re on. I like using that effect.

Hover: The hover state is a semi-transparent version of the tab’s color. To adjust the color or transparency, select the tab, then States > Edit States. Select the Hover state, right click on it, then select Format Shape > Fill Color. At the bottom of that screen you can adjust the color and/or level of transparency.

Visited: I like more control over my states than the built-in ones can give me sometimes, and to get that control I give them custom names. In this case I called the visited state “checked” because I’ve added a check mark to the tab’s state to show it’s been seen. You can also edit this state and remove or replace the checkmark with any image you’d like. Right now there’s a trigger on the tab’s layer to change the tab’s state to “checked” at the beginning of the layer’s timeline.

Disabled: When on a content screen, I didn’t want the user to see an active hover state for the currently-selected tab. That would be confusing and seem like a sloppy build. To keep it solid I added a transparent disabling shape on the layer and placed it directly over the tab, which effectively disables it from showing its hover state. You could always do this by adding a disabled state along with its triggers, but this is another way to do it.

Making the selected tab the same color as its content screen makes navigation clearer.

Content Screen States

Each content screen (layer) is set to show its saved state when revisited. Unless there’s a compelling reason to have the animations repeat when revisiting, I’m happier going back to review each screen without waiting for the animations to execute again.

The Fresh Result and Free Download!

Ready for some fresh and fruity tabbed fun? See the demo right here, and grab the free Storyline 360 file on its download page.

Free Tic-Tac-Toe Template in Storyline!

July 7, 2015 By Jackie Van Nice 10 Comments

Click Image to Launch Demo

I made a punctuation tic-tac-toe game this week for an ELHChallenge. Folks liked it and wanted to know how it was built, so I made it into a game template to share. I’ve replaced the images with a generic smiley face from Microsoft clipart, standardized the colors, and put in placeholder text – but other than that you’ve got the original file.

Tips to Help You Customize It

Download it: Grab it on the download page.
Tic-Tac-Toe Grid: The lines are on the master slide. To change it go to View > Slide Master.
Disabling Clicks on the Grid: To keep the user from clicking on a question they’ve already answered, I added an invisible rectangle on top of each grid image on the base slide named “disable 1”, “disable 2”, etc. The initial state is set to Hidden, but once a question has been answered the rectangle is triggered to go to a Normal (yet still invisible) state to block mouse clicks. If you choose to keep this functionality, be sure these disabling rectangles are in front of the grid images rather than behind them.
Images: Replace them by right clicking on each and choosing “Change Picture”. Keep in mind you’ll be replacing them on the grid and on all 27 layers that include images. (There are also 8 results layers, but they don’t include images.)
“Learn More” Buttons: On each feedback layer there’s a Learn More button that originally linked to a URL. I left the trigger intact, but if you’d like to use it you’ll need to update it with the link of your choice.
Compare it to the Original: If you’re not sure what to put where, just compare it to the original game. That should clear it up.

Have Fun!

I hope you enjoy making your own game. If you have questions just let me know in the comments below!

DIY E-Learning Icons (+ Free Download!)

April 12, 2015 By Jackie Van Nice 8 Comments

This week’s ELH challenge is to create and share a set of icons for the e-learning community. (I’m in!)

Theme: Language Learning

Arts & Culture

List or Knowledge Check

Listening

Reading

Role Play or Discussion

Speaking

Viewing

Writing

For last week’s emoji challenge I created a language learning demo. It’s a topic near and dear to my heart, so I kept the theme going this week. These are the icons, and they align with most of the basic activities you engage in when learning a language.

Design

I created them in PowerPoint and made them simple and flat. To save time I took one of David Anderson’s challenge suggestions and pulled the basic images from The Noun Project. Credit and links back to the original images are in the file.

Colorize Your World

Snack Pack Colors

To show how you can customize them I mocked up a few color combos. They’re in the PowerPoint file, too. To color the PNG images I used Format > Color, and to add texture I used Format > Artistic Effects.