Building a Circular Menu Navigation

The latest ELH Challenge asked members to build a circular menu navigation. One of the inspirations for this challenge was Joshua Stoner’s excellent circular menu with animation post.

circular menu colorsWhen Joshua first shared his nested menu, I really liked what he built. In fact, I modified his design and built a nested timeline. For this challenge, the requirement was to keep it a circular menu.

I frequently like to build challenge entries that serve as helpful tools to use when building in Storyline. I happened to be looking for background photos for a project and was experimenting with color overlays. So I thought I’d create a menu that allowed the user to change the color on overlays for a photo. I picked a transparency value of 75% for each color.

I created the animated SHOW/HIDE animation using Joshua’s technique. I added 6 sub-buttons so as to cover the ROYGBV color spectrum.

different layer colorsNext, I found a background picture from Content Library. Rather than use layers for color changes, I added six states to the background image, one for each color. On each state I added a rectangle overlay for that particular color and changed the transparency to 75%.

Clicking each color circle changes the background to that color overlay and allows me to decide on a color. I also added a trigger to change the background image back to Normal when the user clicks the HIDE button.

Launch Demo

 

Source File

Building e-learning with Star Wars Toys

When I first saw the Articulate ELH Challenge, Using Toys to Design Playful E-Learning, I immediately knew I wanted to pull out my old Star Wars action figures. The challenge for me was determining what type of e-learning to create.

The Idea
I decided on three things I wanted to incorporate in this challenge, a quasi-realistic scenario, a Star Wars look and feel, and humor. I’ll talk a bit about my thought process and design for each of these items.

The Scenario
While my entry is tongue and cheek with its use of toys, I still wanted it to be somewhat realistic. I didn’t want to throw the toys into the course purely as eye candy, but make them the characters in different scenarios. So, what type of situation could I come up with? I started thinking about the Empire as a corporate juggernaut, with stormtroopers as expendable worker bees. This nudged me toward an onboarding scenario for new Empire troops with an Office Space-esque “Is this good for the company” mantra. Thinking about typical onboarding topics led me to the irony of the Empire putting new recruits through ethics training. After all, an entity bent on galaxy domination still needs its minions to be ethical, right?

From here I came up with three scenarios to test a new recruit’s ethical sensibilities.
1. Company property
2. Workplace gossip
3. Company loyalty

The motivation and fear factor was a no-brainer – Darth Vader. Positive feedback means you continue as an employee of the Empire. Negative feedback means a less-than pleasant encounter with Lord Vader.

positive-feedback negative-feedback

The Look and Feel
I toyed with the idea of using images of spaceship interiors for my backgrounds, but decided to build simple backgrounds with shapes and muted colors.

armory bounty-hunters

Color Palette
Since this is the Empire, it needed a lot of black and red. I emphasized this design in the quiz question slides.

empire-colors quiz-color

To make the scenario slides pop, I used yellow backgrounds for the text boxes.

Font
I used three fonts for this entry. I used the Distant Galaxy font for the scenario text and as my title font. It’s a good replica of the Star Wars font.

I also used the Crimefighter font as my caption and quiz question text. This is a comic book font that is my go to font for comic book speech bubbles.

Finally, I wanted something catchy and retro looking for the first slide. I used the Streetwear font to get the look I wanted.

empire-logo

Special Items
I had fun adding a few additional features. First, I created the silhouette of Darth Vader with shapes in PowerPoint. I started with a profile image of Vader and then played with the shapes to get the look I wanted to achieve. Is it a perfect replica of Darth Vader? No, but I’m okay with that. The main thing I wanted to achieve was to construct a passable replica of Vader using only shapes. So, success!

vader-shapes

Creating the lightsaber animation was actually an afterthought. All it consists of is two rectangles (black handle and red light) with an animation on the red rectangle that is synced with the audio of the lightsaber turning on. Easy-peasy and a cool effect.

Another thing I love about the Star Wars movies is the quirky use of scene transitions. While I couldn’t get the exact feel of those movie transitions, I tried to replicate some of these with slide transitions in Storyline. The slide below uses the clock transition and is in mid-transition.

transition

Humor
The last item I wanted to use in this challenge was humor. I tried and hopefully achieved that goal in my quiz questions and feedback for the learner.

quiz-questionquiz-feedback

To view my entry for the ELH Challenge, click the Launch Demo button below. For another Star Wars entry in this challenge, check out Trina Rimmer’s Vader the Interrogator entry. And if you are feeling inspired, create and submit your own entry.

Launch Demo

Building the Football Challenge

In honor of the Super Bowl, the ELH Challenge of the week is to design a learning interaction to teach one or more football concepts. I’ll admit I’m a bit late to this challenge. The Super Bowl was two weeks ago and the New England Patriots pulled out and impressive win. However, after seeing this interactive infographic on the International Violin Competition of Indianapolis, an idea started percolating around showcasing the Lombardi Trophy (aka the Super Bowl trophy).

The infographic has a large picture of a violin along with bits of information about the competition. On the left are navigation buttons. As each button is clicked the violin image and info bits scroll up or down based on which button is clicked.

violin-1          violin-2  images © IndyStar

I like how the image of the violin scrolls and the parts of the violin are labeled. I originally thought I could do something similar with the Lombardi Trophy, lombardi-trophybut I decided that wouldn’t work. The Lombardi Trophy doesn’t have different parts like a violin, so the scrolling wouldn’t have the same effect. I decided to scroll the info about the Lombardi Trophy instead. So, the next challenge was figuring out the best way to do this. I didn’t just want to show different layers. I wanted to show the actual “scrolling” effect, both up and down. Rather than the complexity of seven different buttons like the violin interaction has, I opted for two buttons, up and down.

In order to create the “scrolling” effect I used two line motion paths. I say paths, because I had to create an up path and a down path and make them both relative to the start point. For more information on creating motion paths in Storyline 2, check out Articulate CTO Arlyn Asch’s short video tutorials.

scrolling-imageIn order to make the scrolling effect work, I had to group all of the images and text in one big block. The tricky part with this was tweaking the amount of space between each section and the length of the motion paths in order to have each section scroll up or down to the same section of the slide. Needless to say, I don’t want to do this again anytime soon. This required a lot of nudging to make sure the text didn’t go too far up or down. However, once the all the nudging was finished the effect looks good.

Other Thoughts
I could have done the same type of interaction with a scroll bar, but I wanted a cleaner interface. Plus, when you drag a scroll bar you see the content “drag” with you. I like the simplicity of up and down buttons for moving from section to section. After publishing this project I realized there might be some confusion as to which button (up or down) scrolls which way. I think it was a case of being a SME about the design. I knew it so well that I thought everyone else would interpret it in the same manner as I did. I designed the interaction so that clicking the up arrow scrolls the text up. When I stepped back, I saw that clicking the down arrow may be the more intuitive choice to move to the next section of text, much like clicking the right arrow assumes “Next” and the left arrow assumes “Previous or Back.” What do you think?

Launch Demo