Happy New Year!
It’s been a little while since my last blog as I have been busy in my new role at WorldRemit. I still take part in the Articulate E-Learning Heroes Challenges when I can, except my profile looks a little different…
That’s right – I am now an Articulate Super Hero!
After taking part in 96 challenges and sharing over 100 demos, I have been recognised as a ‘top contributor‘, who goes ‘above and beyond to help others by contributing to forum discussions, sharing ideas, and pointing people to helpful resources.’
Needless to say, I was delighted to be awarded a ‘cape’ just 2 years after I began my E-Learning Heroes journey. In my excitement I may have let the cat out of the bag with my 97th challenge entry.
Everything You Need To Know About Articulate Super Heroes is inspired by the 1966 Batman TV show and uses a couple of techniques to create animated masking and cutout effects.
This week's @ELHChallenge is 𝗔𝗻𝗶𝗺𝗮𝘁𝗲𝗱 𝗠𝗮𝘀𝗸𝗶𝗻𝗴 𝗮𝗻𝗱 𝗖𝘂𝘁𝗼𝘂𝘁 𝗘𝗳𝗳𝗲𝗰𝘁𝘀. Although a lot of e-learning heroes use masks, they don't all wear capes! pic.twitter.com/kGknKjip1s
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) January 15, 2022
To the Batpoles!
Masking is the process of concealing or revealing portions of an image. When combined with animation, this can create dynamic and attention-grabbing effects.
In his introduction to Animated Masking and Cutout Effects in E-Learning Design, David Anderson shared a quick and easy method to make cutouts and masks using PowerPoint, which can be exported as PNG files for use in your Storyline course.
For this demo I needed a cutout that mimicked the secret entrance to the Batcave, but my initial experiments with PowerPoint were unsuccessful. The PNG images were fuzzy when displayed in Storyline. There was obviously a drop in image resolution.
As I don’t currently have access to Photoshop, I decided to cut my losses and build the bookcase from scratch in Storyline instead. Two advantages of this approach are that vector shapes load more quickly than PNGs and scale without losing any resolultion.
To achieve the cutaway effect, I used the object order to layer the components.
As the walls are placed over of the animated bookcase, the bookcase appears to slide behind the walls.
Of course, I couldn’t build Batman’s sliding bookcase without adding the famous switch he used to open it.
One of my favourite tricks is to edit an image or shape to alter its appearance when its state changes. I used this technique to add the extra details to the bust of Shakespeare in its Disabled state.
Although this technique worked perfectly in preview, when I published the course online, the white button appeared slightly before the bust of Shakespeare flipped open.
This is because the button – created in Storyline – was a vector shape that loaded more quickly than the PNG image above it. This lag was even more noticeable on mobile devices.
So I took the same approach as the bookcase, separated the components, and used the object order to create the masking effect instead.
You can also eliminate this lag by using Photoshop to create each state change. However, editing images ‘in slide’ does give you more control over each element and allow you to add vector shapes where advantageous.
Top of the charts
Feeling super-powered and inspired by a great topic, I ended up creating three demos for my 98th challenge, Using Interactive Charts to Present Data, Facts, and Figures.
Even after all this time, the impulse to throw in a Dad Joke or two remains strong. And there are still some features of Storyline that I haven’t used very much at all.
One such feature is the swipe action, which I used to make How long is a piece of string?, a seemingly endless interactive chart that is fun to use due to its tactile user interface. Try it out on a touchscreen! You may even learn a few facts about string in the process.
For Lies, Damned Lies and Statistics I applied what I learned in the masking challenge and used only vector shapes, to create a smooth, sharp infograph that looks great on any device.
Reaching new heights
I feel blessed to be named an Articulate Super Hero but know that with great power comes great responsibility.
Although I often play the challenges for laughs, I treat my role and this industry very seriously. Everything I have learned since Challenge No. 232 has made me a better e-learning designer and I enjoy sharing my work and helping others. Yet I’m aware that my use of humour can sometimes distract from the real-life application of these techniques.
How long is a piece of string? is an extended gag that tricks users into swiping right for longer than they should. The length of the string bears no relation to the content. To make a joke I ignored one of the cardinal rules of instructional design: content should inform context and vice versa. The best e-learning presents content in a way that is congruent with the topic.
For this reason, I redesigned How long is a piece of string? to create How Far To That Star?
Why go to astronomical lengths to describe a concept when 𝗨𝘀𝗶𝗻𝗴 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗖𝗵𝗮𝗿𝘁𝘀 𝘁𝗼 𝗣𝗿𝗲𝘀𝗲𝗻𝘁 𝗗𝗮𝘁𝗮, 𝗙𝗮𝗰𝘁𝘀, 𝗮𝗻𝗱 𝗙𝗶𝗴𝘂𝗿𝗲𝘀 is more effective?
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) January 24, 2022
Set a course for this week's @ELHChallenge to discover more. pic.twitter.com/T0w8YWaIhf
This Adventures of Tintin-inspired piece makes better use of the swipe action, and the distance travelled supports rather than distracts from the content. It’s my 109th demo and one of my favourite designs to date.
As I head into my 99th challenge, the sky is the limit. There’s always something new to discover when it comes to e-learning.