This week’s E-Learning Heroes Challenge is Using the Jump-to-Time trigger in Storyline 360.
Can you believe this versatile feature is already one year old? As I remarked at the time, “This is the upgrade I never knew I needed!“, and I quickly began experimenting with this new trigger to create looping, GIF-like animations.
These experiments resulted in one of my favourite demos to date, Spinning Plates. Twelve months on, those plates are still spinning! I was delighted to see my demo featured as one of the examples for this week’s challenge.
This week's @ELHChallenge is 𝗨𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗝𝘂𝗺𝗽-𝘁𝗼-𝗧𝗶𝗺𝗲 𝗧𝗿𝗶𝗴𝗴𝗲𝗿 𝗶𝗻 𝗦𝘁𝗼𝗿𝘆𝗹𝗶𝗻𝗲 𝟯𝟲𝟬.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) March 13, 2021
Using this trigger to create animations can be a bit jumpy if you don't know what you're doing - unless that's the effect you're going for! pic.twitter.com/47CBcWqdwb
History repeating
If you would like to learn more about how I built Spinning Plates, check out the detailed write-up that I posted on the Building Better Courses boards soon after the Jump-To-Time trigger was released.
The TL;DR version is:
- The Jump-To-Time trigger can be used not only on the base slide but also on any layers that you add on top
- A blank layer triggered to ‘rewind and replay’ can be used to repeatedly change the state of an object, creating a looping, GIF-like animation
- Split across several layers, more than one Jump-To-Time trigger can be used to create complex animation sequences
- These layers can be switched ‘on’ or ‘off’ (using show/hide triggers) to make each animation respond to your learner’s actions
It’s worth noting that the standard frame rate for animation is 60 frames per second (fps) – or 0.016 seconds per image.
Spinning Plates uses a much slower frame rate of 5 fps – which is 0.20 seconds per image – but the effect still works.
It's not a bug, it's a feature
There are several advantages to creating looping animations in this way rather than using GIFs. One of their biggest drawbacks is that GIFs don’t compress well and can be slow to load and lag behind the rest of the objects on your slide.
In Storyline, you can create ‘in slide’ animations of up to 50 fps based on the fastest possible trigger speed of 0.02 seconds. The results are smooth but not quite the 60 fps of traditional animation. Running triggers at these speeds can also bog down older computers.
So I began to wonder if this ‘bug’ could become a ‘feature’ of my design. What if I went in the opposite direction and used a slower frame rate than I did for Spinning Plates? How could I incorporate this ‘jumpy’ effect in my demo?
My mind turned to the home computer boom of the 1980s, to the blocky CGI music video for Money For Nothing, and to a TV show that used similar ‘lo-fi’ visual effects: Max Headroom
Glitch frame rate?
As it turns out, I didn’t need to go much slower to create a Max Headroom-style glitch effect for my 80s TV Trivia quiz. Following a bit of trial and error, I settled on at least three state changes spaced 0.25 seconds apart. This is equivalent to 4 fps – which is 15 times slower than traditional animation.
These timings produced the jerky, disjointed effect I was hoping to achieve.
From 1080p to 1983!
Simply dropping the sharply dressed Nerijus into my demo wouldn’t produce the ‘radical’ appearance I wanted. He needed to look less 1080p and more 1983!
Did you know that you can export characters from Storyline as png images and manipulate them using Photoshop or a similar application?
To transform Nerijus, I exported him in a range of poses, which I pixellated using the free online photo editor, Pixlr. I then imported these images back into Storyline to create ‘Max’.
I obtained the animated neon background from Storyblocks:
And the VHS style transition from Giphy:
The irony of using a GIF in a demo that showcases looping animations is not lost on me. GIFs remain a convenient solution for short animations and the low resolution of this example was appropriate for my theme. However, on a slow internet connection or a mobile device even this short GIF can sometimes lag. There’s definitely a trade-off between taking such shortcuts and the quality of your end product. Always test your GIFs in a range of settings to ensure they are not slow to load or fail to load at all. Using video clips or the Jump-To-Trigger is almost always the more reliable solution.
Oh, the Audacity!
Did you know that you can export Text-to-Speech from Storyline in a similar way to exporting characters? This allows you to add your own audio effects using a third party application.
To give ‘Max’ that distinctive glitchy stammer, I used Storyline’s built-in Text-to-Speech editor to generate two lines of dialogue and saved these to my local drive.
I used Audacity to speed up and slow down sections of the dialogue and applied the ‘Paulstretch’ effect to mimic Max Headroom’s manner of speaking. Answer correctly and you’ll hear, “That’s ri-ri-right!”
Each line of dialogue plays just once, at the start of the timeline on the Correct and Incorrect layers of each question. Only Max’s movements are repeated using the Jump-To-Time trigger, as listening to him say “That’s wr-wr-wrong!” over and over again would be a bit irritating!
Unedited Text-to-Speech
Editted Text-to-Speech
Be Kind Rewind
From custom video controls, to GIF-like loops and subtler animations, we have only begun to scratch the surface of what the Jump-To-Time trigger can do.
For more ideas on how to use this trigger, I recommend that you check out this Articulate 360 article, Alison LaMotte’s blog, and Sarah Hodge’s recent webinar.
If you have any questions about my work in this area ‘jump’ to the comments below.
Just to say thank you! Fantastic tips, pointers and thought process on this perfectly-imperfect jump cue. Charlie Chaplin, at the end of ‘The Rink’, with his perfectly-imperfect falls comes to mind: To repeat successful ‘mistakes’ you need to know what you’re doing – so thank you for all the well-explained information, resources and references. I look forward to digging into the rest of your blog. Cheers!
Thanks Ang! Glad my ramblings have been helpful. Appreciate the Chaplin reference too.