Great tutorial Marie-Jo! I think this is a clever use of GSAP for Storyline, which I normally used when developing standalone web applications. One issue I've noticed is that SL doesn't bookmark the changed state upon revisit - say if you're using a multi-slide interaction and you scaled the object up to 240% with a slider. You move to the next slide, then upon getting back to the scale slide , the object defaults to its original size, and only gets back to the size you'd left when you move the slider again. Slider retains its last position (since it's built-in SL), but the object doesn't. This could create a jarring experience for the end-user... So how do we make sure the object also retains its last position/scale/orientation etc.? I was wondering if you were able to find a solution to this. In web development, we use localStorage property in JS to ensure the browser remembers the changed data / your previous choice; however, I couldn't make this work for JS-driven interactivity within SL and didn't pursue it :) Perhaps it might be coming into conflict with SL's pre-existing bookmarking paramaters for pre-defined interactivities. In any event, I'd love to learn more if there's a solution to this :)
Very astute observation! What I would do is: 1) Save the current value (Size, or X etc) in a Storyline variable (as is the case if your slider is in the right position) 2) Have a trigger that fires when the timeline starts. That trigger runs a js that reads the SL variable and then tweens the elephant to the right size or position. Make sense?
@@MarieJoLeroux Yes, that indeed did the trick for me! Never occurred to me that the code could be reassigned that way with a new trigger. Thank you for this insight!
Hey Marie-Jo! Great video. Can you talk a little bit about your experience making things 508 compliant or at least as close to it as possible? If you have experience in this space, I wonder if this might be a good topic for the community.
Hey Michael! I must admit I had to Google 508 compliance. Guess we have different names for these things up here in Canada. It's a good question. Guess I'd need to know, what about these interactions is NOT 508 compliant?
I was wondering the same. Both examples rely on vision, so interaction would be hard if you're visual impaired. But in the case of a simulation where the real life task requires vision aswell, I believe you can expect the target users to be able to interact with it. So maybe it's more a question about the accessibility in gamified e-learning in general?
Very cool. As someone else commented, position retention, scaling, etc, can be an issue when revisiting a slide, but another issue I have found is that tweened objects don't retain their positions if the browser window is resized. Any possible work arounds for that?
The only workaround I know for that is to add an event listener (in javascript) that will run a function every time the window is resized. window.addEventListener('resize', resize); Then you have to define that function, ie what happens when the window is resized. In this case, I would tell it to grab all the current variable values from Storyline, and then pass them all to the objects through tweening.
This is amazing, but I got stuck. You know how you corrected the elephant jumping at 4:32? No matter what I set my x variable at, my image jumps. My left button jumps the image to the right before then moving it incrementally to the left. My right button jumps the image to the right and then moves incrementally. In both initial jumps, the image arrives at the same position visually, but the left button says it's -5 and the right button says it's 5. 😪
is it possible to move object freely on screen with keyboard? My idea is to create a game in Storyline in which a learner can move an object freely on the screen using the keyboard arrows.
Hi Elias, I think you could use nearly the same procedure as I did with the buttons to move the elephant, but instead of using "when user clicks button" as your trigger, you could use "when user presses a key". Thanks for the question!
What was going in my head is that when you take a photo how would you know that you have selected a correct area? e.g. Finding Ursa Minor / Major? Is it by the position and have a margin of error?
@@MarieJoLeroux can you give more details about how you accomplished this? I'm making a project with a similar function and need a variable to change when the image reaches a specific coordinate. I've tried to code it but the variable won't change still. Any help would be so appreciated!
@@Ford_prefect_42 If it changes in the Tween (Javascript) only, it won't automatically update the SL variable. Therefore, if you have an SL trigger "When variable changes", nothing will happen. You'll have to make sure that every time the image changes position, the SL variable is updated.
Brilliant Marie-Jo, thanks for sharing!
Very cool! Thank you
Loving this
Great tutorial Marie-Jo! I think this is a clever use of GSAP for Storyline, which I normally used when developing standalone web applications. One issue I've noticed is that SL doesn't bookmark the changed state upon revisit - say if you're using a multi-slide interaction and you scaled the object up to 240% with a slider. You move to the next slide, then upon getting back to the scale slide , the object defaults to its original size, and only gets back to the size you'd left when you move the slider again. Slider retains its last position (since it's built-in SL), but the object doesn't. This could create a jarring experience for the end-user... So how do we make sure the object also retains its last position/scale/orientation etc.?
I was wondering if you were able to find a solution to this. In web development, we use localStorage property in JS to ensure the browser remembers the changed data / your previous choice; however, I couldn't make this work for JS-driven interactivity within SL and didn't pursue it :) Perhaps it might be coming into conflict with SL's pre-existing bookmarking paramaters for pre-defined interactivities. In any event, I'd love to learn more if there's a solution to this :)
Very astute observation! What I would do is:
1) Save the current value (Size, or X etc) in a Storyline variable (as is the case if your slider is in the right position)
2) Have a trigger that fires when the timeline starts. That trigger runs a js that reads the SL variable and then tweens the elephant to the right size or position.
Make sense?
@@MarieJoLeroux Yes, that indeed did the trick for me! Never occurred to me that the code could be reassigned that way with a new trigger. Thank you for this insight!
Very nice! Perfectly explained...
Hey Marie-Jo! Great video. Can you talk a little bit about your experience making things 508 compliant or at least as close to it as possible? If you have experience in this space, I wonder if this might be a good topic for the community.
Hey Michael! I must admit I had to Google 508 compliance. Guess we have different names for these things up here in Canada.
It's a good question. Guess I'd need to know, what about these interactions is NOT 508 compliant?
I was wondering the same. Both examples rely on vision, so interaction would be hard if you're visual impaired.
But in the case of a simulation where the real life task requires vision aswell, I believe you can expect the target users to be able to interact with it.
So maybe it's more a question about the accessibility in gamified e-learning in general?
Thanks a lot
Very cool. As someone else commented, position retention, scaling, etc, can be an issue when revisiting a slide, but another issue I have found is that tweened objects don't retain their positions if the browser window is resized. Any possible work arounds for that?
The only workaround I know for that is to add an event listener (in javascript) that will run a function every time the window is resized.
window.addEventListener('resize', resize);
Then you have to define that function, ie what happens when the window is resized. In this case, I would tell it to grab all the current variable values from Storyline, and then pass them all to the objects through tweening.
May I know how to make this run by end users? is there a special application to use this?
@@aprubeesservices5182 Hi! If you’re building this with Articulate Storyline, then the end user will be able to use it through a web browser.
This is amazing, but I got stuck. You know how you corrected the elephant jumping at 4:32? No matter what I set my x variable at, my image jumps. My left button jumps the image to the right before then moving it incrementally to the left. My right button jumps the image to the right and then moves incrementally. In both initial jumps, the image arrives at the same position visually, but the left button says it's -5 and the right button says it's 5. 😪
is it possible to move object freely on screen with keyboard?
My idea is to create a game in Storyline in which a learner can move an object freely on the screen using the keyboard arrows.
Hi Elias, I think you could use nearly the same procedure as I did with the buttons to move the elephant, but instead of using "when user clicks button" as your trigger, you could use "when user presses a key". Thanks for the question!
@@MarieJoLeroux Thanks for the quick response. I'll check it out
What is the application use?
What was going in my head is that when you take a photo how would you know that you have selected a correct area? e.g. Finding Ursa Minor / Major?
Is it by the position and have a margin of error?
That is correct! Smart deduction! :)
@@MarieJoLeroux can you give more details about how you accomplished this? I'm making a project with a similar function and need a variable to change when the image reaches a specific coordinate. I've tried to code it but the variable won't change still. Any help would be so appreciated!
@@Ford_prefect_42 If it changes in the Tween (Javascript) only, it won't automatically update the SL variable. Therefore, if you have an SL trigger "When variable changes", nothing will happen. You'll have to make sure that every time the image changes position, the SL variable is updated.
Code!!!
... just a little :)