Nice.
But how was this done? Does each organ have 30 states, where every state is just a different position?
The result is great, but the tedious work seems just too much ...
This one uses multiple sliders. Try dragging the lungs. You'll see the main slider jumps to a range as you start to drag any of the organs. This is actually pretty easy to put together and works because Articulate's brilliant implementation of the slider control has these properties:
- You can customize the thumb with a graphic. In Tom's example, the track is transparent and the thumb is a custom graphic.
- Sliders modify and react to a variable. In Tom's example, all of the sliders (7 in total) are tied to the same variable. The properties of each slider are set differently, but they all modify and react to the same variable.
For example:
Main slider could be 1 to 100
Heart slider could be 30 to 20
Lung slider could be 20 to 1
By reversing the direction of the slider incre... Expand
This one uses multiple sliders. Try dragging the lungs. You'll see the main slider jumps to a range as you start to drag any of the organs. This is actually pretty easy to put together and works because Articulate's brilliant implementation of the slider control has these properties:
- You can customize the thumb with a graphic. In Tom's example, the track is transparent and the thumb is a custom graphic.
- Sliders modify and react to a variable. In Tom's example, all of the sliders (7 in total) are tied to the same variable. The properties of each slider are set differently, but they all modify and react to the same variable.
For example:
Main slider could be 1 to 100
Heart slider could be 30 to 20
Lung slider could be 20 to 1
By reversing the direction of the slider increment, you can have the slider go in the opposite direction. And by reducing the range, as one slider travels through the full range (1 to 100, perhaps) the other sliders that only sample a portion of the range will go through their entire range and stick at the top or bottom end of their respective ranges.
This is beautiful! Can't wait for the tutorial/source file to be shared! I know it's not Thanksgiving, but I'm so thankful for this amazing community!!!
I like to see how it was made as well, helps me with my own development. Great example-Thank you Tom. If you can, please tell us where the tutorial is posted. -Emily
Does anyone know if the storyline file was posted for this? I know its been a while - Perhaps I missed it :-(
I've managed to replicate the effect - using a billion sequential states and slider state changes - wasn't sure if there was a better way
Hi All -
I needed to take a break from some other projects, so I decided to deconstruct Tom's example and build a similar Anatomy Slider file that I could share with those who want to see exactly how it's done. (Note: The .story file was built in Storyline 2 to make it available to as many people as possible.)
Anatomy Slider Deconstruct - Demo: https://bit.ly/2NEhmPV
Anatomy Slider Deconstruct - Story File: https://bit.ly/2Om1bf3
Hope this helps!
Hey Diana - I just stumbled on this when I was struggling with some slider-linked triggers. This is such a useful resource - thanks so much for sharing.
Hi Diana,
Thank you very much for sharing the .story file. I was actually just trying to figure out who people manage to make the thumb of the slider move more smoothly. I guess the trick is in the amount of steps. The use of one variable for multiple sliders is very clever too and I haven't really thought about that before. With the formatting options for sliders this gives me a lot of new options in the design of interactive slides. Thanks again ...
Hope I'm not too late to receive an answer: How would I make a slider interaction like this 508 compatible? Other than the mouse, I don't see a way of advancing the slide.
Thank you to anyone who has an answer!
27 Comments
This one uses multiple sliders. Try dragging the lungs. You'll see the main slider jumps to a range as you start to drag any of the organs. This is actually pretty easy to put together and works because Articulate's brilliant implementation of the slider control has these properties: - You can customize the thumb with a graphic. In Tom's example, the track is transparent and the thumb is a custom graphic. - Sliders modify and react to a variable. In Tom's example, all of the sliders (7 in total) are tied to the same variable. The properties of each slider are set differently, but they all modify and react to the same variable. For example: Main slider could be 1 to 100 Heart slider could be 30 to 20 Lung slider could be 20 to 1 By reversing the direction of the slider incre... Expand