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!
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.
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.
- 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.
To view the full interaction, Click Here.