Star Wars: The Force Awakens is not just another movie to carry on the franchise, rather the rebirth of one of the largest pop cultures the world has ever seen. Okay, maybe not. Whether you are a fan or not you would have to be living on a remote beach not know the release of the latest Star Wars episode has captured the interest of the world.

As an elearning designer/developer as well as an artsy guy, the creative community came alive for the arrival FN-2187 and the seemingly new Jedi, Rey. The weekly Elearning Challenges by the Articulate community was not to be left out. Challenge 110 released mid-December titled, “Awaken Your Elearning Force” has garnered popular community participation.

I am a big fan of the weekly challenges! While I am not available to participate every week, I try to visit the site weekly and I am continually inspired by the creative entries. Every once in awhile a challenge catches my interest and I cannot resist. Star Wars! Duh!

This post is about the inspiration, the demo, and the scope and requirements I placed on the project.

THE INSPIRATION

Like most, I patiently anticipated the release of Star Wars: The Force Awakens. At first, my family and I discussed that we would wait until after opening weekend and catch the movie the following week. We also planned a long time ago to spend that weekend at Disney and didn’t occur to me that we would be there the same weekend. Imagine if you can the excitement of knowing Star Wars and Christmas lights only Disney can do mashed together at the same time. I almost stopped breathing!

The Elearning Challenge had been posted over a week by the time we traveled and I was still thinking of an idea. The inspiration did not come to me until the flight home. I picked up the People Special Edition Star Wars magazine about behind the scenes and character profiles. Each character profile also had their names written in the Galactic Alphabet, Aurebesh. That’s it!

THE SCOPE

Design an interaction where users can enter their own name and it be converted into Aurebesh. Then, for fun allow users to select either the Light Side or the Dark Side. The key word in this scope is “enter”. The simplest method would be to install the Aurebesh Font, use a text-entry object, and you’re done. Not so fast. The current version of Storyline does not embed installed fonts. Get the font anyway. You may want to write your geeky relatives a letter for them to decode.

THE DEMO

Now you know what to expect, check it out. [be patient…it may take a few seconds to fully load]

Launch Demo

If you want to learn more about how this was constructed, keep reading.

First, for those who like stats:

• One Slide; four layers
• 178 objects (shapes, images, and text boxes)
• 7 audio objects (1 background music; 6 SFX)
• 9 variables (5 Number; 1 Text; 3 True/False)
• 970 triggers

THE REQUIREMENTS

Defining requirements before you start a project is as critical with a single interaction as it is with a full elearning course project. Without a set of starting parameters you can end up chasing yourself, or worse get into a predicament that you can’t solve.

Here are the initial requirements I sketched out on that plane ride home.

First, I had to design the Aurebesh alphabet. There are many images and graphics available, but in order to get the right look and high quality resolution I headed to Adobe Illustrator to create all the character symbols.

To show a visual of what an object looks like with 30 states, click the button below so see a screenshot of Storyline’s States panel for one character space object:

Object States

Later, after I built the overall structure and got it working close to how I wanted it, I asked David Anderson to do a usability test. While the first part of the interaction behaved as designed, the last part when choosing a side did not seem as intuitive. After a few tweaks and a bit of redesign, the final piece (launch demo button above) was published.

After all is done, below is a high level of the requirements and considerations:

• Launch screen with instructions and “galactic orchestra” background music
• 10 spaces for the first name and 10 spaces for the last name
  • each space is an object (20 total) with 30 states each: Normal state, A-Z states, hyphen, space, and OFF states.
• Two buttons to activate either the first name or last name
• Keyboard with A-Z, hyphen, space, clear/backspace, and reset
• After creating first and/or last name, show a Light Side and Dark Side buttons for users to choose
• Upon choosing side, show a layer with Light Side or Dark Side graphics (blue or red respectively)
• Considerations:
  • To begin, user clicks “Activate First Name” button which hides the instructions and shows the keyboard
  • IF user clicks “Activate Last Name” prior to entering the first character, show a layer with Yoda saying something about not having a first name and at a minimum must enter at least one character.
  • Once user clicks “Activate Last Name” show the Light Side and Dark Side buttons.
  • IF user clicks either Light Side or Dark Side buttons, show a layer with Yoda asking if user has no last name or option to continue entering only their first name.
  • IF user selects Light Side button, show layer with Rebel Alliance background image, the name “JEDI”, and hide any unused character spaces.
  • IF user selects Dark Side button, show layer with Galactic Empire background image, the name “DARTH” and hide any unused character spaces.
  • On each layer for Light Side or Dark side, allow users to switch sides or create another name by starting over.

BEHAVIORS

If you know me you know I’m a storyboard geek as much as I am a Star Wars geek! Part of my storyboarding process includes post-project documentation and archiving a project. I’m still refining a process to document variable and trigger behaviors, but for now here is how each click behaves:

1. User clicks “Activate First Name”
   • Set a variable used later to evaluate if in fact the first name has been activated
   • Change the states of a few objects to hide the instructions and show the keyboard
   • Change the state of button to Disabled state (Disabled state is same button with blue glow)
   • Change ALL First Name characters space objects to Normal (initially OFF)
   • Play the SFX
2. User clicks a letter, hyphen, or space on the keyboard. The below set of triggers is for the letter “A”. Repeat for all letter keys, hyphen, and space.
   • Add 1.00 to variable to evaluate the activated name button (different from the one above)
   • Add 1.00 to variable to count the 10 first name character spaces objects
   • Add 1.00 to variable to count the 10 last name character space objects
   • Change the states of character spaces objects to their appropriate letter if variable counting is equal to their first name space
   • Change the states of character space objects to their appropriate letter if variable counting is equal to their last name space
     • example: Change the state of FN01 to “A” when the user clicks “key A” IF FNcount is equal to 1.00. Change FN02 to “A” if var is equal to 2.00. And so on.
   • Play SFX
3. User clicks “Activate Last Name”
   • Add 1.00 to a variable to evaluate the activated name button
   • Set variable for First Name to False
   • Set variable for Last Name to True
   • Set the First Name character count to 11.00 (one more than total number of first name character spaces)
   • Show a layer asking if No First Name IF variable evaluating First Name is 0.00 (if user clicks Activate Last Name button prior to entering a single letter for first name)
   • Change the state of button to  Disabled state (Disabled state is same button with blue glow)
   • Change the state of both Light Side and Dark Side buttons to Normal (initially Hidden)
   • Change ALL Last Name character spaces to Normal (initially OFF)
   • Play SFX
4. Repeat step 2 up to total number of available character space objects (10 for first name and 10 for last name)
5. User clicks either Light Side or Dark Side buttons
   • If Light Side clicked, show JEDI layer
     • Hide unused character space objects
     • Play SFX
   • If Dark Side clicked, show DARTH layer
     • Hide unused character space objects
     • Play SFX
6. User clicks Switch Sides
   • Show opposite layer: If Light Side show Dark Side. If Dark Side show Light Side
7. User clicks “Create Another Name?”
   • Set a variable to True (prevents instructions and hidden keyboard from showing again)
   • Reset all other variables to initial value
   • Jump To slide (itself)
   • Slide Properties: Reset to Initial State

The above setup is high level only if a user enters first name, enters last name, and then chooses a side. There are several other triggers and variable usages to evaluate if a user attempts to activate the last name before entering a first name, choosing a side prior to entering a last name, and an option to choose a side without a last name. There’s probably a few more I can’t think of right now either!

LESSONS LEARNED

Running Windows7 via VMware Fusion client on a MacBook Pro i7 quad processor w/ 500 GB solid state drive and 16 GB ram and Storyline still struggles like a tired Buick with 970 triggers on one slide. 🙂

CONCLUSION

The mere nature of the weekly Elearning Challenges is just that…to challenge you. I certainly do not recommend investing the amount of hours necessary to build something like this every week, but I do recommend pushing yourself beyond the standard design every once in a while. I had some time due to the holiday break to practice and what better way to practice your skills than challenge yourself.

David Anderson and the folks at Articulate have a safe place to ignite and inspire. Participate when you can and above all I hope this helps and inspires others!