Show Your Work

Dating Zombies as a Survival Strategy

October 19, 2014 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This week’s creepy-yet-practical Articulate challenge is to put together something that will help us prepare for – and survive – the upcoming Zombie Apocalypse. My idea may not have the best success rate, but it’s all I’ve got.

The Idea

Zombie

Sticker

Inspiration

It started with some dollar store scratch-n-sniff zombie stickers. (I haven’t been curious enough to find out what zombies smell like yet.) But I started to notice categories (food, drink) and sketched out an interaction where a perky person was doing zombie market research. When outcomes for that seemed too limited, I came up with the dating idea.

Creepy Setting — Perky Person

I knew contrast would be key. Lovely, safe, familiar things needed to be set in high relief against their opposites; hence the choices for music, fonts, script, people, food, drink, and everything else.

Tough Choices

The Interaction

Theme

It’s all bad-horror-movie inspired, including the intro with that awesome True Crimes font. Add some of Storyline 2’s new animations and it’s a pretty good title screen.

Slider

This time I filled the thumb with an image of a zombie hand and used no visible track. You slide and release the hand to choose, which seems intuitive. The only downside of using the slide-and-release option was that when I published to HTML5 it treated triggers as though they were part of a while-slider-is-dragged version – so I republished without HTML5.

Options & Outcomes

There are 3 possible outcomes. One based on zombie choices, one based on my own personal choices (largely unlike zombie ones; though lines get blurred in a couple of categories), and one somewhere in between.

Click Image to Launch Demo

Try it Out!

Who’s your perfect match? Give it a try and find out… if you DARE.

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