Tie visible area of a photo to a slider value
Oct 29, 2020
Hello,
Here's one I've been trying to figure out the best way to execute. In order to explain the Law of Large Numbers to our learners, I want to use a still image of a frequency graph that goes from left to right and that shows 10000 coin flips and how the variance decreases as the number grows larger. I have a slider with 9999 steps, which seems to be the max, and understand that I could show 9999 layers based on the slider value. I have also inserted the slider variable into a text box so the learner can visually see how many flips based on where they drag the slider. But I'm not about to make 9999 images- one for each data point. I'm not even going to reduce it by a factor of ten and make 999 images. What I need is a way to take the slider's value reveal the according amount of the frequency chart- basically a moving mask based on the slider's physical position on the bar, not so much it's value. Barring that, some sort of Drag to Reveal interaction would also work.
Thanks in advance.
7 Replies
Hi Robert,
Here's a possible approach. I took a stock graph image and made a rough empty version of it, which sits at the start of the timeline.
The graph to be revealed is animated to wipe right in 20 seconds (the limit in SL is 59 seconds; 50 would have been more granular of course, but I was trying the concept.) You could do a more granular approach still if you manipulated the slider variable using Javascript; I just used the values of the slider.
Timeline is paused at 0.1 seconds, and then there are a bunch of triggers to jump to points on the timeline based on a change in the slider variable.
It may not be suitable for you, but it is one way to get at it.
Would something like this work?
I used 2 sliders, one controlling the other, with the 2nd one using a white masking image for the thumbnail.
That's great, Scott! Very elegant. What a great idea to use the same variable for both sliders.
Good Morning,
Thank you for your input. I will make time to look at these and see if I can integrate them.
Again, thank you very much for making me look good!
Robert
@scott
That solution worked. However, how did you make the second slider?
Did you make a shape and turn it into a slider somehow, like you can do for buttons? I can't see how to do it, but I can see how it is tied to the value of slider one. Very nice. And thank you very much!
Robert
Ah! Spoke too soon. You used an existing slider and malformed it and played with the transparencies.
Most excellent and well done sir. I thank you in advance for making me look like a genius.
:)
I created the slider and yes, did make the scrub area transparent I think. As for the shape, I created it first, exported, or saved as an image, changed the thumb for the drag button to use that image.
This discussion is closed. You can start a new discussion or contact Articulate Support.