Parallax Scrolling Effects in E-Learning #253: Challenge | Recap
What is the Parallax Effect?
Parallax scrolling is a motion effect that’s used to simulate depth by animating background i...
Published 6 years ago
Version 1.0
Blog Post
I made something new based on something old. I have been wanting to redo this parallax project to see how well it works in Storyline 360...not bad but GIFs are a bit goofy. It might be the browser. Anyway, this is still rough and I have more to add in and polish. I have an idea that could let me do away with GIFs (if it works).
Parallax Astronaut: http://elearninglocker.com/Samples/ParallaxAstronaut/story.html
You can download it here: http://elearninglocker.com/portfolio-items/storyline-experiment-parallax-astronaut/
I want to fix the flashing when the astronaut goes from standing to walking. Also, I learned Storyline can only import a file with a max width of 2048. So I scaled up some of these graphics so they get blurry. Also, because Storyline scales, set the width of your projects to be higher to reduce blurring.
Parallax Astronaut: http://elearninglocker.com/Samples/ParallaxAstronaut/story.html
You can download it here: http://elearninglocker.com/portfolio-items/storyline-experiment-parallax-astronaut/
I want to fix the flashing when the astronaut goes from standing to walking. Also, I learned Storyline can only import a file with a max width of 2048. So I scaled up some of these graphics so they get blurry. Also, because Storyline scales, set the width of your projects to be higher to reduce blurring.
- Really great example, David! I loved it. How did you make it, if you don't mind me asking?
Is it a giant slider in there that is transparent? How was the "drag to slide function" been made? Might seem a dumb question, but I am very new to sliders, as I've find them quite buggy in the past and just worked around them :)- Thanks, Alex! I will be creating a video and will post it here when done. Basically it is several sliders with the different layers. The slider variables are all set the same so if one moves, they all move. The astronaut never moves but I switch between states when the user is dragging a slider. The states are standing, walking forward, walking backward, and saluting. When I switch to a walking state, I show a layer that acts as a timer. If the timeline gets to the end, then I stop the walking and go back to the standing state. If you keep moving the slider, it keeps re-showing the timer layer so that it never gets to the end. That is how I get the character to stop walking. Now to fix so many bugs!
Hope this helps!- Hi David, thanks very much for doing a video on it, I look forward to seeing the process and I'm sure your worded explanation will be completed by a visual in practice. Thanks very much for taking the time to share some light on your great technique!
- Nice upgrade! Timely too.
- Thanks!
- Nicely done. Is the astronaut a gif as the thumb on a slider?
- Steve, the astronaut is a gif when walking. It is actually not on a slider itself. It stays put on the screen and doesn't move. But I tell it to go to the walk state I have when the backgrounds, which are on sliders, move.
- Nice. As soon I commented I realised you'd need to way to turn the walking on and off. Looking forward to the video
- David this was fantastic. Thank you for explaining a bit about it.
