Time Machine Revised - ELC 462

For this week's challenge I brought back a character/theme from an earlier challenge. "The Red Ked Time Machine" ELC 420 - Storyline 360 New Features | Review 360 (articulate.com).

This episode takes place 37 years after the first one.  If you want to know why/how, try and play your way through the first one.  (It's pretty hard).

Here is the interaction for this week's challenge which was to focus on creating an interaction with no NEXT buttons.

https://360.articulate.com/review/content/f837254e-e9ac-43b4-81bd-a392220884bf/review

How it was built

I spent some time using Leonardo.ai (https://app.leonardo.ai/ ) to develop my scenes and characters in various positions.  This is a free/paid app which gives you 150 credits/day to create almost any image you want.  The interface is very simple so I like it more than Midjourney.  

I asked Edge Copilot to "give me 5 random years between 1900 and 2020 and tell me who the President of the US was, what were fashion trends, what was an important news item, and what was a popular song".  I then did a google search to get assets representing each of these 'clues'.

Scene 1

In scene 1 we meet (or re-meet) or heroine.  She is just waking up and needs to handle some basic tasks to start her day.  I used the zoom region feature to add some movement to the slide, and provided some dialog to move the interaction along.  Here is an example of some of the triggers, I used.

 

Rather than work with motion paths I simply hid and showed different versions of our heroine when the event was triggered.

A drag and drop interaction was used to simplify the search for the cell phone.

I used Storyline's built in ElapsedTime variable to show a hint.  I gave it a range because the clock moves very fast and it could be missed if I selected an exact number.

Scene 2

Once our heroine gets to work, I use a TextInput to personalize the interaction.  A use a motion path animation to move the TextInput box off screen once something has been entered.  It won't leave until they type something. The variable is held throughout the course.

A quick Q&A with our student and we are ready for the next scene.

Scene 3

In this scene we finally see what is going on.  We enter the time machine lab and are transported to another place or time.

This scene handles the transition to one of 5 other slides once a random number is selected.  Those slide represent each of the five years in history we will explore.  Here is how the going layer makes the selection.

Scene 4

This scene is really just a trivia quiz.  After selecting one of the 5 slides (which are all duplicates of the original with some very minor tweaks), we give control to the user to select a response.  We pick another random variable to determine which of three clues we will show on the slide (a President, a newspaper headline, or an audio clue).

Our 'clue' variable will then change what is in the upper right corner of the zoom region.  If the 'clue' is an audio clue it will play automatically because I saved the sound bite in the state by inserting it while editing the state of the music symbol.  For the other two types of clues, the user clicks to open a layer.

Notice the zoom region and how the controls as well as the clues are actually very small.  Turning the dial changes the text box which is how the student is speaking to us.  

The green and yellow buttons either submit or reset.

A simple if/else shows either a correct message or an incorrect message.

If the message is correct, the picture of the iPhone is shown.  It rings because, once again, I saved the sound into the state.

Finally, if when the learner clicks the ringing phone we open a layer telling us we are going home. 

Then we jump back to the office scene right after we collected the learner's name. And we are all set to go again, and again, and again.

What this Challenge Taught Me

Initially I was using the zoom image feature for the Presidents of the United States instead of a separate layer.  This worked great, but when I added states for the newspaper and the music cue I ran into a glitch.  When I clicked the newspaper, it still showed me the President.

I also learned when I was creating the scenes for our heroine's house that in Leonardo.ai I could take the initial image of the bedroom, lower the strength of the image-to-image guidance to about 10 and create other rooms which looked like they belonged.  My character and the other assets created in Leonardo.ai all used the 3d-Animation Fine-Tuned model as their seed.

The Transparency switch in Leonardo.ai also saved me a ton of image editing time.

Credits

All sound effects are from YouTube Studio with the exception of the music clips.  These were recorded on my cell phone from YouTube videos.