Skip to content

One Step Vyond

This week’s E-Learning Heroes Challenge is Combine Photos and Illustrations in E-Learning.  

AKA Let the Knuffle Bunny Help You Combine Photos and Illustrations in E-Learning. This is one of David Anderson‘s most esoteric challenges yet, but the premise was simple.  Our brief was to create an e-learning sample that combined photographic and illustrated elements.  Done with intentionality this mixed media approach can add visual interest, highlight key information, best swiss hublot classic fusion mat white dial automatic ladies chronograph watch 541 ne 2010 lr 1104 and create a mood or theme that supports your topic. US readers may already be familiar with the Knuffle Bunny children’s book series, which combines real-life backgrounds with hand-drawn characters.  Growing up in the UK, I was more familiar with this https://www.vapesshop.de/product/luili-gentleman-bear-einweg-vape-8000-puffs-ice-mints technique from the classic cartoon, Danger Mouse. This was another opportunity to practice with Vyond, leveraging the Knuffle Effect ™ by placing its cartoon characters in a photographic environment.
The classic British cartoon, Danger Mouse, often contrasted its brightly coloured illustrated characters against black and white photographic backgrounds.

Combining illustrations and photographs

During lockdown I have been helping my ten-year-old daughter, Matilda, with her schoolwork.  Her current topic is ‘space’, so I already knew where to find lots of open source photographs from the Apollo moon missions.  One of these high resolution, panoramic photographs would make the ideal background for this challenge.

Apollo 15 Landing Site, courtesy of the Lunar and Planetary Institute

I chopped this image into three parts and adjusted the brightness to provide greater contrast with the Vyond character in the foreground.

These images form the backdrop of the opening slide and the three question slides within my demo.  This creates the impression the astronaut is travelling across a wider space than is visible in each slide.

On the final slide, I used the motion path feature in Vyond to ‘shrink’ the astronaut with each jump, making him appear to move towards the lunar lander.

'Shrinking' the astronaut using the motion path feature in Vyond'
Splitting the panorama to create the impression the astronaut is travelling across a wider space than is shown in each slide.

The 'over-under' conundrum

Keeping the answer buttons on top of the video content, while also changing the video content in response to the learner’s actions, is tricky but not impossible.  Last week I achieved this by using short GIFs, rather than videos, as you can read here.

But this week I wanted to see if I could create a similar effect to the slider bar interaction in The Usable Suspects without resorting to GIFs, which have limitations.

This was particularly important for this demo, as I wanted to include freeform question slides.  Simply adding more videos in layers would prevent the user from selecting an answer on the base layer.

Although it is not possible to give videos a ‘hidden’ state, as base layer objects, you can hide them from the timeline of another layer. 

The sarcastic assistant

Customising your slides in Storyline 360 is a doddle, but one element you cannot change is the ‘invalid answer’ feedback slide.  This appears when your learner has not selected an answer before pressing submit.

Happily, there is an easy workaround, as David Anderson demonstrates in this video.  By following David’s method – and combining it with the show/hide technique above – I was able to make the astronaut shrug at the learner if they pressed submit too soon.

It’s always a good idea to give your learner a bit of extra help when they need it.  If you can do this in a humorous way, that’s in keeping with your theme, all the better.

Sonic The Hedgehog inspired the 'idle' state of my astronaut.
Not quite as impatient as Sonic The Hedgehog but the same energy!

Here's how the story ends

One of my pet hates in course design – and something I always try to avoid in my own creations – are generic results slides that look as if they’ve been plonked on the end of a course as an afterthought. 

This is because the results slide is really important. It not only informs the learner whether they have passed or failed, but how it presents this information can also leave a lasting impression.

Moonwalk is a very short ‘course’ containing only three questions.  It is a good looking summative assessment, if we’re being brutally honest.  

Nonetheless, Moonwalk does have a very clear narrative and, depending on the learner’s performance, there are three possible endings to this story.

Results slides are the original branching scenario as they show the ultimate consequences of your learner’s decisions.   

It is useful to approach the design of your results slide in these terms, rather than simply displaying a score. 

What are the consequences of passing or failing the course, in the context of your theme?  What will happen to the astronaut if you don’t score 100%?

Wired for sound

One of the biggest advantages of using video over GIFs is the option of adding music and sound effects to your animations.  This places greater emphasis on your ‘pre-production’ process in Vyond and can make updating your course in the future a bit more complicated.  However, storyboarding your course in detail before you start can reduce the amount of rework later.

My original demo contained no sound effects at all, as I was focused on getting the animations to work as intended.  But it wasn’t long before my daughter noticed what I was up to, and commandeered my demo for her latest school project.  She helped me choose the sound effects and expand the question bank based this week’s homework.

So here it is, the final version of this project, guest-starring Matilda Hill, aged 10.

“Safe journey home space cadet!”

1 thought on “One Step Vyond”

  1. This week’s ELH Challenge (E-Learning Icebreakers: Two Truths and a Lie) was another opportunity to experiment with interactive video in question slides. I also added more accessibility features this time. Focus Order is often overlooked and can be difficult to configure across multiple layers.

    Check out my lastest demo, THE INTERROGATION GAME!

    ELHC 313

    This demo employs all of the techniques discussed above, with a dash of Adobe After Effects.

    Hit pause and then rewind while I’m talking ?

Leave a Reply

Your email address will not be published. Required fields are marked *