E-Learning Challenge #110 – Awaken Your E-Learning Force

Last year I completed many more e-learning heroes challenges than I thought I had, and I’m surprising myself early in 2016 by completing my first challenge of the year!

The Concept

This challenge was to ‘awaken’ our e-learning force by creating a Star Wars themed interaction…this was a tall order for me because I had never seen an entire Star Wars movie. I know. I know.

The Method

When thinking about this challenge, I knew I wanted to do something with the iconic intro crawl, and I knew I wanted to build the interaction in Storyline, which was limited in terms of being able to adjust the perspective of my text.

So, here’s what I did instead:

• Went into PhotoShop and created a transparent canvas the width of my Storyline design, and double the height;
• Then, I added a text box around the entire canvas, chose a Star-Warsy font, changed the font colour to a shade of yellow, and wrote out my crawl;
• Once I was finished writing the crawl, I right-clicked the text layer, and selected Rasterize Type;
• Then, I chose Transform > Perspective from the Edit menu, and adjusted the top of the text box to become a smaller width with the bottom of the text box remaining the same;
• I added a drop shadow and saved the image.

Then…

• I went back to my Storyline file where I had applied a background fill of a Star-Warsy looking pattern;
• Then, I added a scroll panel to the entire width (and majority of height) of my project, with the scroll bar extending past the slide so you couldn’t see it;
• Next, I added the image I had created in PhotoShop and applied a line motion path, changing the direction to up, changing the easing to none, and I dragged the end point of the motion path to the desired location;
• I added some Star Wars theme music (attribution under the Resources link), and moved on to the next slide, and set a trigger to jump to the next slide when the motion path animation completed;
• The next slide was a simple click and reveal interaction that employed buttons to trigger layers.

Result

To view the full interaction, Click Here.