Articulate Storyline

Faces of the Ebola Response

October 12, 2014 By Jackie Van Nice 30 Comments

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to design a learning interaction around the Ebola outbreak. Though I started with a branching scenario about patient triage, it wasn’t resonating with me because it wasn’t what I wanted to say.

The Idea

The Individuals

What I wanted to say is that there are people exactly like you and me on the ground who are calmly and quietly taking natural and positive action in response to the situation. This is easy to miss in an unending stream of panicky headlines.

I looked for information and lucked out by finding these profiles from the World Health Organization. Since I couldn’t possibly improve upon the content I simply worked to enhance it by framing it in a way that supports what they’re doing, helps educate people about what’s going on, and possibly motivates them to take action.

The Interaction

The Focus

I wanted simplicity, with complete focus on the individuals. It was tempting to have a more elaborate intro that involved maps and background information about the outbreak, but in the end the photographs and related personal stories tell the tale.

A Simple Intro

Slider Navigation

The Slider

From the start I envisioned a slider with a movable frame you could use to select a person’s image, and was very happy when I figured out how to do it.

It essentially involved making the slider track completely transparent and creating a frame image that I used as a picture fill for the thumb. That plus a whole lot of fine cropping and alignment work – and voilà! – the slider I had imagined. I also made liberal use of other Storyline features including motion paths, built-in animations, and advanced text control.

The Music

Finding music for this was initially quite tough. I could find lots of West African music, but very little of it evoked the mood I was after. Even when I found songs that did, I had no way of knowing if the message being conveyed – whether literally or culturally – would be appropriate, and the topic is simply too sensitive to risk a bad choice.

Fortunately I know a guy who knows his way around djembes and mbiras (that’s a picture from when we were shopping for instruments in Turkey), and he generously offered to let me use some music he wrote and recorded. Many thanks to him for that. I chose the song “Numbers” from a CD of kalimba music he did a few years back since I thought it conveyed a sense of calm, steady progress and it had an opening that worked well for this piece.

Dan Sweigert Getting Musical

See it in Action

If you’d like to see it, make sure you have audio and get ready to be inspired by some remarkable individuals right here.

Select Image to Launch Demo

Create Your Own Pictogram Characters (With Free Character & Slider Files!)

October 6, 2014 By Jackie Van Nice 16 Comments

Select Image to Launch Demo

This challenge is to create your own characters in pictogram style. You simply take basic shapes (I used PowerPoint) and mold them until you have the custom characters you need.

The Idea

Inexplicably, the only characters I was motivated to pictogram were the Dapper Dans – a barbershop quartet at Disney. David Anderson was clear that these characters should be “aligned with an industry”, so apparently I opted for the entertainment industry’s thriving barbershop sector; strolling division.

The Approach

After finding an image of a Dapper Dan I brought it into PowerPoint and started slapping basic shapes on it to mimic the outlines. Then I added some color, smaller details, and used images of striped fabric as the fill for their vests.

Dan Before

Dan During

Dan After

Mike Taylor’s Helpful Video

Mike Taylor’s blog post explaining how he created his own pictograms – and especially this video he did to demonstrate – helped me a lot. Specifically, I’ve never been satisfied with the amount of control I’ve had over editing points on shapes in PowerPoint, but starting at 7:20 in the video he reveals finer points I never knew about, and that was a big help. Thanks, Mike!

State Change: The Dan’s Stance & Note Color Change When Selected

The Slider

I guess I didn’t get enough of a slider fix in last week’s challenge, and this one was just asking for it. The idea of having each stop be a different vocal that harmonizes with the others seemed like a good idea, so I roped Dan Sweigert into recording some quick audio and was off to the races.

I set it up so that when a Dan is selected (1) his audio plays, (2) he changes to a singing stance, and (3) the note on the musical notation below him changes to match his outfit. Those image changes are set up as states, and they’re triggered to revert to their normal states once the audio stops playing.

Have a Look & Listen

Here’s the finished product. Have your audio ready and enjoy the performance!

Download the Free Image and Slider Files!

In case these might help you in your own work, you can download the PowerPoint source file with the customizable pictogram characters and download the Storyline singing slider file, too. Have fun!

Deconstruct This Timeline!

September 30, 2014 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

This Articulate challenge is to take The Big History Project’s interactive timeline and recreate it; interpreting it with the tools you have. It was a rather intense technical challenge, but a fantastic exercise.

The Post-Challenge Interview

As part of the challenge, David Anderson asked us a few questions to learn more about how we created our entries.

1. How long did it take to build?

I’d guess maybe 6 hours.

2. How did you approach it?

I sketched it out on paper first to make it easier to organize and build.

3. What was the hardest part?

I created it using Storyline 1’s native animation and image-creation capabilities, so the only hard part was to remind myself that it was a good interpretation and to not get caught up in trying to recreate every detail of the original.

4. Would you do anything differently?

I don’t think so. Given the amount of time I had, I’m pretty happy with it.

What if…

Now that we have Storyline 2’s enhanced animation and transition options, plus its sliders and motion paths, I thought this would be a great challenge to revisit.

The problem, as I now search for the link to show you the original, is that The Big History Project has completed a Big Web Page Makeover and this version of the timeline has evaporated; lost forever to the mists of time.

What better moment to assure you that my interpretation was utterly spot-on?

How I Dolled Up Storyline’s Sliders

September 28, 2014 By Jackie Van Nice 20 Comments

Select Image to Launch Demo

If you’re a Storyline fan you probably know its latest release features sliders, and this week’s challenge is to make things slide all over the place.

The Idea

I’d originally used the paper doll try-different-outfits inspiration in a drag and drop challenge at a time I was doing uniform and safety gear training. Revisiting it with sliders sounded like fun, but this time I chucked the serious gear so I could just play with dolls.

The Images

Visual Design

I went with vintage paper doll images I found, then got busy removing the background and cutting them apart in PowerPoint.

To set the scene I used a modern house with vintage style. The interior background is a girl’s bedroom. Vintage candy shapes (root beer barrels, peppermints, and lemon drops) on the sliders also set the tone.

Three Sliders

Slider Design Steps

I created three sliders – one each for hats, outfits, and toys – all engineered the same way. This is how I did it in 8 pretty simple steps:

1. Added the slider: Insert > Controls > Slider. I chose the slimmest track style.

2. Added candy images to the thumb: Right click on the thumb > Format Shape > Picture or Texture Fill, then choose your image. The images will come in very small, but before clicking on anything else select Format > Size and increase the height and width as needed.

3. Formatted the tracks: With the slider selected, go to Slider Tools > Format and choose colors for your track fill and track border, then adjust the colors on your slider track hover states, if needed.

4. Set up the controls: With the slider selected, go to Slider Tools > Design. Here I renamed the default variable to “outfit_slider” and selected my preferred Update style. I wanted 5 slider positions: 0, 1, 2, 3, and 4 – which is why my Start selection says 0 and End says 4. The candy thumb is at the default position of 0, outfit one is at position 1, etc., and you progress between them in increments of 1 as indicated in the Step field.

5. Added slider images, states, and animation: I gave each image a state called Chosen, and for that state added the additional images I wanted to appear on the right, such as a dress on the little girl. I also added entrance and exit animations for those images on the Chosen state.

Trigger One: Display Chosen State

Trigger Two: Return to Normal State

6. Added slider triggers: For each slider item I created two triggers. One to display the Chosen state at the position I wanted it to appear, and one to return it to its Normal state.

Trigger for Sliding Sound Effect

7. Added a sliding sound effect: I wanted a sliding sound as you move between each item on the slider, so I added the audio file and created one trigger per slider.

Trigger for Incidental Sound Effects

8. Added incidental sound effects: For the puppy sound, for example, I simply added a trigger that fires when the state of that image is Chosen.

Time to Play!

If you’d like to put together a few nice outfits, have your audio ready and try the demo right here.

Select Image to Launch Demo

When Gate Screens & Yodeling Collide

September 25, 2014 By Jackie Van Nice 7 Comments

Select Image to Launch Demo

This Articulate challenge is to create a two-slide interaction that includes a content screen and a gate screen. Gate screens give learners some control and a chance to interact with the course, so they’re a nice touch.

The Idea

I wanted to use a gate screen to be sure the learner is ready for a final quiz.

Four-Quadrant Menu

The Design

I wanted one screen that was a tight title slide/main menu combo. As soon as I started playing with basic layouts I realized I had a big cross in the middle that looked like the Swiss flag, so that worked. And since travel in Switzerland is spectacular, I thought that should be the topic.

I was after a menu that made good use of hover states and the entire screen – so I split it into four quadrants and created three course sections and a final quiz.

Gate Screen In Use

Gate Screen Completed

The Gate Screen

One way to see if someone’s ready for a quiz is to remind them of what it’s going to cover, so that’s what I did.

Once the learner has checked off each item to confirm they’ve adequately reviewed it, the option to take the quiz becomes available. They’re also given the option to return to the main menu at any time.

See It!

I don’t know why I’m so fond of this one. Maybe my Swiss grandparents would have been proud? Who knows, but I like the compact, responsive design. It’s kind of like those little German (and Italian and French) cars that zip up and down the Alps.

Success!

Regardless, if you’d like to see it, it’s right here!