I’m Ready for My Close Up

You need to create an e-learning course about how to use a text book. You want to show the sections in context where they appear on the page, but also need to focus on the specifics in each section. I created an interactive e-learning lesson on this using Articulate Storyline’s zoom feature and highlights.

Click here to run the interaction

Click here to run the interaction

I actually created this in response to an e-learning challenge presented by David Anderson to create an interactive screenshot experience. Since I had done something similar for a recent client, I thought I’d create a page from an imaginary text book to demonstrate some of Storyline’s features.

Setting It Up
After creating the imaginary page, I imported an image of it and added a grow entrance animation on the first screen. I then duplicated the slide once, removed the grow animation from the new slide, then duplicated that slide four more times. I named each of the new slides after the sections they will highlight.

Going back to the original slide, I created highlight boxes and synced them to the audio to call learner’s attention to the different sections on the page. To do this, I simply created boxes over each section with a blueish-green outline and no fill, and had them fade in when they were initially mentioned in the voice-over.

I then added a trigger to each box, and told it to go to the slide for that section when the user clicks on it.

Zooming In
Next, I went to each subsequent slide and added a zoom region to drill in on that part of the page. I also timed the zoom to go in and out with the audio narration. These slides were all set to go back to the introductory slide once the audio ended.

Zoom in on section

Zoom in on section

Sometimes you need to drill even further into a section of a page. To do this on the “Glossary” section, I just applied similar highlight boxes to fade in and out while the section was being zoomed in on. I also timed the fade in/outs to sync with the narration.

Zoom in with highlight

Zoom in with highlight

SnagIt
You can also use SnagIt to get a screen shot of just part of a page and have that “grow” in on top of the full page view. Then you can zoom in even further and highlight subsections within the currently viewed section. I did something like this for a client in one of their training modules.

So, now that I’ve gotten you all excited about text book training, check out my sexy little interaction here.

Advertisements

Making Sliders with Sliders

Storyline 2 has a new interactive feature called sliders where learners can slide up and down a scale of options and see the results of their choices. David Anderson presented us with an e-learning challenge to create an interaction using this new feature. I decided to go the obvious route, showing users how to cook sliders using sliders!

Click here to make sliders with Bert!

Click here to make sliders with Bert!

Who’s Bert?
On a couple previous challenges; I introduced the world to a somewhat unrefined character named Bert (aka: my right hand). In one story, an e-learning challenge master, Jackie Van Nice shows Bert going on a day trip to the beach with an overworked e-learning developer taking a much-needed break from the office.

And in another appearance, Bert and his crew are shown on an interactive organizational chart where they tell learners about their roles and responsibilities running Bert’s first tour of the US.

Bert’s Sliders
This brings us to our latest installment in the Bert saga. Bert has just opened a new restaurant, Bert’s Sliders. You’ve been hired in the kitchen and need to learn how to cook the perfect hamburger. Using two sliders, you set the cooking time and temperature, click the “Serve it up” button and see what Bert thinks of your burger.

Using Sliders to Make Sliders

Using Sliders to Make Sliders

Two Sliders are Better Than One
Since I like to make my life difficult, I decided to have two sliders working together, one for the cooking time and the other for the temperature. I learned there are two factors that go into the number of possible outcomes when you use multiple sliders for one task; the number of sliders, and the number of settings on each slider. In my case, I had 3 temperature and 3 time settings, 3 x 3 = 9 possible outcomes.

I also deduced that some of these combinations of settings would essentially get the same result. So, if you chose the highest temperature and the shortest cooking time, or the lowest temperature and the longest cooking time, you’d get a pretty bloody, rare hamburger. Ultimately, I ended up with six possible outcomes based on any of the 9 combinations possible.

A Bloody Rare Burger

A Bloody Rare Burger

Trigger Happy
Storyline 2 automatically creates the variables once you decide on the number of settings for each slider. All I had to do was create triggers that would take learners to the appropriate results slide with a video showing Bert’s reaction to the their choices. The trigger settings for these different outcomes say that when the user clicks the “Serve it up” button, go to Slide XX if variables XX and YY are selected.

When creating this trigger, you need to click the “Show Conditions” button and add the two variables in.

Don’t Forget the Zero
I also learned with sliders, you have to have a zero or off setting. Otherwise, it’s impossible for Storyline to detect when the lowest setting on either slider is selected. This is because the variables Storyline automatically creates are based on either the user sliding over one of the settings or sliding and landing on a setting. If the learner doesn’t move the slider, Storyline has no way of knowing what setting they’ve selected.

Therefore, I added a cooking time of zero and a temperature setting of off. Then I created triggers that said whenever learners hit the “Serve it up” button without moving either slider, or with either slider on the zero or off setting, to show them a layer saying they need to select a higher cooking time and temperature than zero.

Zero Option

Zero Option

Now for the fun stuff…
Jackie Van Nice was kind enough to shoot the videos with my iPhone in front of her large monitor displaying a high resolution picture of a diner. No fancy green screens were used on this production. As luck would have it, the light from her lamp had just the right tone to match Bert’s complexion (again, we’re talking about my right hand) with the lighting in the picture. I used some ketchup, charcoal, olive oil, and paprika for Bert’s “makeup” in the different scenes.

Someone call the fire dept!

Someone call the fire dept!

The jingle was sung and recorded by yours truly in the spirit of a cheesy hamburger commercial meets barbershop quartet style. I used Cubase SX and an Audio Technica microphone and layered about 4 vocals with harmonies. I also threw in some sound effects of a restaurant, fryer, and crows to add atmosphere to some of the scenes.

So, come on down to Bert’s Sliders and brush up on your cooking skills. Good luck!